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.
Files changed (212) hide show
  1. package/.eslintrc.js +1 -0
  2. package/.stylelintrc.js +46 -0
  3. package/dist/components/accordion.css +19 -26
  4. package/dist/components/accordion.js +1 -1
  5. package/dist/components/accordion.min.css +1 -1
  6. package/dist/components/accordion.min.js +1 -1
  7. package/dist/components/ad.css +31 -41
  8. package/dist/components/ad.min.css +1 -1
  9. package/dist/components/api.js +1 -1
  10. package/dist/components/api.min.js +1 -1
  11. package/dist/components/breadcrumb.css +1 -1
  12. package/dist/components/breadcrumb.min.css +1 -1
  13. package/dist/components/button.css +71 -96
  14. package/dist/components/button.min.css +1 -1
  15. package/dist/components/calendar.css +6 -8
  16. package/dist/components/calendar.js +1 -1
  17. package/dist/components/calendar.min.css +1 -1
  18. package/dist/components/calendar.min.js +1 -1
  19. package/dist/components/card.css +83 -115
  20. package/dist/components/card.min.css +1 -1
  21. package/dist/components/checkbox.css +47 -64
  22. package/dist/components/checkbox.js +1 -1
  23. package/dist/components/checkbox.min.css +1 -1
  24. package/dist/components/checkbox.min.js +1 -1
  25. package/dist/components/comment.css +37 -51
  26. package/dist/components/comment.min.css +1 -1
  27. package/dist/components/container.css +4 -5
  28. package/dist/components/container.min.css +1 -1
  29. package/dist/components/dimmer.css +31 -41
  30. package/dist/components/dimmer.js +1 -1
  31. package/dist/components/dimmer.min.css +1 -1
  32. package/dist/components/dimmer.min.js +1 -1
  33. package/dist/components/divider.css +32 -44
  34. package/dist/components/divider.min.css +1 -1
  35. package/dist/components/dropdown.css +109 -152
  36. package/dist/components/dropdown.js +1 -1
  37. package/dist/components/dropdown.min.css +1 -1
  38. package/dist/components/dropdown.min.js +1 -1
  39. package/dist/components/embed.css +13 -19
  40. package/dist/components/embed.js +1 -1
  41. package/dist/components/embed.min.css +1 -1
  42. package/dist/components/embed.min.js +1 -1
  43. package/dist/components/emoji.css +7 -6
  44. package/dist/components/feed.css +24 -32
  45. package/dist/components/feed.min.css +1 -1
  46. package/dist/components/flag.css +5 -3
  47. package/dist/components/flag.min.css +1 -1
  48. package/dist/components/flyout.css +39 -56
  49. package/dist/components/flyout.js +1 -1
  50. package/dist/components/flyout.min.css +1 -1
  51. package/dist/components/flyout.min.js +1 -1
  52. package/dist/components/form.css +85 -111
  53. package/dist/components/form.js +1 -1
  54. package/dist/components/form.min.css +1 -1
  55. package/dist/components/form.min.js +1 -1
  56. package/dist/components/grid.css +70 -96
  57. package/dist/components/grid.min.css +1 -1
  58. package/dist/components/header.css +47 -65
  59. package/dist/components/header.min.css +1 -1
  60. package/dist/components/icon.css +42 -53
  61. package/dist/components/icon.min.css +1 -1
  62. package/dist/components/image.css +32 -42
  63. package/dist/components/image.min.css +1 -1
  64. package/dist/components/input.css +45 -58
  65. package/dist/components/input.min.css +1 -1
  66. package/dist/components/item.css +55 -77
  67. package/dist/components/item.min.css +1 -1
  68. package/dist/components/label.css +61 -90
  69. package/dist/components/label.min.css +1 -1
  70. package/dist/components/list.css +44 -59
  71. package/dist/components/list.min.css +1 -1
  72. package/dist/components/loader.css +16 -22
  73. package/dist/components/loader.min.css +1 -1
  74. package/dist/components/menu.css +126 -186
  75. package/dist/components/message.css +25 -35
  76. package/dist/components/message.min.css +1 -1
  77. package/dist/components/modal.css +33 -40
  78. package/dist/components/modal.js +1 -1
  79. package/dist/components/modal.min.css +1 -1
  80. package/dist/components/modal.min.js +1 -1
  81. package/dist/components/nag.css +19 -25
  82. package/dist/components/nag.js +1 -1
  83. package/dist/components/nag.min.css +1 -1
  84. package/dist/components/nag.min.js +1 -1
  85. package/dist/components/placeholder.css +10 -12
  86. package/dist/components/placeholder.min.css +1 -1
  87. package/dist/components/popup.css +49 -59
  88. package/dist/components/popup.js +1 -1
  89. package/dist/components/popup.min.css +1 -1
  90. package/dist/components/popup.min.js +1 -1
  91. package/dist/components/progress.css +29 -39
  92. package/dist/components/progress.js +1 -1
  93. package/dist/components/progress.min.css +1 -1
  94. package/dist/components/progress.min.js +1 -1
  95. package/dist/components/rail.css +15 -20
  96. package/dist/components/rail.min.css +1 -1
  97. package/dist/components/rating.css +9 -13
  98. package/dist/components/rating.js +1 -1
  99. package/dist/components/rating.min.css +1 -1
  100. package/dist/components/rating.min.js +1 -1
  101. package/dist/components/reset.css +1 -1
  102. package/dist/components/reset.min.css +1 -1
  103. package/dist/components/reveal.css +19 -26
  104. package/dist/components/reveal.min.css +1 -1
  105. package/dist/components/search.css +41 -58
  106. package/dist/components/search.js +1 -1
  107. package/dist/components/search.min.css +1 -1
  108. package/dist/components/search.min.js +1 -1
  109. package/dist/components/segment.css +62 -83
  110. package/dist/components/segment.min.css +1 -1
  111. package/dist/components/shape.css +10 -14
  112. package/dist/components/shape.js +1 -1
  113. package/dist/components/shape.min.css +1 -1
  114. package/dist/components/shape.min.js +1 -1
  115. package/dist/components/sidebar.css +41 -58
  116. package/dist/components/sidebar.js +1 -1
  117. package/dist/components/sidebar.min.css +1 -1
  118. package/dist/components/sidebar.min.js +1 -1
  119. package/dist/components/site.css +5 -5
  120. package/dist/components/site.js +1 -1
  121. package/dist/components/site.min.css +1 -1
  122. package/dist/components/site.min.js +1 -1
  123. package/dist/components/slider.css +27 -37
  124. package/dist/components/slider.js +1 -1
  125. package/dist/components/slider.min.js +1 -1
  126. package/dist/components/state.js +1 -1
  127. package/dist/components/state.min.js +1 -1
  128. package/dist/components/statistic.css +29 -41
  129. package/dist/components/statistic.min.css +1 -1
  130. package/dist/components/step.css +26 -35
  131. package/dist/components/step.min.css +1 -1
  132. package/dist/components/sticky.css +1 -1
  133. package/dist/components/sticky.js +1 -1
  134. package/dist/components/sticky.min.css +1 -1
  135. package/dist/components/sticky.min.js +1 -1
  136. package/dist/components/tab.css +6 -8
  137. package/dist/components/tab.js +1 -1
  138. package/dist/components/tab.min.css +1 -1
  139. package/dist/components/tab.min.js +1 -1
  140. package/dist/components/table.css +87 -117
  141. package/dist/components/table.min.css +1 -1
  142. package/dist/components/text.css +1 -1
  143. package/dist/components/text.min.css +1 -1
  144. package/dist/components/toast.css +4 -6
  145. package/dist/components/toast.js +1 -1
  146. package/dist/components/toast.min.css +1 -1
  147. package/dist/components/toast.min.js +1 -1
  148. package/dist/components/transition.css +4 -3
  149. package/dist/components/transition.js +1 -1
  150. package/dist/components/transition.min.css +1 -1
  151. package/dist/components/transition.min.js +1 -1
  152. package/dist/components/visibility.js +1 -1
  153. package/dist/components/visibility.min.js +1 -1
  154. package/dist/semantic.css +1719 -1719
  155. package/dist/semantic.js +26 -26
  156. package/dist/semantic.min.css +1 -1
  157. package/dist/semantic.min.js +1 -1
  158. package/package.json +8 -4
  159. package/src/definitions/collections/breadcrumb.less +41 -44
  160. package/src/definitions/collections/form.less +869 -879
  161. package/src/definitions/collections/grid.less +1690 -1695
  162. package/src/definitions/collections/menu.less +1493 -1503
  163. package/src/definitions/collections/message.less +292 -295
  164. package/src/definitions/collections/table.less +1616 -1622
  165. package/src/definitions/elements/button.less +1723 -1737
  166. package/src/definitions/elements/container.less +209 -210
  167. package/src/definitions/elements/divider.less +205 -206
  168. package/src/definitions/elements/emoji.less +38 -44
  169. package/src/definitions/elements/flag.less +44 -46
  170. package/src/definitions/elements/header.less +337 -345
  171. package/src/definitions/elements/icon.less +511 -512
  172. package/src/definitions/elements/image.less +221 -225
  173. package/src/definitions/elements/input.less +661 -667
  174. package/src/definitions/elements/label.less +800 -799
  175. package/src/definitions/elements/list.less +809 -809
  176. package/src/definitions/elements/loader.less +272 -266
  177. package/src/definitions/elements/placeholder.less +171 -168
  178. package/src/definitions/elements/rail.less +91 -91
  179. package/src/definitions/elements/reveal.less +192 -196
  180. package/src/definitions/elements/segment.less +743 -747
  181. package/src/definitions/elements/step.less +425 -433
  182. package/src/definitions/elements/text.less +32 -34
  183. package/src/definitions/globals/reset.less +9 -6
  184. package/src/definitions/globals/site.less +106 -108
  185. package/src/definitions/modules/accordion.less +242 -246
  186. package/src/definitions/modules/calendar.less +91 -92
  187. package/src/definitions/modules/checkbox.less +536 -542
  188. package/src/definitions/modules/dimmer.less +300 -297
  189. package/src/definitions/modules/dropdown.less +1577 -1591
  190. package/src/definitions/modules/embed.less +81 -82
  191. package/src/definitions/modules/flyout.less +443 -452
  192. package/src/definitions/modules/modal.less +459 -462
  193. package/src/definitions/modules/nag.less +134 -137
  194. package/src/definitions/modules/popup.less +738 -739
  195. package/src/definitions/modules/progress.less +521 -494
  196. package/src/definitions/modules/rating.less +94 -101
  197. package/src/definitions/modules/search.less +375 -383
  198. package/src/definitions/modules/shape.less +71 -76
  199. package/src/definitions/modules/sidebar.less +464 -474
  200. package/src/definitions/modules/slider.less +307 -308
  201. package/src/definitions/modules/sticky.less +21 -23
  202. package/src/definitions/modules/tab.less +51 -52
  203. package/src/definitions/modules/toast.less +584 -586
  204. package/src/definitions/modules/transition.less +55 -56
  205. package/src/definitions/views/ad.less +206 -206
  206. package/src/definitions/views/card.less +968 -970
  207. package/src/definitions/views/comment.less +190 -198
  208. package/src/definitions/views/feed.less +220 -224
  209. package/src/definitions/views/item.less +436 -446
  210. package/src/definitions/views/statistic.less +269 -280
  211. package/src/theme.less +29 -32
  212. 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 : 'element';
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
- each(@fonts, {
27
- @font-face {
28
- each(@value,{
29
- @{key}: @value;
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
- display: inline-block;
37
- opacity: @opacity;
34
+ display: inline-block;
35
+ opacity: @opacity;
38
36
 
39
- margin: 0 @distanceFromText 0 0;
37
+ margin: 0 @distanceFromText 0 0;
40
38
 
41
- width: @width;
42
- height: @height;
39
+ width: @width;
40
+ height: @height;
43
41
 
44
- font-family: @fontName;
45
- font-style: normal;
46
- font-weight: @normal;
47
- text-decoration: inherit;
48
- text-align: center;
42
+ font-family: @fontName;
43
+ font-style: normal;
44
+ font-weight: @normal;
45
+ text-decoration: inherit;
46
+ text-align: center;
49
47
 
50
- speak: none;
51
- -moz-osx-font-smoothing: grayscale;
52
- -webkit-font-smoothing: antialiased;
53
- backface-visibility: hidden;
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
- background: none !important;
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
- Loading
67
- ---------------*/
63
+ /* --------------
64
+ Loading
65
+ --------------- */
68
66
 
69
- i.loading.icon {
70
- height: 1em;
71
- line-height: 1;
72
- }
73
- i.loading.icon, i.loading.icons {
74
- animation: loader @loadingDuration linear infinite;
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, i.icons:hover,
83
- i.icon:active, i.icons:active,
84
- i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
85
- opacity: 1;
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
- i.disabled.icon, i.disabled.icons {
90
- opacity: @disabledOpacity;
91
- cursor: default;
92
- pointer-events: none;
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
- Fitted
103
- --------------------*/
104
-
105
- i.fitted.icons,
106
- i.fitted.icon {
107
- width: auto;
108
- margin: 0 !important;
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
- Link
115
- --------------------*/
116
-
117
- i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
118
- cursor: pointer;
119
- opacity: @linkOpacity;
120
- transition: opacity @defaultDuration @defaultEasing;
121
- }
122
- i.link.icon:hover, i.link.icons:hover {
123
- opacity: 1;
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
- Circular
130
- --------------------*/
133
+ /* -------------------
134
+ Circular
135
+ -------------------- */
131
136
 
132
- i.circular.icon {
133
- border-radius: 500em !important;
134
- line-height: 1 !important;
137
+ i.circular.icon {
138
+ border-radius: 500em !important;
139
+ line-height: 1 !important;
135
140
 
136
- padding: @circularPadding !important;
137
- box-shadow: @circularShadow;
141
+ padding: @circularPadding !important;
142
+ box-shadow: @circularShadow;
138
143
 
139
- width: @circularSize !important;
140
- height: @circularSize !important;
141
- &.colored when (@variationIconColored){
142
- box-shadow: @coloredBoxShadow;
144
+ width: @circularSize !important;
145
+ height: @circularSize !important;
146
+ &.colored when (@variationIconColored) {
147
+ box-shadow: @coloredBoxShadow;
148
+ }
143
149
  }
144
- }
145
- & when (@variationIconInverted) {
146
- i.circular.inverted.icon {
147
- border: none;
148
- box-shadow: none;
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
- Flipped
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
- & when (@variationIconGroups) {
167
- .icons i.flipped.icon:not(.corner):not(:first-child),
168
- .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
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
- .icons i.vertically.flipped.icon:not(.corner):not(:first-child) {
172
- transform: translateX(-50%) translateY(-50%) scale(1, -1);
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
- Rotated
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
- i.left.rotated.icon,
189
- i.counterclockwise.rotated.icon {
190
- transform: rotate(-90deg);
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
- & when (@variationIconGroups) {
198
- .icons i.rotated.rotated.icon:not(.corner):not(:first-child),
199
- .icons i.right.rotated.icon:not(.corner):not(:first-child),
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
- .icons i.left.rotated.icon:not(.corner):not(:first-child),
204
- .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) {
205
- transform: translateX(-50%) translateY(-50%) rotate(-90deg);
197
+
198
+ i.halfway.rotated.icon {
199
+ transform: rotate(180deg);
206
200
  }
207
- .icons i.halfway.rotated.icon:not(.corner):not(:first-child) {
208
- transform: translateX(-50%) translateY(-50%) rotate(180deg);
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
- Flipped & Rotated
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
- i.left.rotated.flipped.icon,
225
- i.counterclockwise.rotated.flipped.icon {
226
- transform: scale(-1, 1) rotate(-90deg);
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
- & when (@variationIconGroups) {
249
- .icons i.rotated.flipped.icon:not(.corner):not(:first-child),
250
- .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
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
- .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child),
255
- .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
256
- transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
233
+
234
+ i.halfway.rotated.flipped.icon {
235
+ transform: scale(-1, 1) rotate(180deg);
257
236
  }
258
- .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) {
259
- transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
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
- .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
262
- .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
263
- .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
264
- transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
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
- .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
267
- .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
268
- transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
248
+
249
+ i.halfway.rotated.vertically.flipped.icon {
250
+ transform: scale(1, -1) rotate(180deg);
269
251
  }
270
- .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
271
- transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
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
- Bordered
279
- --------------------*/
280
-
281
- i.bordered.icon {
282
- line-height: 1;
283
- vertical-align: baseline;
284
-
285
- width: @borderedSize;
286
- height: @borderedSize;
287
- padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
288
- box-shadow: @borderedShadow;
289
- &.colored when (@variationIconColored){
290
- box-shadow: @coloredBoxShadow;
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
- & when (@variationIconInverted) {
294
- i.bordered.inverted.icon {
295
- border: none;
296
- box-shadow: none;
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
- Inverted
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
- i.inverted.icon {
314
- color: @white;
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
- each(@variationIconColors, {
323
- @color: @value;
324
- @c: @colors[@@color][color];
325
- @l: @colors[@@color][light];
327
+ each(@variationIconColors, {
328
+ @color: @value;
329
+ @c: @colors[@@color][color];
330
+ @l: @colors[@@color][light];
326
331
 
327
- i.@{color}.icon.icon.icon.icon.icon {
328
- color: @c;
329
- }
330
- & when (@variationIconInverted) {
331
- i.inverted.@{color}.icon.icon.icon.icon.icon {
332
- color: @l;
333
- }
334
- & when (@variationIconBordered) or (@variationIconCircular) {
335
- i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
336
- i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
337
- i.inverted.bordered.@{color}.icons,
338
- i.inverted.circular.@{color}.icons {
339
- background-color: @c;
340
- color: @white;
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
- font-size: @medium;
355
- line-height: @lineHeight;
356
- font-style: normal;
358
+ font-size: @medium;
359
+ line-height: @lineHeight;
360
+ font-style: normal;
357
361
  }
358
362
  & when not (@variationIconSizes = false) {
359
- each(@variationIconSizes, {
360
- @s: @@value;
361
- i.@{value}.@{value}.@{value}.icon,
362
- i.@{value}.@{value}.@{value}.icons {
363
- font-size: @s;
364
- vertical-align: middle;
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
- Groups
372
- *******************************/
373
-
374
- i.icons {
375
- display: inline-block;
376
- position: relative;
377
- line-height: 1;
378
- min-width: @width;
379
- min-height: @height;
380
- margin: 0 @distanceFromText 0 0;
381
- text-align: center;
382
- }
383
-
384
- i.icons .icon {
385
- position: absolute;
386
- top: 50%;
387
- left: 50%;
388
- margin: 0;
389
- &:not(.corner):not(.rotated):not(.flipped) {
390
- transform: translateX(-50%) translateY(-50%);
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
- & when (@variationIconCorner) {
405
- /* Corner Icon */
406
- i.icons .corner.icon {
407
- top: auto;
408
- left: auto;
409
- right: @cornerOffset;
410
- bottom: @cornerOffset;
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
- & when (@variationIconInverted) {
442
- i.icons .inverted.corner.icon {
443
- text-shadow: @cornerIconInvertedShadow;
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
- and ((@variationIconBordered) or (@variationIconCircular)) {
451
- /*************************************************
452
- Bordered/circular with corner or group icons
453
- *************************************************/
454
- i.bordered.icons,
455
- i.circular.icons {
456
- width: @borderedSize;
457
- height: @borderedSize;
458
- box-shadow: @borderedShadow;
459
- vertical-align: middle;
460
- &.colored when (@variationIconColored){
461
- box-shadow: @coloredBoxShadow;
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
- & when (@variationIconInverted) {
474
- /* Inverted Icon */
475
- i.bordered.inverted.icons,
476
- i.circular.inverted.icons {
477
- border: none;
478
- box-shadow: none;
479
- background-color: @black;
480
- color: @white;
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
- & when (@variationIconCorner) {
485
- /* Corner Icon */
486
- i.bordered.icons .icon.corner,
487
- i.circular.icons .icon.corner,
488
- i.bordered.icons .icon.corner[class*="bottom right"],
489
- i.circular.icons .icon.corner[class*="bottom right"] {
490
- top: auto;
491
- left: auto;
492
- right: @borderedGroupCornerOffset;
493
- bottom: @borderedGroupCornerOffset;
494
- }
495
- i.bordered.icons .icon.corner[class*="top right"],
496
- i.circular.icons .icon.corner[class*="top right"] {
497
- top: @borderedGroupCornerOffset;
498
- left: auto;
499
- right: @borderedGroupCornerOffset;
500
- bottom: auto;
501
- }
502
- i.bordered.icons .icon.corner[class*="top left"],
503
- i.circular.icons .icon.corner[class*="top left"] {
504
- top: @borderedGroupCornerOffset;
505
- left: @borderedGroupCornerOffset;
506
- right: auto;
507
- bottom: auto;
508
- }
509
- i.bordered.icons .icon.corner[class*="bottom left"],
510
- i.circular.icons .icon.corner[class*="bottom left"] {
511
- top: auto;
512
- left: @borderedGroupCornerOffset;
513
- right: auto;
514
- bottom: @borderedGroupCornerOffset;
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
- each(@map,{
521
- @escapedKey: replace(@key,'^([0-9])','\3$1 ');
522
- @normalizedKey: replace(@escapedKey,'_','.','g');
523
- i.icon.@{normalizedKey}::before {
524
- content: "@{value}";
525
- & when not (@fontFamily = false) {
526
- font-family: @fontFamily;
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
- each(@map,{
534
- @escapedKey: replace(@key,'^([0-9])','\3$1 ');
535
- @normalizedKey: replace(@escapedKey,'_','.','g');
536
- i.icon.@{normalizedKey}::after {
537
- content: "@{value}";
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
- /* Deprecated *In/Out Naming Conflict) */
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
- Solid Icons
551
- *******************************/
552
-
553
- /* Icons */
554
- .generateIcons(@icon-map,false);
555
- & when (@variationIconAliases) {
552
+ /*******************************
553
+ Solid Icons
554
+ *******************************/
556
555
 
557
- /* Aliases */
558
- .generateIcons(@icon-aliases-map,false);
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
- Outline Icons
565
- *******************************/
565
+ /*******************************
566
+ Outline Icons
567
+ *******************************/
566
568
 
567
- i.icon.outline {
568
- font-family: @outlineFontName;
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
- /* Aliases */
576
- .generateIcons(@icon-outline-aliases-map,false);
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
- Thin Icons
583
- *******************************/
582
+ /*******************************
583
+ Thin Icons
584
+ *******************************/
584
585
 
585
- /* Icons */
586
- i.icon.thin {
587
- font-family: @thinFontName;
588
- }
589
- .generateIcons(@icon-thin-map,false);
590
- & when (@variationIconAliases) {
591
-
592
- /* Aliases */
593
- .generateIcons(@icon-thin-aliases-map,false);
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
- Brand Icons
600
- *******************************/
598
+ /*******************************
599
+ Brand Icons
600
+ *******************************/
601
601
 
602
- /* Icons */
603
- .generateIcons(@icon-brand-map,@brandFontName);
604
- & when (@variationIconAliases) {
605
-
606
- /* Aliases */
607
- .generateIcons(@icon-brand-aliases-map,@brandFontName);
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
- Duotone Icons
614
- *******************************/
615
-
616
- /* Make duotone icons use the proper font */
617
- i.icon.duotone {
618
- font-family: @duotoneFontName;
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
-
646
- /* Aliases */
647
- .generateIcons(@icon-duotone-aliases-map,false);
648
- .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
649
- }
650
-
651
- /*
652
- * Colors for duotone icons, in the form `primary-secondary`(e.g. `black-grey duotone icon`).
653
- */
654
- & when not (@variationIconColors = false) {
655
- each(@variationIconColors, {
656
- @color: @value;
657
- @c: @colors[@@color][color];
658
- @l: @colors[@@color][light];
659
-
660
- i.icon.duotone[class*="@{color}-"]::before,
661
- i.icon.duotone[class*="-@{color}"]::after {
662
- color: @c;
663
- }
664
-
665
- & when (@variationIconInverted) {
666
- i.icon.inverted.duotone[class*="@{color}-"]::before,
667
- i.icon.inverted.duotone[class*="-@{color}"]::after {
668
- color: @l;
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