fomantic-ui 2.9.1-beta.19 → 2.9.1-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +1 -0
- package/.stylelintrc.js +46 -0
- package/dist/components/accordion.css +19 -26
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.min.css +1 -1
- package/dist/components/accordion.min.js +1 -1
- package/dist/components/ad.css +31 -41
- package/dist/components/ad.min.css +1 -1
- package/dist/components/api.js +1 -1
- package/dist/components/api.min.js +1 -1
- package/dist/components/breadcrumb.css +1 -1
- package/dist/components/breadcrumb.min.css +1 -1
- package/dist/components/button.css +71 -96
- package/dist/components/button.min.css +1 -1
- package/dist/components/calendar.css +6 -8
- package/dist/components/calendar.js +1 -1
- package/dist/components/calendar.min.css +1 -1
- package/dist/components/calendar.min.js +1 -1
- package/dist/components/card.css +83 -115
- package/dist/components/card.min.css +1 -1
- package/dist/components/checkbox.css +47 -64
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.min.css +1 -1
- package/dist/components/checkbox.min.js +1 -1
- package/dist/components/comment.css +37 -51
- package/dist/components/comment.min.css +1 -1
- package/dist/components/container.css +4 -5
- package/dist/components/container.min.css +1 -1
- package/dist/components/dimmer.css +31 -41
- package/dist/components/dimmer.js +1 -1
- package/dist/components/dimmer.min.css +1 -1
- package/dist/components/dimmer.min.js +1 -1
- package/dist/components/divider.css +32 -44
- package/dist/components/divider.min.css +1 -1
- package/dist/components/dropdown.css +109 -152
- package/dist/components/dropdown.js +1 -1
- package/dist/components/dropdown.min.css +1 -1
- package/dist/components/dropdown.min.js +1 -1
- package/dist/components/embed.css +13 -19
- package/dist/components/embed.js +1 -1
- package/dist/components/embed.min.css +1 -1
- package/dist/components/embed.min.js +1 -1
- package/dist/components/emoji.css +7 -6
- package/dist/components/feed.css +24 -32
- package/dist/components/feed.min.css +1 -1
- package/dist/components/flag.css +5 -3
- package/dist/components/flag.min.css +1 -1
- package/dist/components/flyout.css +39 -56
- package/dist/components/flyout.js +1 -1
- package/dist/components/flyout.min.css +1 -1
- package/dist/components/flyout.min.js +1 -1
- package/dist/components/form.css +85 -111
- package/dist/components/form.js +1 -1
- package/dist/components/form.min.css +1 -1
- package/dist/components/form.min.js +1 -1
- package/dist/components/grid.css +70 -96
- package/dist/components/grid.min.css +1 -1
- package/dist/components/header.css +47 -65
- package/dist/components/header.min.css +1 -1
- package/dist/components/icon.css +42 -53
- package/dist/components/icon.min.css +1 -1
- package/dist/components/image.css +32 -42
- package/dist/components/image.min.css +1 -1
- package/dist/components/input.css +45 -58
- package/dist/components/input.min.css +1 -1
- package/dist/components/item.css +55 -77
- package/dist/components/item.min.css +1 -1
- package/dist/components/label.css +61 -90
- package/dist/components/label.min.css +1 -1
- package/dist/components/list.css +44 -59
- package/dist/components/list.min.css +1 -1
- package/dist/components/loader.css +16 -22
- package/dist/components/loader.min.css +1 -1
- package/dist/components/menu.css +126 -186
- package/dist/components/message.css +25 -35
- package/dist/components/message.min.css +1 -1
- package/dist/components/modal.css +33 -40
- package/dist/components/modal.js +1 -1
- package/dist/components/modal.min.css +1 -1
- package/dist/components/modal.min.js +1 -1
- package/dist/components/nag.css +19 -25
- package/dist/components/nag.js +1 -1
- package/dist/components/nag.min.css +1 -1
- package/dist/components/nag.min.js +1 -1
- package/dist/components/placeholder.css +10 -12
- package/dist/components/placeholder.min.css +1 -1
- package/dist/components/popup.css +49 -59
- package/dist/components/popup.js +1 -1
- package/dist/components/popup.min.css +1 -1
- package/dist/components/popup.min.js +1 -1
- package/dist/components/progress.css +29 -39
- package/dist/components/progress.js +1 -1
- package/dist/components/progress.min.css +1 -1
- package/dist/components/progress.min.js +1 -1
- package/dist/components/rail.css +15 -20
- package/dist/components/rail.min.css +1 -1
- package/dist/components/rating.css +9 -13
- package/dist/components/rating.js +1 -1
- package/dist/components/rating.min.css +1 -1
- package/dist/components/rating.min.js +1 -1
- package/dist/components/reset.css +1 -1
- package/dist/components/reset.min.css +1 -1
- package/dist/components/reveal.css +19 -26
- package/dist/components/reveal.min.css +1 -1
- package/dist/components/search.css +41 -58
- package/dist/components/search.js +1 -1
- package/dist/components/search.min.css +1 -1
- package/dist/components/search.min.js +1 -1
- package/dist/components/segment.css +62 -83
- package/dist/components/segment.min.css +1 -1
- package/dist/components/shape.css +10 -14
- package/dist/components/shape.js +1 -1
- package/dist/components/shape.min.css +1 -1
- package/dist/components/shape.min.js +1 -1
- package/dist/components/sidebar.css +41 -58
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.min.css +1 -1
- package/dist/components/sidebar.min.js +1 -1
- package/dist/components/site.css +5 -5
- package/dist/components/site.js +1 -1
- package/dist/components/site.min.css +1 -1
- package/dist/components/site.min.js +1 -1
- package/dist/components/slider.css +27 -37
- package/dist/components/slider.js +1 -1
- package/dist/components/slider.min.js +1 -1
- package/dist/components/state.js +1 -1
- package/dist/components/state.min.js +1 -1
- package/dist/components/statistic.css +29 -41
- package/dist/components/statistic.min.css +1 -1
- package/dist/components/step.css +26 -35
- package/dist/components/step.min.css +1 -1
- package/dist/components/sticky.css +1 -1
- package/dist/components/sticky.js +1 -1
- package/dist/components/sticky.min.css +1 -1
- package/dist/components/sticky.min.js +1 -1
- package/dist/components/tab.css +6 -8
- package/dist/components/tab.js +1 -1
- package/dist/components/tab.min.css +1 -1
- package/dist/components/tab.min.js +1 -1
- package/dist/components/table.css +87 -117
- package/dist/components/table.min.css +1 -1
- package/dist/components/text.css +1 -1
- package/dist/components/text.min.css +1 -1
- package/dist/components/toast.css +4 -6
- package/dist/components/toast.js +1 -1
- package/dist/components/toast.min.css +1 -1
- package/dist/components/toast.min.js +1 -1
- package/dist/components/transition.css +4 -3
- package/dist/components/transition.js +1 -1
- package/dist/components/transition.min.css +1 -1
- package/dist/components/transition.min.js +1 -1
- package/dist/components/visibility.js +1 -1
- package/dist/components/visibility.min.js +1 -1
- package/dist/semantic.css +1719 -1719
- package/dist/semantic.js +26 -26
- package/dist/semantic.min.css +1 -1
- package/dist/semantic.min.js +1 -1
- package/package.json +8 -4
- package/src/definitions/collections/breadcrumb.less +41 -44
- package/src/definitions/collections/form.less +869 -879
- package/src/definitions/collections/grid.less +1690 -1695
- package/src/definitions/collections/menu.less +1493 -1503
- package/src/definitions/collections/message.less +292 -295
- package/src/definitions/collections/table.less +1616 -1622
- package/src/definitions/elements/button.less +1723 -1737
- package/src/definitions/elements/container.less +209 -210
- package/src/definitions/elements/divider.less +205 -206
- package/src/definitions/elements/emoji.less +38 -44
- package/src/definitions/elements/flag.less +44 -46
- package/src/definitions/elements/header.less +337 -345
- package/src/definitions/elements/icon.less +511 -512
- package/src/definitions/elements/image.less +221 -225
- package/src/definitions/elements/input.less +661 -667
- package/src/definitions/elements/label.less +800 -799
- package/src/definitions/elements/list.less +809 -809
- package/src/definitions/elements/loader.less +272 -266
- package/src/definitions/elements/placeholder.less +171 -168
- package/src/definitions/elements/rail.less +91 -91
- package/src/definitions/elements/reveal.less +192 -196
- package/src/definitions/elements/segment.less +743 -747
- package/src/definitions/elements/step.less +425 -433
- package/src/definitions/elements/text.less +32 -34
- package/src/definitions/globals/reset.less +9 -6
- package/src/definitions/globals/site.less +106 -108
- package/src/definitions/modules/accordion.less +242 -246
- package/src/definitions/modules/calendar.less +91 -92
- package/src/definitions/modules/checkbox.less +536 -542
- package/src/definitions/modules/dimmer.less +300 -297
- package/src/definitions/modules/dropdown.less +1577 -1591
- package/src/definitions/modules/embed.less +81 -82
- package/src/definitions/modules/flyout.less +443 -452
- package/src/definitions/modules/modal.less +459 -462
- package/src/definitions/modules/nag.less +134 -137
- package/src/definitions/modules/popup.less +738 -739
- package/src/definitions/modules/progress.less +521 -494
- package/src/definitions/modules/rating.less +94 -101
- package/src/definitions/modules/search.less +375 -383
- package/src/definitions/modules/shape.less +71 -76
- package/src/definitions/modules/sidebar.less +464 -474
- package/src/definitions/modules/slider.less +307 -308
- package/src/definitions/modules/sticky.less +21 -23
- package/src/definitions/modules/tab.less +51 -52
- package/src/definitions/modules/toast.less +584 -586
- package/src/definitions/modules/transition.less +55 -56
- package/src/definitions/views/ad.less +206 -206
- package/src/definitions/views/card.less +968 -970
- package/src/definitions/views/comment.less +190 -198
- package/src/definitions/views/feed.less +220 -224
- package/src/definitions/views/item.less +436 -446
- package/src/definitions/views/statistic.less +269 -280
- package/src/theme.less +29 -32
- package/src/themes/default/globals/colors.less +589 -589
@@ -8,53 +8,51 @@
|
|
8
8
|
*
|
9
9
|
*/
|
10
10
|
|
11
|
-
|
12
11
|
/*******************************
|
13
12
|
Theme
|
14
13
|
*******************************/
|
15
14
|
|
16
|
-
@type
|
15
|
+
@type : 'element';
|
17
16
|
@element : 'icon';
|
18
17
|
|
19
18
|
@import (multiple) '../../theme.config';
|
20
19
|
|
21
|
-
|
22
20
|
/*******************************
|
23
21
|
Icon
|
24
22
|
*******************************/
|
25
23
|
& when (@importIcons) {
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
24
|
+
each(@fonts, {
|
25
|
+
@font-face {
|
26
|
+
each(@value,{
|
27
|
+
@{key}: @value;
|
28
|
+
});
|
29
|
+
}
|
30
|
+
})
|
33
31
|
}
|
34
32
|
|
35
33
|
i.icon {
|
36
|
-
|
37
|
-
|
34
|
+
display: inline-block;
|
35
|
+
opacity: @opacity;
|
38
36
|
|
39
|
-
|
37
|
+
margin: 0 @distanceFromText 0 0;
|
40
38
|
|
41
|
-
|
42
|
-
|
39
|
+
width: @width;
|
40
|
+
height: @height;
|
43
41
|
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
42
|
+
font-family: @fontName;
|
43
|
+
font-style: normal;
|
44
|
+
font-weight: @normal;
|
45
|
+
text-decoration: inherit;
|
46
|
+
text-align: center;
|
49
47
|
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
48
|
+
speak: none;
|
49
|
+
-moz-osx-font-smoothing: grayscale;
|
50
|
+
-webkit-font-smoothing: antialiased;
|
51
|
+
backface-visibility: hidden;
|
54
52
|
}
|
55
53
|
|
56
54
|
i.icon::before {
|
57
|
-
|
55
|
+
background: none !important;
|
58
56
|
}
|
59
57
|
|
60
58
|
/*******************************
|
@@ -62,35 +60,40 @@ i.icon::before {
|
|
62
60
|
*******************************/
|
63
61
|
|
64
62
|
& when (@variationIconLoading) {
|
65
|
-
|
66
|
-
|
67
|
-
|
63
|
+
/* --------------
|
64
|
+
Loading
|
65
|
+
--------------- */
|
68
66
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
67
|
+
i.loading.icon {
|
68
|
+
height: 1em;
|
69
|
+
line-height: 1;
|
70
|
+
}
|
71
|
+
i.loading.icon,
|
72
|
+
i.loading.icons {
|
73
|
+
animation: loader @loadingDuration linear infinite;
|
74
|
+
}
|
76
75
|
}
|
77
76
|
|
78
77
|
/*******************************
|
79
78
|
States
|
80
79
|
*******************************/
|
81
80
|
|
82
|
-
i.icon:hover,
|
83
|
-
i.
|
84
|
-
i.
|
85
|
-
|
81
|
+
i.icon:hover,
|
82
|
+
i.icons:hover,
|
83
|
+
i.icon:active,
|
84
|
+
i.icons:active,
|
85
|
+
i.emphasized.icon:not(.disabled),
|
86
|
+
i.emphasized.icons:not(.disabled) {
|
87
|
+
opacity: 1;
|
86
88
|
}
|
87
89
|
|
88
90
|
& when (@variationIconDisabled) {
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
91
|
+
i.disabled.icon,
|
92
|
+
i.disabled.icons {
|
93
|
+
opacity: @disabledOpacity;
|
94
|
+
cursor: default;
|
95
|
+
pointer-events: none;
|
96
|
+
}
|
94
97
|
}
|
95
98
|
|
96
99
|
/*******************************
|
@@ -98,577 +101,573 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
|
|
98
101
|
*******************************/
|
99
102
|
|
100
103
|
& when (@variationIconFitted) {
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
104
|
+
/* -------------------
|
105
|
+
Fitted
|
106
|
+
-------------------- */
|
107
|
+
|
108
|
+
i.fitted.icons,
|
109
|
+
i.fitted.icon {
|
110
|
+
width: auto;
|
111
|
+
margin: 0 !important;
|
112
|
+
}
|
110
113
|
}
|
111
114
|
|
112
115
|
& when (@variationIconLink) {
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
116
|
+
/* -------------------
|
117
|
+
Link
|
118
|
+
-------------------- */
|
119
|
+
|
120
|
+
i.link.icon:not(.disabled),
|
121
|
+
i.link.icons:not(.disabled) {
|
122
|
+
cursor: pointer;
|
123
|
+
opacity: @linkOpacity;
|
124
|
+
transition: opacity @defaultDuration @defaultEasing;
|
125
|
+
}
|
126
|
+
i.link.icon:hover,
|
127
|
+
i.link.icons:hover {
|
128
|
+
opacity: 1;
|
129
|
+
}
|
125
130
|
}
|
126
131
|
|
127
132
|
& when (@variationIconCircular) {
|
128
|
-
|
129
|
-
|
130
|
-
|
133
|
+
/* -------------------
|
134
|
+
Circular
|
135
|
+
-------------------- */
|
131
136
|
|
132
|
-
|
133
|
-
|
134
|
-
|
137
|
+
i.circular.icon {
|
138
|
+
border-radius: 500em !important;
|
139
|
+
line-height: 1 !important;
|
135
140
|
|
136
|
-
|
137
|
-
|
141
|
+
padding: @circularPadding !important;
|
142
|
+
box-shadow: @circularShadow;
|
138
143
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
144
|
+
width: @circularSize !important;
|
145
|
+
height: @circularSize !important;
|
146
|
+
&.colored when (@variationIconColored) {
|
147
|
+
box-shadow: @coloredBoxShadow;
|
148
|
+
}
|
143
149
|
}
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
150
|
+
& when (@variationIconInverted) {
|
151
|
+
i.circular.inverted.icon {
|
152
|
+
border: none;
|
153
|
+
box-shadow: none;
|
154
|
+
}
|
149
155
|
}
|
150
|
-
}
|
151
156
|
}
|
152
157
|
|
153
158
|
& when (@variationIconFlipped) {
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
i.flipped.icon,
|
159
|
-
i.horizontally.flipped.icon {
|
160
|
-
transform: scale(-1, 1);
|
161
|
-
}
|
162
|
-
i.vertically.flipped.icon {
|
163
|
-
transform: scale(1, -1);
|
164
|
-
}
|
159
|
+
/* -------------------
|
160
|
+
Flipped
|
161
|
+
-------------------- */
|
165
162
|
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
transform: translateX(-50%) translateY(-50%) scale(-1, 1);
|
163
|
+
i.flipped.icon,
|
164
|
+
i.horizontally.flipped.icon {
|
165
|
+
transform: scale(-1, 1);
|
170
166
|
}
|
171
|
-
|
172
|
-
|
167
|
+
i.vertically.flipped.icon {
|
168
|
+
transform: scale(1, -1);
|
169
|
+
}
|
170
|
+
|
171
|
+
& when (@variationIconGroups) {
|
172
|
+
.icons i.flipped.icon:not(.corner):not(:first-child),
|
173
|
+
.icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
|
174
|
+
transform: translateX(-50%) translateY(-50%) scale(-1, 1);
|
175
|
+
}
|
176
|
+
.icons i.vertically.flipped.icon:not(.corner):not(:first-child) {
|
177
|
+
transform: translateX(-50%) translateY(-50%) scale(1, -1);
|
178
|
+
}
|
173
179
|
}
|
174
|
-
}
|
175
180
|
}
|
176
181
|
|
177
182
|
& when (@variationIconRotated) {
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
i.rotated.icon,
|
183
|
-
i.right.rotated.icon,
|
184
|
-
i.clockwise.rotated.icon {
|
185
|
-
transform: rotate(90deg);
|
186
|
-
}
|
183
|
+
/* -------------------
|
184
|
+
Rotated
|
185
|
+
-------------------- */
|
187
186
|
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
i.halfway.rotated.icon {
|
194
|
-
transform: rotate(180deg);
|
195
|
-
}
|
187
|
+
i.rotated.icon,
|
188
|
+
i.right.rotated.icon,
|
189
|
+
i.clockwise.rotated.icon {
|
190
|
+
transform: rotate(90deg);
|
191
|
+
}
|
196
192
|
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
.icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
|
201
|
-
transform: translateX(-50%) translateY(-50%) rotate(90deg);
|
193
|
+
i.left.rotated.icon,
|
194
|
+
i.counterclockwise.rotated.icon {
|
195
|
+
transform: rotate(-90deg);
|
202
196
|
}
|
203
|
-
|
204
|
-
|
205
|
-
|
197
|
+
|
198
|
+
i.halfway.rotated.icon {
|
199
|
+
transform: rotate(180deg);
|
206
200
|
}
|
207
|
-
|
208
|
-
|
201
|
+
|
202
|
+
& when (@variationIconGroups) {
|
203
|
+
.icons i.rotated.rotated.icon:not(.corner):not(:first-child),
|
204
|
+
.icons i.right.rotated.icon:not(.corner):not(:first-child),
|
205
|
+
.icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
|
206
|
+
transform: translateX(-50%) translateY(-50%) rotate(90deg);
|
207
|
+
}
|
208
|
+
.icons i.left.rotated.icon:not(.corner):not(:first-child),
|
209
|
+
.icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) {
|
210
|
+
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
|
211
|
+
}
|
212
|
+
.icons i.halfway.rotated.icon:not(.corner):not(:first-child) {
|
213
|
+
transform: translateX(-50%) translateY(-50%) rotate(180deg);
|
214
|
+
}
|
209
215
|
}
|
210
|
-
}
|
211
216
|
}
|
212
217
|
|
213
218
|
& when (@variationIconFlipped) and (@variationIconRotated) {
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
i.rotated.flipped.icon,
|
219
|
-
i.right.rotated.flipped.icon,
|
220
|
-
i.clockwise.rotated.flipped.icon {
|
221
|
-
transform: scale(-1, 1) rotate(90deg);
|
222
|
-
}
|
219
|
+
/* --------------------------
|
220
|
+
Flipped & Rotated
|
221
|
+
--------------------------- */
|
223
222
|
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
i.halfway.rotated.flipped.icon {
|
230
|
-
transform: scale(-1, 1) rotate(180deg);
|
231
|
-
}
|
232
|
-
|
233
|
-
i.rotated.vertically.flipped.icon,
|
234
|
-
i.right.rotated.vertically.flipped.icon,
|
235
|
-
i.clockwise.rotated.vertically.flipped.icon {
|
236
|
-
transform: scale(1, -1) rotate(90deg);
|
237
|
-
}
|
238
|
-
|
239
|
-
i.left.rotated.vertically.flipped.icon,
|
240
|
-
i.counterclockwise.rotated.vertically.flipped.icon {
|
241
|
-
transform: scale(1, -1) rotate(-90deg);
|
242
|
-
}
|
243
|
-
|
244
|
-
i.halfway.rotated.vertically.flipped.icon {
|
245
|
-
transform: scale(1, -1) rotate(180deg);
|
246
|
-
}
|
223
|
+
i.rotated.flipped.icon,
|
224
|
+
i.right.rotated.flipped.icon,
|
225
|
+
i.clockwise.rotated.flipped.icon {
|
226
|
+
transform: scale(-1, 1) rotate(90deg);
|
227
|
+
}
|
247
228
|
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
.icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
|
252
|
-
transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
|
229
|
+
i.left.rotated.flipped.icon,
|
230
|
+
i.counterclockwise.rotated.flipped.icon {
|
231
|
+
transform: scale(-1, 1) rotate(-90deg);
|
253
232
|
}
|
254
|
-
|
255
|
-
|
256
|
-
|
233
|
+
|
234
|
+
i.halfway.rotated.flipped.icon {
|
235
|
+
transform: scale(-1, 1) rotate(180deg);
|
257
236
|
}
|
258
|
-
|
259
|
-
|
237
|
+
|
238
|
+
i.rotated.vertically.flipped.icon,
|
239
|
+
i.right.rotated.vertically.flipped.icon,
|
240
|
+
i.clockwise.rotated.vertically.flipped.icon {
|
241
|
+
transform: scale(1, -1) rotate(90deg);
|
260
242
|
}
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
243
|
+
|
244
|
+
i.left.rotated.vertically.flipped.icon,
|
245
|
+
i.counterclockwise.rotated.vertically.flipped.icon {
|
246
|
+
transform: scale(1, -1) rotate(-90deg);
|
265
247
|
}
|
266
|
-
|
267
|
-
|
268
|
-
|
248
|
+
|
249
|
+
i.halfway.rotated.vertically.flipped.icon {
|
250
|
+
transform: scale(1, -1) rotate(180deg);
|
269
251
|
}
|
270
|
-
|
271
|
-
|
252
|
+
|
253
|
+
& when (@variationIconGroups) {
|
254
|
+
.icons i.rotated.flipped.icon:not(.corner):not(:first-child),
|
255
|
+
.icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
|
256
|
+
.icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
|
257
|
+
transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
|
258
|
+
}
|
259
|
+
.icons i.left.rotated.flipped.icon:not(.corner):not(:first-child),
|
260
|
+
.icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
|
261
|
+
transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
|
262
|
+
}
|
263
|
+
.icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) {
|
264
|
+
transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
|
265
|
+
}
|
266
|
+
.icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
|
267
|
+
.icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
|
268
|
+
.icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
|
269
|
+
transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
|
270
|
+
}
|
271
|
+
.icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
|
272
|
+
.icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
|
273
|
+
transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
|
274
|
+
}
|
275
|
+
.icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
|
276
|
+
transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
|
277
|
+
}
|
272
278
|
}
|
273
|
-
}
|
274
279
|
}
|
275
280
|
|
276
281
|
& when (@variationIconBordered) {
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
282
|
+
/* -------------------
|
283
|
+
Bordered
|
284
|
+
-------------------- */
|
285
|
+
|
286
|
+
i.bordered.icon {
|
287
|
+
line-height: 1;
|
288
|
+
vertical-align: baseline;
|
289
|
+
|
290
|
+
width: @borderedSize;
|
291
|
+
height: @borderedSize;
|
292
|
+
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
|
293
|
+
box-shadow: @borderedShadow;
|
294
|
+
&.colored when (@variationIconColored) {
|
295
|
+
box-shadow: @coloredBoxShadow;
|
296
|
+
}
|
291
297
|
}
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
298
|
+
& when (@variationIconInverted) {
|
299
|
+
i.bordered.inverted.icon {
|
300
|
+
border: none;
|
301
|
+
box-shadow: none;
|
302
|
+
}
|
297
303
|
}
|
298
|
-
}
|
299
304
|
}
|
300
305
|
|
301
306
|
& when (@variationIconInverted) {
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
/* Inverted Shapes */
|
307
|
-
i.inverted.bordered.icon,
|
308
|
-
i.inverted.circular.icon {
|
309
|
-
background-color: @black;
|
310
|
-
color: @white;
|
311
|
-
}
|
307
|
+
/* -------------------
|
308
|
+
Inverted
|
309
|
+
-------------------- */
|
312
310
|
|
313
|
-
|
314
|
-
|
315
|
-
|
311
|
+
/* Inverted Shapes */
|
312
|
+
i.inverted.bordered.icon,
|
313
|
+
i.inverted.circular.icon {
|
314
|
+
background-color: @black;
|
315
|
+
color: @white;
|
316
|
+
}
|
317
|
+
|
318
|
+
i.inverted.icon {
|
319
|
+
color: @white;
|
320
|
+
}
|
316
321
|
}
|
317
322
|
|
318
|
-
|
323
|
+
/* -------------------
|
319
324
|
Colors
|
320
|
-
|
325
|
+
-------------------- */
|
321
326
|
& when not (@variationIconColors = false) {
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
327
|
+
each(@variationIconColors, {
|
328
|
+
@color: @value;
|
329
|
+
@c: @colors[@@color][color];
|
330
|
+
@l: @colors[@@color][light];
|
326
331
|
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
332
|
+
i.@{color}.icon.icon.icon.icon.icon {
|
333
|
+
color: @c;
|
334
|
+
}
|
335
|
+
& when (@variationIconInverted) {
|
336
|
+
i.inverted.@{color}.icon.icon.icon.icon.icon {
|
337
|
+
color: @l;
|
338
|
+
}
|
339
|
+
& when (@variationIconBordered) or (@variationIconCircular) {
|
340
|
+
i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
|
341
|
+
i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
|
342
|
+
i.inverted.bordered.@{color}.icons,
|
343
|
+
i.inverted.circular.@{color}.icons {
|
344
|
+
background-color: @c;
|
345
|
+
color: @white;
|
346
|
+
}
|
347
|
+
}
|
348
|
+
}
|
349
|
+
})
|
345
350
|
}
|
346
351
|
|
347
|
-
|
348
|
-
/*-------------------
|
352
|
+
/* -------------------
|
349
353
|
Sizes
|
350
|
-
|
354
|
+
-------------------- */
|
351
355
|
|
352
356
|
i.icon,
|
353
357
|
i.icons {
|
354
|
-
|
355
|
-
|
356
|
-
|
358
|
+
font-size: @medium;
|
359
|
+
line-height: @lineHeight;
|
360
|
+
font-style: normal;
|
357
361
|
}
|
358
362
|
& when not (@variationIconSizes = false) {
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
363
|
+
each(@variationIconSizes, {
|
364
|
+
@s: @@value;
|
365
|
+
i.@{value}.@{value}.@{value}.icon,
|
366
|
+
i.@{value}.@{value}.@{value}.icons {
|
367
|
+
font-size: @s;
|
368
|
+
vertical-align: middle;
|
369
|
+
}
|
370
|
+
})
|
367
371
|
}
|
368
372
|
|
369
373
|
& when (@variationIconGroups) or (@variationIconCorner) {
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
374
|
+
/*******************************
|
375
|
+
Groups
|
376
|
+
*******************************/
|
377
|
+
|
378
|
+
i.icons {
|
379
|
+
display: inline-block;
|
380
|
+
position: relative;
|
381
|
+
line-height: 1;
|
382
|
+
min-width: @width;
|
383
|
+
min-height: @height;
|
384
|
+
margin: 0 @distanceFromText 0 0;
|
385
|
+
text-align: center;
|
386
|
+
}
|
387
|
+
|
388
|
+
i.icons .icon {
|
389
|
+
position: absolute;
|
390
|
+
top: 50%;
|
391
|
+
left: 50%;
|
392
|
+
margin: 0;
|
393
|
+
&:not(.corner):not(.rotated):not(.flipped) {
|
394
|
+
transform: translateX(-50%) translateY(-50%);
|
395
|
+
}
|
391
396
|
}
|
392
|
-
}
|
393
|
-
|
394
|
-
i.icons .icon:first-child {
|
395
|
-
position: static;
|
396
|
-
width: auto;
|
397
|
-
height: auto;
|
398
|
-
vertical-align: top;
|
399
|
-
}
|
400
|
-
i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) {
|
401
|
-
transform: none;
|
402
|
-
}
|
403
397
|
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
font-size: @cornerIconSize;
|
412
|
-
text-shadow: @cornerIconShadow;
|
413
|
-
&:not(.rotated):not(.flipped) {
|
398
|
+
i.icons .icon:first-child {
|
399
|
+
position: static;
|
400
|
+
width: auto;
|
401
|
+
height: auto;
|
402
|
+
vertical-align: top;
|
403
|
+
}
|
404
|
+
i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) {
|
414
405
|
transform: none;
|
415
|
-
}
|
416
|
-
}
|
417
|
-
i.icons .icon.corner[class*="top right"] {
|
418
|
-
top: @cornerOffset;
|
419
|
-
left: auto;
|
420
|
-
right: @cornerOffset;
|
421
|
-
bottom: auto;
|
422
|
-
}
|
423
|
-
i.icons .icon.corner[class*="top left"] {
|
424
|
-
top: @cornerOffset;
|
425
|
-
left: @cornerOffset;
|
426
|
-
right: auto;
|
427
|
-
bottom: auto;
|
428
|
-
}
|
429
|
-
i.icons .icon.corner[class*="bottom left"] {
|
430
|
-
top: auto;
|
431
|
-
left: @cornerOffset;
|
432
|
-
right: auto;
|
433
|
-
bottom: @cornerOffset;
|
434
|
-
}
|
435
|
-
i.icons .icon.corner[class*="bottom right"] {
|
436
|
-
top: auto;
|
437
|
-
left: auto;
|
438
|
-
right: @cornerOffset;
|
439
|
-
bottom: @cornerOffset;
|
440
406
|
}
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
407
|
+
|
408
|
+
& when (@variationIconCorner) {
|
409
|
+
/* Corner Icon */
|
410
|
+
i.icons .corner.icon {
|
411
|
+
top: auto;
|
412
|
+
left: auto;
|
413
|
+
right: @cornerOffset;
|
414
|
+
bottom: @cornerOffset;
|
415
|
+
font-size: @cornerIconSize;
|
416
|
+
text-shadow: @cornerIconShadow;
|
417
|
+
&:not(.rotated):not(.flipped) {
|
418
|
+
transform: none;
|
419
|
+
}
|
420
|
+
}
|
421
|
+
i.icons .icon.corner[class*="top right"] {
|
422
|
+
top: @cornerOffset;
|
423
|
+
left: auto;
|
424
|
+
right: @cornerOffset;
|
425
|
+
bottom: auto;
|
426
|
+
}
|
427
|
+
i.icons .icon.corner[class*="top left"] {
|
428
|
+
top: @cornerOffset;
|
429
|
+
left: @cornerOffset;
|
430
|
+
right: auto;
|
431
|
+
bottom: auto;
|
432
|
+
}
|
433
|
+
i.icons .icon.corner[class*="bottom left"] {
|
434
|
+
top: auto;
|
435
|
+
left: @cornerOffset;
|
436
|
+
right: auto;
|
437
|
+
bottom: @cornerOffset;
|
438
|
+
}
|
439
|
+
i.icons .icon.corner[class*="bottom right"] {
|
440
|
+
top: auto;
|
441
|
+
left: auto;
|
442
|
+
right: @cornerOffset;
|
443
|
+
bottom: @cornerOffset;
|
444
|
+
}
|
445
|
+
& when (@variationIconInverted) {
|
446
|
+
i.icons .inverted.corner.icon {
|
447
|
+
text-shadow: @cornerIconInvertedShadow;
|
448
|
+
}
|
449
|
+
}
|
445
450
|
}
|
446
|
-
}
|
447
451
|
}
|
448
452
|
|
449
453
|
& when ((@variationIconGroups) or (@variationIconCorner))
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
454
|
+
and ((@variationIconBordered) or (@variationIconCircular)) {
|
455
|
+
/*************************************************
|
456
|
+
Bordered/circular with corner or group icons
|
457
|
+
*************************************************/
|
458
|
+
i.bordered.icons,
|
459
|
+
i.circular.icons {
|
460
|
+
width: @borderedSize;
|
461
|
+
height: @borderedSize;
|
462
|
+
box-shadow: @borderedShadow;
|
463
|
+
vertical-align: middle;
|
464
|
+
&.colored when (@variationIconColored) {
|
465
|
+
box-shadow: @coloredBoxShadow;
|
466
|
+
}
|
467
|
+
}
|
468
|
+
i.circular.icons {
|
469
|
+
border-radius: 500em;
|
470
|
+
}
|
471
|
+
i.bordered.icons i.icon:first-child,
|
472
|
+
i.circular.icons i.icon:first-child {
|
473
|
+
position: absolute;
|
474
|
+
transform: translateX(-50%) translateY(-50%);
|
462
475
|
}
|
463
|
-
}
|
464
|
-
i.circular.icons {
|
465
|
-
border-radius: 500em;
|
466
|
-
}
|
467
|
-
i.bordered.icons i.icon:first-child,
|
468
|
-
i.circular.icons i.icon:first-child {
|
469
|
-
position: absolute;
|
470
|
-
transform: translateX(-50%) translateY(-50%);
|
471
|
-
}
|
472
476
|
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
477
|
+
& when (@variationIconInverted) {
|
478
|
+
/* Inverted Icon */
|
479
|
+
i.bordered.inverted.icons,
|
480
|
+
i.circular.inverted.icons {
|
481
|
+
border: none;
|
482
|
+
box-shadow: none;
|
483
|
+
background-color: @black;
|
484
|
+
color: @white;
|
485
|
+
}
|
481
486
|
}
|
482
|
-
}
|
483
487
|
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
488
|
+
& when (@variationIconCorner) {
|
489
|
+
/* Corner Icon */
|
490
|
+
i.bordered.icons .icon.corner,
|
491
|
+
i.circular.icons .icon.corner,
|
492
|
+
i.bordered.icons .icon.corner[class*="bottom right"],
|
493
|
+
i.circular.icons .icon.corner[class*="bottom right"] {
|
494
|
+
top: auto;
|
495
|
+
left: auto;
|
496
|
+
right: @borderedGroupCornerOffset;
|
497
|
+
bottom: @borderedGroupCornerOffset;
|
498
|
+
}
|
499
|
+
i.bordered.icons .icon.corner[class*="top right"],
|
500
|
+
i.circular.icons .icon.corner[class*="top right"] {
|
501
|
+
top: @borderedGroupCornerOffset;
|
502
|
+
left: auto;
|
503
|
+
right: @borderedGroupCornerOffset;
|
504
|
+
bottom: auto;
|
505
|
+
}
|
506
|
+
i.bordered.icons .icon.corner[class*="top left"],
|
507
|
+
i.circular.icons .icon.corner[class*="top left"] {
|
508
|
+
top: @borderedGroupCornerOffset;
|
509
|
+
left: @borderedGroupCornerOffset;
|
510
|
+
right: auto;
|
511
|
+
bottom: auto;
|
512
|
+
}
|
513
|
+
i.bordered.icons .icon.corner[class*="bottom left"],
|
514
|
+
i.circular.icons .icon.corner[class*="bottom left"] {
|
515
|
+
top: auto;
|
516
|
+
left: @borderedGroupCornerOffset;
|
517
|
+
right: auto;
|
518
|
+
bottom: @borderedGroupCornerOffset;
|
519
|
+
}
|
515
520
|
}
|
516
|
-
}
|
517
521
|
}
|
518
522
|
|
519
523
|
.generateIcons(@map, @fontFamily) {
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
524
|
+
each(@map,{
|
525
|
+
@escapedKey: replace(@key,'^([0-9])','\3$1 ');
|
526
|
+
@normalizedKey: replace(@escapedKey,'_','.','g');
|
527
|
+
i.icon.@{normalizedKey}::before {
|
528
|
+
content: "@{value}";
|
529
|
+
& when not (@fontFamily = false) {
|
530
|
+
font-family: @fontFamily;
|
531
|
+
}
|
532
|
+
}
|
533
|
+
});
|
530
534
|
};
|
531
535
|
|
532
536
|
.generateSecondaryIcons(@map) {
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
537
|
+
each(@map,{
|
538
|
+
@escapedKey: replace(@key,'^([0-9])','\3$1 ');
|
539
|
+
@normalizedKey: replace(@escapedKey,'_','.','g');
|
540
|
+
i.icon.@{normalizedKey}::after {
|
541
|
+
content: "@{value}";
|
542
|
+
}
|
543
|
+
});
|
540
544
|
};
|
541
545
|
|
542
546
|
& when (@variationIconDeprecated) {
|
543
|
-
|
544
|
-
|
545
|
-
.generateIcons(@icon-deprecated-map,false);
|
547
|
+
/* Deprecated *In/Out Naming Conflict) */
|
548
|
+
.generateIcons(@icon-deprecated-map,false);
|
546
549
|
}
|
547
550
|
|
548
551
|
& when (@variationIconSolid) {
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
/* Icons */
|
554
|
-
.generateIcons(@icon-map,false);
|
555
|
-
& when (@variationIconAliases) {
|
552
|
+
/*******************************
|
553
|
+
Solid Icons
|
554
|
+
*******************************/
|
556
555
|
|
557
|
-
/*
|
558
|
-
.generateIcons(@icon-
|
559
|
-
|
556
|
+
/* Icons */
|
557
|
+
.generateIcons(@icon-map,false);
|
558
|
+
& when (@variationIconAliases) {
|
559
|
+
/* Aliases */
|
560
|
+
.generateIcons(@icon-aliases-map,false);
|
561
|
+
}
|
560
562
|
}
|
561
563
|
|
562
564
|
& when (@variationIconOutline) {
|
563
|
-
|
564
|
-
|
565
|
-
|
565
|
+
/*******************************
|
566
|
+
Outline Icons
|
567
|
+
*******************************/
|
566
568
|
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
/* Icons */
|
572
|
-
.generateIcons(@icon-outline-map,false);
|
573
|
-
& when (@variationIconAliases) {
|
569
|
+
i.icon.outline {
|
570
|
+
font-family: @outlineFontName;
|
571
|
+
}
|
574
572
|
|
575
|
-
/*
|
576
|
-
.generateIcons(@icon-outline-
|
577
|
-
|
573
|
+
/* Icons */
|
574
|
+
.generateIcons(@icon-outline-map,false);
|
575
|
+
& when (@variationIconAliases) {
|
576
|
+
/* Aliases */
|
577
|
+
.generateIcons(@icon-outline-aliases-map,false);
|
578
|
+
}
|
578
579
|
}
|
579
580
|
|
580
581
|
& when (@variationIconThin) {
|
581
|
-
|
582
|
-
|
583
|
-
|
582
|
+
/*******************************
|
583
|
+
Thin Icons
|
584
|
+
*******************************/
|
584
585
|
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
}
|
586
|
+
/* Icons */
|
587
|
+
i.icon.thin {
|
588
|
+
font-family: @thinFontName;
|
589
|
+
}
|
590
|
+
.generateIcons(@icon-thin-map,false);
|
591
|
+
& when (@variationIconAliases) {
|
592
|
+
/* Aliases */
|
593
|
+
.generateIcons(@icon-thin-aliases-map,false);
|
594
|
+
}
|
595
595
|
}
|
596
596
|
|
597
597
|
& when (@variationIconBrand) {
|
598
|
-
|
599
|
-
|
600
|
-
|
598
|
+
/*******************************
|
599
|
+
Brand Icons
|
600
|
+
*******************************/
|
601
601
|
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
}
|
602
|
+
/* Icons */
|
603
|
+
.generateIcons(@icon-brand-map,@brandFontName);
|
604
|
+
& when (@variationIconAliases) {
|
605
|
+
/* Aliases */
|
606
|
+
.generateIcons(@icon-brand-aliases-map,@brandFontName);
|
607
|
+
}
|
609
608
|
}
|
610
609
|
|
611
610
|
& when (@variationIconDuotone) {
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
|
656
|
-
|
657
|
-
|
658
|
-
|
659
|
-
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
|
666
|
-
|
667
|
-
|
668
|
-
|
669
|
-
|
670
|
-
|
671
|
-
|
611
|
+
/*******************************
|
612
|
+
Duotone Icons
|
613
|
+
*******************************/
|
614
|
+
|
615
|
+
/* Make duotone icons use the proper font */
|
616
|
+
i.icon.duotone {
|
617
|
+
font-family: @duotoneFontName;
|
618
|
+
|
619
|
+
/* To position the secondary layer on top of the first layer */
|
620
|
+
position: relative;
|
621
|
+
}
|
622
|
+
|
623
|
+
/* Set the default opacity levels and colors for each layer */
|
624
|
+
i.icon.duotone::before {
|
625
|
+
color: @duotonePrimaryColor;
|
626
|
+
opacity: @duotonePrimaryOpacity;
|
627
|
+
}
|
628
|
+
|
629
|
+
i.icon.duotone::after {
|
630
|
+
/* Position secondary layer to the left, centered horizontally and aligned vertically to flex with different line heights */
|
631
|
+
position: absolute;
|
632
|
+
left: 0;
|
633
|
+
top: 50%;
|
634
|
+
transform: translateY(-50%);
|
635
|
+
text-align: center;
|
636
|
+
|
637
|
+
color: @duotoneSecondaryColor;
|
638
|
+
opacity: @duotoneSecondaryOpacity;
|
639
|
+
}
|
640
|
+
|
641
|
+
.generateIcons(@icon-duotone-map,false);
|
642
|
+
.generateSecondaryIcons(@icon-duotone-secondary-map);
|
643
|
+
|
644
|
+
& when (@variationIconAliases) {
|
645
|
+
/* Aliases */
|
646
|
+
.generateIcons(@icon-duotone-aliases-map,false);
|
647
|
+
.generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
|
648
|
+
}
|
649
|
+
|
650
|
+
/*
|
651
|
+
* Colors for duotone icons, in the form `primary-secondary`(e.g. `black-grey duotone icon`).
|
652
|
+
*/
|
653
|
+
& when not (@variationIconColors = false) {
|
654
|
+
each(@variationIconColors, {
|
655
|
+
@color: @value;
|
656
|
+
@c: @colors[@@color][color];
|
657
|
+
@l: @colors[@@color][light];
|
658
|
+
|
659
|
+
i.icon.duotone[class*="@{color}-"]::before,
|
660
|
+
i.icon.duotone[class*="-@{color}"]::after {
|
661
|
+
color: @c;
|
662
|
+
}
|
663
|
+
|
664
|
+
& when (@variationIconInverted) {
|
665
|
+
i.icon.inverted.duotone[class*="@{color}-"]::before,
|
666
|
+
i.icon.inverted.duotone[class*="-@{color}"]::after {
|
667
|
+
color: @l;
|
668
|
+
}
|
669
|
+
}
|
670
|
+
})
|
672
671
|
}
|
673
672
|
}
|
674
673
|
|