-
Notifications
You must be signed in to change notification settings - Fork 7
/
_objects.list-ui.scss
128 lines (90 loc) · 3.14 KB
/
_objects.list-ui.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*------------------------------------*\
#LIST-UI
\*------------------------------------*/
/**
* The UI list object creates blocky list items with a keyline separator out of
* a `ul` or `ol`.
*/
// Predefine the variables below in order to alter and enable specific features.
$inuit-list-ui-namespace: $inuit-namespace !default;
$inuit-list-ui-padding: $inuit-base-spacing-unit !default;
$inuit-list-ui-padding--tiny: quarter($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--small: halve($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--large: double($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--huge: quadruple($inuit-list-ui-padding) !default;
$inuit-list-ui-border-width: 1px !default;
$inuit-list-ui-border-style: solid !default;
$inuit-list-ui-border-color: #ccc !default;
$inuit-enable-list-ui--tiny: false !default;
$inuit-enable-list-ui--small: false !default;
$inuit-enable-list-ui--large: false !default;
$inuit-enable-list-ui--huge: false !default;
.#{$inuit-list-ui-namespace}list-ui,
%#{$inuit-list-ui-namespace}list-ui,
.#{$inuit-list-ui-namespace}list-ui__item,
%#{$inuit-list-ui-namespace}list-ui__item {
border: 0 $inuit-list-ui-border-style $inuit-list-ui-border-color;
}
.#{$inuit-list-ui-namespace}list-ui,
%#{$inuit-list-ui-namespace}list-ui {
margin: 0;
padding: 0;
list-style: none;
border-top-width: $inuit-list-ui-border-width;
> li {
@extend %#{$inuit-list-ui-namespace}list-ui__item;
}
}
.#{$inuit-list-ui-namespace}list-ui__item,
%#{$inuit-list-ui-namespace}list-ui__item {
padding: $inuit-list-ui-padding;
border-bottom-width: $inuit-list-ui-border-width;
}
@if ($inuit-enable-list-ui--tiny == true) {
/**
* Tiny list-uis.
*/
.#{$inuit-list-ui-namespace}list-ui--tiny,
%#{$inuit-list-ui-namespace}list-ui--tiny {
> .#{$inuit-list-ui-namespace}list-ui__item,
> %#{$inuit-list-ui-namespace}list-ui__item {
padding: $inuit-list-ui-padding--tiny;
}
}
}
@if ($inuit-enable-list-ui--small == true) {
/**
* Small list-uis.
*/
.#{$inuit-list-ui-namespace}list-ui--small,
%#{$inuit-list-ui-namespace}list-ui--small {
> .#{$inuit-list-ui-namespace}list-ui__item,
> %#{$inuit-list-ui-namespace}list-ui__item {
padding: $inuit-list-ui-padding--small;
}
}
}
@if ($inuit-enable-list-ui--large == true) {
/**
* Large list-uis.
*/
.#{$inuit-list-ui-namespace}list-ui--large,
%#{$inuit-list-ui-namespace}list-ui--large {
> .#{$inuit-list-ui-namespace}list-ui__item,
> %#{$inuit-list-ui-namespace}list-ui__item {
padding: $inuit-list-ui-padding--large;
}
}
}
@if ($inuit-enable-list-ui--huge == true) {
/**
* Huge list-uis.
*/
.#{$inuit-list-ui-namespace}list-ui--huge,
%#{$inuit-list-ui-namespace}list-ui--huge {
> .#{$inuit-list-ui-namespace}list-ui__item,
> %#{$inuit-list-ui-namespace}list-ui__item {
padding: $inuit-list-ui-padding--huge;
}
}
}