sass-zero 1.0.4 → 1.0.8
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 +78 -48
- data/README.md +4 -3
- data/app/assets/stylesheets/sass-zero/breadboard.scss +49 -18
- data/app/assets/stylesheets/sass-zero/mixins.scss +10 -0
- 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: 41f5961f2e4121bcc2bf748c61346efa6936d44f5111d51262ecaf45b174d17f
|
|
4
|
+
data.tar.gz: 759ced164e039dfdfb0f6291a5ec05aa31afce6af6ae1c4fef8b48dc159d6ddd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 265d6df80f8ceb1aa0527427d833a09f9605cabb668bc8fb851f435201f671db52fafc1e5e35ad02b9ab69185f06cb605e28ce7026a33e8d4c21eaed6fa71021
|
|
7
|
+
data.tar.gz: 71a935136ad83536ee5f4f782f27fb70456183221c5f6386572a0f61cbff4f11dc29068da86824447179261f3f010b32ec81b9f0609172f7b9ccc2347547517d
|
data/Example.html
CHANGED
|
@@ -18,62 +18,78 @@
|
|
|
18
18
|
<button class="btn btn--secondary">Button Secondary</button>
|
|
19
19
|
<button class="btn btn--tertiary">Button Tertiary</button>
|
|
20
20
|
|
|
21
|
-
<a href="#" class="btn btn--
|
|
21
|
+
<a href="#" class="btn btn--secondary">Link Button</a>
|
|
22
|
+
<input type="submit" value="Submit Button" class="btn btn--secondary" />
|
|
22
23
|
|
|
23
|
-
<
|
|
24
|
+
<button class="btn btn--secondary"><i class="bx bx-plus"></i> Icon Button</button>
|
|
25
|
+
<button class="btn btn--secondary btn--small">Small Button</button>
|
|
24
26
|
|
|
25
27
|
<hr>
|
|
26
28
|
|
|
27
|
-
<form class="push-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<option value="
|
|
35
|
-
<option value="
|
|
36
|
-
<option value="
|
|
37
|
-
<option value="
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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>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>
|
|
56
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>Choose your option</legend>
|
|
57
73
|
|
|
58
|
-
<div
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
<label for="radio1" class="u-display-ib">Option 1</label>
|
|
62
|
-
</div>
|
|
63
|
-
<div>
|
|
64
|
-
<input type="radio" id="radio2" name="radio" value="2">
|
|
65
|
-
<label for="radio2" class="u-display-ib">Option 2</label>
|
|
66
|
-
</div>
|
|
67
|
-
<div>
|
|
68
|
-
<input type="radio" id="radio3" name="radio" value="3">
|
|
69
|
-
<label for="radio3" class="u-display-ib">Option 3</label>
|
|
70
|
-
</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>
|
|
71
77
|
</div>
|
|
72
|
-
|
|
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>
|
|
73
87
|
|
|
74
88
|
<input type="submit" value="Send" class="btn btn--primary">
|
|
75
89
|
</form>
|
|
76
90
|
|
|
91
|
+
<hr>
|
|
92
|
+
|
|
77
93
|
<table>
|
|
78
94
|
<thead>
|
|
79
95
|
<tr>
|
|
@@ -100,13 +116,13 @@
|
|
|
100
116
|
</table>
|
|
101
117
|
|
|
102
118
|
<details>
|
|
103
|
-
<summary
|
|
119
|
+
<summary>Some details</summary>
|
|
104
120
|
<p>More info about the details.</p>
|
|
105
121
|
</details>
|
|
106
122
|
|
|
107
123
|
<blockquote>
|
|
108
124
|
<p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
|
|
109
|
-
<cite>– Stephen King</cite>
|
|
125
|
+
<cite class="txt--sm">– Stephen King</cite>
|
|
110
126
|
</blockquote>
|
|
111
127
|
|
|
112
128
|
<pre><code>.milligram {
|
|
@@ -121,6 +137,20 @@
|
|
|
121
137
|
</code>
|
|
122
138
|
</div>
|
|
123
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
|
+
User was successfully created.
|
|
148
|
+
<form method="dialog" class="u-display-ib push-md--left txt--lg">
|
|
149
|
+
<button type="submit" value="dismiss">×</button>
|
|
150
|
+
</form>
|
|
151
|
+
</dialog>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
124
154
|
<hr>
|
|
125
155
|
|
|
126
156
|
<ul class="list--unindented ">
|
|
@@ -136,7 +166,7 @@
|
|
|
136
166
|
</ol>
|
|
137
167
|
|
|
138
168
|
<dl>
|
|
139
|
-
<dt
|
|
169
|
+
<dt>Description lists</dt>
|
|
140
170
|
<dd>A description list is perfect for defining terms.</dd>
|
|
141
171
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
|
142
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,11 +111,12 @@ 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)
|
|
118
118
|
- [Shape UP](https://basecamp.com/shapeup)
|
|
119
|
+
- [Boxicons](https://boxicons.com)
|
|
119
120
|
|
|
120
121
|
## License
|
|
121
122
|
|
|
@@ -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,7 @@ $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-
|
|
15
|
+
--color-focus-ring: #{rgba($black, $opacity-50)};
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@media (prefers-color-scheme: dark) {
|
|
@@ -22,7 +22,7 @@ $radius-button: $rounded;
|
|
|
22
22
|
--color-bg--highlight: #{$gray-700};
|
|
23
23
|
--color-primary: #{$white};
|
|
24
24
|
--color-text: #{$white};
|
|
25
|
-
--color-focus-ring: #{rgba($white, $opacity-
|
|
25
|
+
--color-focus-ring: #{rgba($white, $opacity-50)};
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
@@ -34,7 +34,7 @@ html {
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.btn {
|
|
37
|
-
border-radius: $radius-
|
|
37
|
+
border-radius: $radius-default;
|
|
38
38
|
border-width: $border;
|
|
39
39
|
display: inline-block;
|
|
40
40
|
font-weight: $font-bold;
|
|
@@ -50,7 +50,6 @@ html {
|
|
|
50
50
|
&--secondary {
|
|
51
51
|
background-color: var(--color-bg--main);
|
|
52
52
|
border-color: var(--color-primary);
|
|
53
|
-
color: var(--color-primary);
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
&--tertiary {
|
|
@@ -58,6 +57,15 @@ html {
|
|
|
58
57
|
border-color: $transparent;
|
|
59
58
|
}
|
|
60
59
|
|
|
60
|
+
&--small {
|
|
61
|
+
font-size: $text-sm;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
& > i {
|
|
65
|
+
vertical-align: sub;
|
|
66
|
+
font-size: 1.25em;
|
|
67
|
+
}
|
|
68
|
+
|
|
61
69
|
&:focus {
|
|
62
70
|
box-shadow: ring($color: var(--color-focus-ring));
|
|
63
71
|
@include outline-none;
|
|
@@ -93,6 +101,11 @@ html {
|
|
|
93
101
|
box-shadow: ring($color: var(--color-focus-ring));
|
|
94
102
|
@include outline-none;
|
|
95
103
|
}
|
|
104
|
+
|
|
105
|
+
&:disabled {
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
opacity: $opacity-50;
|
|
108
|
+
}
|
|
96
109
|
}
|
|
97
110
|
|
|
98
111
|
input[type="checkbox"], input[type="radio"] {
|
|
@@ -100,7 +113,7 @@ input[type="checkbox"], input[type="radio"] {
|
|
|
100
113
|
margin: $size-1;
|
|
101
114
|
|
|
102
115
|
&:focus {
|
|
103
|
-
box-shadow: ring($
|
|
116
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
|
104
117
|
@include outline-none;
|
|
105
118
|
}
|
|
106
119
|
}
|
|
@@ -166,6 +179,10 @@ ol {
|
|
|
166
179
|
list-style: decimal outside;
|
|
167
180
|
}
|
|
168
181
|
|
|
182
|
+
legend, dt {
|
|
183
|
+
font-weight: $font-bold;
|
|
184
|
+
}
|
|
185
|
+
|
|
169
186
|
label, legend, dt {
|
|
170
187
|
margin-bottom: $size-1;
|
|
171
188
|
}
|
|
@@ -178,25 +195,43 @@ fieldset, .input {
|
|
|
178
195
|
margin-bottom: $size-6;
|
|
179
196
|
}
|
|
180
197
|
|
|
181
|
-
table, details, blockquote, figure,
|
|
198
|
+
table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
|
|
182
199
|
margin-bottom: $size-6;
|
|
183
200
|
}
|
|
184
201
|
|
|
185
|
-
|
|
186
|
-
padding: $size-2 $size-3;
|
|
202
|
+
dialog {
|
|
187
203
|
background-color: var(--color-bg--surface);
|
|
188
|
-
border-
|
|
204
|
+
border-radius: $radius-default;
|
|
205
|
+
padding: $size-3 $size-4;
|
|
206
|
+
box-shadow: $shadow-md;
|
|
207
|
+
color: inherit;
|
|
189
208
|
}
|
|
190
209
|
|
|
191
|
-
|
|
192
|
-
|
|
210
|
+
dialog::backdrop {
|
|
211
|
+
background-color: rgba($gray-500, $opacity-75);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
progress {
|
|
215
|
+
background-color: var(--color-bg--surface);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
@include progress-bar {
|
|
219
|
+
background-color: var(--color-primary);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
details {
|
|
223
|
+
background-color: var(--color-bg--surface);
|
|
224
|
+
border-left-width: $border-4;
|
|
225
|
+
padding: $size-2 $size-3;
|
|
193
226
|
}
|
|
194
227
|
|
|
195
228
|
summary {
|
|
229
|
+
padding: $size-1 $size-0;
|
|
230
|
+
font-weight: $font-bold;
|
|
196
231
|
cursor: pointer;
|
|
197
232
|
}
|
|
198
233
|
|
|
199
|
-
table {
|
|
234
|
+
table, progress {
|
|
200
235
|
width: $w-full;
|
|
201
236
|
}
|
|
202
237
|
|
|
@@ -234,7 +269,3 @@ h5, .hdg--lg {
|
|
|
234
269
|
h6, .hdg--base {
|
|
235
270
|
font-size: $text-base;
|
|
236
271
|
}
|
|
237
|
-
|
|
238
|
-
figcaption, cite {
|
|
239
|
-
font-size: $text-sm;
|
|
240
|
-
}
|
|
@@ -34,6 +34,16 @@
|
|
|
34
34
|
outline-offset: 2px;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
@mixin progress-bar {
|
|
38
|
+
::-webkit-progress-value {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
::-moz-progress-bar {
|
|
43
|
+
@content;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
37
47
|
@mixin make-container($padding-x: $size-4) {
|
|
38
48
|
width: 100%;
|
|
39
49
|
padding-right: $padding-x;
|
|
@@ -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.8",
|
|
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.8
|
|
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:
|