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 +4 -4
- data/Example.html +74 -46
- data/README.md +3 -3
- data/app/assets/stylesheets/sass-zero/breadboard.scss +32 -32
- data/app/assets/stylesheets/sass-zero/mixins.scss +7 -7
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +4 -0
- data/app/assets/stylesheets/sass-zero/variables/effects.scss +1 -1
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b5659e49579ad584864c8f31503efcb6157ac2d840433af384368e15aa03d6b8
|
|
4
|
+
data.tar.gz: c96bc947bd98a65642391a7f2a34d3097054b2be7f0b9833390de3fbdc18d232
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<option value="
|
|
37
|
-
<option value="
|
|
38
|
-
<option value="
|
|
39
|
-
<option value="
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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
|
|
61
|
-
<
|
|
62
|
-
|
|
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
|
-
|
|
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
|
|
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">×</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
|
|
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
|
-
|
|
5
|
+
|
|
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
|
-
###
|
|
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
|
-
- [
|
|
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:
|
|
7
|
-
$radius-
|
|
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-
|
|
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,
|
|
181
|
+
table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
|
|
196
182
|
margin-bottom: $size-6;
|
|
197
183
|
}
|
|
198
184
|
|
|
199
|
-
|
|
200
|
-
padding: $size-2 $size-3;
|
|
185
|
+
dialog {
|
|
201
186
|
background-color: var(--color-bg--surface);
|
|
202
|
-
border-
|
|
187
|
+
border-radius: $radius-default;
|
|
188
|
+
padding: $size-3 $size-4;
|
|
189
|
+
box-shadow: $shadow-md;
|
|
190
|
+
color: inherit;
|
|
203
191
|
}
|
|
204
192
|
|
|
205
|
-
|
|
206
|
-
|
|
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
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
27
|
+
@mixin progress-bar {
|
|
28
|
+
::-webkit-progress-value {
|
|
29
|
+
@content;
|
|
30
|
+
}
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
::-moz-progress-bar {
|
|
33
|
+
@content;
|
|
34
|
+
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
@mixin make-container($padding-x: $size-4) {
|
|
@@ -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:
|
|
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;
|
data/lib/sass/zero/version.rb
CHANGED
data/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sass-zero",
|
|
3
|
-
"version": "1.0.
|
|
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.
|
|
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-
|
|
11
|
+
date: 2022-02-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|