sass-zero 1.0.8 → 1.0.12
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 +25 -18
- data/README.md +1 -1
- data/app/assets/stylesheets/sass-zero/breadboard.scss +30 -39
- data/app/assets/stylesheets/sass-zero/mixins.scss +3 -8
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +1 -1
- data/app/assets/stylesheets/sass-zero/utilities/list.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: 5914b5992e27b9c98c9de6c6afe6a6de7c047b6df96781340a2888cff814374d
|
|
4
|
+
data.tar.gz: 97519510d807536d8706d0a7168f3a356801728ccb7a76ec3c6a059fd516b3da
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 25f2a6869a2e9e6ad06b26d3e1688c170f1fa25f26b32c2595114c44810b2efe6e4f18c7d9b68b3b695e82000842edb734fe3d103e20705815d87ec5f6ddc564
|
|
7
|
+
data.tar.gz: 0b6157c85bd2b3ad3ac1821f4a4d2a16b50e7ccba7a96488a79d8e76b0f9cf62c7993cc8cbf5d2058f1c0f18a8e05f6b395cefadaa285123899b6a68132e8a6e
|
data/Example.html
CHANGED
|
@@ -19,9 +19,21 @@
|
|
|
19
19
|
<button class="btn btn--tertiary">Button Tertiary</button>
|
|
20
20
|
|
|
21
21
|
<a href="#" class="btn btn--secondary">Link Button</a>
|
|
22
|
+
|
|
22
23
|
<input type="submit" value="Submit Button" class="btn btn--secondary" />
|
|
23
24
|
|
|
24
|
-
<
|
|
25
|
+
<details>
|
|
26
|
+
<summary class="btn btn--secondary">Popup Button</summary>
|
|
27
|
+
<div class="popup-menu push-xs--top u-position--right">
|
|
28
|
+
<ul class="list--unindented u-nowrap flush">
|
|
29
|
+
<li>Unordered list item 1</li>
|
|
30
|
+
<li>Unordered list item 2</li>
|
|
31
|
+
<li>Unordered list item 3</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
|
|
25
37
|
<button class="btn btn--secondary btn--small">Small Button</button>
|
|
26
38
|
|
|
27
39
|
<hr>
|
|
@@ -52,7 +64,7 @@
|
|
|
52
64
|
<textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
|
|
53
65
|
|
|
54
66
|
<fieldset>
|
|
55
|
-
<legend>Choose your options</legend>
|
|
67
|
+
<legend class="txt--bold">Choose your options</legend>
|
|
56
68
|
|
|
57
69
|
<div>
|
|
58
70
|
<input type="checkbox" id="option1" name="option1" value="1" checked>
|
|
@@ -69,7 +81,7 @@
|
|
|
69
81
|
</fieldset>
|
|
70
82
|
|
|
71
83
|
<fieldset>
|
|
72
|
-
<legend>Choose your option</legend>
|
|
84
|
+
<legend class="txt--bold">Choose your option</legend>
|
|
73
85
|
|
|
74
86
|
<div>
|
|
75
87
|
<input type="radio" id="radio1" name="radio" value="1" checked>
|
|
@@ -115,11 +127,6 @@
|
|
|
115
127
|
</tbody>
|
|
116
128
|
</table>
|
|
117
129
|
|
|
118
|
-
<details>
|
|
119
|
-
<summary>Some details</summary>
|
|
120
|
-
<p>More info about the details.</p>
|
|
121
|
-
</details>
|
|
122
|
-
|
|
123
130
|
<blockquote>
|
|
124
131
|
<p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
|
|
125
132
|
<cite class="txt--sm">– Stephen King</cite>
|
|
@@ -137,29 +144,29 @@
|
|
|
137
144
|
</code>
|
|
138
145
|
</div>
|
|
139
146
|
|
|
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
147
|
<div class="push-3xl--bottom">
|
|
146
148
|
<dialog open>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<button type="submit" value="dismiss">×</button>
|
|
149
|
+
<form method="dialog">
|
|
150
|
+
<span>User was successfully created.</span>
|
|
151
|
+
<button type="submit" value="dismiss" class="push-xs--left txt--lg">×</button>
|
|
150
152
|
</form>
|
|
151
153
|
</dialog>
|
|
152
154
|
</div>
|
|
153
155
|
|
|
156
|
+
<div class="push-md--bottom">
|
|
157
|
+
<label for="progres" class="u-display-b txt--bold">Progress</label>
|
|
158
|
+
<progress id="progres" max="100" value="70">70%</progress>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
154
161
|
<hr>
|
|
155
162
|
|
|
156
|
-
<ul class="list--unindented
|
|
163
|
+
<ul class="list--unindented">
|
|
157
164
|
<li>Unordered list item 1</li>
|
|
158
165
|
<li>Unordered list item 2</li>
|
|
159
166
|
<li>Unordered list item 3</li>
|
|
160
167
|
</ul>
|
|
161
168
|
|
|
162
|
-
<ol class="list--unindented
|
|
169
|
+
<ol class="list--unindented">
|
|
163
170
|
<li>Ordered list item 1</li>
|
|
164
171
|
<li>Ordered list item 2</li>
|
|
165
172
|
<li>Ordered list item 3</li>
|
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
|
-
|
|
6
6
|
|
|
7
7
|
### Milligram
|
|
8
8
|
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
$font-family: $font-sans;
|
|
5
5
|
|
|
6
|
-
$radius-
|
|
7
|
-
$radius-
|
|
6
|
+
$radius-primary: $rounded;
|
|
7
|
+
$radius-secondary: $rounded;
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
10
|
--color-bg--main: #{$white};
|
|
@@ -12,7 +12,6 @@ $radius-default: $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-50)};
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
@media (prefers-color-scheme: dark) {
|
|
@@ -22,7 +21,6 @@ $radius-default: $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-50)};
|
|
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-primary;
|
|
38
36
|
border-width: $border;
|
|
39
37
|
display: inline-block;
|
|
40
38
|
font-weight: $font-bold;
|
|
@@ -61,16 +59,11 @@ html {
|
|
|
61
59
|
font-size: $text-sm;
|
|
62
60
|
}
|
|
63
61
|
|
|
64
|
-
&
|
|
62
|
+
&__icon {
|
|
65
63
|
vertical-align: sub;
|
|
66
64
|
font-size: 1.25em;
|
|
67
65
|
}
|
|
68
66
|
|
|
69
|
-
&:focus {
|
|
70
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
71
|
-
@include outline-none;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
67
|
&:disabled {
|
|
75
68
|
pointer-events: none;
|
|
76
69
|
opacity: $opacity-50;
|
|
@@ -78,12 +71,10 @@ html {
|
|
|
78
71
|
}
|
|
79
72
|
|
|
80
73
|
.input {
|
|
81
|
-
-
|
|
82
|
-
|
|
74
|
+
@include appearance-none;
|
|
83
75
|
resize: none;
|
|
84
|
-
appearance: none;
|
|
85
76
|
background-color: var(--color-bg--main);
|
|
86
|
-
border-radius: $radius-
|
|
77
|
+
border-radius: $radius-secondary;
|
|
87
78
|
border-width: $border;
|
|
88
79
|
padding: $size-2 $size-3;
|
|
89
80
|
width: $w-full;
|
|
@@ -97,25 +88,24 @@ html {
|
|
|
97
88
|
background-size: 5px 5px, 5px 5px;
|
|
98
89
|
}
|
|
99
90
|
|
|
100
|
-
&:focus {
|
|
101
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
102
|
-
@include outline-none;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
91
|
&:disabled {
|
|
106
92
|
pointer-events: none;
|
|
107
93
|
opacity: $opacity-50;
|
|
108
94
|
}
|
|
109
95
|
}
|
|
110
96
|
|
|
97
|
+
.popup-menu {
|
|
98
|
+
background-color: var(--color-bg--surface);
|
|
99
|
+
border-radius: $radius-secondary;
|
|
100
|
+
padding: $size-2 $size-3;
|
|
101
|
+
box-shadow: $shadow-md;
|
|
102
|
+
position: absolute;
|
|
103
|
+
z-index: $z-10;
|
|
104
|
+
}
|
|
105
|
+
|
|
111
106
|
input[type="checkbox"], input[type="radio"] {
|
|
112
107
|
transform: scale(1.2, 1.2);
|
|
113
108
|
margin: $size-1;
|
|
114
|
-
|
|
115
|
-
&:focus {
|
|
116
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
117
|
-
@include outline-none;
|
|
118
|
-
}
|
|
119
109
|
}
|
|
120
110
|
|
|
121
111
|
blockquote {
|
|
@@ -167,11 +157,11 @@ a {
|
|
|
167
157
|
font-weight: $font-bold;
|
|
168
158
|
}
|
|
169
159
|
|
|
170
|
-
ul, ol {
|
|
160
|
+
menu, ul, ol {
|
|
171
161
|
padding-left: $size-10;
|
|
172
162
|
}
|
|
173
163
|
|
|
174
|
-
ul {
|
|
164
|
+
menu, ul {
|
|
175
165
|
list-style: disc outside;
|
|
176
166
|
}
|
|
177
167
|
|
|
@@ -179,11 +169,11 @@ ol {
|
|
|
179
169
|
list-style: decimal outside;
|
|
180
170
|
}
|
|
181
171
|
|
|
182
|
-
|
|
172
|
+
dt {
|
|
183
173
|
font-weight: $font-bold;
|
|
184
174
|
}
|
|
185
175
|
|
|
186
|
-
label, legend, dt {
|
|
176
|
+
label, legend, dt, dd, li {
|
|
187
177
|
margin-bottom: $size-1;
|
|
188
178
|
}
|
|
189
179
|
|
|
@@ -195,15 +185,15 @@ fieldset, .input {
|
|
|
195
185
|
margin-bottom: $size-6;
|
|
196
186
|
}
|
|
197
187
|
|
|
198
|
-
table, progress,
|
|
188
|
+
table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
|
|
199
189
|
margin-bottom: $size-6;
|
|
200
190
|
}
|
|
201
191
|
|
|
202
192
|
dialog {
|
|
203
193
|
background-color: var(--color-bg--surface);
|
|
204
|
-
border-radius: $radius-
|
|
194
|
+
border-radius: $radius-primary;
|
|
205
195
|
padding: $size-3 $size-4;
|
|
206
|
-
box-shadow: $shadow-
|
|
196
|
+
box-shadow: $shadow-lg;
|
|
207
197
|
color: inherit;
|
|
208
198
|
}
|
|
209
199
|
|
|
@@ -220,15 +210,16 @@ progress {
|
|
|
220
210
|
}
|
|
221
211
|
|
|
222
212
|
details {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
padding: $size-2 $size-3;
|
|
213
|
+
position: relative;
|
|
214
|
+
display: inline-block;
|
|
226
215
|
}
|
|
227
216
|
|
|
228
217
|
summary {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
218
|
+
list-style: none;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
summary::-webkit-details-marker {
|
|
222
|
+
display: none;
|
|
232
223
|
}
|
|
233
224
|
|
|
234
225
|
table, progress {
|
|
@@ -238,7 +229,7 @@ table, progress {
|
|
|
238
229
|
td, th {
|
|
239
230
|
border-bottom-width: $border;
|
|
240
231
|
padding: $size-3 $size-4;
|
|
241
|
-
text-align:
|
|
232
|
+
text-align: left;
|
|
242
233
|
}
|
|
243
234
|
|
|
244
235
|
h1, h2, h3, h4, h5, h6, .hdg {
|
|
@@ -24,14 +24,9 @@
|
|
|
24
24
|
outline-offset: 2px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
@mixin
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@mixin outline-black {
|
|
33
|
-
outline: 2px dotted black;
|
|
34
|
-
outline-offset: 2px;
|
|
27
|
+
@mixin appearance-none {
|
|
28
|
+
-webkit-appearance: none;
|
|
29
|
+
appearance: none;
|
|
35
30
|
}
|
|
36
31
|
|
|
37
32
|
@mixin progress-bar {
|
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.12",
|
|
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.12
|
|
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-10 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|