sass-zero 1.0.5 → 1.0.9

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: f32539e9c34c61f5d5be57df924b211662fbb61c8600b75e4d276a684976bb0b
4
- data.tar.gz: c6cc588d93f8dd57bd6dcd91090b9bb3ef5f661f8c831e5b2a6af71e30461479
3
+ metadata.gz: b5659e49579ad584864c8f31503efcb6157ac2d840433af384368e15aa03d6b8
4
+ data.tar.gz: c96bc947bd98a65642391a7f2a34d3097054b2be7f0b9833390de3fbdc18d232
5
5
  SHA512:
6
- metadata.gz: 74014a811dff43c7348d850726619c924231fcb810e3c61fcc27444b4d6b8730f1acf7f9691486026b1c123970223ac52b76c1e0967dfa70e716bacac738d979
7
- data.tar.gz: cc6eb9014294a9c7fe3c578d54d96a7fdd97c5466a332629d3e3ad77e47b065aec5572aba96fc0b93d987b0c9f8e54e4f444121607e0dbba245deb84f89b46cd
6
+ metadata.gz: 63201f3571e76a7775d590efb37c959452fbd8ccb658d0065afd7ab3edd9869c88674690327c2b8e2e9ba857c69c6abf31a454e437ec9d4cffcd20bb64873820
7
+ data.tar.gz: 212e63c5e6be1bb579d06cee1fd019da1594b7816394f08a89a7b46d52208109bf3b7408ff6d5cd97167f78105e813375eeb2099e87c0c76e91092e1c6d8f989
data/Example.html CHANGED
@@ -26,56 +26,70 @@
26
26
 
27
27
  <hr>
28
28
 
29
- <form class="push-lg--bottom">
30
- <div class="push-md--bottom">
31
- <label for="nameField" class="u-display-b txt--bold">Name</label>
32
- <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
33
-
34
- <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
35
- <select id="ageRangeField" class="input input--select">
36
- <option value="0-13">0-13</option>
37
- <option value="14-17">14-17</option>
38
- <option value="18-23">18-23</option>
39
- <option value="24+">24+</option>
40
- </select>
41
-
42
- <label for="commentField" class="u-display-b txt--bold">Comment</label>
43
- <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
44
-
45
- <div class="push-md--bottom">
46
- <div>
47
- <input type="checkbox" id="option1" name="option1" value="1" checked>
48
- <label for="option1" class="u-display-ib">Option 1</label>
49
- </div>
50
- <div>
51
- <input type="checkbox" id="option2" name="option2" value="2">
52
- <label for="option2" class="u-display-ib">Option 2</label>
53
- </div>
54
- <div>
55
- <input type="checkbox" id="option3" name="option3" value="3">
56
- <label for="option3" class="u-display-ib">Option 3</label>
57
- </div>
29
+ <form class="push-md--bottom">
30
+ <label for="nameField" class="u-display-b txt--bold">Name</label>
31
+ <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
32
+
33
+ <label for="iceCreamField" class="u-display-b txt--bold">Choose a flavor:</label>
34
+ <input list="iceCreamFlavors" id="iceCreamField" class="input" />
35
+ <datalist id="iceCreamFlavors">
36
+ <option value="Chocolate">
37
+ <option value="Coconut">
38
+ <option value="Mint">
39
+ <option value="Strawberry">
40
+ <option value="Vanilla">
41
+ </datalist>
42
+
43
+ <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
44
+ <select id="ageRangeField" class="input input--select">
45
+ <option value="0-13">0-13</option>
46
+ <option value="14-17">14-17</option>
47
+ <option value="18-23">18-23</option>
48
+ <option value="24+">24+</option>
49
+ </select>
50
+
51
+ <label for="commentField" class="u-display-b txt--bold">Comment</label>
52
+ <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
53
+
54
+ <fieldset>
55
+ <legend class="txt--bold">Choose your options</legend>
56
+
57
+ <div>
58
+ <input type="checkbox" id="option1" name="option1" value="1" checked>
59
+ <label for="option1" class="u-display-ib">Option 1</label>
58
60
  </div>
61
+ <div>
62
+ <input type="checkbox" id="option2" name="option2" value="2">
63
+ <label for="option2" class="u-display-ib">Option 2</label>
64
+ </div>
65
+ <div>
66
+ <input type="checkbox" id="option3" name="option3" value="3">
67
+ <label for="option3" class="u-display-ib">Option 3</label>
68
+ </div>
69
+ </fieldset>
70
+
71
+ <fieldset>
72
+ <legend class="txt--bold">Choose your option</legend>
59
73
 
60
- <div class="push-md--bottom">
61
- <div>
62
- <input type="radio" id="radio1" name="radio" value="1" checked>
63
- <label for="radio1" class="u-display-ib">Option 1</label>
64
- </div>
65
- <div>
66
- <input type="radio" id="radio2" name="radio" value="2">
67
- <label for="radio2" class="u-display-ib">Option 2</label>
68
- </div>
69
- <div>
70
- <input type="radio" id="radio3" name="radio" value="3">
71
- <label for="radio3" class="u-display-ib">Option 3</label>
72
- </div>
74
+ <div>
75
+ <input type="radio" id="radio1" name="radio" value="1" checked>
76
+ <label for="radio1" class="u-display-ib">Option 1</label>
73
77
  </div>
74
- </div>
78
+ <div>
79
+ <input type="radio" id="radio2" name="radio" value="2">
80
+ <label for="radio2" class="u-display-ib">Option 2</label>
81
+ </div>
82
+ <div>
83
+ <input type="radio" id="radio3" name="radio" value="3">
84
+ <label for="radio3" class="u-display-ib">Option 3</label>
85
+ </div>
86
+ </fieldset>
75
87
 
76
88
  <input type="submit" value="Send" class="btn btn--primary">
77
89
  </form>
78
90
 
91
+ <hr>
92
+
79
93
  <table>
80
94
  <thead>
81
95
  <tr>
@@ -102,13 +116,13 @@
102
116
  </table>
103
117
 
104
118
  <details>
105
- <summary class="txt--bold">Some details</summary>
119
+ <summary>Some details</summary>
106
120
  <p>More info about the details.</p>
107
121
  </details>
108
122
 
109
123
  <blockquote>
110
124
  <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
111
- <cite>– Stephen King</cite>
125
+ <cite class="txt--sm">– Stephen King</cite>
112
126
  </blockquote>
113
127
 
114
128
  <pre><code>.milligram {
@@ -123,6 +137,20 @@
123
137
  </code>
124
138
  </div>
125
139
 
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">
146
+ <dialog open>
147
+ <form method="dialog">
148
+ <span>User was successfully created.</span>
149
+ <button type="submit" value="dismiss" class="push-xs--left txt--lg">&times;</button>
150
+ </form>
151
+ </dialog>
152
+ </div>
153
+
126
154
  <hr>
127
155
 
128
156
  <ul class="list--unindented ">
@@ -138,7 +166,7 @@
138
166
  </ol>
139
167
 
140
168
  <dl>
141
- <dt class="txt--bold">Description lists</dt>
169
+ <dt>Description lists</dt>
142
170
  <dd>A description list is perfect for defining terms.</dd>
143
171
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
144
172
  </dl>
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.png)
5
+ ![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-2.png)
6
6
 
7
7
  ### Milligram
8
8
 
@@ -10,7 +10,7 @@ SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tai
10
10
 
11
11
  SASS-ZERO comes with a basic grayscale theme that help you to bring your ideas to life, questions about font, color, spacing and layout can be resolved after the raw affordances.
12
12
 
13
- ### Tailwindcss
13
+ ### Tailwind CSS
14
14
 
15
15
  "Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - [Refactoring UI](https://refactoringui.com/book).
16
16
 
@@ -111,7 +111,7 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
111
111
  ## References
112
112
 
113
113
  - [SASS](https://sass-lang.com)
114
- - [Tailwindcss](https://tailwindcss.com)
114
+ - [Tailwind CSS](https://tailwindcss.com)
115
115
  - [Milligram](https://milligram.io)
116
116
  - [BEM](http://getbem.com/naming)
117
117
  - [Refactoring UI](https://refactoringui.com/book)
@@ -3,8 +3,8 @@
3
3
 
4
4
  $font-family: $font-sans;
5
5
 
6
- $radius-input: $rounded;
7
- $radius-button: $rounded;
6
+ $radius-input: $rounded;
7
+ $radius-default: $rounded;
8
8
 
9
9
  :root {
10
10
  --color-bg--main: #{$white};
@@ -12,7 +12,6 @@ $radius-button: $rounded;
12
12
  --color-bg--highlight: #{$gray-200};
13
13
  --color-primary: #{$gray-900};
14
14
  --color-text: #{$gray-900};
15
- --color-focus-ring: #{rgba($black, $opacity-60)};
16
15
  }
17
16
 
18
17
  @media (prefers-color-scheme: dark) {
@@ -22,7 +21,6 @@ $radius-button: $rounded;
22
21
  --color-bg--highlight: #{$gray-700};
23
22
  --color-primary: #{$white};
24
23
  --color-text: #{$white};
25
- --color-focus-ring: #{rgba($white, $opacity-60)};
26
24
  }
27
25
  }
28
26
 
@@ -34,7 +32,7 @@ html {
34
32
  }
35
33
 
36
34
  .btn {
37
- border-radius: $radius-button;
35
+ border-radius: $radius-default;
38
36
  border-width: $border;
39
37
  display: inline-block;
40
38
  font-weight: $font-bold;
@@ -50,7 +48,6 @@ html {
50
48
  &--secondary {
51
49
  background-color: var(--color-bg--main);
52
50
  border-color: var(--color-primary);
53
- color: var(--color-primary);
54
51
  }
55
52
 
56
53
  &--tertiary {
@@ -67,11 +64,6 @@ html {
67
64
  font-size: 1.25em;
68
65
  }
69
66
 
70
- &:focus {
71
- box-shadow: ring($color: var(--color-focus-ring));
72
- @include outline-none;
73
- }
74
-
75
67
  &:disabled {
76
68
  pointer-events: none;
77
69
  opacity: $opacity-50;
@@ -98,11 +90,6 @@ html {
98
90
  background-size: 5px 5px, 5px 5px;
99
91
  }
100
92
 
101
- &:focus {
102
- box-shadow: ring($color: var(--color-focus-ring));
103
- @include outline-none;
104
- }
105
-
106
93
  &:disabled {
107
94
  pointer-events: none;
108
95
  opacity: $opacity-50;
@@ -112,11 +99,6 @@ html {
112
99
  input[type="checkbox"], input[type="radio"] {
113
100
  transform: scale(1.2, 1.2);
114
101
  margin: $size-1;
115
-
116
- &:focus {
117
- box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
118
- @include outline-none;
119
- }
120
102
  }
121
103
 
122
104
  blockquote {
@@ -180,6 +162,10 @@ ol {
180
162
  list-style: decimal outside;
181
163
  }
182
164
 
165
+ dt {
166
+ font-weight: $font-bold;
167
+ }
168
+
183
169
  label, legend, dt {
184
170
  margin-bottom: $size-1;
185
171
  }
@@ -192,25 +178,43 @@ fieldset, .input {
192
178
  margin-bottom: $size-6;
193
179
  }
194
180
 
195
- table, details, blockquote, figure, p, pre, ul, ol, dl {
181
+ table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
196
182
  margin-bottom: $size-6;
197
183
  }
198
184
 
199
- details {
200
- padding: $size-2 $size-3;
185
+ dialog {
201
186
  background-color: var(--color-bg--surface);
202
- border-left-width: $border-4;
187
+ border-radius: $radius-default;
188
+ padding: $size-3 $size-4;
189
+ box-shadow: $shadow-md;
190
+ color: inherit;
203
191
  }
204
192
 
205
- details[open] > summary {
206
- margin-bottom: $size-1;
193
+ dialog::backdrop {
194
+ background-color: rgba($gray-500, $opacity-75);
195
+ }
196
+
197
+ progress {
198
+ background-color: var(--color-bg--surface);
199
+ }
200
+
201
+ @include progress-bar {
202
+ background-color: var(--color-primary);
203
+ }
204
+
205
+ details {
206
+ background-color: var(--color-bg--surface);
207
+ border-left-width: $border-4;
208
+ padding: $size-2 $size-3;
207
209
  }
208
210
 
209
211
  summary {
212
+ padding: $size-1 $size-0;
213
+ font-weight: $font-bold;
210
214
  cursor: pointer;
211
215
  }
212
216
 
213
- table {
217
+ table, progress {
214
218
  width: $w-full;
215
219
  }
216
220
 
@@ -248,7 +252,3 @@ h5, .hdg--lg {
248
252
  h6, .hdg--base {
249
253
  font-size: $text-base;
250
254
  }
251
-
252
- figcaption, cite {
253
- font-size: $text-sm;
254
- }
@@ -24,14 +24,14 @@
24
24
  outline-offset: 2px;
25
25
  }
26
26
 
27
- @mixin outline-white {
28
- outline: 2px dotted white;
29
- outline-offset: 2px;
30
- }
27
+ @mixin progress-bar {
28
+ ::-webkit-progress-value {
29
+ @content;
30
+ }
31
31
 
32
- @mixin outline-black {
33
- outline: 2px dotted black;
34
- outline-offset: 2px;
32
+ ::-moz-progress-bar {
33
+ @content;
34
+ }
35
35
  }
36
36
 
37
37
  @mixin make-container($padding-x: $size-4) {
@@ -2,6 +2,10 @@
2
2
  @import "sass-zero/variables/effects";
3
3
  @import "sass-zero/mixins";
4
4
 
5
+ .debug * {
6
+ outline: 1px red solid !important;
7
+ }
8
+
5
9
  .u-display-n {
6
10
  display: none !important;
7
11
  }
@@ -38,7 +38,7 @@ $opacity-100: 1;
38
38
  // Function for creating outline rings with box-shadows.
39
39
  // box-shadow: ring($width: 4px);
40
40
  // *******************************************************************
41
- @function ring($width: 3px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
41
+ @function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
42
42
  @if $inset {
43
43
  $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
44
44
  $ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.0.5"
3
+ VERSION = "1.0.9"
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.5",
3
+ "version": "1.0.9",
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.5
4
+ version: 1.0.9
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-04 00:00:00.000000000 Z
11
+ date: 2022-02-08 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: