sass-zero 1.3.2 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.sass-zero-references.scss +0 -5
- data/Gemfile.lock +1 -1
- data/README.md +7 -6
- data/app/assets/stylesheets/sass-zero/_mixins.scss +3 -17
- data/app/assets/stylesheets/sass-zero/breadboard.scss +28 -35
- data/app/assets/stylesheets/sass-zero/utilities/_pad.scss +2 -2
- data/app/assets/stylesheets/sass-zero/utilities/_pull.scss +2 -2
- data/app/assets/stylesheets/sass-zero/utilities/_push.scss +2 -2
- data/app/assets/stylesheets/sass-zero/utilities/_text.scss +0 -16
- data/app/assets/stylesheets/sass-zero/variables/_border.scss +11 -11
- data/app/assets/stylesheets/sass-zero/variables/_sizing.scss +40 -36
- data/app/assets/stylesheets/sass-zero/variables/_typography.scss +9 -9
- data/example.html +35 -39
- data/lib/sass_zero/version.rb +1 -1
- data/screenshot.png +0 -0
- metadata +3 -3
- /data/app/assets/stylesheets/sass-zero/{_animations.scss → keyframes.scss} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
|
4
|
+
data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
|
7
|
+
data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9
|
data/.sass-zero-references.scss
CHANGED
@@ -725,11 +725,6 @@ $z-50: 50;
|
|
725
725
|
@mixin antialiased {}
|
726
726
|
@mixin subpixel-antialiased {}
|
727
727
|
@mixin progress-bar {}
|
728
|
-
|
729
|
-
// *******************************************************************
|
730
|
-
// Animations
|
731
|
-
// *******************************************************************
|
732
|
-
|
733
728
|
@mixin animate-spin {}
|
734
729
|
@mixin animate-ping {}
|
735
730
|
@mixin animate-pulse {}
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -16,6 +16,7 @@ Add these lines to your application.css:
|
|
16
16
|
```css
|
17
17
|
*= require sass-zero/base
|
18
18
|
*= require sass-zero/utilities
|
19
|
+
*= require sass-zero/keyframes
|
19
20
|
*= require sass-zero/breadboard
|
20
21
|
```
|
21
22
|
|
@@ -25,22 +26,22 @@ Instead of hand-picking values from a limitless pool any time you need to make a
|
|
25
26
|
|
26
27
|
#### Essential
|
27
28
|
|
28
|
-
- [
|
29
|
+
- [Sizing](app/assets/stylesheets/sass-zero/variables/_sizing.scss)
|
29
30
|
- [Colors](app/assets/stylesheets/sass-zero/variables/_colors.scss)
|
30
|
-
- [
|
31
|
+
- [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
|
31
32
|
- [Height](app/assets/stylesheets/sass-zero/variables/_height.scss)
|
32
|
-
- [
|
33
|
+
- [Border](app/assets/stylesheets/sass-zero/variables/_border.scss)
|
34
|
+
- [Effects](app/assets/stylesheets/sass-zero/variables/_effects.scss)
|
33
35
|
- [Typography](app/assets/stylesheets/sass-zero/variables/_typography.scss)
|
34
|
-
- [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
|
35
36
|
- [Z-Index](app/assets/stylesheets/sass-zero/variables/_zindex.scss)
|
36
37
|
|
37
38
|
#### Others
|
38
39
|
|
39
40
|
- [Breakpoints](app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
|
40
41
|
- [Filters](app/assets/stylesheets/sass-zero/variables/_filters.scss)
|
41
|
-
- [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
|
42
|
-
- [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
|
43
42
|
- [Transform](app/assets/stylesheets/sass-zero/variables/_transform.scss)
|
43
|
+
- [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
|
44
|
+
- [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
|
44
45
|
- [Transition](app/assets/stylesheets/sass-zero/variables/_transition.scss)
|
45
46
|
- [Mixins](app/assets/stylesheets/sass-zero/_mixins.scss)
|
46
47
|
|
@@ -1,16 +1,12 @@
|
|
1
1
|
@import "variables/sizing";
|
2
|
-
@import "animations";
|
3
2
|
|
4
3
|
// *******************************************************************
|
5
4
|
// General
|
6
5
|
// *******************************************************************
|
7
6
|
|
8
|
-
@mixin make-container($padding
|
9
|
-
width: 100%;
|
10
|
-
padding
|
11
|
-
padding-left: $padding-x;
|
12
|
-
margin-right: auto;
|
13
|
-
margin-left: auto;
|
7
|
+
@mixin make-container($padding: $size-4) {
|
8
|
+
width: 100%; margin: 0 auto;
|
9
|
+
padding: $padding;
|
14
10
|
}
|
15
11
|
|
16
12
|
@mixin ellipsis {
|
@@ -29,16 +25,6 @@
|
|
29
25
|
-moz-osx-font-smoothing: auto;
|
30
26
|
}
|
31
27
|
|
32
|
-
@mixin progress-bar {
|
33
|
-
::-webkit-progress-value {
|
34
|
-
@content;
|
35
|
-
}
|
36
|
-
|
37
|
-
::-moz-progress-bar {
|
38
|
-
@content;
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
28
|
// *******************************************************************
|
43
29
|
// Animations
|
44
30
|
// *******************************************************************
|
@@ -30,18 +30,23 @@ $radius-secondary: $rounded;
|
|
30
30
|
border-color: var(--color-border);
|
31
31
|
}
|
32
32
|
|
33
|
-
|
33
|
+
body {
|
34
34
|
accent-color: var(--color-primary);
|
35
35
|
background: var(--color-bg--main);
|
36
36
|
color: var(--color-text);
|
37
37
|
font-family: $font-family;
|
38
38
|
}
|
39
39
|
|
40
|
+
@media (max-width: $breakpoint-md - 1) {
|
41
|
+
body { font-size: $text-sm; }
|
42
|
+
}
|
43
|
+
|
40
44
|
.btn {
|
41
45
|
border-radius: $radius-primary;
|
42
46
|
border-width: $border;
|
43
47
|
display: inline-block;
|
44
|
-
padding: $size-
|
48
|
+
padding: $size-1-5 $size-4;
|
49
|
+
font-weight: $font-medium;
|
45
50
|
cursor: pointer;
|
46
51
|
|
47
52
|
&--primary {
|
@@ -81,7 +86,7 @@ html {
|
|
81
86
|
background-color: var(--color-bg--surface);
|
82
87
|
border-radius: $radius-secondary;
|
83
88
|
border-width: $border;
|
84
|
-
padding: $size-2
|
89
|
+
padding: $size-2-5;
|
85
90
|
width: $w-full;
|
86
91
|
|
87
92
|
&--select {
|
@@ -102,19 +107,19 @@ html {
|
|
102
107
|
.dropdown {
|
103
108
|
background-color: var(--color-bg--surface);
|
104
109
|
border-width: $border; border-radius: $radius-primary;
|
105
|
-
padding: $size-
|
110
|
+
padding: $size-6;
|
106
111
|
box-shadow: $shadow-lg;
|
107
112
|
position: absolute;
|
108
113
|
z-index: $z-10;
|
109
114
|
}
|
110
115
|
|
111
116
|
[type="checkbox"], [type="radio"] {
|
112
|
-
transform: scale(1.
|
117
|
+
transform: scale(1.7); margin: $size-1;
|
113
118
|
}
|
114
119
|
|
115
120
|
blockquote {
|
116
121
|
border-left-width: $border-4;
|
117
|
-
padding: $size-3
|
122
|
+
padding: $size-3;
|
118
123
|
}
|
119
124
|
|
120
125
|
code {
|
@@ -133,7 +138,7 @@ pre {
|
|
133
138
|
> code {
|
134
139
|
border-radius: $rounded-none;
|
135
140
|
display: block;
|
136
|
-
padding: $size-
|
141
|
+
padding: $size-3;
|
137
142
|
white-space: pre;
|
138
143
|
}
|
139
144
|
}
|
@@ -158,7 +163,7 @@ hr {
|
|
158
163
|
}
|
159
164
|
|
160
165
|
menu, ul, ol {
|
161
|
-
padding-left: $size-
|
166
|
+
padding-left: $size-8;
|
162
167
|
}
|
163
168
|
|
164
169
|
menu, ul {
|
@@ -173,26 +178,22 @@ dt {
|
|
173
178
|
font-weight: $font-bold;
|
174
179
|
}
|
175
180
|
|
176
|
-
|
177
|
-
margin-bottom: $size-
|
181
|
+
fieldset, .input {
|
182
|
+
margin-bottom: $size-6;
|
178
183
|
}
|
179
184
|
|
180
185
|
h1, h2, h3, h4, h5, h6, .hdg {
|
181
|
-
margin-bottom: $size-4;
|
182
|
-
}
|
183
|
-
|
184
|
-
fieldset, .input {
|
185
186
|
margin-bottom: $size-6;
|
186
187
|
}
|
187
188
|
|
188
|
-
table, progress, blockquote,
|
189
|
+
table, progress, blockquote, pre, menu, ul, ol, dl, p {
|
189
190
|
margin-bottom: $size-6;
|
190
191
|
}
|
191
192
|
|
192
193
|
dialog {
|
193
194
|
background-color: var(--color-bg--surface);
|
194
195
|
border-width: $border; border-radius: $radius-primary;
|
195
|
-
padding: $size-
|
196
|
+
padding: $size-6;
|
196
197
|
box-shadow: $shadow-lg;
|
197
198
|
color: inherit;
|
198
199
|
}
|
@@ -201,14 +202,6 @@ dialog::backdrop {
|
|
201
202
|
background-color: rgba($gray-500, $opacity-75);
|
202
203
|
}
|
203
204
|
|
204
|
-
progress {
|
205
|
-
background-color: var(--color-bg--main);
|
206
|
-
}
|
207
|
-
|
208
|
-
@include progress-bar {
|
209
|
-
background-color: var(--color-primary);
|
210
|
-
}
|
211
|
-
|
212
205
|
details {
|
213
206
|
display: inline-block;
|
214
207
|
}
|
@@ -221,13 +214,13 @@ summary::-webkit-details-marker {
|
|
221
214
|
display: none;
|
222
215
|
}
|
223
216
|
|
224
|
-
table
|
217
|
+
table {
|
225
218
|
width: $w-full;
|
226
219
|
}
|
227
220
|
|
228
221
|
td, th {
|
229
222
|
border-bottom-width: $border;
|
230
|
-
padding: $size-
|
223
|
+
padding: $size-4;
|
231
224
|
text-align: left;
|
232
225
|
}
|
233
226
|
|
@@ -236,26 +229,26 @@ h1, h2, h3, h4, h5, h6, .hdg {
|
|
236
229
|
line-height: $leading-tight;
|
237
230
|
}
|
238
231
|
|
239
|
-
h1, .hdg--
|
232
|
+
h1, .hdg--xx-large {
|
233
|
+
font-size: $text-5xl;
|
234
|
+
}
|
235
|
+
|
236
|
+
h2, .hdg--x-large {
|
240
237
|
font-size: $text-4xl;
|
241
238
|
}
|
242
239
|
|
243
|
-
|
240
|
+
h3, .hdg--large {
|
244
241
|
font-size: $text-3xl;
|
245
242
|
}
|
246
243
|
|
247
|
-
|
244
|
+
h4, .hdg--medium {
|
248
245
|
font-size: $text-2xl;
|
249
246
|
}
|
250
247
|
|
251
|
-
|
248
|
+
h5, .hdg--small {
|
252
249
|
font-size: $text-xl;
|
253
250
|
}
|
254
251
|
|
255
|
-
|
252
|
+
h6, .hdg--x-small {
|
256
253
|
font-size: $text-lg;
|
257
254
|
}
|
258
|
-
|
259
|
-
h6, .hdg--base {
|
260
|
-
font-size: $text-base;
|
261
|
-
}
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../variables/sizing";
|
2
|
+
|
1
3
|
// *******************************************************************
|
2
4
|
// Pad Utilities
|
3
5
|
// .pad-[xs|sm|md|lg|xl]--top
|
@@ -6,8 +8,6 @@
|
|
6
8
|
// .pad-[xs|sm|md|lg|xl]--left
|
7
9
|
// *******************************************************************
|
8
10
|
|
9
|
-
@import "../variables/sizing";
|
10
|
-
|
11
11
|
@each $scale, $size in $size-map {
|
12
12
|
.pad-#{$scale}--top {
|
13
13
|
padding-top: $size !important;
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../variables/sizing";
|
2
|
+
|
1
3
|
// *******************************************************************
|
2
4
|
// Pull Utilities
|
3
5
|
// .pull-[xs|sm|md|lg|xl]--top
|
@@ -6,8 +8,6 @@
|
|
6
8
|
// .pull-[xs|sm|md|lg|xl]--left
|
7
9
|
// *******************************************************************
|
8
10
|
|
9
|
-
@import "../variables/sizing";
|
10
|
-
|
11
11
|
@each $scale, $size in $size-map {
|
12
12
|
.pull-#{$scale}--top {
|
13
13
|
margin-top: $size * -1 !important;
|
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../variables/sizing";
|
2
|
+
|
1
3
|
// *******************************************************************
|
2
4
|
// Push Utilities
|
3
5
|
// .push-[xs|sm|md|lg|xl]
|
@@ -9,8 +11,6 @@
|
|
9
11
|
// .push-[xs|sm|md|lg|xl]--sides
|
10
12
|
// *******************************************************************
|
11
13
|
|
12
|
-
@import "../variables/sizing";
|
13
|
-
|
14
14
|
@each $scale, $size in $size-map {
|
15
15
|
.push-#{$scale} {
|
16
16
|
margin: $size !important;
|
@@ -98,22 +98,6 @@
|
|
98
98
|
font-size: $text-5xl;
|
99
99
|
}
|
100
100
|
|
101
|
-
.txt--6xl {
|
102
|
-
font-size: $text-6xl;
|
103
|
-
}
|
104
|
-
|
105
|
-
.txt--7xl {
|
106
|
-
font-size: $text-7xl;
|
107
|
-
}
|
108
|
-
|
109
|
-
.txt--8xl {
|
110
|
-
font-size: $text-8xl;
|
111
|
-
}
|
112
|
-
|
113
|
-
.txt--9xl {
|
114
|
-
font-size: $text-9xl;
|
115
|
-
}
|
116
|
-
|
117
101
|
.undecorated {
|
118
102
|
color: inherit;
|
119
103
|
text-decoration: none;
|
@@ -1,3 +1,14 @@
|
|
1
|
+
// *******************************************************************
|
2
|
+
// Border Width
|
3
|
+
// Variables for controlling the width of an element's borders.
|
4
|
+
// border-width: $border;
|
5
|
+
// *******************************************************************
|
6
|
+
$border-0: 0;
|
7
|
+
$border: 1px;
|
8
|
+
$border-2: 2px;
|
9
|
+
$border-4: 4px;
|
10
|
+
$border-8: 8px;
|
11
|
+
|
1
12
|
// *******************************************************************
|
2
13
|
// Border Style
|
3
14
|
// Variables for controlling the border radius of an element.
|
@@ -12,14 +23,3 @@ $rounded-xl: 0.75rem;
|
|
12
23
|
$rounded-2xl: 1rem;
|
13
24
|
$rounded-3xl: 1.5rem;
|
14
25
|
$rounded-full: 9999px;
|
15
|
-
|
16
|
-
// *******************************************************************
|
17
|
-
// Border Width
|
18
|
-
// Variables for controlling the width of an element's borders.
|
19
|
-
// border-width: $border;
|
20
|
-
// *******************************************************************
|
21
|
-
$border-0: 0;
|
22
|
-
$border: 1px;
|
23
|
-
$border-2: 2px;
|
24
|
-
$border-4: 4px;
|
25
|
-
$border-8: 8px;
|
@@ -2,42 +2,46 @@
|
|
2
2
|
// Default sizing scale
|
3
3
|
// By default, SASS-ZERO includes a generous and comprehensive numeric sizing scale.
|
4
4
|
// *******************************************************************
|
5
|
-
$size-px:
|
6
|
-
$size-0:
|
7
|
-
$size-
|
8
|
-
$size-
|
9
|
-
$size-
|
10
|
-
$size-
|
11
|
-
$size-5:
|
12
|
-
$size-
|
13
|
-
$size-
|
14
|
-
$size-
|
15
|
-
$size-
|
16
|
-
$size-
|
17
|
-
$size-
|
18
|
-
$size-
|
19
|
-
$size-
|
20
|
-
$size-
|
21
|
-
$size-
|
22
|
-
$size-
|
23
|
-
$size-
|
24
|
-
$size-
|
25
|
-
$size-
|
26
|
-
$size-
|
27
|
-
$size-
|
28
|
-
$size-
|
29
|
-
$size-
|
30
|
-
$size-
|
31
|
-
$size-
|
32
|
-
$size-
|
33
|
-
$size-
|
34
|
-
$size-
|
35
|
-
$size-
|
5
|
+
$size-px: 1px;
|
6
|
+
$size-0: 0;
|
7
|
+
$size-0-5: 0.125rem;
|
8
|
+
$size-1: 0.25rem;
|
9
|
+
$size-1-5: 0.375rem;
|
10
|
+
$size-2: 0.5rem;
|
11
|
+
$size-2-5: 0.625rem;
|
12
|
+
$size-3: 0.75rem;
|
13
|
+
$size-3-5: 0.875rem;
|
14
|
+
$size-4: 1rem;
|
15
|
+
$size-5: 1.25rem;
|
16
|
+
$size-6: 1.5rem;
|
17
|
+
$size-7: 1.75rem;
|
18
|
+
$size-8: 2rem;
|
19
|
+
$size-9: 2.25rem;
|
20
|
+
$size-10: 2.5rem;
|
21
|
+
$size-11: 2.75rem;
|
22
|
+
$size-12: 3rem;
|
23
|
+
$size-14: 3.5rem;
|
24
|
+
$size-16: 4rem;
|
25
|
+
$size-20: 5rem;
|
26
|
+
$size-24: 6rem;
|
27
|
+
$size-28: 7rem;
|
28
|
+
$size-32: 8rem;
|
29
|
+
$size-36: 9rem;
|
30
|
+
$size-40: 10rem;
|
31
|
+
$size-44: 11rem;
|
32
|
+
$size-48: 12rem;
|
33
|
+
$size-52: 13rem;
|
34
|
+
$size-56: 14rem;
|
35
|
+
$size-60: 15rem;
|
36
|
+
$size-64: 16rem;
|
37
|
+
$size-72: 18rem;
|
38
|
+
$size-80: 20rem;
|
39
|
+
$size-96: 24rem;
|
36
40
|
|
37
41
|
$size-map: (
|
38
|
-
"xs":
|
39
|
-
"sm":
|
40
|
-
"md":
|
41
|
-
"lg":
|
42
|
-
"xl":
|
42
|
+
"xs": $size-1-5,
|
43
|
+
"sm": $size-3,
|
44
|
+
"md": $size-6,
|
45
|
+
"lg": $size-9,
|
46
|
+
"xl": $size-12
|
43
47
|
);
|
@@ -1,12 +1,3 @@
|
|
1
|
-
// *******************************************************************
|
2
|
-
// Font Family
|
3
|
-
// Variables for controlling the font family of an element.
|
4
|
-
// font-family: $font-sans;
|
5
|
-
// *******************************************************************
|
6
|
-
$font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
7
|
-
$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
|
8
|
-
$font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
9
|
-
|
10
1
|
// *******************************************************************
|
11
2
|
// Font Size
|
12
3
|
// Variables for controlling the font size of an element.
|
@@ -61,6 +52,15 @@ $leading-8: 2rem;
|
|
61
52
|
$leading-9: 2.25rem;
|
62
53
|
$leading-10: 2.5rem;
|
63
54
|
|
55
|
+
// *******************************************************************
|
56
|
+
// Font Family
|
57
|
+
// Variables for controlling the font family of an element.
|
58
|
+
// font-family: $font-sans;
|
59
|
+
// *******************************************************************
|
60
|
+
$font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
61
|
+
$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
|
62
|
+
$font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
63
|
+
|
64
64
|
// *******************************************************************
|
65
65
|
// Letter Spacing
|
66
66
|
// Variables for controlling the tracking (letter spacing) of an element.
|
data/example.html
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
<main class="container container--lg" style="background
|
1
|
+
<main class="container container--lg" style="background: var(--color-bg--surface);">
|
2
2
|
<div class="push-md--bottom">
|
3
3
|
<div class="push-sm--bottom">
|
4
4
|
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
|
@@ -33,7 +33,7 @@
|
|
33
33
|
<details class="u-position-context">
|
34
34
|
<summary class="btn btn--secondary">Dropdown Button</summary>
|
35
35
|
<div class="dropdown push-xs--top u-position--right">
|
36
|
-
<ul class="list--
|
36
|
+
<ul class="list--unbulleted u-nowrap flush">
|
37
37
|
<li>Unordered list item 1</li>
|
38
38
|
<li>Unordered list item 2</li>
|
39
39
|
<li>Unordered list item 3</li>
|
@@ -46,10 +46,10 @@
|
|
46
46
|
</div>
|
47
47
|
|
48
48
|
<form class="push-md--bottom">
|
49
|
-
<label for="nameField" class="u-display-b txt--bold">Name</label>
|
50
|
-
<input type="text" placeholder="
|
49
|
+
<label for="nameField" class="u-display-b txt--bold push-xs--bottom">Name</label>
|
50
|
+
<input type="text" placeholder="Lázaro Nixon" id="nameField" class="input">
|
51
51
|
|
52
|
-
<label for="iceCreamField" class="u-display-b txt--bold">Choose a flavor:</label>
|
52
|
+
<label for="iceCreamField" class="u-display-b txt--bold push-xs--bottom">Choose a flavor:</label>
|
53
53
|
<input list="iceCreamFlavors" id="iceCreamField" class="input" />
|
54
54
|
<datalist id="iceCreamFlavors">
|
55
55
|
<option value="Chocolate">
|
@@ -59,7 +59,7 @@
|
|
59
59
|
<option value="Vanilla">
|
60
60
|
</datalist>
|
61
61
|
|
62
|
-
<label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
|
62
|
+
<label for="ageRangeField" class="u-display-b txt--bold push-xs--bottom">Age Range</label>
|
63
63
|
<select id="ageRangeField" class="input input--select">
|
64
64
|
<option value="0-13">0-13</option>
|
65
65
|
<option value="14-17">14-17</option>
|
@@ -67,17 +67,17 @@
|
|
67
67
|
<option value="24+">24+</option>
|
68
68
|
</select>
|
69
69
|
|
70
|
-
<label for="commentField" class="u-display-b txt--bold">Comment</label>
|
71
|
-
<textarea placeholder="Hi
|
70
|
+
<label for="commentField" class="u-display-b txt--bold push-xs--bottom">Comment</label>
|
71
|
+
<textarea placeholder="Hi Nixon …" id="commentField" rows="3" class="input"></textarea>
|
72
72
|
|
73
73
|
<fieldset>
|
74
|
-
<legend class="txt--bold">Choose your options</legend>
|
74
|
+
<legend class="txt--bold push-xs--bottom">Choose your options</legend>
|
75
75
|
|
76
|
-
<div>
|
76
|
+
<div class="push-xs--bottom">
|
77
77
|
<input type="checkbox" id="option1" name="option1" value="1" checked>
|
78
78
|
<label for="option1" class="u-display-ib">Option 1</label>
|
79
79
|
</div>
|
80
|
-
<div>
|
80
|
+
<div class="push-xs--bottom">
|
81
81
|
<input type="checkbox" id="option2" name="option2" value="2">
|
82
82
|
<label for="option2" class="u-display-ib">Option 2</label>
|
83
83
|
</div>
|
@@ -88,13 +88,13 @@
|
|
88
88
|
</fieldset>
|
89
89
|
|
90
90
|
<fieldset>
|
91
|
-
<legend class="txt--bold">Choose your option</legend>
|
91
|
+
<legend class="txt--bold push-xs--bottom">Choose your option</legend>
|
92
92
|
|
93
|
-
<div>
|
93
|
+
<div class="push-xs--bottom">
|
94
94
|
<input type="radio" id="radio1" name="radio" value="1" checked>
|
95
95
|
<label for="radio1" class="u-display-ib">Option 1</label>
|
96
96
|
</div>
|
97
|
-
<div>
|
97
|
+
<div class="push-xs--bottom">
|
98
98
|
<input type="radio" id="radio2" name="radio" value="2">
|
99
99
|
<label for="radio2" class="u-display-ib">Option 2</label>
|
100
100
|
</div>
|
@@ -107,7 +107,7 @@
|
|
107
107
|
<input type="submit" value="Send" class="btn btn--primary">
|
108
108
|
</form>
|
109
109
|
|
110
|
-
<table
|
110
|
+
<table>
|
111
111
|
<thead>
|
112
112
|
<tr>
|
113
113
|
<th>Name</th>
|
@@ -132,24 +132,23 @@
|
|
132
132
|
</tbody>
|
133
133
|
</table>
|
134
134
|
|
135
|
-
<
|
136
|
-
<
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
<
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
<
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
</div>
|
135
|
+
<ul class="list--unindented">
|
136
|
+
<li>Unordered list item 1</li>
|
137
|
+
<li>Unordered list item 2</li>
|
138
|
+
<li>Unordered list item 3</li>
|
139
|
+
</ul>
|
140
|
+
|
141
|
+
<ol class="list--unindented">
|
142
|
+
<li>Ordered list item 1</li>
|
143
|
+
<li>Ordered list item 2</li>
|
144
|
+
<li>Ordered list item 3</li>
|
145
|
+
</ol>
|
146
|
+
|
147
|
+
<dl>
|
148
|
+
<dt>Description lists</dt>
|
149
|
+
<dd>A description list is perfect for defining terms.</dd>
|
150
|
+
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
151
|
+
</dl>
|
153
152
|
|
154
153
|
<div class="push-md--bottom">
|
155
154
|
<code>.block { color: #9b4dca; }</code>
|
@@ -158,16 +157,13 @@
|
|
158
157
|
<pre><code>.block { color: #9b4dca; }</code></pre>
|
159
158
|
|
160
159
|
<blockquote>
|
161
|
-
<p class="flush
|
160
|
+
<p class="flush">Friends don’t spy; true friendship is about privacy, too.</p>
|
162
161
|
<cite class="txt--sm">– Stephen King</cite>
|
163
162
|
</blockquote>
|
164
163
|
|
165
|
-
<
|
166
|
-
<label for="progress" class="u-display-b txt--bold">Progress</label>
|
167
|
-
<progress id="progress" max="100" value="70">70%</progress>
|
168
|
-
</div>
|
164
|
+
<hr>
|
169
165
|
|
170
|
-
<div style="height:
|
166
|
+
<div style="height: 85px;">
|
171
167
|
<dialog open>
|
172
168
|
<form method="dialog">
|
173
169
|
<span>This is a native dialog with a close button.</span>
|
data/lib/sass_zero/version.rb
CHANGED
data/screenshot.png
CHANGED
Binary file
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass-zero
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-07-
|
11
|
+
date: 2023-07-13 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|
@@ -25,11 +25,11 @@ files:
|
|
25
25
|
- Gemfile.lock
|
26
26
|
- README.md
|
27
27
|
- Rakefile
|
28
|
-
- app/assets/stylesheets/sass-zero/_animations.scss
|
29
28
|
- app/assets/stylesheets/sass-zero/_mixins.scss
|
30
29
|
- app/assets/stylesheets/sass-zero/_variables.scss
|
31
30
|
- app/assets/stylesheets/sass-zero/base.scss
|
32
31
|
- app/assets/stylesheets/sass-zero/breadboard.scss
|
32
|
+
- app/assets/stylesheets/sass-zero/keyframes.scss
|
33
33
|
- app/assets/stylesheets/sass-zero/utilities.scss
|
34
34
|
- app/assets/stylesheets/sass-zero/utilities/_align.scss
|
35
35
|
- app/assets/stylesheets/sass-zero/utilities/_border.scss
|
File without changes
|