1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | @type : 'element';
|
16 | @element : 'divider';
|
17 |
|
18 | @import (multiple) '../../theme.config';
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | .ui.divider {
|
26 | margin: @margin;
|
27 |
|
28 | line-height: 1;
|
29 | height: 0;
|
30 |
|
31 | font-weight: @fontWeight;
|
32 | text-transform: @textTransform;
|
33 | letter-spacing: @letterSpacing;
|
34 | color: @color;
|
35 |
|
36 | user-select: none;
|
37 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
38 | }
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | .ui.divider:not(.vertical):not(.horizontal) {
|
45 | border-top: @shadowWidth solid @shadowColor;
|
46 | border-bottom: @highlightWidth solid @highlightColor;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | .ui.grid > .column + .divider,
|
55 | .ui.grid > .row > .column + .divider {
|
56 | left: auto;
|
57 | }
|
58 |
|
59 | & when (@variationDividerHorizontal) {
|
60 | |
61 |
|
62 |
|
63 |
|
64 | .ui.horizontal.divider {
|
65 | display: table;
|
66 | white-space: nowrap;
|
67 |
|
68 | height: auto;
|
69 | margin: @horizontalMargin;
|
70 | line-height: 1;
|
71 | text-align: center;
|
72 | }
|
73 |
|
74 | .ui.horizontal.divider:before,
|
75 | .ui.horizontal.divider:after {
|
76 | content: '';
|
77 | display: table-cell;
|
78 | position: relative;
|
79 | top: 50%;
|
80 | width: 50%;
|
81 | background-repeat: no-repeat;
|
82 | }
|
83 |
|
84 | .ui.horizontal.divider:before {
|
85 | background-position: right @horizontalDividerMargin top 50%;
|
86 | }
|
87 | .ui.horizontal.divider:after {
|
88 | background-position: left @horizontalDividerMargin top 50%;
|
89 | }
|
90 | }
|
91 |
|
92 | & when (@variationDividerVertical) {
|
93 | |
94 |
|
95 |
|
96 |
|
97 | .ui.vertical.divider {
|
98 | position: absolute;
|
99 | z-index: 2;
|
100 | top: 50%;
|
101 | left: 50%;
|
102 |
|
103 | margin: 0;
|
104 | padding: 0;
|
105 | width: auto;
|
106 | height: 50%;
|
107 |
|
108 | line-height: 0;
|
109 | text-align: center;
|
110 | transform: translateX(-50%);
|
111 | }
|
112 |
|
113 | .ui.vertical.divider:before,
|
114 | .ui.vertical.divider:after {
|
115 | position: absolute;
|
116 | left: 50%;
|
117 | content: '';
|
118 | z-index: 3;
|
119 |
|
120 | border-left: @shadowWidth solid @shadowColor;
|
121 | border-right: @highlightWidth solid @highlightColor;
|
122 |
|
123 | width: 0;
|
124 | height: @verticalDividerHeight;
|
125 | }
|
126 |
|
127 | .ui.vertical.divider:before {
|
128 | top: -100%;
|
129 | }
|
130 | .ui.vertical.divider:after {
|
131 | top: auto;
|
132 | bottom: 0;
|
133 | }
|
134 |
|
135 |
|
136 | @media only screen and (max-width : @largestMobileScreen) {
|
137 |
|
138 | .ui.stackable.grid .ui.vertical.divider,
|
139 | .ui.grid .stackable.row .ui.vertical.divider {
|
140 | display: table;
|
141 | white-space: nowrap;
|
142 | height: auto;
|
143 | margin: @horizontalMargin;
|
144 | overflow: hidden;
|
145 | line-height: 1;
|
146 | text-align: center;
|
147 | position: static;
|
148 | top: 0;
|
149 | left: 0;
|
150 | transform: none;
|
151 | }
|
152 |
|
153 | .ui.stackable.grid .ui.vertical.divider:before,
|
154 | .ui.grid .stackable.row .ui.vertical.divider:before,
|
155 | .ui.stackable.grid .ui.vertical.divider:after,
|
156 | .ui.grid .stackable.row .ui.vertical.divider:after {
|
157 | left: 0;
|
158 | border-left: none;
|
159 | border-right: none;
|
160 | content: '';
|
161 | display: table-cell;
|
162 | position: relative;
|
163 | top: 50%;
|
164 | width: 50%;
|
165 | background-repeat: no-repeat;
|
166 | }
|
167 |
|
168 | .ui.stackable.grid .ui.vertical.divider:before,
|
169 | .ui.grid .stackable.row .ui.vertical.divider:before {
|
170 | background-position: right @horizontalDividerMargin top 50%;
|
171 | }
|
172 | .ui.stackable.grid .ui.vertical.divider:after,
|
173 | .ui.grid .stackable.row .ui.vertical.divider:after {
|
174 | background-position: left @horizontalDividerMargin top 50%;
|
175 | }
|
176 | }
|
177 | }
|
178 |
|
179 | & when (@variationDividerIcon) {
|
180 | |
181 |
|
182 |
|
183 |
|
184 | .ui.divider > .icon {
|
185 | margin: @dividerIconMargin;
|
186 | font-size: @dividerIconSize;
|
187 | height: 1em;
|
188 | vertical-align: middle;
|
189 | }
|
190 | }
|
191 |
|
192 | & when (@variationDividerHorizontal) {
|
193 | |
194 |
|
195 |
|
196 | .ui.horizontal.divider[class*="left aligned"] {
|
197 | &:before {
|
198 | display: none;
|
199 | }
|
200 | &:after {
|
201 | width: 100%;
|
202 | }
|
203 | }
|
204 | .ui.horizontal.divider[class*="right aligned"] {
|
205 | &:before {
|
206 | width: 100%;
|
207 | }
|
208 | &:after {
|
209 | display: none;
|
210 | }
|
211 | }
|
212 | }
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 | & when (@variationDividerHidden) {
|
219 | |
220 |
|
221 |
|
222 |
|
223 | .ui.hidden.divider {
|
224 | border-color: transparent !important;
|
225 | }
|
226 |
|
227 | .ui.hidden.divider:before,
|
228 | .ui.hidden.divider:after {
|
229 | display: none;
|
230 | }
|
231 | }
|
232 |
|
233 |
|
234 |
|
235 |
|
236 | & when (@variationDividerInverted) {
|
237 | .ui.divider.inverted,
|
238 | .ui.vertical.inverted.divider,
|
239 | .ui.horizontal.inverted.divider {
|
240 | color: @invertedTextColor;
|
241 | }
|
242 | .ui.divider.inverted,
|
243 | .ui.divider.inverted:after,
|
244 | .ui.divider.inverted:before {
|
245 | border-top-color: @invertedShadowColor !important;
|
246 | border-left-color: @invertedShadowColor !important;
|
247 | border-bottom-color: @invertedHighlightColor !important;
|
248 | border-right-color: @invertedHighlightColor !important;
|
249 | }
|
250 | }
|
251 |
|
252 |
|
253 |
|
254 |
|
255 | & when (@variationDividerFitted) {
|
256 | .ui.fitted.divider {
|
257 | margin: 0;
|
258 | }
|
259 | }
|
260 |
|
261 | & when (@variationDividerClearing) {
|
262 | |
263 |
|
264 |
|
265 |
|
266 | .ui.clearing.divider {
|
267 | clear: both;
|
268 | }
|
269 | }
|
270 |
|
271 | & when (@variationDividerSection) {
|
272 | |
273 |
|
274 |
|
275 |
|
276 | .ui.section.divider {
|
277 | margin-top: @sectionMargin;
|
278 | margin-bottom: @sectionMargin;
|
279 | }
|
280 | }
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | .ui.divider {
|
287 | font-size: @medium;
|
288 | }
|
289 | & when not (@variationDividerSizes = false) {
|
290 | each(@variationDividerSizes, {
|
291 | @s: @@value;
|
292 | .ui.@{value}.divider {
|
293 | font-size: @s;
|
294 | }
|
295 | })
|
296 | }
|
297 |
|
298 | .loadUIOverrides();
|