sass-zero 0.0.43 → 0.0.47
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Example.html +13 -13
- data/README.md +3 -0
- data/app/assets/stylesheets/sass-zero/base/normalize.css +159 -223
- data/app/assets/stylesheets/sass-zero/base/preflight.scss +39 -18
- data/app/assets/stylesheets/sass-zero/breadboard.scss +58 -76
- data/app/assets/stylesheets/sass-zero/mixins.scss +13 -33
- data/app/assets/stylesheets/sass-zero/utilities/align.scss +28 -0
- data/app/assets/stylesheets/sass-zero/utilities/container.scss +36 -0
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +3 -3
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +40 -3
- data/app/assets/stylesheets/sass-zero/utilities/list.scss +21 -11
- data/app/assets/stylesheets/sass-zero/utilities/position.scss +14 -6
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +56 -85
- data/app/assets/stylesheets/sass-zero/utilities.scss +2 -0
- data/app/assets/stylesheets/sass-zero/variables/border.scss +1 -1
- data/app/assets/stylesheets/sass-zero/variables/colors.scss +11 -10
- data/app/assets/stylesheets/sass-zero/variables/height.scss +37 -0
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +36 -32
- data/app/assets/stylesheets/sass-zero/variables/width.scss +28 -45
- data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- data/sass-zero.gemspec +1 -1
- metadata +13 -10
@@ -1,4 +1,5 @@
|
|
1
|
-
@import "sass-zero/variables";
|
1
|
+
@import "sass-zero/variables/colors";
|
2
|
+
@import "sass-zero/variables/typography";
|
2
3
|
|
3
4
|
/**
|
4
5
|
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
@@ -31,16 +32,6 @@ button {
|
|
31
32
|
background-image: none;
|
32
33
|
}
|
33
34
|
|
34
|
-
/**
|
35
|
-
* Work around a Firefox/IE bug where the transparent `button` background
|
36
|
-
* results in a loss of the default `button` focus styles.
|
37
|
-
*/
|
38
|
-
|
39
|
-
button:focus {
|
40
|
-
outline: 1px dotted;
|
41
|
-
outline: 5px auto -webkit-focus-ring-color;
|
42
|
-
}
|
43
|
-
|
44
35
|
fieldset {
|
45
36
|
margin: 0;
|
46
37
|
padding: 0;
|
@@ -143,6 +134,7 @@ textarea {
|
|
143
134
|
|
144
135
|
input::placeholder,
|
145
136
|
textarea::placeholder {
|
137
|
+
opacity: 1;
|
146
138
|
color: $gray-400;
|
147
139
|
}
|
148
140
|
|
@@ -151,6 +143,18 @@ button,
|
|
151
143
|
cursor: pointer;
|
152
144
|
}
|
153
145
|
|
146
|
+
/**
|
147
|
+
* Override legacy focus reset from Normalize with modern Firefox focus styles.
|
148
|
+
*
|
149
|
+
* This is actually an improvement over the new defaults in Firefox in our testing,
|
150
|
+
* as it triggers the better focus styles even for links, which still use a dotted
|
151
|
+
* outline in Firefox by default.
|
152
|
+
*/
|
153
|
+
|
154
|
+
:-moz-focusring {
|
155
|
+
outline: auto;
|
156
|
+
}
|
157
|
+
|
154
158
|
table {
|
155
159
|
border-collapse: collapse;
|
156
160
|
}
|
@@ -208,11 +212,20 @@ samp {
|
|
208
212
|
}
|
209
213
|
|
210
214
|
/**
|
211
|
-
* Make replaced elements `display: block` by default as that's
|
212
|
-
*
|
213
|
-
*
|
215
|
+
* 1. Make replaced elements `display: block` by default as that's
|
216
|
+
* the behavior you want almost all of the time. Inspired by
|
217
|
+
* CSS Remedy, with `svg` added as well.
|
214
218
|
*
|
215
|
-
*
|
219
|
+
* https://github.com/mozdevs/cssremedy/issues/14
|
220
|
+
*
|
221
|
+
* 2. Add `vertical-align: middle` to align replaced elements more
|
222
|
+
* sensibly by default when overriding `display` by adding a
|
223
|
+
* utility like `inline`.
|
224
|
+
*
|
225
|
+
* This can trigger a poorly considered linting error in some
|
226
|
+
* tools but is included by design.
|
227
|
+
*
|
228
|
+
* https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
|
216
229
|
*/
|
217
230
|
|
218
231
|
img,
|
@@ -223,13 +236,13 @@ audio,
|
|
223
236
|
iframe,
|
224
237
|
embed,
|
225
238
|
object {
|
226
|
-
display: block;
|
227
|
-
vertical-align: middle;
|
239
|
+
display: block; /* 1 */
|
240
|
+
vertical-align: middle; /* 2 */
|
228
241
|
}
|
229
242
|
|
230
243
|
/**
|
231
244
|
* Constrain images and videos to the parent width and preserve
|
232
|
-
* their
|
245
|
+
* their intrinsic aspect ratio.
|
233
246
|
*
|
234
247
|
* https://github.com/mozdevs/cssremedy/issues/14
|
235
248
|
*/
|
@@ -239,3 +252,11 @@ video {
|
|
239
252
|
max-width: 100%;
|
240
253
|
height: auto;
|
241
254
|
}
|
255
|
+
|
256
|
+
/**
|
257
|
+
* Ensure the default browser behavior of the `hidden` attribute.
|
258
|
+
*/
|
259
|
+
|
260
|
+
[hidden] {
|
261
|
+
display: none;
|
262
|
+
}
|
@@ -1,12 +1,18 @@
|
|
1
1
|
@import "sass-zero/variables";
|
2
2
|
@import "sass-zero/mixins";
|
3
3
|
|
4
|
+
$font-family: $font-sans;
|
5
|
+
|
6
|
+
$radius-input: $rounded;
|
7
|
+
$radius-button: $rounded;
|
8
|
+
|
4
9
|
:root {
|
5
|
-
--color-bg--main:
|
6
|
-
--color-bg--surface:
|
7
|
-
--color-primary:
|
8
|
-
--color-
|
9
|
-
--color-focus-ring:
|
10
|
+
--color-bg--main: #{$white};
|
11
|
+
--color-bg--surface: #{$gray-100};
|
12
|
+
--color-primary: #{$gray-900};
|
13
|
+
--color-text: #{$gray-900};
|
14
|
+
--color-focus-ring: #{rgba($gray-900, $opacity-50)};
|
15
|
+
|
10
16
|
--image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
|
11
17
|
--image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
|
12
18
|
--image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
|
@@ -14,34 +20,19 @@
|
|
14
20
|
|
15
21
|
html {
|
16
22
|
background: var(--color-bg--main);
|
17
|
-
color: var(--color-
|
18
|
-
font-
|
19
|
-
|
20
|
-
|
21
|
-
main {
|
22
|
-
padding-right: $size-2;
|
23
|
-
padding-left: $size-2;
|
24
|
-
}
|
25
|
-
|
26
|
-
blockquote {
|
27
|
-
border-color: var(--color-primary);
|
28
|
-
border-left-width: $border-4;
|
29
|
-
padding: $size-3 $size-4;
|
23
|
+
color: var(--color-text);
|
24
|
+
font-family: $font-family;
|
25
|
+
font-size: 16px;
|
30
26
|
}
|
31
27
|
|
32
28
|
.btn {
|
33
|
-
border-radius: $
|
29
|
+
border-radius: $radius-button;
|
34
30
|
border-width: $border;
|
35
31
|
display: inline-block;
|
36
32
|
font-weight: $font-bold;
|
37
33
|
padding: $size-2 $size-4;
|
38
34
|
cursor: pointer;
|
39
35
|
|
40
|
-
&:focus {
|
41
|
-
outline: 2px dotted var(--color-primary);
|
42
|
-
outline-offset: 2px;
|
43
|
-
}
|
44
|
-
|
45
36
|
&:disabled {
|
46
37
|
pointer-events: none;
|
47
38
|
opacity: $opacity-50;
|
@@ -56,6 +47,7 @@ blockquote {
|
|
56
47
|
&--secondary {
|
57
48
|
background-color: var(--color-bg--main);
|
58
49
|
border-color: var(--color-primary);
|
50
|
+
color: var(--color-primary);
|
59
51
|
}
|
60
52
|
|
61
53
|
&--tertiary {
|
@@ -64,37 +56,11 @@ blockquote {
|
|
64
56
|
}
|
65
57
|
}
|
66
58
|
|
67
|
-
code {
|
68
|
-
background-color: var(--color-bg--surface);
|
69
|
-
border-radius: $rounded;
|
70
|
-
font-size: $text-sm;
|
71
|
-
margin: $size-0 $size-1;
|
72
|
-
padding: $size-1 $size-2;
|
73
|
-
white-space: nowrap;
|
74
|
-
}
|
75
|
-
|
76
|
-
pre {
|
77
|
-
background-color: var(--color-bg--surface);
|
78
|
-
border-color: var(--color-primary);
|
79
|
-
border-left-width: $border-4;
|
80
|
-
overflow-y: hidden;
|
81
|
-
|
82
|
-
& > code {
|
83
|
-
border-radius: $rounded-none;
|
84
|
-
display: block;
|
85
|
-
padding: $size-2 $size-3;
|
86
|
-
white-space: pre;
|
87
|
-
}
|
88
|
-
}
|
89
|
-
|
90
|
-
hr {
|
91
|
-
margin: $size-6 $size-0;
|
92
|
-
}
|
93
|
-
|
94
59
|
.input {
|
60
|
+
resize: none;
|
95
61
|
appearance: none;
|
96
62
|
background-color: $transparent;
|
97
|
-
border-radius: $
|
63
|
+
border-radius: $radius-input;
|
98
64
|
border-width: $border;
|
99
65
|
padding: $size-2 $size-3;
|
100
66
|
width: $size-full;
|
@@ -143,21 +109,55 @@ hr {
|
|
143
109
|
}
|
144
110
|
}
|
145
111
|
|
146
|
-
|
147
|
-
|
148
|
-
|
112
|
+
blockquote {
|
113
|
+
border-left-width: $border-4;
|
114
|
+
padding: $size-3 $size-4;
|
115
|
+
}
|
116
|
+
|
117
|
+
code {
|
118
|
+
background-color: var(--color-bg--surface);
|
119
|
+
border-radius: $rounded;
|
120
|
+
font-size: $text-sm;
|
121
|
+
margin: $size-0 $size-1;
|
122
|
+
padding: $size-1 $size-2;
|
123
|
+
white-space: nowrap;
|
124
|
+
}
|
125
|
+
|
126
|
+
pre {
|
127
|
+
background-color: var(--color-bg--surface);
|
128
|
+
border-left-width: $border-4;
|
129
|
+
overflow-y: hidden;
|
130
|
+
|
131
|
+
& > code {
|
132
|
+
border-radius: $rounded-none;
|
133
|
+
display: block;
|
134
|
+
padding: $size-2 $size-3;
|
135
|
+
white-space: pre;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
hr {
|
140
|
+
margin: $size-6 $size-0;
|
149
141
|
}
|
150
142
|
|
151
143
|
a {
|
152
144
|
font-weight: $font-bold;
|
153
145
|
}
|
154
146
|
|
147
|
+
ul, ol {
|
148
|
+
padding-left: $size-10;
|
149
|
+
}
|
150
|
+
|
155
151
|
ul {
|
156
|
-
list-style: disc
|
152
|
+
list-style: disc outside;
|
157
153
|
}
|
158
154
|
|
159
155
|
ol {
|
160
|
-
list-style: decimal
|
156
|
+
list-style: decimal outside;
|
157
|
+
}
|
158
|
+
|
159
|
+
label, legend, dt {
|
160
|
+
margin-bottom: $size-1;
|
161
161
|
}
|
162
162
|
|
163
163
|
h1, h2, h3, h4, h5, h6, .hdg {
|
@@ -179,7 +179,7 @@ table {
|
|
179
179
|
td, th {
|
180
180
|
border-bottom-width: $border;
|
181
181
|
padding: $size-3 $size-4;
|
182
|
-
text-align:
|
182
|
+
text-align: inherit;
|
183
183
|
}
|
184
184
|
|
185
185
|
h1, h2, h3, h4, h5, h6, .hdg {
|
@@ -210,21 +210,3 @@ h5, .hdg--lg {
|
|
210
210
|
h6, .hdg--base {
|
211
211
|
font-size: $text-base;
|
212
212
|
}
|
213
|
-
|
214
|
-
@media (prefers-color-scheme: dark) {
|
215
|
-
:root {
|
216
|
-
--color-bg--main: #{$gray-900};
|
217
|
-
--color-bg--surface: #{$gray-800};
|
218
|
-
--color-primary: #{$white};
|
219
|
-
--color-txt: #{$white};
|
220
|
-
--color-focus-ring: #{rgba($gray-100, 0.5)};
|
221
|
-
--image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
|
222
|
-
--image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
|
223
|
-
--image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
|
224
|
-
}
|
225
|
-
}
|
226
|
-
|
227
|
-
@media (min-width: $breakpoint-md) {
|
228
|
-
html { font-size: 16px; }
|
229
|
-
main { @include make-container($size-10, $breakpoint-xl); }
|
230
|
-
}
|
@@ -1,12 +1,7 @@
|
|
1
1
|
@import "sass-zero/variables/border";
|
2
2
|
@import "sass-zero/variables/effects";
|
3
3
|
@import "sass-zero/variables/spacing";
|
4
|
-
|
5
|
-
@mixin ellipsis {
|
6
|
-
text-overflow: ellipsis;
|
7
|
-
white-space: nowrap;
|
8
|
-
overflow: hidden;
|
9
|
-
}
|
4
|
+
@import "sass-zero/variables/zindex";
|
10
5
|
|
11
6
|
@mixin antialiased {
|
12
7
|
-webkit-font-smoothing: antialiased;
|
@@ -26,11 +21,10 @@
|
|
26
21
|
}
|
27
22
|
}
|
28
23
|
|
29
|
-
@mixin
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
background-repeat: no-repeat;
|
24
|
+
@mixin ellipsis {
|
25
|
+
text-overflow: ellipsis;
|
26
|
+
white-space: nowrap;
|
27
|
+
overflow: hidden;
|
34
28
|
}
|
35
29
|
|
36
30
|
@mixin input-selection($color) {
|
@@ -42,6 +36,13 @@
|
|
42
36
|
width: $size-4;
|
43
37
|
}
|
44
38
|
|
39
|
+
@mixin checked {
|
40
|
+
border-color: transparent;
|
41
|
+
background-color: currentColor;
|
42
|
+
background-position: center;
|
43
|
+
background-repeat: no-repeat;
|
44
|
+
}
|
45
|
+
|
45
46
|
@mixin outline-none {
|
46
47
|
outline: 2px solid transparent;
|
47
48
|
outline-offset: 2px;
|
@@ -57,31 +58,10 @@
|
|
57
58
|
outline-offset: 2px;
|
58
59
|
}
|
59
60
|
|
60
|
-
@mixin
|
61
|
-
& > :not([hidden]) ~ :not([hidden]) {
|
62
|
-
@if $reverse {
|
63
|
-
margin-right: $space;
|
64
|
-
} @else {
|
65
|
-
margin-left: $space;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
|
-
@mixin space-y($space, $reverse: false) {
|
71
|
-
& > :not([hidden]) ~ :not([hidden]) {
|
72
|
-
@if $reverse {
|
73
|
-
margin-bottom: $space;
|
74
|
-
} @else {
|
75
|
-
margin-top: $space;
|
76
|
-
}
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
@mixin make-container($padding-x, $max-width) {
|
61
|
+
@mixin make-container($padding-x: $size-4) {
|
81
62
|
width: 100%;
|
82
63
|
padding-right: $padding-x;
|
83
64
|
padding-left: $padding-x;
|
84
65
|
margin-right: $size-auto;
|
85
66
|
margin-left: $size-auto;
|
86
|
-
max-width: $max-width;
|
87
67
|
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
.align--top {
|
2
|
+
vertical-align: top;
|
3
|
+
}
|
4
|
+
|
5
|
+
.align--middle {
|
6
|
+
vertical-align: middle;
|
7
|
+
}
|
8
|
+
|
9
|
+
.align--bottom {
|
10
|
+
vertical-align: bottom;
|
11
|
+
}
|
12
|
+
|
13
|
+
.align--left {
|
14
|
+
text-align: left;
|
15
|
+
}
|
16
|
+
|
17
|
+
.align--center {
|
18
|
+
text-align: center;
|
19
|
+
}
|
20
|
+
|
21
|
+
.align--right {
|
22
|
+
text-align: right;
|
23
|
+
}
|
24
|
+
|
25
|
+
.centered {
|
26
|
+
margin-left: auto;
|
27
|
+
margin-right: auto
|
28
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@import "sass-zero/variables/breakpoints";
|
2
|
+
@import "sass-zero/mixins";
|
3
|
+
|
4
|
+
.container {
|
5
|
+
@include make-container;
|
6
|
+
}
|
7
|
+
|
8
|
+
@media (min-width: $breakpoint-sm) {
|
9
|
+
.container {
|
10
|
+
max-width: $breakpoint-sm;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@media (min-width: $breakpoint-md) {
|
15
|
+
.container {
|
16
|
+
max-width: $breakpoint-md;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
@media (min-width: $breakpoint-lg) {
|
21
|
+
.container {
|
22
|
+
max-width: $breakpoint-lg;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
@media (min-width: $breakpoint-xl) {
|
27
|
+
.container {
|
28
|
+
max-width: $breakpoint-xl;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
@media (min-width: $breakpoint-2xl) {
|
33
|
+
.container {
|
34
|
+
max-width: $breakpoint-2xl;
|
35
|
+
}
|
36
|
+
}
|
@@ -10,15 +10,15 @@
|
|
10
10
|
flex-direction: column;
|
11
11
|
}
|
12
12
|
|
13
|
-
.flex--
|
13
|
+
.flex--centered {
|
14
14
|
justify-content: center;
|
15
15
|
}
|
16
16
|
|
17
|
-
.flex--
|
17
|
+
.flex--space-items {
|
18
18
|
justify-content: space-between;
|
19
19
|
}
|
20
20
|
|
21
|
-
.flex--
|
21
|
+
.flex--align-center {
|
22
22
|
align-items: center;
|
23
23
|
}
|
24
24
|
|
@@ -6,13 +6,26 @@
|
|
6
6
|
width: 100%;
|
7
7
|
}
|
8
8
|
|
9
|
+
.u-full-height {
|
10
|
+
height:100%
|
11
|
+
}
|
12
|
+
|
9
13
|
.u-min-width {
|
10
14
|
min-width: 0;
|
11
15
|
}
|
12
16
|
|
13
17
|
.u-disabled {
|
14
18
|
pointer-events: none;
|
15
|
-
opacity: $opacity-
|
19
|
+
opacity: $opacity-30;
|
20
|
+
}
|
21
|
+
|
22
|
+
.u-off-screen {
|
23
|
+
position: absolute;
|
24
|
+
left: -9999em;
|
25
|
+
}
|
26
|
+
|
27
|
+
.u-overflow-auto {
|
28
|
+
overflow: auto;
|
16
29
|
}
|
17
30
|
|
18
31
|
.u-unscrollable {
|
@@ -35,9 +48,25 @@
|
|
35
48
|
display: none !important;
|
36
49
|
}
|
37
50
|
|
38
|
-
.u-
|
39
|
-
|
51
|
+
.u-visibility-hidden {
|
52
|
+
visibility: hidden;
|
53
|
+
}
|
54
|
+
|
55
|
+
.u-pointer-events-n {
|
56
|
+
pointer-events: none;
|
57
|
+
}
|
58
|
+
|
59
|
+
.u-margin-centered {
|
40
60
|
margin-left: auto;
|
61
|
+
margin-right: auto;
|
62
|
+
}
|
63
|
+
|
64
|
+
.u-wrap {
|
65
|
+
display: block;
|
66
|
+
}
|
67
|
+
|
68
|
+
.u-nowrap {
|
69
|
+
white-space: nowrap;
|
41
70
|
}
|
42
71
|
|
43
72
|
.u-clearfix {
|
@@ -68,6 +97,14 @@
|
|
68
97
|
clear: right;
|
69
98
|
}
|
70
99
|
|
100
|
+
.u-hide {
|
101
|
+
display: none;
|
102
|
+
}
|
103
|
+
|
104
|
+
.u-hide-focus {
|
105
|
+
outline: none !important;
|
106
|
+
}
|
107
|
+
|
71
108
|
@media (max-width: $breakpoint-md - 1) {
|
72
109
|
.u-hide\@small {
|
73
110
|
display: none;
|
@@ -1,31 +1,41 @@
|
|
1
1
|
@import "sass-zero/variables/spacing";
|
2
|
-
@import "sass-zero/variables/colors";
|
3
2
|
@import "sass-zero/mixins";
|
4
3
|
|
5
4
|
.list--unindented {
|
6
|
-
padding-left: $size-
|
5
|
+
padding-left: $size-4;
|
6
|
+
}
|
7
|
+
|
8
|
+
.list--flush {
|
9
|
+
padding-left: $size-0;
|
7
10
|
}
|
8
11
|
|
9
12
|
.list--unbulleted {
|
13
|
+
padding-left: $size-0;
|
10
14
|
list-style: none;
|
11
15
|
}
|
12
16
|
|
13
|
-
.list--spaced {
|
14
|
-
|
17
|
+
.list--spaced > li + li {
|
18
|
+
margin-top: $size-2;
|
15
19
|
}
|
16
20
|
|
17
|
-
.list--
|
18
|
-
|
19
|
-
|
20
|
-
border-radius: $rounded;
|
21
|
+
.list--inside-bulleted {
|
22
|
+
padding-left: $size-0;
|
23
|
+
list-style-position: inside;
|
21
24
|
}
|
22
25
|
|
23
|
-
.list--ruled
|
24
|
-
padding: $size-3 $size-4;
|
26
|
+
.list--ruled-top {
|
25
27
|
border-top-width: $border;
|
26
28
|
}
|
27
29
|
|
28
30
|
.list--inline > li {
|
29
|
-
margin-right: $size-2;
|
30
31
|
display: inline-block;
|
31
32
|
}
|
33
|
+
|
34
|
+
.list--inline > li + li {
|
35
|
+
margin-left: $size-2;
|
36
|
+
}
|
37
|
+
|
38
|
+
.list--ruled > li {
|
39
|
+
padding: $size-4 $size-2;
|
40
|
+
border-top-width: $border;
|
41
|
+
}
|
@@ -1,15 +1,23 @@
|
|
1
|
-
.position-context {
|
1
|
+
.u-position-context {
|
2
2
|
position: relative;
|
3
3
|
}
|
4
4
|
|
5
|
-
.position {
|
5
|
+
.u-position {
|
6
6
|
position: absolute;
|
7
|
+
}
|
7
8
|
|
8
|
-
|
9
|
+
.u-position--right {
|
10
|
+
right: 0;
|
11
|
+
}
|
9
12
|
|
10
|
-
|
13
|
+
.u-position--left {
|
14
|
+
left: 0;
|
15
|
+
}
|
11
16
|
|
12
|
-
|
17
|
+
.u-position--top {
|
18
|
+
top: 0;
|
19
|
+
}
|
13
20
|
|
14
|
-
|
21
|
+
.u-position--bottom {
|
22
|
+
bottom: 0;
|
15
23
|
}
|