sass-zero 1.0.10 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 68f7330dbd9cb3e845544d409b180a4e49f0e5c61138b85e209140385f95a12f
4
- data.tar.gz: 185299448e7e080b8bd0e950ad4b0e4cd332d5e9865783998f9df01146e3b529
3
+ metadata.gz: b9dc3be56445fbb5e26b00137cdead641155a78dd6f2d63d0c0dbf86b43bb8cd
4
+ data.tar.gz: 3a45037e686d4a32b35e958b4c5aedf032ab4c948d0a4987f1952909774be6f0
5
5
  SHA512:
6
- metadata.gz: 5bd9b50752c33876ae9d403145f40905c75cade64315423a9fa4adee0ea07f35f3245192f0fb805633c55ae4fd3c453534316c74c0de8f4babf796f2b2c30ef6
7
- data.tar.gz: d78d0d6e1e7e695b264f8ce8c2fead3d90c259c0013f6d163ff891fc0ec7379214e4201c649ed1a445632ec83070b15e59d871d84ea048daefb73fb7444c7b30
6
+ metadata.gz: de6e645117d3ce1c89966c202ac84568280b3bed4ab40565eabdcb07e8aa03836f0895903ede994ce4fbc77b37cee803acfdad03f3dcd67f96823c245105ab56
7
+ data.tar.gz: 61ce8cb0034dc58fc9eea6dedf09ce9a1598fee3aa13fc21c0c1fba21297faf907334d308ee736c36539cb7c42d571aae9f263ba95455c74207053fc47b7771c
data/Example.html CHANGED
@@ -19,9 +19,21 @@
19
19
  <button class="btn btn--tertiary">Button Tertiary</button>
20
20
 
21
21
  <a href="#" class="btn btn--secondary">Link Button</a>
22
+
22
23
  <input type="submit" value="Submit Button" class="btn btn--secondary" />
23
24
 
24
- <button class="btn btn--secondary"><i class="bx bx-plus"></i> Icon Button</button>
25
+ <details class="u-display-ib">
26
+ <summary class="btn btn--secondary">Popup Button</summary>
27
+ <div class="popup-menu push-xs--top u-position--right">
28
+ <ul class="list--unindented u-nowrap flush">
29
+ <li>Unordered list item 1</li>
30
+ <li>Unordered list item 2</li>
31
+ <li>Unordered list item 3</li>
32
+ </ul>
33
+ </div>
34
+ </details>
35
+
36
+ <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
25
37
  <button class="btn btn--secondary btn--small">Small Button</button>
26
38
 
27
39
  <hr>
@@ -115,11 +127,6 @@
115
127
  </tbody>
116
128
  </table>
117
129
 
118
- <details>
119
- <summary>Some details</summary>
120
- <p>More info about the details.</p>
121
- </details>
122
-
123
130
  <blockquote>
124
131
  <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
125
132
  <cite class="txt--sm">– Stephen King</cite>
@@ -137,12 +144,7 @@
137
144
  </code>
138
145
  </div>
139
146
 
140
- <div class="push-md--bottom">
141
- <label for="progres" class="u-display-b txt--bold">Progress</label>
142
- <progress id="progres" max="100" value="70">70%</progress>
143
- </div>
144
-
145
- <div class="push-3xl--bottom">
147
+ <div class="push-md--bottom" style="height: 55px;">
146
148
  <dialog open>
147
149
  <form method="dialog">
148
150
  <span>User was successfully created.</span>
@@ -151,6 +153,11 @@
151
153
  </dialog>
152
154
  </div>
153
155
 
156
+ <div class="push-md--bottom">
157
+ <label for="progres" class="u-display-b txt--bold">Progress</label>
158
+ <progress id="progres" max="100" value="70">70%</progress>
159
+ </div>
160
+
154
161
  <hr>
155
162
 
156
163
  <ul class="list--unindented">
data/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
4
4
 
5
- ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-2.png)
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
6
6
 
7
7
  ### Milligram
8
8
 
@@ -1,232 +1,343 @@
1
- @import "sass-zero/variables/colors";
2
- @import "sass-zero/variables/typography";
1
+ @import "../variables/colors";
2
+ @import "../variables/typography";
3
3
 
4
- /**
5
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
6
- * A thin layer on top of normalize.css that provides a starting point more
7
- * suitable for web applications.
8
- */
4
+ /*
5
+ 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
6
+ 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
7
+ */
9
8
 
10
- /**
11
- * Removes the default spacing and border for appropriate elements.
12
- */
9
+ *,
10
+ ::before,
11
+ ::after {
12
+ box-sizing: border-box; /* 1 */
13
+ border-width: 0; /* 2 */
14
+ border-style: solid; /* 2 */
15
+ border-color: $gray-200; /* 2 */
16
+ }
17
+
18
+ ::before,
19
+ ::after {
20
+ --tw-content: '';
21
+ }
22
+
23
+ /*
24
+ 1. Use a consistent sensible line-height in all browsers.
25
+ 2. Prevent adjustments of font size after orientation changes in iOS.
26
+ 3. Use a more readable tab size.
27
+ 4. Use the user's configured `sans` font-family by default.
28
+ */
29
+
30
+ html {
31
+ line-height: 1.5; /* 1 */
32
+ -webkit-text-size-adjust: 100%; /* 2 */
33
+ -moz-tab-size: 4; /* 3 */
34
+ tab-size: 4; /* 3 */
35
+ font-family: $font-sans; /* 4 */
36
+ }
37
+
38
+ /*
39
+ 1. Remove the margin in all browsers.
40
+ 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
41
+ */
42
+
43
+ body {
44
+ margin: 0; /* 1 */
45
+ line-height: inherit; /* 2 */
46
+ }
47
+
48
+ /*
49
+ 1. Add the correct height in Firefox.
50
+ 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
51
+ 3. Ensure horizontal rules are visible by default.
52
+ */
53
+
54
+ hr {
55
+ height: 0; /* 1 */
56
+ color: inherit; /* 2 */
57
+ border-top-width: 1px; /* 3 */
58
+ }
59
+
60
+ /*
61
+ Add the correct text decoration in Chrome, Edge, and Safari.
62
+ */
63
+
64
+ abbr:where([title]) {
65
+ text-decoration: underline dotted;
66
+ }
67
+
68
+ /*
69
+ Remove the default font size and weight for headings.
70
+ */
13
71
 
14
- blockquote,
15
- dl,
16
- dd,
17
72
  h1,
18
73
  h2,
19
74
  h3,
20
75
  h4,
21
76
  h5,
22
- h6,
23
- hr,
24
- figure,
25
- p,
77
+ h6 {
78
+ font-size: inherit;
79
+ font-weight: inherit;
80
+ }
81
+
82
+ /*
83
+ Reset links to optimize for opt-in styling instead of opt-out.
84
+ */
85
+
86
+ a {
87
+ color: inherit;
88
+ text-decoration: inherit;
89
+ }
90
+
91
+ /*
92
+ Add the correct font weight in Edge and Safari.
93
+ */
94
+
95
+ b,
96
+ strong {
97
+ font-weight: bolder;
98
+ }
99
+
100
+ /*
101
+ 1. Use the user's configured `mono` font family by default.
102
+ 2. Correct the odd `em` font sizing in all browsers.
103
+ */
104
+
105
+ code,
106
+ kbd,
107
+ samp,
26
108
  pre {
27
- margin: 0;
109
+ font-family: $font-mono; /* 1 */
110
+ font-size: 1em; /* 2 */
28
111
  }
29
112
 
30
- button {
31
- background-color: transparent;
32
- background-image: none;
113
+ /*
114
+ Add the correct font size in all browsers.
115
+ */
116
+
117
+ small {
118
+ font-size: 80%;
33
119
  }
34
120
 
35
- fieldset {
36
- margin: 0;
37
- padding: 0;
121
+ /*
122
+ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
123
+ */
124
+
125
+ sub,
126
+ sup {
127
+ font-size: 75%;
128
+ line-height: 0;
129
+ position: relative;
130
+ vertical-align: baseline;
38
131
  }
39
132
 
40
- ol,
41
- ul {
42
- list-style: none;
43
- margin: 0;
44
- padding: 0;
133
+ sub {
134
+ bottom: -0.25em;
45
135
  }
46
136
 
47
- /**
48
- * Tailwind custom reset styles
49
- */
137
+ sup {
138
+ top: -0.5em;
139
+ }
50
140
 
51
- /**
52
- * 1. Use the user's configured `sans` font-family (with Tailwind's default
53
- * sans-serif font stack as a fallback) as a sane default.
54
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
55
- * to override it to ensure consistency even when using the default theme.
56
- */
141
+ /*
142
+ 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)
143
+ 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)
144
+ 3. Remove gaps between table borders by default.
145
+ */
57
146
 
58
- html {
59
- font-family: $font-sans; /* 1 */
60
- line-height: 1.5; /* 2 */
147
+ table {
148
+ text-indent: 0; /* 1 */
149
+ border-color: inherit; /* 2 */
150
+ border-collapse: collapse; /* 3 */
61
151
  }
62
152
 
153
+ /*
154
+ 1. Change the font styles in all browsers.
155
+ 2. Remove the margin in Firefox and Safari.
156
+ 3. Remove default padding in all browsers.
157
+ */
63
158
 
64
- /**
65
- * Inherit font-family and line-height from `html` so users can set them as
66
- * a class directly on the `html` element.
67
- */
159
+ button,
160
+ input,
161
+ optgroup,
162
+ select,
163
+ textarea {
164
+ font-family: inherit; /* 1 */
165
+ font-size: 100%; /* 1 */
166
+ line-height: inherit; /* 1 */
167
+ color: inherit; /* 1 */
168
+ margin: 0; /* 2 */
169
+ padding: 0; /* 3 */
170
+ }
68
171
 
69
- body {
70
- font-family: inherit;
71
- line-height: inherit;
172
+ /*
173
+ Remove the inheritance of text transform in Edge and Firefox.
174
+ */
175
+
176
+ button,
177
+ select {
178
+ text-transform: none;
72
179
  }
73
180
 
74
- /**
75
- * 1. Prevent padding and border from affecting element width.
76
- *
77
- * We used to set this in the html element and inherit from
78
- * the parent element for everything else. This caused issues
79
- * in shadow-dom-enhanced elements like <details> where the content
80
- * is wrapped by a div with box-sizing set to `content-box`.
81
- *
82
- * https://github.com/mozdevs/cssremedy/issues/4
83
- *
84
- *
85
- * 2. Allow adding a border to an element by just adding a border-width.
86
- *
87
- * By default, the way the browser specifies that an element should have no
88
- * border is by setting it's border-style to `none` in the user-agent
89
- * stylesheet.
90
- *
91
- * In order to easily add borders to elements by just setting the `border-width`
92
- * property, we change the default border-style for all elements to `solid`, and
93
- * use border-width to hide them instead. This way our `border` utilities only
94
- * need to set the `border-width` property instead of the entire `border`
95
- * shorthand, making our border utilities much more straightforward to compose.
96
- *
97
- * https://github.com/tailwindcss/tailwindcss/pull/116
98
- */
181
+ /*
182
+ 1. Correct the inability to style clickable types in iOS and Safari.
183
+ 2. Remove default button styles.
184
+ */
99
185
 
100
- *,
101
- ::before,
102
- ::after {
103
- box-sizing: border-box; /* 1 */
104
- border-width: 0; /* 2 */
105
- border-style: solid; /* 2 */
106
- border-color: $gray-200; /* 2 */
186
+ button,
187
+ [type='button'],
188
+ [type='reset'],
189
+ [type='submit'] {
190
+ -webkit-appearance: button; /* 1 */
191
+ background-color: transparent; /* 2 */
192
+ background-image: none; /* 2 */
107
193
  }
108
194
 
109
195
  /*
110
- * Ensure horizontal rules are visible by default
111
- */
196
+ Use the modern Firefox focus style for all focusable elements.
197
+ */
112
198
 
113
- hr {
114
- border-top-width: 1px;
199
+ :-moz-focusring {
200
+ outline: auto;
115
201
  }
116
202
 
117
- /**
118
- * Undo the `border-style: none` reset that Normalize applies to images so that
119
- * our `border-{width}` utilities have the expected effect.
120
- *
121
- * The Normalize reset is unnecessary for us since we default the border-width
122
- * to 0 on all elements.
123
- *
124
- * https://github.com/tailwindcss/tailwindcss/issues/362
125
- */
203
+ /*
204
+ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
205
+ */
126
206
 
127
- img {
128
- border-style: solid;
207
+ :-moz-ui-invalid {
208
+ box-shadow: none;
129
209
  }
130
210
 
131
- textarea {
132
- resize: vertical;
211
+ /*
212
+ Add the correct vertical alignment in Chrome and Firefox.
213
+ */
214
+
215
+ progress {
216
+ vertical-align: baseline;
133
217
  }
134
218
 
135
- input::placeholder,
136
- textarea::placeholder {
137
- opacity: 1;
138
- color: $gray-400;
219
+ /*
220
+ Correct the cursor style of increment and decrement buttons in Safari.
221
+ */
222
+
223
+ ::-webkit-inner-spin-button,
224
+ ::-webkit-outer-spin-button {
225
+ height: auto;
139
226
  }
140
227
 
141
- button,
142
- [role="button"] {
143
- cursor: pointer;
228
+ /*
229
+ 1. Correct the odd appearance in Chrome and Safari.
230
+ 2. Correct the outline style in Safari.
231
+ */
232
+
233
+ [type='search'] {
234
+ -webkit-appearance: textfield; /* 1 */
235
+ outline-offset: -2px; /* 2 */
144
236
  }
145
237
 
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
- */
238
+ /*
239
+ Remove the inner padding in Chrome and Safari on macOS.
240
+ */
153
241
 
154
- :-moz-focusring {
155
- outline: auto;
242
+ ::-webkit-search-decoration {
243
+ -webkit-appearance: none;
156
244
  }
157
245
 
158
- table {
159
- border-collapse: collapse;
246
+ /*
247
+ 1. Correct the inability to style clickable types in iOS and Safari.
248
+ 2. Change font properties to `inherit` in Safari.
249
+ */
250
+
251
+ ::-webkit-file-upload-button {
252
+ -webkit-appearance: button; /* 1 */
253
+ font: inherit; /* 2 */
160
254
  }
161
255
 
256
+ /*
257
+ Add the correct display in Chrome and Safari.
258
+ */
259
+
260
+ summary {
261
+ display: list-item;
262
+ }
263
+
264
+ /*
265
+ Removes the default spacing and border for appropriate elements.
266
+ */
267
+
268
+ blockquote,
269
+ dl,
270
+ dd,
162
271
  h1,
163
272
  h2,
164
273
  h3,
165
274
  h4,
166
275
  h5,
167
- h6 {
168
- font-size: inherit;
169
- font-weight: inherit;
276
+ h6,
277
+ hr,
278
+ figure,
279
+ p,
280
+ pre {
281
+ margin: 0;
170
282
  }
171
283
 
172
- /**
173
- * Reset links to optimize for opt-in styling instead of
174
- * opt-out.
175
- */
284
+ fieldset {
285
+ margin: 0;
286
+ padding: 0;
287
+ }
176
288
 
177
- a {
178
- color: inherit;
179
- text-decoration: inherit;
289
+ legend {
290
+ padding: 0;
180
291
  }
181
292
 
182
- /**
183
- * Reset form element properties that are easy to forget to
184
- * style explicitly so you don't inadvertently introduce
185
- * styles that deviate from your design system. These styles
186
- * supplement a partial reset that is already applied by
187
- * normalize.css.
188
- */
293
+ ol,
294
+ ul,
295
+ menu {
296
+ list-style: none;
297
+ margin: 0;
298
+ padding: 0;
299
+ }
300
+
301
+ /*
302
+ Prevent resizing textareas horizontally by default.
303
+ */
189
304
 
190
- button,
191
- input,
192
- optgroup,
193
- select,
194
305
  textarea {
195
- padding: 0;
196
- line-height: inherit;
197
- color: inherit;
306
+ resize: vertical;
198
307
  }
199
308
 
200
- /**
201
- * Use the configured 'mono' font family for elements that
202
- * are expected to be rendered with a monospace font, falling
203
- * back to the system monospace stack if there is no configured
204
- * 'mono' font family.
205
- */
309
+ /*
310
+ 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
311
+ 2. Set the default placeholder color to the user's configured gray 400 color.
312
+ */
206
313
 
207
- pre,
208
- code,
209
- kbd,
210
- samp {
211
- font-family: $font-mono;
314
+ input::placeholder,
315
+ textarea::placeholder {
316
+ opacity: 1; /* 1 */
317
+ color: $gray-400; /* 2 */
212
318
  }
213
319
 
214
- /**
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.
218
- *
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
229
- */
320
+ /*
321
+ Set the default cursor for buttons.
322
+ */
323
+
324
+ button,
325
+ [role="button"] {
326
+ cursor: pointer;
327
+ }
328
+
329
+ /*
330
+ Make sure disabled buttons don't get the pointer cursor.
331
+ */
332
+ :disabled {
333
+ cursor: default;
334
+ }
335
+
336
+ /*
337
+ 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
338
+ 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
339
+ This can trigger a poorly considered lint error in some tools but is included by design.
340
+ */
230
341
 
231
342
  img,
232
343
  svg,
@@ -240,12 +351,9 @@ object {
240
351
  vertical-align: middle; /* 2 */
241
352
  }
242
353
 
243
- /**
244
- * Constrain images and videos to the parent width and preserve
245
- * their intrinsic aspect ratio.
246
- *
247
- * https://github.com/mozdevs/cssremedy/issues/14
248
- */
354
+ /*
355
+ Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
356
+ */
249
357
 
250
358
  img,
251
359
  video {
@@ -253,9 +361,9 @@ video {
253
361
  height: auto;
254
362
  }
255
363
 
256
- /**
257
- * Ensure the default browser behavior of the `hidden` attribute.
258
- */
364
+ /*
365
+ Ensure the default browser behavior of the `hidden` attribute.
366
+ */
259
367
 
260
368
  [hidden] {
261
369
  display: none;
@@ -1,2 +1 @@
1
- @import "base/normalize";
2
- @import "base/preflight";
1
+ @import "./base/preflight";
@@ -1,10 +1,10 @@
1
- @import "sass-zero/variables";
2
- @import "sass-zero/mixins";
1
+ @import "./variables";
2
+ @import "./mixins";
3
3
 
4
4
  $font-family: $font-sans;
5
5
 
6
- $radius-input: $rounded;
7
- $radius-default: $rounded;
6
+ $radius-primary: $rounded;
7
+ $radius-secondary: $rounded;
8
8
 
9
9
  :root {
10
10
  --color-bg--main: #{$white};
@@ -32,7 +32,7 @@ html {
32
32
  }
33
33
 
34
34
  .btn {
35
- border-radius: $radius-default;
35
+ border-radius: $radius-primary;
36
36
  border-width: $border;
37
37
  display: inline-block;
38
38
  font-weight: $font-bold;
@@ -59,7 +59,7 @@ html {
59
59
  font-size: $text-sm;
60
60
  }
61
61
 
62
- & > i {
62
+ &__icon {
63
63
  vertical-align: sub;
64
64
  font-size: 1.25em;
65
65
  }
@@ -74,7 +74,7 @@ html {
74
74
  @include appearance-none;
75
75
  resize: none;
76
76
  background-color: var(--color-bg--main);
77
- border-radius: $radius-input;
77
+ border-radius: $radius-secondary;
78
78
  border-width: $border;
79
79
  padding: $size-2 $size-3;
80
80
  width: $w-full;
@@ -94,6 +94,15 @@ html {
94
94
  }
95
95
  }
96
96
 
97
+ .popup-menu {
98
+ background-color: var(--color-bg--surface);
99
+ border-radius: $radius-secondary;
100
+ padding: $size-2 $size-3;
101
+ box-shadow: $shadow-md;
102
+ position: absolute;
103
+ z-index: $z-10;
104
+ }
105
+
97
106
  input[type="checkbox"], input[type="radio"] {
98
107
  transform: scale(1.2, 1.2);
99
108
  margin: $size-1;
@@ -176,15 +185,15 @@ fieldset, .input {
176
185
  margin-bottom: $size-6;
177
186
  }
178
187
 
179
- table, progress, details, blockquote, figure, pre, menu, ul, ol, dl, p {
188
+ table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
180
189
  margin-bottom: $size-6;
181
190
  }
182
191
 
183
192
  dialog {
184
193
  background-color: var(--color-bg--surface);
185
- border-radius: $radius-default;
194
+ border-radius: $radius-primary;
186
195
  padding: $size-3 $size-4;
187
- box-shadow: $shadow-md;
196
+ box-shadow: $shadow-lg;
188
197
  color: inherit;
189
198
  }
190
199
 
@@ -201,15 +210,15 @@ progress {
201
210
  }
202
211
 
203
212
  details {
204
- background-color: var(--color-bg--surface);
205
- border-left-width: $border-4;
206
- padding: $size-2 $size-3;
213
+ position: relative;
207
214
  }
208
215
 
209
216
  summary {
210
- padding: $size-1 $size-0;
211
- font-weight: $font-bold;
212
- cursor: pointer;
217
+ list-style: none;
218
+ }
219
+
220
+ summary::-webkit-details-marker {
221
+ display: none;
213
222
  }
214
223
 
215
224
  table, progress {
@@ -1,7 +1,7 @@
1
- @import "sass-zero/variables/border";
2
- @import "sass-zero/variables/effects";
3
- @import "sass-zero/variables/spacing";
4
- @import "sass-zero/variables/zindex";
1
+ @import "./variables/border";
2
+ @import "./variables/effects";
3
+ @import "./variables/spacing";
4
+ @import "./variables/zindex";
5
5
 
6
6
  @mixin antialiased {
7
7
  -webkit-font-smoothing: antialiased;
@@ -1,5 +1,5 @@
1
- @import "sass-zero/variables/breakpoints";
2
- @import "sass-zero/mixins";
1
+ @import "../variables/breakpoints";
2
+ @import "../mixins";
3
3
 
4
4
  .container {
5
5
  @include make-container;
@@ -1,6 +1,6 @@
1
- @import "sass-zero/variables/breakpoints";
2
- @import "sass-zero/variables/effects";
3
- @import "sass-zero/mixins";
1
+ @import "../variables/breakpoints";
2
+ @import "../variables/effects";
3
+ @import "../mixins";
4
4
 
5
5
  .debug * {
6
6
  outline: 1px red solid !important;
@@ -1,5 +1,5 @@
1
- @import "sass-zero/variables/spacing";
2
- @import "sass-zero/mixins";
1
+ @import "../variables/spacing";
2
+ @import "../mixins";
3
3
 
4
4
  .list--unindented {
5
5
  padding-left: 1.2em;
@@ -1,4 +1,4 @@
1
- @import "sass-zero/variables/spacing";
1
+ @import "../variables/spacing";
2
2
 
3
3
  // *******************************************************************
4
4
  // Pull Utilities
@@ -1,4 +1,4 @@
1
- @import "sass-zero/variables/spacing";
1
+ @import "../variables/spacing";
2
2
 
3
3
  // *******************************************************************
4
4
  // Push Utilities
@@ -1,6 +1,6 @@
1
- @import "sass-zero/variables/typography";
2
- @import "sass-zero/variables/spacing";
3
- @import "sass-zero/mixins";
1
+ @import "../variables/typography";
2
+ @import "../variables/spacing";
3
+ @import "../mixins";
4
4
 
5
5
  .txt--normal {
6
6
  font-weight: $font-normal !important;
@@ -1,12 +1,12 @@
1
- @import "sass-zero/utilities/align";
2
- @import "sass-zero/utilities/animation";
3
- @import "sass-zero/utilities/container";
4
- @import "sass-zero/utilities/flex";
5
- @import "sass-zero/utilities/flush";
6
- @import "sass-zero/utilities/layout";
7
- @import "sass-zero/utilities/position";
8
- @import "sass-zero/utilities/pull";
9
- @import "sass-zero/utilities/push";
10
- @import "sass-zero/utilities/text";
11
- @import "sass-zero/utilities/list";
12
- @import "sass-zero/utilities/unpad";
1
+ @import "./utilities/align";
2
+ @import "./utilities/animation";
3
+ @import "./utilities/container";
4
+ @import "./utilities/flex";
5
+ @import "./utilities/flush";
6
+ @import "./utilities/layout";
7
+ @import "./utilities/position";
8
+ @import "./utilities/pull";
9
+ @import "./utilities/push";
10
+ @import "./utilities/text";
11
+ @import "./utilities/list";
12
+ @import "./utilities/unpad";
@@ -1,14 +1,14 @@
1
- @import "variables/border";
2
- @import "variables/breakpoints";
3
- @import "variables/colors";
4
- @import "variables/effects";
5
- @import "variables/filters";
6
- @import "variables/flex";
7
- @import "variables/grid";
8
- @import "variables/spacing";
9
- @import "variables/transition";
10
- @import "variables/transform";
11
- @import "variables/typography";
12
- @import "variables/width";
13
- @import "variables/height";
14
- @import "variables/zindex";
1
+ @import "./variables/border";
2
+ @import "./variables/breakpoints";
3
+ @import "./variables/colors";
4
+ @import "./variables/effects";
5
+ @import "./variables/filters";
6
+ @import "./variables/flex";
7
+ @import "./variables/grid";
8
+ @import "./variables/spacing";
9
+ @import "./variables/transition";
10
+ @import "./variables/transform";
11
+ @import "./variables/typography";
12
+ @import "./variables/width";
13
+ @import "./variables/height";
14
+ @import "./variables/zindex";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.0.10"
3
+ VERSION = "1.0.14"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "1.0.10",
3
+ "version": "1.0.14",
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",
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.0.10
4
+ version: 1.0.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-02-09 00:00:00.000000000 Z
11
+ date: 2022-02-10 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email:
@@ -23,7 +23,6 @@ files:
23
23
  - Gemfile
24
24
  - README.md
25
25
  - app/assets/stylesheets/sass-zero/base.scss
26
- - app/assets/stylesheets/sass-zero/base/normalize.css
27
26
  - app/assets/stylesheets/sass-zero/base/preflight.scss
28
27
  - app/assets/stylesheets/sass-zero/breadboard.scss
29
28
  - app/assets/stylesheets/sass-zero/mixins.scss
@@ -1,285 +0,0 @@
1
- /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
-
3
- /*
4
- Document
5
- ========
6
- */
7
-
8
- /**
9
- Use a better box model (opinionated).
10
- */
11
-
12
- *,
13
- ::before,
14
- ::after {
15
- box-sizing: border-box;
16
- }
17
-
18
- /**
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
- */
23
-
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 */
29
- }
30
-
31
- /*
32
- Sections
33
- ========
34
- */
35
-
36
- /**
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
- */
40
-
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 */
53
- }
54
-
55
- /*
56
- Grouping content
57
- ================
58
- */
59
-
60
- /**
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
- */
64
-
65
- hr {
66
- height: 0; /* 1 */
67
- color: inherit; /* 2 */
68
- }
69
-
70
- /*
71
- Text-level semantics
72
- ====================
73
- */
74
-
75
- /**
76
- Add the correct text decoration in Chrome, Edge, and Safari.
77
- */
78
-
79
- abbr[title] {
80
- text-decoration: underline dotted;
81
- }
82
-
83
- /**
84
- Add the correct font weight in Edge and Safari.
85
- */
86
-
87
- b,
88
- strong {
89
- font-weight: bolder;
90
- }
91
-
92
- /**
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
- */
96
-
97
- code,
98
- kbd,
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 */
109
- }
110
-
111
- /**
112
- Add the correct font size in all browsers.
113
- */
114
-
115
- small {
116
- font-size: 80%;
117
- }
118
-
119
- /**
120
- Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
121
- */
122
-
123
- sub,
124
- sup {
125
- font-size: 75%;
126
- line-height: 0;
127
- position: relative;
128
- vertical-align: baseline;
129
- }
130
-
131
- sub {
132
- bottom: -0.25em;
133
- }
134
-
135
- sup {
136
- top: -0.5em;
137
- }
138
-
139
- /*
140
- Tabular data
141
- ============
142
- */
143
-
144
- /**
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
- */
148
-
149
- table {
150
- text-indent: 0; /* 1 */
151
- border-color: inherit; /* 2 */
152
- }
153
-
154
- /*
155
- Forms
156
- =====
157
- */
158
-
159
- /**
160
- 1. Change the font styles in all browsers.
161
- 2. Remove the margin in Firefox and Safari.
162
- */
163
-
164
- button,
165
- input,
166
- optgroup,
167
- select,
168
- textarea {
169
- font-family: inherit; /* 1 */
170
- font-size: 100%; /* 1 */
171
- line-height: 1.15; /* 1 */
172
- margin: 0; /* 2 */
173
- }
174
-
175
- /**
176
- Remove the inheritance of text transform in Edge and Firefox.
177
- */
178
-
179
- button,
180
- select {
181
- text-transform: none;
182
- }
183
-
184
- /**
185
- Correct the inability to style clickable types in iOS and Safari.
186
- */
187
-
188
- button,
189
- [type='button'],
190
- [type='reset'],
191
- [type='submit'] {
192
- -webkit-appearance: button;
193
- }
194
-
195
- /**
196
- Remove the inner border and padding in Firefox.
197
- */
198
-
199
- ::-moz-focus-inner {
200
- border-style: none;
201
- padding: 0;
202
- }
203
-
204
- /**
205
- Restore the focus styles unset by the previous rule.
206
- */
207
-
208
- :-moz-focusring {
209
- outline: 1px dotted ButtonText;
210
- }
211
-
212
- /**
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
- */
216
-
217
- :-moz-ui-invalid {
218
- box-shadow: none;
219
- }
220
-
221
- /**
222
- Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
223
- */
224
-
225
- legend {
226
- padding: 0;
227
- }
228
-
229
- /**
230
- Add the correct vertical alignment in Chrome and Firefox.
231
- */
232
-
233
- progress {
234
- vertical-align: baseline;
235
- }
236
-
237
- /**
238
- Correct the cursor style of increment and decrement buttons in Safari.
239
- */
240
-
241
- ::-webkit-inner-spin-button,
242
- ::-webkit-outer-spin-button {
243
- height: auto;
244
- }
245
-
246
- /**
247
- 1. Correct the odd appearance in Chrome and Safari.
248
- 2. Correct the outline style in Safari.
249
- */
250
-
251
- [type='search'] {
252
- -webkit-appearance: textfield; /* 1 */
253
- outline-offset: -2px; /* 2 */
254
- }
255
-
256
- /**
257
- Remove the inner padding in Chrome and Safari on macOS.
258
- */
259
-
260
- ::-webkit-search-decoration {
261
- -webkit-appearance: none;
262
- }
263
-
264
- /**
265
- 1. Correct the inability to style clickable types in iOS and Safari.
266
- 2. Change font properties to 'inherit' in Safari.
267
- */
268
-
269
- ::-webkit-file-upload-button {
270
- -webkit-appearance: button; /* 1 */
271
- font: inherit; /* 2 */
272
- }
273
-
274
- /*
275
- Interactive
276
- ===========
277
- */
278
-
279
- /*
280
- Add the correct display in Chrome and Safari.
281
- */
282
-
283
- summary {
284
- display: list-item;
285
- }