sass-zero 1.4.0 → 1.5.0

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.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/app/assets/stylesheets/sass-zero/base.scss +1 -1
  4. data/app/assets/stylesheets/sass-zero/breadboard.scss +26 -27
  5. data/app/assets/stylesheets/sass-zero/utilities/_flex.scss +2 -2
  6. data/app/assets/stylesheets/sass-zero/utilities/_text.scss +0 -4
  7. data/app/assets/stylesheets/sass-zero/variables/_sizing.scss +5 -5
  8. data/app/assets/stylesheets/sass-zero/variables/_typography.scss +1 -1
  9. data/example.html +15 -15
  10. data/lib/sass_zero/version.rb +1 -1
  11. data/screenshot.png +0 -0
  12. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
4
- data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
3
+ metadata.gz: 5c4b768049ccd8c213c5ca63128311ee2afa78c32eb83cfd0ef25bff68b6553e
4
+ data.tar.gz: 83a405188b5420197fdba4ca1b4f59e399d8f9b4bc08e2fa0534390aaf9f9359
5
5
  SHA512:
6
- metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
7
- data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9
6
+ metadata.gz: 57c801d83311e6d027d4a5bcb67df919626e2a820984d10bc7c53326d0ee65568bedea99d29dc86d3d627a78cb4318df2828f0a82e7be0531ccdd5078ea31670
7
+ data.tar.gz: 2a1483d90af547c934411ac8767bb772e096858d862ccc7ab7ef55adbbe7dd1cd50f77104cbea505d9f31cec45259debb84cac2b97fc5519e94a328909108b8c
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.4.0)
4
+ sass-zero (1.5.0)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/app/assets/stylesheets/sass-zero/base.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  */
29
29
 
30
30
  html {
31
- line-height: 1.5; /* 1 */
31
+ line-height: 1.4; /* 1 */
32
32
  -webkit-text-size-adjust: 100%; /* 2 */
33
33
  -moz-tab-size: 4; /* 3 */
34
34
  tab-size: 4; /* 3 */
data/app/assets/stylesheets/sass-zero/breadboard.scss CHANGED
@@ -30,22 +30,22 @@ $radius-secondary: $rounded;
30
30
  border-color: var(--color-border);
31
31
  }
32
32
 
33
- body {
33
+ html {
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; }
40
+ @media (min-width: $breakpoint-md) {
41
+ html { font-size: $text-xl; }
42
42
  }
43
43
 
44
44
  .btn {
45
45
  border-radius: $radius-primary;
46
46
  border-width: $border;
47
47
  display: inline-block;
48
- padding: $size-1-5 $size-4;
48
+ padding: $size-1-5 $size-3;
49
49
  font-weight: $font-medium;
50
50
  cursor: pointer;
51
51
 
@@ -86,7 +86,7 @@ body {
86
86
  background-color: var(--color-bg--surface);
87
87
  border-radius: $radius-secondary;
88
88
  border-width: $border;
89
- padding: $size-2-5;
89
+ padding: $size-2;
90
90
  width: $w-full;
91
91
 
92
92
  &--select {
@@ -107,19 +107,18 @@ body {
107
107
  .dropdown {
108
108
  background-color: var(--color-bg--surface);
109
109
  border-width: $border; border-radius: $radius-primary;
110
- padding: $size-6;
111
- box-shadow: $shadow-lg;
110
+ padding: $size-4;
112
111
  position: absolute;
113
112
  z-index: $z-10;
114
113
  }
115
114
 
116
115
  [type="checkbox"], [type="radio"] {
117
- transform: scale(1.7); margin: $size-1;
116
+ transform: scale(1.36); margin: $size-1;
118
117
  }
119
118
 
120
119
  blockquote {
121
120
  border-left-width: $border-4;
122
- padding: $size-3;
121
+ padding: $size-2-5;
123
122
  }
124
123
 
125
124
  code {
@@ -138,7 +137,7 @@ pre {
138
137
  > code {
139
138
  border-radius: $rounded-none;
140
139
  display: block;
141
- padding: $size-3;
140
+ padding: $size-2-5;
142
141
  white-space: pre;
143
142
  }
144
143
  }
@@ -147,23 +146,24 @@ kbd {
147
146
  background-color: var(--color-primary);
148
147
  border-radius: $rounded;
149
148
  font-size: $text-sm;
150
- padding: $size-1;
149
+ padding: $size-0-5;
151
150
  color: var(--color-bg--main);
152
151
  }
153
152
 
154
153
  mark {
155
154
  background-color: var(--color-bg--highlight);
156
155
  border-radius: $rounded;
157
- padding: $size-1;
156
+ padding: $size-0-5;
158
157
  color: inherit;
159
158
  }
160
159
 
161
160
  hr {
162
- margin: $size-6 $size-0;
161
+ border-color: var(--color-primary);
162
+ margin: $size-8 $size-0;
163
163
  }
164
164
 
165
165
  menu, ul, ol {
166
- padding-left: $size-8;
166
+ padding-left: $size-10;
167
167
  }
168
168
 
169
169
  menu, ul {
@@ -179,21 +179,21 @@ dt {
179
179
  }
180
180
 
181
181
  fieldset, .input {
182
- margin-bottom: $size-6;
182
+ margin-bottom: $size-5;
183
183
  }
184
184
 
185
185
  h1, h2, h3, h4, h5, h6, .hdg {
186
- margin-bottom: $size-6;
186
+ margin-bottom: $size-5;
187
187
  }
188
188
 
189
189
  table, progress, blockquote, pre, menu, ul, ol, dl, p {
190
- margin-bottom: $size-6;
190
+ margin-bottom: $size-5;
191
191
  }
192
192
 
193
193
  dialog {
194
194
  background-color: var(--color-bg--surface);
195
195
  border-width: $border; border-radius: $radius-primary;
196
- padding: $size-6;
196
+ padding: $size-4;
197
197
  box-shadow: $shadow-lg;
198
198
  color: inherit;
199
199
  }
@@ -220,35 +220,34 @@ table {
220
220
 
221
221
  td, th {
222
222
  border-bottom-width: $border;
223
- padding: $size-4;
223
+ padding: $size-3;
224
224
  text-align: left;
225
225
  }
226
226
 
227
227
  h1, h2, h3, h4, h5, h6, .hdg {
228
- font-weight: $font-bold;
229
- line-height: $leading-tight;
228
+ font-weight: $font-bold; line-height: $leading-none;
230
229
  }
231
230
 
232
231
  h1, .hdg--xx-large {
233
- font-size: $text-5xl;
232
+ font-size: $text-4xl;
234
233
  }
235
234
 
236
235
  h2, .hdg--x-large {
237
- font-size: $text-4xl;
236
+ font-size: $text-2xl;
238
237
  }
239
238
 
240
239
  h3, .hdg--large {
241
- font-size: $text-3xl;
240
+ font-size: $text-lg;
242
241
  }
243
242
 
244
243
  h4, .hdg--medium {
245
- font-size: $text-2xl;
244
+ font-size: $text-base;
246
245
  }
247
246
 
248
247
  h5, .hdg--small {
249
- font-size: $text-xl;
248
+ font-size: $text-sm;
250
249
  }
251
250
 
252
251
  h6, .hdg--x-small {
253
- font-size: $text-lg;
252
+ font-size: $text-xs;
254
253
  }
data/app/assets/stylesheets/sass-zero/utilities/_flex.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  .flex--gap {
33
- gap: $size-3;
33
+ gap: $size-2-5;
34
34
  }
35
35
 
36
36
  .i-flex {
@@ -72,7 +72,7 @@
72
72
 
73
73
  .flex--column\@md {
74
74
  flex-direction: column;
75
- }
75
+ }
76
76
 
77
77
  .flex--centered\@md {
78
78
  justify-content: center;
data/app/assets/stylesheets/sass-zero/utilities/_text.scss CHANGED
@@ -94,10 +94,6 @@
94
94
  font-size: $text-4xl;
95
95
  }
96
96
 
97
- .txt--5xl {
98
- font-size: $text-5xl;
99
- }
100
-
101
97
  .undecorated {
102
98
  color: inherit;
103
99
  text-decoration: none;
data/app/assets/stylesheets/sass-zero/variables/_sizing.scss CHANGED
@@ -39,9 +39,9 @@ $size-80: 20rem;
39
39
  $size-96: 24rem;
40
40
 
41
41
  $size-map: (
42
- "xs": $size-1-5,
43
- "sm": $size-3,
44
- "md": $size-6,
45
- "lg": $size-9,
46
- "xl": $size-12
42
+ "xs": $size-1,
43
+ "sm": $size-2-5,
44
+ "md": $size-5,
45
+ "lg": $size-8,
46
+ "xl": $size-10
47
47
  );
data/app/assets/stylesheets/sass-zero/variables/_typography.scss CHANGED
@@ -40,7 +40,7 @@ $font-black: 900;
40
40
  $leading-none: 1;
41
41
  $leading-tight: 1.25;
42
42
  $leading-snug: 1.375;
43
- $leading-normal: 1.5;
43
+ $leading-normal: 1.4;
44
44
  $leading-relaxed: 1.625;
45
45
  $leading-loose: 2;
46
46
  $leading-3: .75rem;
data/example.html CHANGED
@@ -1,7 +1,7 @@
1
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
- <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
4
+ <p>The base type is 1rem (16px) over 1.4 line height</p>
5
5
  <a href="#" class="txt--underline">Anchor</a>
6
6
  <em>Emphasis</em>
7
7
  <small>Small</small>
@@ -73,38 +73,38 @@
73
73
  <fieldset>
74
74
  <legend class="txt--bold push-xs--bottom">Choose your options</legend>
75
75
 
76
- <div class="push-xs--bottom">
76
+ <div class="flex flex--align-center push-xs--bottom">
77
77
  <input type="checkbox" id="option1" name="option1" value="1" checked>
78
- <label for="option1" class="u-display-ib">Option 1</label>
78
+ <label for="option1" class="flush push-xs--left">Option 1</label>
79
79
  </div>
80
- <div class="push-xs--bottom">
80
+ <div class="flex flex--align-center push-xs--bottom">
81
81
  <input type="checkbox" id="option2" name="option2" value="2">
82
- <label for="option2" class="u-display-ib">Option 2</label>
82
+ <label for="option2" class="flush push-xs--left">Option 2</label>
83
83
  </div>
84
- <div>
84
+ <div class="flex flex--align-center">
85
85
  <input type="checkbox" id="option3" name="option3" value="3">
86
- <label for="option3" class="u-display-ib">Option 3</label>
86
+ <label for="option3" class="flush push-xs--left">Option 3</label>
87
87
  </div>
88
88
  </fieldset>
89
89
 
90
90
  <fieldset>
91
91
  <legend class="txt--bold push-xs--bottom">Choose your option</legend>
92
92
 
93
- <div class="push-xs--bottom">
93
+ <div class="flex flex--align-center push-xs--bottom">
94
94
  <input type="radio" id="radio1" name="radio" value="1" checked>
95
- <label for="radio1" class="u-display-ib">Option 1</label>
95
+ <label for="radio1" class="flush push-xs--left">Option 1</label>
96
96
  </div>
97
- <div class="push-xs--bottom">
97
+ <div class="flex flex--align-center push-xs--bottom">
98
98
  <input type="radio" id="radio2" name="radio" value="2">
99
- <label for="radio2" class="u-display-ib">Option 2</label>
99
+ <label for="radio2" class="flush push-xs--left">Option 2</label>
100
100
  </div>
101
- <div>
101
+ <div class="flex flex--align-center">
102
102
  <input type="radio" id="radio3" name="radio" value="3">
103
- <label for="radio3" class="u-display-ib">Option 3</label>
103
+ <label for="radio3" class="flush push-xs--left">Option 3</label>
104
104
  </div>
105
105
  </fieldset>
106
106
 
107
- <input type="submit" value="Send" class="btn btn--primary">
107
+ <input type="submit" value="Save changes" class="btn btn--primary">
108
108
  </form>
109
109
 
110
110
  <table>
@@ -145,7 +145,7 @@
145
145
  </ol>
146
146
 
147
147
  <dl>
148
- <dt>Description lists</dt>
148
+ <dt class="push-xs--bottom">Description lists</dt>
149
149
  <dd>A description list is perfect for defining terms.</dd>
150
150
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
151
151
  </dl>
data/lib/sass_zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.4.0"
3
+ VERSION = "1.5.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.4.0
4
+ version: 1.5.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-13 00:00:00.000000000 Z
11
+ date: 2023-07-15 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: