1
- /* *
2
- * @author Zino Roman <zino.roman95@gmail.com>
3
- * @copyright Zino Roman 2017
4
- */
1
+ // @author Zino Roman <zino.roman95@gmail.com>
2
+ // @copyright Zino Roman 2017
3
+
4
+
5
+ // interface I-line-clamping {
6
+ // lines: number,
7
+ // line-height: css-unit,
8
+ // font-size: css-unit,
9
+ // is-inline: boolean;
10
+ // }
5
11
6
- /* *
7
- interface I-line-clamping {
8
- lines: number,
9
- line-height: css-unit,
10
- font-size: css-unit,
11
- is-inline: boolean;
12
- }
13
- */
14
12
15
- /* *
16
- * Mixin for clamping multiline text
17
- * @param {I-line-clamping|number} $user-options
18
- */
13
+ // Mixin for clamping multiline text
14
+ // @param {I-line-clamping|number} $user-options
19
15
line-clamping ($user-options )
20
- /* *
21
- * @return {string} - Type of the `line-height` property
22
- */
16
+ // @return {string} - Type of the `line-height` property
23
17
get-line-height-type ()
24
18
typeof ($options ['line-height' ])
25
19
26
- /* *
27
- * @return {string} - Unit of the `line-height` property
28
- */
20
+ // @return {string} - Unit of the `line-height` property
29
21
get-line-height-unit ()
30
22
unit ($options ['line-height' ])
31
23
32
- /* *
33
- * @return {string} - Unit of the `font-size` property
34
- */
24
+ // @return {string} - Unit of the `font-size` property
35
25
get-font-size-type ()
36
26
typeof ($options ['font-size' ])
37
-
38
- /* *
39
- * @param {string} $line-height-unit - Unit of the `line-height` property
40
- * @return {boolean} - Is `$line-height-unit` relative
41
- */
27
+
28
+ // @param {string} $line-height-unit - Unit of the `line-height` property
29
+ // @return {boolean} - Is `$line-height-unit` relative
42
30
is-line-height-unit-relative ($line-height-unit )
43
31
if $line-height-unit == '' or $line-height-unit == '%' or $line-height-unit == 'em'
44
32
true
@@ -55,19 +43,18 @@ line-clamping($user-options)
55
43
$line-height-unit = get-line-height-unit ()
56
44
$is-line-height-unit-relative = is- line-height-unit-relative ($line-height-unit )
57
45
58
- /* Unitless, percents or ems units require
59
- a different strategy of calculation than all other units */
46
+ // Unitless, percents or ems units require
47
+ // a different strategy of calculation than all other units
60
48
if $is-line-height-unit-relative && $is-line-height-type-unit
61
49
$line-height-computed = $options ['line-height' ]
62
50
63
51
if $line-height-unit == '%'
64
52
// Divide `$line-height` in percents by 100 for correct further calculation
65
53
$line-height-computed = $options ['line-height' ] / 100
66
54
67
- /*
68
- Remove units from `$line-height` to avoid potential error
69
- when `$line-height` and `$font-size` have differents CSS units
70
- */
55
+
56
+ // Remove units from `$line-height` to avoid potential error
57
+ // when `$line-height` and `$font-size` have differents CSS units
71
58
$line-height-computed = unit ($line-height-computed , '' )
72
59
73
60
// Calculate our max-height for the element
@@ -81,24 +68,19 @@ line-clamping($user-options)
81
68
'calc((%s) * %s)' % (get-calc-inner-value ($options ['line-height' ]) $options['lines' ])
82
69
83
70
84
- /* *
85
- * @param {string} $display - CSS value of display property
86
- */
71
+ // @param {string} $display - CSS value of display property
87
72
strategy-one-line ($display )
88
- /* If we need only one line of the text,
89
- then better way is to use `text-overflow: ellipsis`
90
- than `strategy-few-line()` way
91
- cause it has wider support
92
- */
73
+ // If we need only one line of the text,
74
+ // then better way is to use `text-overflow: ellipsis`
75
+ // than `strategy-few-line()` way
76
+ // cause it has wider support
93
77
display $display
94
78
overflow hidden
95
79
text-overflow ellipsis
96
80
white-space nowrap
97
81
98
- /* *
99
- * @param {string} $display - CSS value of display property
100
- * @param {string} $display-webkit - CSS value of display property
101
- */
82
+ // @param {string} $display - CSS value of display property
83
+ // @param {string} $display-webkit - CSS value of display property
102
84
strategy-few-line ($display , $display-webkit )
103
85
// Rules for IE, Edge, Firefox
104
86
display $display
@@ -114,8 +96,8 @@ line-clamping($user-options)
114
96
-webkit- line-clamp : $options ['lines' ]
115
97
116
98
get-display ()
117
- /* Remember the fact, that you should set `width` of the element
118
- when you are using `$options['is-inline']` display mode */
99
+ // Remember the fact, that you should set `width` of the element
100
+ // when you are using `$options['is-inline']` display mode
119
101
if $options ['is-inline' ]
120
102
inline-block
121
103
else
@@ -136,9 +118,7 @@ line-clamping($user-options)
136
118
else
137
119
strategy-few-line ($display , $display-webkit )
138
120
139
- /* *
140
- * @param {string} $message - Error message that will be shown
141
- */
121
+ // @param {string} $message - Error message that will be shown
142
122
show-error ($message )
143
123
error ('Error in line-clamping.styl: ' + $message )
144
124
0 commit comments