sass-zero 1.0.6 → 1.0.10

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: adef51cc03a758413be5741aff678a80a867d5aabda576a6fd94190efa7af3ce
4
- data.tar.gz: da62d60ae3195a3fa26adcc412fb5bcf4b740f1b86ba4a49646c42f4d998788c
3
+ metadata.gz: 68f7330dbd9cb3e845544d409b180a4e49f0e5c61138b85e209140385f95a12f
4
+ data.tar.gz: 185299448e7e080b8bd0e950ad4b0e4cd332d5e9865783998f9df01146e3b529
5
5
  SHA512:
6
- metadata.gz: 769208b9b4e988e18278ca762c8f195db07c8a03f2dae98e0d36850c67ac622ac021f423c2d837e0fe6dc28aa72a82898edc2e4773b813e27ad181ab1a51caf4
7
- data.tar.gz: 27c8a878a8261175e5d1357ebf0a9a2165f5870ca93220e1fac51129cb9d1ade5e0071683f69cf70363f4f086ea77452f202318f3e1f76e74d377696c3878ae7
6
+ metadata.gz: 5bd9b50752c33876ae9d403145f40905c75cade64315423a9fa4adee0ea07f35f3245192f0fb805633c55ae4fd3c453534316c74c0de8f4babf796f2b2c30ef6
7
+ data.tar.gz: d78d0d6e1e7e695b264f8ce8c2fead3d90c259c0013f6d163ff891fc0ec7379214e4201c649ed1a445632ec83070b15e59d871d84ea048daefb73fb7444c7b30
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,22 +137,36 @@
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
- <ul class="list--unindented ">
156
+ <ul class="list--unindented">
129
157
  <li>Unordered list item 1</li>
130
158
  <li>Unordered list item 2</li>
131
159
  <li>Unordered list item 3</li>
132
160
  </ul>
133
161
 
134
- <ol class="list--unindented ">
162
+ <ol class="list--unindented">
135
163
  <li>Ordered list item 1</li>
136
164
  <li>Ordered list item 2</li>
137
165
  <li>Ordered list item 3</li>
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;
@@ -79,10 +71,8 @@ html {
79
71
  }
80
72
 
81
73
  .input {
82
- -webkit-appearance: none;
83
-
74
+ @include appearance-none;
84
75
  resize: none;
85
- appearance: none;
86
76
  background-color: var(--color-bg--main);
87
77
  border-radius: $radius-input;
88
78
  border-width: $border;
@@ -98,11 +88,6 @@ html {
98
88
  background-size: 5px 5px, 5px 5px;
99
89
  }
100
90
 
101
- &:focus {
102
- box-shadow: ring($color: var(--color-focus-ring));
103
- @include outline-none;
104
- }
105
-
106
91
  &:disabled {
107
92
  pointer-events: none;
108
93
  opacity: $opacity-50;
@@ -112,11 +97,6 @@ html {
112
97
  input[type="checkbox"], input[type="radio"] {
113
98
  transform: scale(1.2, 1.2);
114
99
  margin: $size-1;
115
-
116
- &:focus {
117
- box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
118
- @include outline-none;
119
- }
120
100
  }
121
101
 
122
102
  blockquote {
@@ -168,11 +148,11 @@ a {
168
148
  font-weight: $font-bold;
169
149
  }
170
150
 
171
- ul, ol {
151
+ menu, ul, ol {
172
152
  padding-left: $size-10;
173
153
  }
174
154
 
175
- ul {
155
+ menu, ul {
176
156
  list-style: disc outside;
177
157
  }
178
158
 
@@ -180,7 +160,11 @@ ol {
180
160
  list-style: decimal outside;
181
161
  }
182
162
 
183
- label, legend, dt {
163
+ dt {
164
+ font-weight: $font-bold;
165
+ }
166
+
167
+ label, legend, dt, dd, li {
184
168
  margin-bottom: $size-1;
185
169
  }
186
170
 
@@ -192,32 +176,50 @@ fieldset, .input {
192
176
  margin-bottom: $size-6;
193
177
  }
194
178
 
195
- table, details, blockquote, figure, p, pre, ul, ol, dl {
179
+ table, progress, details, blockquote, figure, pre, menu, ul, ol, dl, p {
196
180
  margin-bottom: $size-6;
197
181
  }
198
182
 
199
- details {
200
- padding: $size-2 $size-3;
183
+ dialog {
201
184
  background-color: var(--color-bg--surface);
202
- border-left-width: $border-4;
185
+ border-radius: $radius-default;
186
+ padding: $size-3 $size-4;
187
+ box-shadow: $shadow-md;
188
+ color: inherit;
203
189
  }
204
190
 
205
- details[open] > summary {
206
- margin-bottom: $size-1;
191
+ dialog::backdrop {
192
+ background-color: rgba($gray-500, $opacity-75);
193
+ }
194
+
195
+ progress {
196
+ background-color: var(--color-bg--surface);
197
+ }
198
+
199
+ @include progress-bar {
200
+ background-color: var(--color-primary);
201
+ }
202
+
203
+ details {
204
+ background-color: var(--color-bg--surface);
205
+ border-left-width: $border-4;
206
+ padding: $size-2 $size-3;
207
207
  }
208
208
 
209
209
  summary {
210
+ padding: $size-1 $size-0;
211
+ font-weight: $font-bold;
210
212
  cursor: pointer;
211
213
  }
212
214
 
213
- table {
215
+ table, progress {
214
216
  width: $w-full;
215
217
  }
216
218
 
217
219
  td, th {
218
220
  border-bottom-width: $border;
219
221
  padding: $size-3 $size-4;
220
- text-align: inherit;
222
+ text-align: left;
221
223
  }
222
224
 
223
225
  h1, h2, h3, h4, h5, h6, .hdg {
@@ -248,7 +250,3 @@ h5, .hdg--lg {
248
250
  h6, .hdg--base {
249
251
  font-size: $text-base;
250
252
  }
251
-
252
- figcaption, cite {
253
- font-size: $text-sm;
254
- }
@@ -24,14 +24,19 @@
24
24
  outline-offset: 2px;
25
25
  }
26
26
 
27
- @mixin outline-white {
28
- outline: 2px dotted white;
29
- outline-offset: 2px;
27
+ @mixin appearance-none {
28
+ -webkit-appearance: none;
29
+ appearance: none;
30
30
  }
31
31
 
32
- @mixin outline-black {
33
- outline: 2px dotted black;
34
- outline-offset: 2px;
32
+ @mixin progress-bar {
33
+ ::-webkit-progress-value {
34
+ @content;
35
+ }
36
+
37
+ ::-moz-progress-bar {
38
+ @content;
39
+ }
35
40
  }
36
41
 
37
42
  @mixin make-container($padding-x: $size-4) {
@@ -56,7 +56,7 @@
56
56
 
57
57
  .u-disabled {
58
58
  pointer-events: none;
59
- opacity: $opacity-30;
59
+ opacity: $opacity-50;
60
60
  }
61
61
 
62
62
  .u-off-screen {
@@ -2,7 +2,7 @@
2
2
  @import "sass-zero/mixins";
3
3
 
4
4
  .list--unindented {
5
- padding-left: $size-4;
5
+ padding-left: 1.2em;
6
6
  }
7
7
 
8
8
  .list--flush {
@@ -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.6"
3
+ VERSION = "1.0.10"
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.6",
3
+ "version": "1.0.10",
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.6
4
+ version: 1.0.10
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-05 00:00:00.000000000 Z
11
+ date: 2022-02-09 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: