1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | @type : 'element';
|
16 | @element : 'list';
|
17 |
|
18 | @import (multiple) '../../theme.config';
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | ul.ui.list,
|
25 | ol.ui.list,
|
26 | .ui.list {
|
27 | list-style-type: @listStyleType;
|
28 | margin: @margin;
|
29 | padding: @verticalPadding @horizontalPadding;
|
30 | }
|
31 |
|
32 | ul.ui.list:first-child,
|
33 | ol.ui.list:first-child,
|
34 | .ui.list:first-child {
|
35 | margin-top: 0;
|
36 | padding-top: 0;
|
37 | }
|
38 |
|
39 | ul.ui.list:last-child,
|
40 | ol.ui.list:last-child,
|
41 | .ui.list:last-child {
|
42 | margin-bottom: 0;
|
43 | padding-bottom: 0;
|
44 | }
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | ul.ui.list li,
|
52 | ol.ui.list li,
|
53 | .ui.list > .item,
|
54 | .ui.list .list > .item {
|
55 | display: list-item;
|
56 | table-layout: fixed;
|
57 | list-style-type: @listStyleType;
|
58 | list-style-position: @listStylePosition;
|
59 |
|
60 | padding: @itemPadding;
|
61 | line-height: @itemLineHeight;
|
62 | }
|
63 |
|
64 | ul.ui.list > li:first-child:after,
|
65 | ol.ui.list > li:first-child:after,
|
66 | .ui.list > .list > .item:after,
|
67 | .ui.list > .item:after {
|
68 | content: '';
|
69 | display: block;
|
70 | height: 0;
|
71 | clear: both;
|
72 | visibility: hidden;
|
73 | }
|
74 |
|
75 | ul.ui.list li:first-child,
|
76 | ol.ui.list li:first-child,
|
77 | .ui.list .list > .item:first-child,
|
78 | .ui.list > .item:first-child {
|
79 | padding-top: 0;
|
80 | }
|
81 | ul.ui.list li:last-child,
|
82 | ol.ui.list li:last-child,
|
83 | .ui.list .list > .item:last-child,
|
84 | .ui.list > .item:last-child {
|
85 | padding-bottom: 0;
|
86 | }
|
87 |
|
88 |
|
89 | ul.ui.list ul,
|
90 | ol.ui.list ol,
|
91 | .ui.list .list:not(.icon) {
|
92 | clear: both;
|
93 | margin: 0;
|
94 | padding: @childListPadding;
|
95 | }
|
96 |
|
97 |
|
98 | ul.ui.list ul li,
|
99 | ol.ui.list ol li,
|
100 | .ui.list .list > .item {
|
101 | padding: @childItemPadding;
|
102 | line-height: @childItemLineHeight;
|
103 | }
|
104 |
|
105 | & when (@variationListIcon) {
|
106 |
|
107 | .ui.list .list > .item > i.icon,
|
108 | .ui.list > .item > i.icon {
|
109 | display: table-cell;
|
110 | min-width: 1.55em;
|
111 | margin: 0;
|
112 | padding-top: @iconOffset;
|
113 | transition: @iconTransition;
|
114 | &:not(.loading) {
|
115 | padding-right: @iconDistance;
|
116 | vertical-align: @iconContentVerticalAlign;
|
117 | }
|
118 | }
|
119 | .ui.list .list > .item > i.icon:only-child,
|
120 | .ui.list > .item > i.icon:only-child {
|
121 | display: inline-block;
|
122 | min-width: auto;
|
123 | vertical-align: @iconVerticalAlign;
|
124 | }
|
125 | }
|
126 |
|
127 | & when (@variationListImage) {
|
128 |
|
129 | .ui.list .list > .item > .image,
|
130 | .ui.list > .item > .image {
|
131 | display: table-cell;
|
132 | background-color: transparent;
|
133 | margin: 0;
|
134 | vertical-align: @imageAlign;
|
135 | }
|
136 | .ui.list .list > .item > .image:not(:only-child):not(img),
|
137 | .ui.list > .item > .image:not(:only-child):not(img) {
|
138 | padding-right: @imageDistance;
|
139 | }
|
140 | .ui.list .list > .item > .image img,
|
141 | .ui.list > .item > .image img {
|
142 | vertical-align: @imageAlign;
|
143 | }
|
144 |
|
145 | .ui.list .list > .item > img.image,
|
146 | .ui.list .list > .item > .image:only-child,
|
147 | .ui.list > .item > img.image,
|
148 | .ui.list > .item > .image:only-child {
|
149 | display: inline-block;
|
150 | }
|
151 | }
|
152 |
|
153 |
|
154 | .ui.list .list > .item > .content,
|
155 | .ui.list > .item > .content {
|
156 | line-height: @contentLineHeight;
|
157 | color: @contentColor;
|
158 | }
|
159 | & when (@variationListImage) or (@variationListIcon) {
|
160 | .ui.list .list > .item > .image + .content,
|
161 | .ui.list .list > .item > .icon + .content,
|
162 | .ui.list > .item > .image + .content,
|
163 | .ui.list > .item > .icon + .content {
|
164 | display: table-cell;
|
165 | width: 100%;
|
166 | padding: 0 0 0 @contentDistance;
|
167 | vertical-align: @contentVerticalAlign;
|
168 | }
|
169 | }
|
170 | & when (@variationListIcon) {
|
171 | .ui.list .list > .item > .loading.icon + .content,
|
172 | .ui.list > .item > .loading.icon + .content {
|
173 | padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance));
|
174 | }
|
175 | }
|
176 | & when (@variationListImage) {
|
177 | .ui.list .list > .item > img.image + .content,
|
178 | .ui.list > .item > img.image + .content {
|
179 | display: inline-block;
|
180 | width: auto;
|
181 | }
|
182 | }
|
183 | .ui.list .list > .item > .content > .list,
|
184 | .ui.list > .item > .content > .list {
|
185 | margin-left: 0;
|
186 | padding-left: 0;
|
187 | }
|
188 |
|
189 |
|
190 | .ui.list .list > .item .header,
|
191 | .ui.list > .item .header {
|
192 | display: block;
|
193 | margin: 0;
|
194 | font-family: @itemHeaderFontFamily;
|
195 | font-weight: @itemHeaderFontWeight;
|
196 | color: @itemHeaderColor;
|
197 | }
|
198 |
|
199 |
|
200 | .ui.list .list > .item .description,
|
201 | .ui.list > .item .description {
|
202 | display: block;
|
203 | color: @itemDescriptionColor;
|
204 | }
|
205 |
|
206 |
|
207 | .ui.list > .item a,
|
208 | .ui.list .list > .item a {
|
209 | cursor: pointer;
|
210 | }
|
211 |
|
212 |
|
213 | .ui.list .list > a.item,
|
214 | .ui.list > a.item {
|
215 | cursor: pointer;
|
216 | color: @itemLinkColor;
|
217 | }
|
218 | .ui.list .list > a.item:hover,
|
219 | .ui.list > a.item:hover {
|
220 | color: @itemLinkHoverColor;
|
221 | }
|
222 |
|
223 | & when (@variationListIcon) {
|
224 |
|
225 | .ui.list .list > a.item > i.icons,
|
226 | .ui.list > a.item > i.icons,
|
227 | .ui.list .list > a.item > i.icon,
|
228 | .ui.list > a.item > i.icon {
|
229 | color: @itemLinkIconColor;
|
230 | }
|
231 | }
|
232 |
|
233 |
|
234 | .ui.list .list > .item a.header,
|
235 | .ui.list > .item a.header {
|
236 | cursor: pointer;
|
237 | color: @itemHeaderLinkColor !important;
|
238 | }
|
239 | .ui.list .list > .item > a.header:hover,
|
240 | .ui.list > .item > a.header:hover {
|
241 | color: @itemHeaderLinkHoverColor !important;
|
242 | }
|
243 |
|
244 | & when (@variationListFloated) {
|
245 |
|
246 | .ui[class*="left floated"].list {
|
247 | float: left;
|
248 | }
|
249 | .ui[class*="right floated"].list {
|
250 | float: right;
|
251 | }
|
252 |
|
253 | .ui.list .list > .item [class*="left floated"],
|
254 | .ui.list > .item [class*="left floated"] {
|
255 | float: left;
|
256 | margin: @leftFloatMargin;
|
257 | }
|
258 | .ui.list .list > .item [class*="right floated"],
|
259 | .ui.list > .item [class*="right floated"] {
|
260 | float: right;
|
261 | margin: @rightFloatMargin;
|
262 | }
|
263 | }
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 | .ui.menu .ui.list > .item,
|
270 | .ui.menu .ui.list .list > .item {
|
271 | display: list-item;
|
272 | table-layout: fixed;
|
273 | background-color: transparent;
|
274 |
|
275 | list-style-type: @listStyleType;
|
276 | list-style-position: @listStylePosition;
|
277 |
|
278 | padding: @itemVerticalPadding @itemHorizontalPadding;
|
279 | line-height: @itemLineHeight;
|
280 | }
|
281 | .ui.menu .ui.list .list > .item:before,
|
282 | .ui.menu .ui.list > .item:before {
|
283 | border: none;
|
284 | background: none;
|
285 | }
|
286 | .ui.menu .ui.list .list > .item:first-child,
|
287 | .ui.menu .ui.list > .item:first-child {
|
288 | padding-top: 0;
|
289 | }
|
290 | .ui.menu .ui.list .list > .item:last-child,
|
291 | .ui.menu .ui.list > .item:last-child {
|
292 | padding-bottom: 0;
|
293 | }
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 | & when (@variationListHorizontal) {
|
301 | |
302 |
|
303 |
|
304 |
|
305 | .ui.horizontal.list {
|
306 | display: inline-block;
|
307 | font-size: 0;
|
308 | }
|
309 | .ui.horizontal.list > .item {
|
310 | display: inline-block;
|
311 | margin-right: @horizontalSpacing;
|
312 | font-size: 1rem;
|
313 | }
|
314 | .ui.horizontal.list:not(.celled) > .item:last-child {
|
315 | margin-right: 0;
|
316 | padding-right: 0;
|
317 | }
|
318 | .ui.horizontal.list .list:not(.icon) {
|
319 | padding-left: 0;
|
320 | padding-bottom: 0;
|
321 | }
|
322 | .ui.horizontal.list > .item > .image,
|
323 | .ui.horizontal.list .list > .item > .image,
|
324 | .ui.horizontal.list > .item > .icon,
|
325 | .ui.horizontal.list .list > .item > .icon,
|
326 | .ui.horizontal.list > .item > .content,
|
327 | .ui.horizontal.list .list > .item > .content {
|
328 | vertical-align: @horizontalVerticalAlign;
|
329 | }
|
330 |
|
331 |
|
332 | .ui.horizontal.list > .item:first-child,
|
333 | .ui.horizontal.list > .item:last-child {
|
334 | padding-top: @itemVerticalPadding;
|
335 | padding-bottom: @itemVerticalPadding;
|
336 | }
|
337 | & when (@variationListIcon) {
|
338 |
|
339 | .ui.horizontal.list > .item > i.icon ,
|
340 | .ui.horizontal.list .item > i.icons > i.icon {
|
341 | margin: 0;
|
342 | padding: 0 @horizontalIconDistance 0 0;
|
343 | }
|
344 | }
|
345 | & when (@variationListImage) or (@variationListIcon) {
|
346 | .ui.horizontal.list > .item > .image + .content,
|
347 | .ui.horizontal.list > .item > .icon,
|
348 | .ui.horizontal.list > .item > .icon + .content {
|
349 | float: none;
|
350 | display: inline-block;
|
351 | width: auto;
|
352 | }
|
353 | }
|
354 | & when (@variationListImage) {
|
355 | .ui.horizontal.list > .item > .image {
|
356 | display: inline-block;
|
357 | }
|
358 | }
|
359 | }
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 | & when (@variationListDisabled) {
|
366 | |
367 |
|
368 |
|
369 |
|
370 | .ui.list .list > .disabled.item,
|
371 | .ui.list > .disabled.item {
|
372 | pointer-events: none;
|
373 | color: @disabledColor !important;
|
374 | }
|
375 | & when (@variationListInverted) {
|
376 | .ui.inverted.list .list > .disabled.item,
|
377 | .ui.inverted.list > .disabled.item {
|
378 | color: @invertedDisabledColor !important;
|
379 | }
|
380 | }
|
381 | }
|
382 |
|
383 |
|
384 |
|
385 |
|
386 | & when (@variationListIcon) {
|
387 | .ui.list .list > a.item:hover > .icons,
|
388 | .ui.list > a.item:hover > .icons,
|
389 | .ui.list .list > a.item:hover > .icon,
|
390 | .ui.list > a.item:hover > .icon {
|
391 | color: @itemLinkIconHoverColor;
|
392 | }
|
393 | }
|
394 |
|
395 |
|
396 |
|
397 |
|
398 |
|
399 | & when (@variationListInverted) {
|
400 | |
401 |
|
402 |
|
403 | & when (@variationListIcon) {
|
404 | .ui.inverted.list .list > a.item > .icon,
|
405 | .ui.inverted.list > a.item > .icon {
|
406 | color: @invertedIconLinkColor;
|
407 | }
|
408 | }
|
409 | .ui.inverted.list .list > .item .header,
|
410 | .ui.inverted.list > .item .header {
|
411 | color: @invertedHeaderColor;
|
412 | }
|
413 | .ui.inverted.list .list > .item .description,
|
414 | .ui.inverted.list > .item .description {
|
415 | color: @invertedDescriptionColor;
|
416 | }
|
417 | .ui.inverted.list .list > .item > .content,
|
418 | .ui.inverted.list > .item > .content {
|
419 | color: @invertedContentColor;
|
420 | }
|
421 |
|
422 | .ui.inverted.list .list > a.item,
|
423 | .ui.inverted.list > a.item {
|
424 | cursor: pointer;
|
425 | color: @invertedItemLinkColor;
|
426 | }
|
427 | .ui.inverted.list .list > a.item:hover,
|
428 | .ui.inverted.list > a.item:hover {
|
429 | color: @invertedItemLinkHoverColor;
|
430 | }
|
431 |
|
432 |
|
433 |
|
434 | .ui.inverted.list .item a:not(.ui) {
|
435 | color: @invertedItemLinkColor !important;
|
436 | }
|
437 | .ui.inverted.list .item a:not(.ui):hover {
|
438 | color: @invertedItemLinkHoverColor !important;
|
439 | }
|
440 | }
|
441 |
|
442 | & when (@variationListAligned) {
|
443 | |
444 |
|
445 |
|
446 |
|
447 | .ui.list[class*="top aligned"] .image,
|
448 | .ui.list[class*="top aligned"] .content,
|
449 | .ui.list [class*="top aligned"] {
|
450 | vertical-align: top !important;
|
451 | }
|
452 | .ui.list[class*="middle aligned"] .image,
|
453 | .ui.list[class*="middle aligned"] .content,
|
454 | .ui.list [class*="middle aligned"] {
|
455 | vertical-align: middle !important;
|
456 | }
|
457 | .ui.list[class*="bottom aligned"] .image,
|
458 | .ui.list[class*="bottom aligned"] .content,
|
459 | .ui.list [class*="bottom aligned"] {
|
460 | vertical-align: bottom !important;
|
461 | }
|
462 | }
|
463 |
|
464 | & when (@variationListLink) {
|
465 | |
466 |
|
467 |
|
468 |
|
469 | .ui.link.list .item,
|
470 | .ui.link.list a.item,
|
471 | .ui.link.list .item a:not(.ui) {
|
472 | color: @linkListItemColor;
|
473 | transition: @linkListTransition;
|
474 | }
|
475 | .ui.link.list.list a.item:hover,
|
476 | .ui.link.list.list .item a:not(.ui):hover {
|
477 | color: @linkListItemHoverColor;
|
478 | }
|
479 | .ui.link.list.list a.item:active,
|
480 | .ui.link.list.list .item a:not(.ui):active {
|
481 | color: @linkListItemDownColor;
|
482 | }
|
483 | .ui.link.list.list .active.item,
|
484 | .ui.link.list.list .active.item a:not(.ui) {
|
485 | color: @linkListItemActiveColor;
|
486 | }
|
487 | & when (@variationListInverted) {
|
488 |
|
489 | .ui.inverted.link.list .item,
|
490 | .ui.inverted.link.list a.item,
|
491 | .ui.inverted.link.list .item a:not(.ui) {
|
492 | color: @invertedLinkListItemColor;
|
493 | }
|
494 | .ui.inverted.link.list.list a.item:hover,
|
495 | .ui.inverted.link.list.list .item a:not(.ui):hover {
|
496 | color: @invertedLinkListItemHoverColor;
|
497 | }
|
498 | .ui.inverted.link.list.list a.item:active,
|
499 | .ui.inverted.link.list.list .item a:not(.ui):active {
|
500 | color: @invertedLinkListItemDownColor;
|
501 | }
|
502 | .ui.inverted.link.list.list a.active.item,
|
503 | .ui.inverted.link.list.list .active.item a:not(.ui) {
|
504 | color: @invertedLinkListItemActiveColor;
|
505 | }
|
506 | }
|
507 | }
|
508 |
|
509 | & when (@variationListSelection) {
|
510 | |
511 |
|
512 |
|
513 |
|
514 | .ui.selection.list .list > .item,
|
515 | .ui.selection.list > .item {
|
516 | cursor: pointer;
|
517 | background: @selectionListBackground;
|
518 | padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
|
519 | margin: @selectionListItemMargin;
|
520 | color: @selectionListColor;
|
521 | border-radius: @selectionListItemBorderRadius;
|
522 | transition: @selectionListTransition;
|
523 | }
|
524 | .ui.selection.list .list > .item:last-child,
|
525 | .ui.selection.list > .item:last-child {
|
526 | margin-bottom: 0;
|
527 | }
|
528 | .ui.selection.list .list > .item:hover,
|
529 | .ui.selection.list > .item:hover {
|
530 | background: @selectionListHoverBackground;
|
531 | color: @selectionListHoverColor;
|
532 | }
|
533 | .ui.selection.list .list > .item:active,
|
534 | .ui.selection.list > .item:active {
|
535 | background: @selectionListDownBackground;
|
536 | color: @selectionListDownColor;
|
537 | }
|
538 | .ui.selection.list .list > .item.active,
|
539 | .ui.selection.list > .item.active {
|
540 | background: @selectionListActiveBackground;
|
541 | color: @selectionListActiveColor;
|
542 | }
|
543 |
|
544 | & when (@variationListInverted) {
|
545 |
|
546 | .ui.inverted.selection.list > .item {
|
547 | background: @invertedSelectionListBackground;
|
548 | color: @invertedSelectionListColor;
|
549 | }
|
550 | .ui.inverted.selection.list > .item:hover {
|
551 | background: @invertedSelectionListHoverBackground;
|
552 | color: @invertedSelectionListHoverColor;
|
553 | }
|
554 | .ui.inverted.selection.list > .item:active {
|
555 | background: @invertedSelectionListDownBackground;
|
556 | color: @invertedSelectionListDownColor;
|
557 | }
|
558 | .ui.inverted.selection.list > .item.active {
|
559 | background: @invertedSelectionListActiveBackground;
|
560 | color: @invertedSelectionListActiveColor;
|
561 | }
|
562 | }
|
563 |
|
564 | & when (@variationListCelled) or (@variationListDivided) {
|
565 |
|
566 | .ui.celled.selection.list .list > .item,
|
567 | .ui.divided.selection.list .list > .item,
|
568 | .ui.celled.selection.list > .item,
|
569 | .ui.divided.selection.list > .item {
|
570 | border-radius: 0;
|
571 | }
|
572 | }
|
573 | }
|
574 |
|
575 | & when (@variationListAnimated) {
|
576 | |
577 |
|
578 |
|
579 |
|
580 | .ui.animated.list > .item {
|
581 | transition: @animatedListTransition;
|
582 | }
|
583 | .ui.animated.list:not(.horizontal) > .item:hover {
|
584 | padding-left: @animatedListIndent;
|
585 | }
|
586 | }
|
587 |
|
588 | & when (@variationListFitted) {
|
589 | |
590 |
|
591 |
|
592 | .ui.fitted.list:not(.selection) .list > .item,
|
593 | .ui.fitted.list:not(.selection) > .item {
|
594 | padding-left: 0;
|
595 | padding-right: 0;
|
596 | }
|
597 | .ui.fitted.selection.list .list > .item,
|
598 | .ui.fitted.selection.list > .item {
|
599 | margin-left: -@selectionListItemHorizontalPadding;
|
600 | margin-right: -@selectionListItemHorizontalPadding;
|
601 | }
|
602 | }
|
603 |
|
604 | & when (@variationListBulleted) {
|
605 | |
606 |
|
607 |
|
608 |
|
609 | ul.ui.list,
|
610 | .ui.bulleted.list {
|
611 | margin-left: @bulletDistance;
|
612 | }
|
613 | ul.ui.list li,
|
614 | .ui.bulleted.list .list > .item,
|
615 | .ui.bulleted.list > .item {
|
616 | position: relative;
|
617 | }
|
618 | ul.ui.list li:before,
|
619 | .ui.bulleted.list .list > .item:before,
|
620 | .ui.bulleted.list > .item:before {
|
621 | user-select: none;
|
622 | pointer-events: none;
|
623 | position: absolute;
|
624 | top: auto;
|
625 | left: auto;
|
626 | font-weight: @normal;
|
627 | margin-left: @bulletOffset;
|
628 | content: @bulletCharacter;
|
629 | opacity: @bulletOpacity;
|
630 | color: @bulletColor;
|
631 | vertical-align: @bulletVerticalAlign;
|
632 | }
|
633 |
|
634 | ul.ui.list li:before,
|
635 | .ui.bulleted.list .list > a.item:before,
|
636 | .ui.bulleted.list > a.item:before {
|
637 | color: @bulletLinkColor;
|
638 | }
|
639 |
|
640 | ul.ui.list ul,
|
641 | .ui.bulleted.list .list:not(.icon) {
|
642 | padding-left: @bulletChildDistance;
|
643 | }
|
644 |
|
645 | & when (@variationListHorizontal) {
|
646 |
|
647 | ul.ui.horizontal.bulleted.list,
|
648 | .ui.horizontal.bulleted.list {
|
649 | margin-left: 0;
|
650 | }
|
651 | ul.ui.horizontal.bulleted.list li,
|
652 | .ui.horizontal.bulleted.list > .item {
|
653 | margin-left: @horizontalBulletSpacing;
|
654 | }
|
655 | ul.ui.horizontal.bulleted.list li:first-child,
|
656 | .ui.horizontal.bulleted.list > .item:first-child {
|
657 | margin-left: 0;
|
658 | }
|
659 | ul.ui.horizontal.bulleted.list li::before,
|
660 | .ui.horizontal.bulleted.list > .item::before {
|
661 | color: @horizontalBulletColor;
|
662 | }
|
663 | ul.ui.horizontal.bulleted.list li:first-child::before,
|
664 | .ui.horizontal.bulleted.list > .item:first-child::before {
|
665 | display: none;
|
666 | }
|
667 | }
|
668 | }
|
669 |
|
670 | & when (@variationListOrdered) {
|
671 | |
672 |
|
673 |
|
674 |
|
675 | ol.ui.list,
|
676 | .ui.ordered.list,
|
677 | .ui.ordered.list .list:not(.icon),
|
678 | ol.ui.list ol {
|
679 | counter-reset: ordered;
|
680 | margin-left: @orderedCountDistance;
|
681 | list-style-type: none;
|
682 | }
|
683 | ol.ui.list li,
|
684 | .ui.ordered.list .list > .item,
|
685 | .ui.ordered.list > .item {
|
686 | list-style-type: none;
|
687 | position: relative;
|
688 | }
|
689 | ol.ui.list li:before,
|
690 | .ui.ordered.list .list > .item:before,
|
691 | .ui.ordered.list > .item:before {
|
692 | position: absolute;
|
693 | top: auto;
|
694 | left: auto;
|
695 | user-select: none;
|
696 | pointer-events: none;
|
697 | margin-left: -(@orderedCountDistance);
|
698 | counter-increment: @orderedCountName;
|
699 | content: @orderedCountContent;
|
700 | text-align: @orderedCountTextAlign;
|
701 | color: @orderedCountColor;
|
702 | vertical-align: @orderedCountVerticalAlign;
|
703 | opacity: @orderedCountOpacity;
|
704 | }
|
705 |
|
706 | & when (@variationListInverted) {
|
707 | ol.ui.inverted.list li:before,
|
708 | .ui.ordered.inverted.list .list > .item:before,
|
709 | .ui.ordered.inverted.list > .item:before {
|
710 | color: @orderedInvertedCountColor;
|
711 | }
|
712 | }
|
713 |
|
714 |
|
715 | .ui.ordered.list .list > .item[data-value]:before,
|
716 | .ui.ordered.list > .item[data-value]:before {
|
717 | content: attr(data-value);
|
718 | }
|
719 | ol.ui.list li[value]:before {
|
720 | content: attr(value);
|
721 | }
|
722 |
|
723 |
|
724 | ol.ui.list ol,
|
725 | .ui.ordered.list .list:not(.icon) {
|
726 | margin-left: @orderedChildCountDistance;
|
727 | }
|
728 | ol.ui.list ol li:before,
|
729 | .ui.ordered.list .list > .item:before {
|
730 | margin-left: @orderedChildCountOffset;
|
731 | }
|
732 |
|
733 | & when (@variationListHorizontal) {
|
734 |
|
735 | ol.ui.horizontal.list,
|
736 | .ui.ordered.horizontal.list {
|
737 | margin-left: 0;
|
738 | }
|
739 | ol.ui.horizontal.list li:before,
|
740 | .ui.ordered.horizontal.list .list > .item:before,
|
741 | .ui.ordered.horizontal.list > .item:before {
|
742 | position: static;
|
743 | margin: 0 @horizontalOrderedCountDistance 0 0;
|
744 | }
|
745 | }
|
746 | }
|
747 |
|
748 | & when (@variationListSuffixed) {
|
749 |
|
750 | ol.ui.suffixed.list li:before,
|
751 | .ui.suffixed.ordered.list .list > .item:before,
|
752 | .ui.suffixed.ordered.list > .item:before {
|
753 | content: @orderedCountContentSuffixed;
|
754 | }
|
755 | }
|
756 |
|
757 | & when (@variationListDivided) {
|
758 | |
759 |
|
760 |
|
761 |
|
762 | .ui.divided.list > .item {
|
763 | border-top: @dividedBorder;
|
764 | }
|
765 | .ui.divided.list .list > .item {
|
766 | border-top: @dividedChildListBorder;
|
767 | }
|
768 | .ui.divided.list .item .list > .item {
|
769 | border-top: @dividedChildItemBorder;
|
770 | }
|
771 | .ui.divided.list .list > .item:first-child,
|
772 | .ui.divided.list > .item:first-child {
|
773 | border-top: none;
|
774 | }
|
775 |
|
776 |
|
777 | .ui.divided.list:not(.horizontal) .list > .item:first-child {
|
778 | border-top-width: @dividedBorderWidth;
|
779 | }
|
780 |
|
781 | & when (@variationListBulleted) {
|
782 |
|
783 | .ui.divided.bulleted.list:not(.horizontal),
|
784 | .ui.divided.bulleted.list .list:not(.icon) {
|
785 | margin-left: 0;
|
786 | padding-left: 0;
|
787 | }
|
788 | .ui.divided.bulleted.list > .item:not(.horizontal) {
|
789 | padding-left: @bulletDistance;
|
790 | }
|
791 | }
|
792 |
|
793 | & when (@variationListOrdered) {
|
794 |
|
795 | .ui.divided.ordered.list {
|
796 | margin-left: 0;
|
797 | }
|
798 | .ui.divided.ordered.list .list > .item,
|
799 | .ui.divided.ordered.list > .item {
|
800 | padding-left: @orderedCountDistance;
|
801 | }
|
802 | .ui.divided.ordered.list .item .list:not(.icon) {
|
803 | margin-left: 0;
|
804 | margin-right: 0;
|
805 | padding-bottom: @itemVerticalPadding;
|
806 | }
|
807 | .ui.divided.ordered.list .item .list > .item {
|
808 | padding-left: @orderedChildCountDistance;
|
809 | }
|
810 | }
|
811 |
|
812 | & when (@variationListSelection) {
|
813 |
|
814 |
|
815 | .ui.divided.selection.list .list > .item,
|
816 | .ui.divided.selection.list > .item {
|
817 | margin: 0;
|
818 | border-radius: 0;
|
819 | }
|
820 | }
|
821 |
|
822 | & when (@variationListHorizontal) {
|
823 |
|
824 | .ui.divided.horizontal.list {
|
825 | margin-left: 0;
|
826 | }
|
827 | .ui.divided.horizontal.list > .item {
|
828 | padding-left: @horizontalDividedSpacing;
|
829 | }
|
830 | .ui.divided.horizontal.list > .item:not(:last-child) {
|
831 | padding-right: @horizontalDividedSpacing;
|
832 | }
|
833 | .ui.divided.horizontal.list > .item {
|
834 | border-top: none;
|
835 | border-right: @dividedBorder;
|
836 | margin: 0;
|
837 | line-height: @horizontalDividedLineHeight;
|
838 | }
|
839 | .ui.horizontal.divided.list > .item:last-child {
|
840 | border-right: none;
|
841 | }
|
842 | }
|
843 |
|
844 | & when (@variationListInverted) {
|
845 |
|
846 |
|
847 | .ui.divided.inverted.list > .item,
|
848 | .ui.divided.inverted.list > .list,
|
849 | .ui.divided.inverted.horizontal.list > .item {
|
850 | border-color: @dividedInvertedBorderColor;
|
851 | }
|
852 | }
|
853 | }
|
854 |
|
855 | & when (@variationListCelled) {
|
856 | |
857 |
|
858 |
|
859 |
|
860 | .ui.celled.list > .item,
|
861 | .ui.celled.list > .list {
|
862 | border-top: @celledBorder;
|
863 | padding-left: @celledHorizontalPadding;
|
864 | padding-right: @celledHorizontalPadding;
|
865 | }
|
866 | .ui.celled.list > .item:last-child {
|
867 | border-bottom: @celledBorder;
|
868 | }
|
869 |
|
870 |
|
871 | .ui.celled.list > .item:first-child,
|
872 | .ui.celled.list > .item:last-child {
|
873 | padding-top: @itemVerticalPadding;
|
874 | padding-bottom: @itemVerticalPadding;
|
875 | }
|
876 |
|
877 |
|
878 | .ui.celled.list .item .list > .item {
|
879 | border-width: 0;
|
880 | }
|
881 | .ui.celled.list .list > .item:first-child {
|
882 | border-top-width: 0;
|
883 | }
|
884 |
|
885 | & when (@variationListBulleted) {
|
886 |
|
887 | .ui.celled.bulleted.list {
|
888 | margin-left: 0;
|
889 | }
|
890 | .ui.celled.bulleted.list .list > .item,
|
891 | .ui.celled.bulleted.list > .item {
|
892 | padding-left: (@bulletDistance);
|
893 | }
|
894 | .ui.celled.bulleted.list .item .list:not(.icon) {
|
895 | margin-left: -(@bulletDistance);
|
896 | margin-right: -(@bulletDistance);
|
897 | padding-bottom: @itemVerticalPadding;
|
898 | }
|
899 | }
|
900 |
|
901 | & when (@variationListOrdered) {
|
902 |
|
903 | .ui.celled.ordered.list {
|
904 | margin-left: 0;
|
905 | }
|
906 | .ui.celled.ordered.list .list > .item,
|
907 | .ui.celled.ordered.list > .item {
|
908 | padding-left: @orderedCountDistance;
|
909 | }
|
910 | .ui.celled.ordered.list .item .list:not(.icon) {
|
911 | margin-left: 0;
|
912 | margin-right: 0;
|
913 | padding-bottom: @itemVerticalPadding;
|
914 | }
|
915 | .ui.celled.ordered.list .list > .item {
|
916 | padding-left: @orderedChildCountDistance;
|
917 | }
|
918 | }
|
919 |
|
920 | & when (@variationListHorizontal) {
|
921 |
|
922 | .ui.horizontal.celled.list {
|
923 | margin-left: 0;
|
924 | }
|
925 | .ui.horizontal.celled.list .list > .item,
|
926 | .ui.horizontal.celled.list > .item {
|
927 | border-top: none;
|
928 | border-left: @celledBorder;
|
929 | margin: 0;
|
930 | padding-left: @horizontalCelledSpacing;
|
931 | padding-right: @horizontalCelledSpacing;
|
932 |
|
933 | line-height: @horizontalCelledLineHeight;
|
934 | }
|
935 | .ui.horizontal.celled.list .list > .item:last-child,
|
936 | .ui.horizontal.celled.list > .item:last-child {
|
937 | border-bottom: none;
|
938 | border-right: @celledBorder;
|
939 | }
|
940 | }
|
941 |
|
942 | & when (@variationListInverted) {
|
943 |
|
944 | .ui.celled.inverted.list > .item,
|
945 | .ui.celled.inverted.list > .list {
|
946 | border-color: @celledInvertedBorder;
|
947 | }
|
948 | .ui.celled.inverted.horizontal.list .list > .item,
|
949 | .ui.celled.inverted.horizontal.list > .item {
|
950 | border-color: @celledInvertedBorder;
|
951 | }
|
952 | }
|
953 | }
|
954 |
|
955 | & when (@variationListRelaxed) {
|
956 | |
957 |
|
958 |
|
959 |
|
960 | .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
|
961 | padding-top: @relaxedItemVerticalPadding;
|
962 | }
|
963 | .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
|
964 | padding-bottom: @relaxedItemVerticalPadding;
|
965 | }
|
966 |
|
967 | & when (@variationListHorizontal) {
|
968 | .ui.horizontal.relaxed.list .list > .item:not(:first-child),
|
969 | .ui.horizontal.relaxed.list > .item:not(:first-child) {
|
970 | padding-left: @relaxedHorizontalPadding;
|
971 | }
|
972 | .ui.horizontal.relaxed.list .list > .item:not(:last-child),
|
973 | .ui.horizontal.relaxed.list > .item:not(:last-child) {
|
974 | padding-right: @relaxedHorizontalPadding;
|
975 | }
|
976 | }
|
977 |
|
978 |
|
979 | .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
|
980 | padding-top: @veryRelaxedItemVerticalPadding;
|
981 | }
|
982 | .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
|
983 | padding-bottom: @veryRelaxedItemVerticalPadding;
|
984 | }
|
985 |
|
986 | & when (@variationListHorizontal) {
|
987 | .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
|
988 | .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
|
989 | padding-left: @veryRelaxedHorizontalPadding;
|
990 | }
|
991 | .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
|
992 | .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
|
993 | padding-right: @veryRelaxedHorizontalPadding;
|
994 | }
|
995 | }
|
996 | }
|
997 |
|
998 |
|
999 |
|
1000 |
|
1001 | .ui.list {
|
1002 | font-size: @relativeMedium;
|
1003 | }
|
1004 | & when not (@variationListSizes = false) {
|
1005 | each(@variationListSizes, {
|
1006 | @rs: @{value}ListSize;
|
1007 | @s: @@value;
|
1008 | .ui.@{value}.list {
|
1009 | font-size: @@rs;
|
1010 | }
|
1011 | & when (@variationListHorizontal) {
|
1012 | .ui.@{value}.horizontal.list .list > .item,
|
1013 | .ui.@{value}.horizontal.list > .item {
|
1014 | font-size: @s;
|
1015 | }
|
1016 | }
|
1017 | })
|
1018 | }
|
1019 |
|
1020 | .loadUIOverrides();
|
1021 |
|