sass-zero 1.3.3 → 1.4.0

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: 6209a9fda20fd0d3480f03bd3f3d65c7ee5dae1831d47e98c353eca33f8a8e6c
4
- data.tar.gz: 2d1232cd4718b65ecc43d11e02020373270e6d7848e2074fc1553d31150c308d
3
+ metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
4
+ data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
5
5
  SHA512:
6
- metadata.gz: e56ccc926b0cdb2df8924603749be00ab25e58dfd01a2f6d2a0848827dc4b80212c5cad8b596e611a4fbf8dfca898432f18eb12d7703cd0118eb8845c3dff953
7
- data.tar.gz: a5e7aec47acc1620e460b96d561938845eaf0db7c8231a1e093e75685914ecc328061cacda7885a7c3c89534af128918c9bfd02de83e90f69874140555e89b1f
6
+ metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
7
+ data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.3.3)
4
+ sass-zero (1.4.0)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
@@ -4,12 +4,9 @@
4
4
  // General
5
5
  // *******************************************************************
6
6
 
7
- @mixin make-container($padding-x: $size-4) {
8
- width: 100%;
9
- padding-right: $padding-x;
10
- padding-left: $padding-x;
11
- margin-right: auto;
12
- margin-left: auto;
7
+ @mixin make-container($padding: $size-4) {
8
+ width: 100%; margin: 0 auto;
9
+ padding: $padding;
13
10
  }
14
11
 
15
12
  @mixin ellipsis {
@@ -28,16 +25,6 @@
28
25
  -moz-osx-font-smoothing: auto;
29
26
  }
30
27
 
31
- @mixin progress-bar {
32
- ::-webkit-progress-value {
33
- @content;
34
- }
35
-
36
- ::-moz-progress-bar {
37
- @content;
38
- }
39
- }
40
-
41
28
  // *******************************************************************
42
29
  // Animations
43
30
  // *******************************************************************
@@ -30,18 +30,23 @@ $radius-secondary: $rounded;
30
30
  border-color: var(--color-border);
31
31
  }
32
32
 
33
- html {
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-2 $size-3;
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 $size-3;
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-3 $size-4;
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.2); margin: $size-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 $size-4;
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-2 $size-3;
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-10;
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
- label, legend, dt, dd, li {
177
- margin-bottom: $size-1;
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, figure, pre, menu, ul, ol, dl, p {
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-3 $size-4;
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, progress {
217
+ table {
225
218
  width: $w-full;
226
219
  }
227
220
 
228
221
  td, th {
229
222
  border-bottom-width: $border;
230
- padding: $size-3 $size-4;
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--4xl {
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
- h2, .hdg--3xl {
240
+ h3, .hdg--large {
244
241
  font-size: $text-3xl;
245
242
  }
246
243
 
247
- h3, .hdg--2xl {
244
+ h4, .hdg--medium {
248
245
  font-size: $text-2xl;
249
246
  }
250
247
 
251
- h4, .hdg--xl {
248
+ h5, .hdg--small {
252
249
  font-size: $text-xl;
253
250
  }
254
251
 
255
- h5, .hdg--lg {
252
+ h6, .hdg--x-small {
256
253
  font-size: $text-lg;
257
254
  }
258
-
259
- h6, .hdg--base {
260
- font-size: $text-base;
261
- }
@@ -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;
@@ -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: 1px;
6
- $size-0: 0;
7
- $size-1: 0.25rem;
8
- $size-2: 0.5rem;
9
- $size-3: 0.75rem;
10
- $size-4: 1rem;
11
- $size-5: 1.25rem;
12
- $size-6: 1.5rem;
13
- $size-7: 1.75rem;
14
- $size-8: 2rem;
15
- $size-9: 2.25rem;
16
- $size-10: 2.5rem;
17
- $size-11: 2.75rem;
18
- $size-12: 3rem;
19
- $size-14: 3.5rem;
20
- $size-16: 4rem;
21
- $size-20: 5rem;
22
- $size-24: 6rem;
23
- $size-28: 7rem;
24
- $size-32: 8rem;
25
- $size-36: 9rem;
26
- $size-40: 10rem;
27
- $size-44: 11rem;
28
- $size-48: 12rem;
29
- $size-52: 13rem;
30
- $size-56: 14rem;
31
- $size-60: 15rem;
32
- $size-64: 16rem;
33
- $size-72: 18rem;
34
- $size-80: 20rem;
35
- $size-96: 24rem;
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": $size-2,
39
- "sm": $size-4,
40
- "md": $size-8,
41
- "lg": $size-16,
42
- "xl": $size-32
42
+ "xs": $size-1-5,
43
+ "sm": $size-3,
44
+ "md": $size-6,
45
+ "lg": $size-9,
46
+ "xl": $size-12
43
47
  );
data/example.html CHANGED
@@ -1,4 +1,4 @@
1
- <main class="container container--lg" style="background-color: var(--color-bg--surface);">
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--unindented u-nowrap flush">
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="CJ Patoilo" id="nameField" class="input">
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 CJ …" id="commentField" rows="3" class="input"></textarea>
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 class="push-md--bottom">
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
- <div class="push-md--bottom">
136
- <ul class="list--unindented">
137
- <li>Unordered list item 1</li>
138
- <li>Unordered list item 2</li>
139
- <li>Unordered list item 3</li>
140
- </ul>
141
-
142
- <ol class="list--unindented">
143
- <li>Ordered list item 1</li>
144
- <li>Ordered list item 2</li>
145
- <li>Ordered list item 3</li>
146
- </ol>
147
-
148
- <dl>
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>
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--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
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
- <div>
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: 55px;">
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>
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.3.3"
3
+ VERSION = "1.4.0"
4
4
  end
5
5
  end
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.3.3
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 00:00:00.000000000 Z
11
+ date: 2023-07-13 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: