sass-zero 0.0.46 → 0.0.47

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a70d79a12adc6f8ce1f1e8cb6010376853a05f3811220d802bdba66807af5f73
4
- data.tar.gz: 468f771702b25513dd37bfb8fc80e3ebbc61816db3680b3bc3839976676eaafb
3
+ metadata.gz: 2a31299ba5a18323b097072ca19ed18e074a33cceae5d52d8dcb7defdba8ac31
4
+ data.tar.gz: d21a8567351022034bbcf179130c9dd23a848e42a134419758dc5a902417b129
5
5
  SHA512:
6
- metadata.gz: d1b54a51fe3aff5ca9203f97ac299afbef75c7fc823d6809ef33c8157856d253126d215bf635eb34ffd53e70387b682cc4b4f9db942ca7a21d8450302127d199
7
- data.tar.gz: dc64fedbee094996ad563e765e3edbd70e53a659d653437e26baea00abe691b925e564929c1932c22e0d3411d0e7855b5e6806103a13b302eb4213b592a490e7
6
+ metadata.gz: 99218a1afd73ea6f469085ba8ce0540010fcc50a47b36baa03f1e9a59c5f2414077e0d99871ae15165f409306636ea49236209d82b72c7c8330f80c23869c9fa
7
+ data.tar.gz: a93203f808882fdc36b682499cbfd7792e7c40c7d501b966b91dee5a0387b18404d8cf9c92b9f748ac570b7551a87639e61a94411eecabddfd48bc33b263c846
data/Example.html CHANGED
@@ -26,8 +26,8 @@
26
26
  <div class="push-md--bottom">
27
27
  <label for="nameField" class="u-display-b txt--bold">Name</label>
28
28
  <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
29
- <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
30
29
 
30
+ <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
31
31
  <select id="ageRangeField" class="input input--select">
32
32
  <option value="0-13">0-13</option>
33
33
  <option value="14-17">14-17</option>
data/README.md CHANGED
@@ -46,6 +46,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
46
46
  - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
47
47
  - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/typography.scss)
48
48
  - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
49
+ - [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
49
50
  - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
50
51
 
51
52
 
@@ -1,349 +1,285 @@
1
- /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
1
+ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
2
 
3
- /* Document
4
- ========================================================================== */
3
+ /*
4
+ Document
5
+ ========
6
+ */
5
7
 
6
8
  /**
7
- * 1. Correct the line height in all browsers.
8
- * 2. Prevent adjustments of font size after orientation changes in iOS.
9
- */
9
+ Use a better box model (opinionated).
10
+ */
10
11
 
11
- html {
12
- line-height: 1.15; /* 1 */
13
- -webkit-text-size-adjust: 100%; /* 2 */
12
+ *,
13
+ ::before,
14
+ ::after {
15
+ box-sizing: border-box;
14
16
  }
15
17
 
16
- /* Sections
17
- ========================================================================== */
18
-
19
18
  /**
20
- * Remove the margin in all browsers.
21
- */
19
+ 1. Correct the line height in all browsers.
20
+ 2. Prevent adjustments of font size after orientation changes in iOS.
21
+ 3. Use a more readable tab size (opinionated).
22
+ */
22
23
 
23
- body {
24
- margin: 0;
24
+ html {
25
+ line-height: 1.15; /* 1 */
26
+ -webkit-text-size-adjust: 100%; /* 2 */
27
+ -moz-tab-size: 4; /* 3 */
28
+ tab-size: 4; /* 3 */
25
29
  }
26
30
 
27
- /**
28
- * Render the `main` element consistently in IE.
29
- */
30
-
31
- main {
32
- display: block;
33
- }
31
+ /*
32
+ Sections
33
+ ========
34
+ */
34
35
 
35
36
  /**
36
- * Correct the font size and margin on `h1` elements within `section` and
37
- * `article` contexts in Chrome, Firefox, and Safari.
38
- */
37
+ 1. Remove the margin in all browsers.
38
+ 2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
39
+ */
39
40
 
40
- h1 {
41
- font-size: 2em;
42
- margin: 0.67em 0;
41
+ body {
42
+ margin: 0; /* 1 */
43
+ font-family:
44
+ system-ui,
45
+ -apple-system, /* Firefox supports this but not yet `system-ui` */
46
+ 'Segoe UI',
47
+ Roboto,
48
+ Helvetica,
49
+ Arial,
50
+ sans-serif,
51
+ 'Apple Color Emoji',
52
+ 'Segoe UI Emoji'; /* 2 */
43
53
  }
44
54
 
45
- /* Grouping content
46
- ========================================================================== */
55
+ /*
56
+ Grouping content
57
+ ================
58
+ */
47
59
 
48
60
  /**
49
- * 1. Add the correct box sizing in Firefox.
50
- * 2. Show the overflow in Edge and IE.
51
- */
61
+ 1. Add the correct height in Firefox.
62
+ 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
63
+ */
52
64
 
53
65
  hr {
54
- box-sizing: content-box; /* 1 */
55
- height: 0; /* 1 */
56
- overflow: visible; /* 2 */
57
- }
58
-
59
- /**
60
- * 1. Correct the inheritance and scaling of font size in all browsers.
61
- * 2. Correct the odd `em` font sizing in all browsers.
62
- */
63
-
64
- pre {
65
- font-family: monospace, monospace; /* 1 */
66
- font-size: 1em; /* 2 */
66
+ height: 0; /* 1 */
67
+ color: inherit; /* 2 */
67
68
  }
68
69
 
69
- /* Text-level semantics
70
- ========================================================================== */
71
-
72
- /**
73
- * Remove the gray background on active links in IE 10.
74
- */
75
-
76
- a {
77
- background-color: transparent;
78
- }
70
+ /*
71
+ Text-level semantics
72
+ ====================
73
+ */
79
74
 
80
75
  /**
81
- * 1. Remove the bottom border in Chrome 57-
82
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83
- */
76
+ Add the correct text decoration in Chrome, Edge, and Safari.
77
+ */
84
78
 
85
79
  abbr[title] {
86
- border-bottom: none; /* 1 */
87
- text-decoration: underline; /* 2 */
88
- text-decoration: underline dotted; /* 2 */
80
+ text-decoration: underline dotted;
89
81
  }
90
82
 
91
83
  /**
92
- * Add the correct font weight in Chrome, Edge, and Safari.
93
- */
84
+ Add the correct font weight in Edge and Safari.
85
+ */
94
86
 
95
87
  b,
96
88
  strong {
97
- font-weight: bolder;
89
+ font-weight: bolder;
98
90
  }
99
91
 
100
92
  /**
101
- * 1. Correct the inheritance and scaling of font size in all browsers.
102
- * 2. Correct the odd `em` font sizing in all browsers.
103
- */
93
+ 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
94
+ 2. Correct the odd 'em' font sizing in all browsers.
95
+ */
104
96
 
105
97
  code,
106
98
  kbd,
107
- samp {
108
- font-family: monospace, monospace; /* 1 */
109
- font-size: 1em; /* 2 */
99
+ samp,
100
+ pre {
101
+ font-family:
102
+ ui-monospace,
103
+ SFMono-Regular,
104
+ Consolas,
105
+ 'Liberation Mono',
106
+ Menlo,
107
+ monospace; /* 1 */
108
+ font-size: 1em; /* 2 */
110
109
  }
111
110
 
112
111
  /**
113
- * Add the correct font size in all browsers.
114
- */
112
+ Add the correct font size in all browsers.
113
+ */
115
114
 
116
115
  small {
117
- font-size: 80%;
116
+ font-size: 80%;
118
117
  }
119
118
 
120
119
  /**
121
- * Prevent `sub` and `sup` elements from affecting the line height in
122
- * all browsers.
123
- */
120
+ Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
121
+ */
124
122
 
125
123
  sub,
126
124
  sup {
127
- font-size: 75%;
128
- line-height: 0;
129
- position: relative;
130
- vertical-align: baseline;
125
+ font-size: 75%;
126
+ line-height: 0;
127
+ position: relative;
128
+ vertical-align: baseline;
131
129
  }
132
130
 
133
131
  sub {
134
- bottom: -0.25em;
132
+ bottom: -0.25em;
135
133
  }
136
134
 
137
135
  sup {
138
- top: -0.5em;
136
+ top: -0.5em;
139
137
  }
140
138
 
141
- /* Embedded content
142
- ========================================================================== */
139
+ /*
140
+ Tabular data
141
+ ============
142
+ */
143
143
 
144
144
  /**
145
- * Remove the border on images inside links in IE 10.
146
- */
145
+ 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
146
+ 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
147
+ */
147
148
 
148
- img {
149
- border-style: none;
149
+ table {
150
+ text-indent: 0; /* 1 */
151
+ border-color: inherit; /* 2 */
150
152
  }
151
153
 
152
- /* Forms
153
- ========================================================================== */
154
+ /*
155
+ Forms
156
+ =====
157
+ */
154
158
 
155
159
  /**
156
- * 1. Change the font styles in all browsers.
157
- * 2. Remove the margin in Firefox and Safari.
158
- */
160
+ 1. Change the font styles in all browsers.
161
+ 2. Remove the margin in Firefox and Safari.
162
+ */
159
163
 
160
164
  button,
161
165
  input,
162
166
  optgroup,
163
167
  select,
164
168
  textarea {
165
- font-family: inherit; /* 1 */
166
- font-size: 100%; /* 1 */
167
- line-height: 1.15; /* 1 */
168
- margin: 0; /* 2 */
169
+ font-family: inherit; /* 1 */
170
+ font-size: 100%; /* 1 */
171
+ line-height: 1.15; /* 1 */
172
+ margin: 0; /* 2 */
169
173
  }
170
174
 
171
175
  /**
172
- * Show the overflow in IE.
173
- * 1. Show the overflow in Edge.
174
- */
176
+ Remove the inheritance of text transform in Edge and Firefox.
177
+ */
175
178
 
176
179
  button,
177
- input { /* 1 */
178
- overflow: visible;
180
+ select {
181
+ text-transform: none;
179
182
  }
180
183
 
181
184
  /**
182
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
183
- * 1. Remove the inheritance of text transform in Firefox.
184
- */
185
+ Correct the inability to style clickable types in iOS and Safari.
186
+ */
185
187
 
186
188
  button,
187
- select { /* 1 */
188
- text-transform: none;
189
+ [type='button'],
190
+ [type='reset'],
191
+ [type='submit'] {
192
+ -webkit-appearance: button;
189
193
  }
190
194
 
191
195
  /**
192
- * Correct the inability to style clickable types in iOS and Safari.
193
- */
196
+ Remove the inner border and padding in Firefox.
197
+ */
194
198
 
195
- button,
196
- [type="button"],
197
- [type="reset"],
198
- [type="submit"] {
199
- -webkit-appearance: button;
199
+ ::-moz-focus-inner {
200
+ border-style: none;
201
+ padding: 0;
200
202
  }
201
203
 
202
204
  /**
203
- * Remove the inner border and padding in Firefox.
204
- */
205
-
206
- button::-moz-focus-inner,
207
- [type="button"]::-moz-focus-inner,
208
- [type="reset"]::-moz-focus-inner,
209
- [type="submit"]::-moz-focus-inner {
210
- border-style: none;
211
- padding: 0;
212
- }
205
+ Restore the focus styles unset by the previous rule.
206
+ */
213
207
 
214
- /**
215
- * Restore the focus styles unset by the previous rule.
216
- */
217
-
218
- button:-moz-focusring,
219
- [type="button"]:-moz-focusring,
220
- [type="reset"]:-moz-focusring,
221
- [type="submit"]:-moz-focusring {
222
- outline: 1px dotted ButtonText;
208
+ :-moz-focusring {
209
+ outline: 1px dotted ButtonText;
223
210
  }
224
211
 
225
212
  /**
226
- * Correct the padding in Firefox.
227
- */
213
+ Remove the additional ':invalid' styles in Firefox.
214
+ See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
215
+ */
228
216
 
229
- fieldset {
230
- padding: 0.35em 0.75em 0.625em;
217
+ :-moz-ui-invalid {
218
+ box-shadow: none;
231
219
  }
232
220
 
233
221
  /**
234
- * 1. Correct the text wrapping in Edge and IE.
235
- * 2. Correct the color inheritance from `fieldset` elements in IE.
236
- * 3. Remove the padding so developers are not caught out when they zero out
237
- * `fieldset` elements in all browsers.
238
- */
222
+ Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
223
+ */
239
224
 
240
225
  legend {
241
- box-sizing: border-box; /* 1 */
242
- color: inherit; /* 2 */
243
- display: table; /* 1 */
244
- max-width: 100%; /* 1 */
245
- padding: 0; /* 3 */
246
- white-space: normal; /* 1 */
226
+ padding: 0;
247
227
  }
248
228
 
249
229
  /**
250
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251
- */
230
+ Add the correct vertical alignment in Chrome and Firefox.
231
+ */
252
232
 
253
233
  progress {
254
- vertical-align: baseline;
255
- }
256
-
257
- /**
258
- * Remove the default vertical scrollbar in IE 10+.
259
- */
260
-
261
- textarea {
262
- overflow: auto;
263
- }
264
-
265
- /**
266
- * 1. Add the correct box sizing in IE 10.
267
- * 2. Remove the padding in IE 10.
268
- */
269
-
270
- [type="checkbox"],
271
- [type="radio"] {
272
- box-sizing: border-box; /* 1 */
273
- padding: 0; /* 2 */
234
+ vertical-align: baseline;
274
235
  }
275
236
 
276
237
  /**
277
- * Correct the cursor style of increment and decrement buttons in Chrome.
278
- */
238
+ Correct the cursor style of increment and decrement buttons in Safari.
239
+ */
279
240
 
280
- [type="number"]::-webkit-inner-spin-button,
281
- [type="number"]::-webkit-outer-spin-button {
282
- height: auto;
241
+ ::-webkit-inner-spin-button,
242
+ ::-webkit-outer-spin-button {
243
+ height: auto;
283
244
  }
284
245
 
285
246
  /**
286
- * 1. Correct the odd appearance in Chrome and Safari.
287
- * 2. Correct the outline style in Safari.
288
- */
247
+ 1. Correct the odd appearance in Chrome and Safari.
248
+ 2. Correct the outline style in Safari.
249
+ */
289
250
 
290
- [type="search"] {
291
- -webkit-appearance: textfield; /* 1 */
292
- outline-offset: -2px; /* 2 */
251
+ [type='search'] {
252
+ -webkit-appearance: textfield; /* 1 */
253
+ outline-offset: -2px; /* 2 */
293
254
  }
294
255
 
295
256
  /**
296
- * Remove the inner padding in Chrome and Safari on macOS.
297
- */
257
+ Remove the inner padding in Chrome and Safari on macOS.
258
+ */
298
259
 
299
- [type="search"]::-webkit-search-decoration {
300
- -webkit-appearance: none;
260
+ ::-webkit-search-decoration {
261
+ -webkit-appearance: none;
301
262
  }
302
263
 
303
264
  /**
304
- * 1. Correct the inability to style clickable types in iOS and Safari.
305
- * 2. Change font properties to `inherit` in Safari.
306
- */
265
+ 1. Correct the inability to style clickable types in iOS and Safari.
266
+ 2. Change font properties to 'inherit' in Safari.
267
+ */
307
268
 
308
269
  ::-webkit-file-upload-button {
309
- -webkit-appearance: button; /* 1 */
310
- font: inherit; /* 2 */
270
+ -webkit-appearance: button; /* 1 */
271
+ font: inherit; /* 2 */
311
272
  }
312
273
 
313
- /* Interactive
314
- ========================================================================== */
315
-
316
274
  /*
317
- * Add the correct display in Edge, IE 10+, and Firefox.
318
- */
319
-
320
- details {
321
- display: block;
322
- }
275
+ Interactive
276
+ ===========
277
+ */
323
278
 
324
279
  /*
325
- * Add the correct display in all browsers.
326
- */
280
+ Add the correct display in Chrome and Safari.
281
+ */
327
282
 
328
283
  summary {
329
- display: list-item;
330
- }
331
-
332
- /* Misc
333
- ========================================================================== */
334
-
335
- /**
336
- * Add the correct display in IE 10+.
337
- */
338
-
339
- template {
340
- display: none;
341
- }
342
-
343
- /**
344
- * Add the correct display in IE 10.
345
- */
346
-
347
- [hidden] {
348
- display: none;
284
+ display: list-item;
349
285
  }
@@ -32,16 +32,6 @@ button {
32
32
  background-image: none;
33
33
  }
34
34
 
35
- /**
36
- * Work around a Firefox/IE bug where the transparent `button` background
37
- * results in a loss of the default `button` focus styles.
38
- */
39
-
40
- button:focus {
41
- outline: 1px dotted;
42
- outline: 5px auto -webkit-focus-ring-color;
43
- }
44
-
45
35
  fieldset {
46
36
  margin: 0;
47
37
  padding: 0;
@@ -144,6 +134,7 @@ textarea {
144
134
 
145
135
  input::placeholder,
146
136
  textarea::placeholder {
137
+ opacity: 1;
147
138
  color: $gray-400;
148
139
  }
149
140
 
@@ -152,6 +143,18 @@ button,
152
143
  cursor: pointer;
153
144
  }
154
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
+
155
158
  table {
156
159
  border-collapse: collapse;
157
160
  }
@@ -209,11 +212,20 @@ samp {
209
212
  }
210
213
 
211
214
  /**
212
- * Make replaced elements `display: block` by default as that's
213
- * the behavior you want almost all of the time. Inspired by
214
- * CSS Remedy, with `svg` added as well.
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.
215
218
  *
216
- * https://github.com/mozdevs/cssremedy/issues/14
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
217
229
  */
218
230
 
219
231
  img,
@@ -224,13 +236,13 @@ audio,
224
236
  iframe,
225
237
  embed,
226
238
  object {
227
- display: block;
228
- vertical-align: middle;
239
+ display: block; /* 1 */
240
+ vertical-align: middle; /* 2 */
229
241
  }
230
242
 
231
243
  /**
232
244
  * Constrain images and videos to the parent width and preserve
233
- * their instrinsic aspect ratio.
245
+ * their intrinsic aspect ratio.
234
246
  *
235
247
  * https://github.com/mozdevs/cssremedy/issues/14
236
248
  */
@@ -240,3 +252,11 @@ video {
240
252
  max-width: 100%;
241
253
  height: auto;
242
254
  }
255
+
256
+ /**
257
+ * Ensure the default browser behavior of the `hidden` attribute.
258
+ */
259
+
260
+ [hidden] {
261
+ display: none;
262
+ }
@@ -10,7 +10,7 @@ $radius-button: $rounded;
10
10
  --color-bg--main: #{$white};
11
11
  --color-bg--surface: #{$gray-100};
12
12
  --color-primary: #{$gray-900};
13
- --color-txt: #{$gray-900};
13
+ --color-text: #{$gray-900};
14
14
  --color-focus-ring: #{rgba($gray-900, $opacity-50)};
15
15
 
16
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>');
@@ -20,7 +20,7 @@ $radius-button: $rounded;
20
20
 
21
21
  html {
22
22
  background: var(--color-bg--main);
23
- color: var(--color-txt);
23
+ color: var(--color-text);
24
24
  font-family: $font-family;
25
25
  font-size: 16px;
26
26
  }
@@ -33,11 +33,6 @@ html {
33
33
  padding: $size-2 $size-4;
34
34
  cursor: pointer;
35
35
 
36
- &:focus {
37
- outline: 2px dotted var(--color-primary);
38
- outline-offset: 2px;
39
- }
40
-
41
36
  &:disabled {
42
37
  pointer-events: none;
43
38
  opacity: $opacity-50;
@@ -52,6 +47,7 @@ html {
52
47
  &--secondary {
53
48
  background-color: var(--color-bg--main);
54
49
  border-color: var(--color-primary);
50
+ color: var(--color-primary);
55
51
  }
56
52
 
57
53
  &--tertiary {
@@ -61,6 +57,7 @@ html {
61
57
  }
62
58
 
63
59
  .input {
60
+ resize: none;
64
61
  appearance: none;
65
62
  background-color: $transparent;
66
63
  border-radius: $radius-input;
@@ -128,9 +125,11 @@ code {
128
125
 
129
126
  pre {
130
127
  background-color: var(--color-bg--surface);
128
+ border-left-width: $border-4;
131
129
  overflow-y: hidden;
132
130
 
133
131
  & > code {
132
+ border-radius: $rounded-none;
134
133
  display: block;
135
134
  padding: $size-2 $size-3;
136
135
  white-space: pre;
@@ -58,42 +58,6 @@
58
58
  outline-offset: 2px;
59
59
  }
60
60
 
61
- @mixin divider($color) {
62
- position: relative;
63
- z-index: $z-10;
64
-
65
- ::before {
66
- content: '';
67
- position: absolute;
68
- top: 50%;
69
- left: $size-0;
70
- right: $size-0;
71
- height: $size-px;
72
- background-color: $color;
73
- z-index: -1;
74
- }
75
- }
76
-
77
- @mixin space-x($space, $reverse: false) {
78
- & > :not([hidden]) ~ :not([hidden]) {
79
- @if $reverse {
80
- margin-right: $space;
81
- } @else {
82
- margin-left: $space;
83
- }
84
- }
85
- }
86
-
87
- @mixin space-y($space, $reverse: false) {
88
- & > :not([hidden]) ~ :not([hidden]) {
89
- @if $reverse {
90
- margin-bottom: $space;
91
- } @else {
92
- margin-top: $space;
93
- }
94
- }
95
- }
96
-
97
61
  @mixin make-container($padding-x: $size-4) {
98
62
  width: 100%;
99
63
  padding-right: $padding-x;
@@ -10,15 +10,15 @@
10
10
  flex-direction: column;
11
11
  }
12
12
 
13
- .flex--justify-center {
13
+ .flex--centered {
14
14
  justify-content: center;
15
15
  }
16
16
 
17
- .flex--justify-between {
17
+ .flex--space-items {
18
18
  justify-content: space-between;
19
19
  }
20
20
 
21
- .flex--items-center {
21
+ .flex--align-center {
22
22
  align-items: center;
23
23
  }
24
24
 
@@ -14,8 +14,8 @@
14
14
  list-style: none;
15
15
  }
16
16
 
17
- .list--spaced {
18
- @include space-y($size-2);
17
+ .list--spaced > li + li {
18
+ margin-top: $size-2;
19
19
  }
20
20
 
21
21
  .list--inside-bulleted {
@@ -27,14 +27,14 @@
27
27
  border-top-width: $border;
28
28
  }
29
29
 
30
- .list--inline {
31
- @include space-x($size-2);
32
- }
33
-
34
30
  .list--inline > li {
35
31
  display: inline-block;
36
32
  }
37
33
 
34
+ .list--inline > li + li {
35
+ margin-left: $size-2;
36
+ }
37
+
38
38
  .list--ruled > li {
39
39
  padding: $size-4 $size-2;
40
40
  border-top-width: $border;
@@ -4,12 +4,20 @@
4
4
 
5
5
  .u-position {
6
6
  position: absolute;
7
+ }
7
8
 
8
- &--right { right: 0; }
9
+ .u-position--right {
10
+ right: 0;
11
+ }
9
12
 
10
- &--left { left: 0; }
13
+ .u-position--left {
14
+ left: 0;
15
+ }
11
16
 
12
- &--top { top: 0; }
17
+ .u-position--top {
18
+ top: 0;
19
+ }
13
20
 
14
- &--bottom { bottom: 0; }
21
+ .u-position--bottom {
22
+ bottom: 0;
15
23
  }
@@ -19,7 +19,7 @@ $rounded-full: 9999px;
19
19
  // border-width: $border;
20
20
  // *******************************************************************
21
21
  $border-0: 0;
22
+ $border: 1px;
22
23
  $border-2: 2px;
23
24
  $border-4: 4px;
24
25
  $border-8: 8px;
25
- $border: 1px;
@@ -3,6 +3,7 @@
3
3
  // sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
4
4
  // *******************************************************************
5
5
  $transparent: transparent;
6
+ $current: currentColor;
6
7
 
7
8
  $black: #000;
8
9
  $white: #fff;
@@ -84,16 +85,16 @@ $blue-700: #1d4ed8;
84
85
  $blue-800: #1e40af;
85
86
  $blue-900: #1e3a8a;
86
87
 
87
- $light-blue-50: #f0f9ff;
88
- $light-blue-100: #e0f2fe;
89
- $light-blue-200: #bae6fd;
90
- $light-blue-300: #7dd3fc;
91
- $light-blue-400: #38bdf8;
92
- $light-blue-500: #0ea5e9;
93
- $light-blue-600: #0284c7;
94
- $light-blue-700: #0369a1;
95
- $light-blue-800: #075985;
96
- $light-blue-900: #0c4a6e;
88
+ $sky-50: #f0f9ff;
89
+ $sky-100: #e0f2fe;
90
+ $sky-200: #bae6fd;
91
+ $sky-300: #7dd3fc;
92
+ $sky-400: #38bdf8;
93
+ $sky-500: #0ea5e9;
94
+ $sky-600: #0284c7;
95
+ $sky-700: #0369a1;
96
+ $sky-800: #075985;
97
+ $sky-900: #0c4a6e;
97
98
 
98
99
  $cyan-50: #ecfeff;
99
100
  $cyan-100: #cffafe;
@@ -0,0 +1,37 @@
1
+ // *******************************************************************
2
+ // Height
3
+ // Variables for setting the height of an element
4
+ // height: $h-per-1-2;
5
+ // *******************************************************************
6
+ $h-per-1-2: 50%;
7
+ $h-per-1-3: 33.333333%;
8
+ $h-per-2-3: 66.666667%;
9
+ $h-per-1-4: 25%;
10
+ $h-per-2-4: 50%;
11
+ $h-per-3-4: 75%;
12
+ $h-per-1-5: 20%;
13
+ $h-per-2-5: 40%;
14
+ $h-per-3-5: 60%;
15
+ $h-per-4-5: 80%;
16
+ $h-per-1-6: 16.666667%;
17
+ $h-per-2-6: 33.333333%;
18
+ $h-per-3-6: 50%;
19
+ $h-per-4-6: 66.666667%;
20
+ $h-per-5-6: 83.333333%;
21
+
22
+ // *******************************************************************
23
+ // Min-Height
24
+ // Variables for setting the minimum height of an element
25
+ // min-height: $min-h-0;
26
+ // *******************************************************************
27
+ $min-h-0: 0px;
28
+ $min-h-full: 100%;
29
+ $min-h-screen: 100vh;
30
+
31
+ // *******************************************************************
32
+ // Max-Height
33
+ // Variables for setting the maximum height of an element
34
+ // max-height: $max-h-full;
35
+ // *******************************************************************
36
+ $max-h-full: 100%;
37
+ $max-h-screen: 100vh;
@@ -1,39 +1,43 @@
1
1
  // *******************************************************************
2
2
  // Default spacing scale
3
3
  // By default, Tailwind includes a generous and comprehensive numeric spacing scale.
4
- // Use as padding, margin, width, height, transform
4
+ // Use as padding, margin, width, height, translate, etc...
5
5
  // *******************************************************************
6
- $size-px: 1px;
7
- $size-0: 0px;
8
- $size-1: 0.25rem;
9
- $size-2: 0.5rem;
10
- $size-3: 0.75rem;
11
- $size-4: 1rem;
12
- $size-5: 1.25rem;
13
- $size-6: 1.5rem;
14
- $size-7: 1.75rem;
15
- $size-8: 2rem;
16
- $size-9: 2.25rem;
17
- $size-10: 2.5rem;
18
- $size-11: 2.75rem;
19
- $size-12: 3rem;
20
- $size-14: 3.5rem;
21
- $size-16: 4rem;
22
- $size-20: 5rem;
23
- $size-24: 6rem;
24
- $size-28: 7rem;
25
- $size-32: 8rem;
26
- $size-36: 9rem;
27
- $size-40: 10rem;
28
- $size-44: 11rem;
29
- $size-48: 12rem;
30
- $size-52: 13rem;
31
- $size-56: 14rem;
32
- $size-60: 15rem;
33
- $size-64: 16rem;
34
- $size-72: 18rem;
35
- $size-80: 20rem;
36
- $size-96: 24rem;
6
+ $size-px: 1px;
7
+ $size-0: 0px;
8
+ $size-0-5: 0.125rem;
9
+ $size-1: 0.25rem;
10
+ $size-1-5: 0.375rem;
11
+ $size-2: 0.5rem;
12
+ $size-2-5: 0.625rem;
13
+ $size-3: 0.75rem;
14
+ $size-3-5: 0.875rem;
15
+ $size-4: 1rem;
16
+ $size-5: 1.25rem;
17
+ $size-6: 1.5rem;
18
+ $size-7: 1.75rem;
19
+ $size-8: 2rem;
20
+ $size-9: 2.25rem;
21
+ $size-10: 2.5rem;
22
+ $size-11: 2.75rem;
23
+ $size-12: 3rem;
24
+ $size-14: 3.5rem;
25
+ $size-16: 4rem;
26
+ $size-20: 5rem;
27
+ $size-24: 6rem;
28
+ $size-28: 7rem;
29
+ $size-32: 8rem;
30
+ $size-36: 9rem;
31
+ $size-40: 10rem;
32
+ $size-44: 11rem;
33
+ $size-48: 12rem;
34
+ $size-52: 13rem;
35
+ $size-56: 14rem;
36
+ $size-60: 15rem;
37
+ $size-64: 16rem;
38
+ $size-72: 18rem;
39
+ $size-80: 20rem;
40
+ $size-96: 24rem;
37
41
 
38
42
  $size-auto: auto;
39
43
  $size-full: 100%;
@@ -1,34 +1,34 @@
1
1
  // *******************************************************************
2
2
  // Width
3
3
  // Variables for setting the width of an element
4
- // width: $w-1-2;
5
- // *******************************************************************
6
- $w-1-2: 50%;
7
- $w-1-3: 33.333333%;
8
- $w-2-3: 66.666667%;
9
- $w-1-4: 25%;
10
- $w-2-4: 50%;
11
- $w-3-4: 75%;
12
- $w-1-5: 20%;
13
- $w-2-5: 40%;
14
- $w-3-5: 60%;
15
- $w-4-5: 80%;
16
- $w-1-6: 16.666667%;
17
- $w-2-6: 33.333333%;
18
- $w-3-6: 50%;
19
- $w-4-6: 66.666667%;
20
- $w-5-6: 83.333333%;
21
- $w-1-12: 8.333333%;
22
- $w-2-12: 16.666667%;
23
- $w-3-12: 25%;
24
- $w-4-12: 33.333333%;
25
- $w-5-12: 41.666667%;
26
- $w-6-12: 50%;
27
- $w-7-12: 58.333333%;
28
- $w-8-12: 66.666667%;
29
- $w-9-12: 75%;
30
- $w-10-12: 83.333333%;
31
- $w-11-12: 91.666667%;
4
+ // width: $w-per-1-2;
5
+ // *******************************************************************
6
+ $w-per-1-2: 50%;
7
+ $w-per-1-3: 33.333333%;
8
+ $w-per-2-3: 66.666667%;
9
+ $w-per-1-4: 25%;
10
+ $w-per-2-4: 50%;
11
+ $w-per-3-4: 75%;
12
+ $w-per-1-5: 20%;
13
+ $w-per-2-5: 40%;
14
+ $w-per-3-5: 60%;
15
+ $w-per-4-5: 80%;
16
+ $w-per-1-6: 16.666667%;
17
+ $w-per-2-6: 33.333333%;
18
+ $w-per-3-6: 50%;
19
+ $w-per-4-6: 66.666667%;
20
+ $w-per-5-6: 83.333333%;
21
+ $w-per-1-12: 8.333333%;
22
+ $w-per-2-12: 16.666667%;
23
+ $w-per-3-12: 25%;
24
+ $w-per-4-12: 33.333333%;
25
+ $w-per-5-12: 41.666667%;
26
+ $w-per-6-12: 50%;
27
+ $w-per-7-12: 58.333333%;
28
+ $w-per-8-12: 66.666667%;
29
+ $w-per-9-12: 75%;
30
+ $w-per-10-12: 83.333333%;
31
+ $w-per-11-12: 91.666667%;
32
32
 
33
33
  // *******************************************************************
34
34
  // Min-Width
@@ -61,20 +61,3 @@ $max-w-7xl: 80rem;
61
61
  $max-w-full: 100%;
62
62
  $max-w-min: min-content;
63
63
  $max-w-max: max-content;
64
-
65
- // *******************************************************************
66
- // Min-Height
67
- // Variables for setting the minimum height of an element
68
- // min-height: $min-h-0;
69
- // *******************************************************************
70
- $min-h-0: 0px;
71
- $min-h-full: 100%;
72
- $min-h-screen: 100vh;
73
-
74
- // *******************************************************************
75
- // Max-Height
76
- // Variables for setting the maximum height of an element
77
- // max-height: $max-h-full;
78
- // *******************************************************************
79
- $max-h-full: 100%;
80
- $max-h-screen: 100vh;
@@ -9,4 +9,5 @@
9
9
  @import "variables/transform";
10
10
  @import "variables/typography";
11
11
  @import "variables/width";
12
+ @import "variables/height";
12
13
  @import "variables/zindex";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.46"
3
+ VERSION = "0.0.47"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.46",
3
+ "version": "0.0.47",
4
4
  "description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
5
5
  "homepage": "https://github.com/lazaronixon/sass-zero",
6
6
  "repository": "lazaronixon/sass-zero",
data/sass-zero.gemspec CHANGED
@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
12
12
  spec.homepage = "http://github.com/lazaronixon/sass-zero"
13
13
  spec.license = "MIT"
14
14
 
15
- spec.add_runtime_dependency "autoprefixer-rails", ">= 9.7.4"
15
+ spec.add_runtime_dependency "autoprefixer-rails", "~> 10.3"
16
16
 
17
17
  spec.files = `git ls-files -z`.split("\x0")
18
18
  end
metadata CHANGED
@@ -1,30 +1,30 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.46
4
+ version: 0.0.47
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-19 00:00:00.000000000 Z
11
+ date: 2021-11-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - ">="
17
+ - - "~>"
18
18
  - !ruby/object:Gem::Version
19
- version: 9.7.4
19
+ version: '10.3'
20
20
  type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - ">="
24
+ - - "~>"
25
25
  - !ruby/object:Gem::Version
26
- version: 9.7.4
27
- description:
26
+ version: '10.3'
27
+ description:
28
28
  email:
29
29
  - lazaronixon@hotmail.com
30
30
  executables: []
@@ -61,6 +61,7 @@ files:
61
61
  - app/assets/stylesheets/sass-zero/variables/effects.scss
62
62
  - app/assets/stylesheets/sass-zero/variables/flex.scss
63
63
  - app/assets/stylesheets/sass-zero/variables/grid.scss
64
+ - app/assets/stylesheets/sass-zero/variables/height.scss
64
65
  - app/assets/stylesheets/sass-zero/variables/spacing.scss
65
66
  - app/assets/stylesheets/sass-zero/variables/transform.scss
66
67
  - app/assets/stylesheets/sass-zero/variables/transition.scss
@@ -75,7 +76,7 @@ homepage: http://github.com/lazaronixon/sass-zero
75
76
  licenses:
76
77
  - MIT
77
78
  metadata: {}
78
- post_install_message:
79
+ post_install_message:
79
80
  rdoc_options: []
80
81
  require_paths:
81
82
  - lib
@@ -91,7 +92,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
91
92
  version: '0'
92
93
  requirements: []
93
94
  rubygems_version: 3.1.4
94
- signing_key:
95
+ signing_key:
95
96
  specification_version: 4
96
97
  summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
97
98
  BEM.