sass-zero 1.0.6 → 1.0.7
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 +63 -46
- data/README.md +2 -2
- data/app/assets/stylesheets/sass-zero/breadboard.scss +17 -11
- data/app/assets/stylesheets/sass-zero/mixins.scss +10 -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: 46882627e2285dd456431a286653f50b753313f0d7e6ee9900c728a217d515c2
|
|
4
|
+
data.tar.gz: 37e6d78084555610d127df0ed38dbce0415dfe90ad83bf281a3daeb3e128d1bd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 245dd86d9fee9a4b9cc128d9c59bfd838e28199becfa3fc6847e16d8e1d177814d17466ac945b736556cb32db0e39dee18fdb31bca5d2cafce6326bf9abd84a9
|
|
7
|
+
data.tar.gz: 63689367de8c57239f859e630602259236bd6796d3d65fa018ac8771aa785f23cb076333573658d977812558825cbe197ef38d163c82257a4ea894bdc544da21
|
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>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>
|
|
59
70
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
<input type="radio" id="radio3" name="radio" value="3">
|
|
71
|
-
<label for="radio3" class="u-display-ib">Option 3</label>
|
|
72
|
-
</div>
|
|
71
|
+
<fieldset>
|
|
72
|
+
<legend>Choose your option</legend>
|
|
73
|
+
|
|
74
|
+
<div>
|
|
75
|
+
<input type="radio" id="radio1" name="radio" value="1" checked>
|
|
76
|
+
<label for="radio1" class="u-display-ib">Option 1</label>
|
|
77
|
+
</div>
|
|
78
|
+
<div>
|
|
79
|
+
<input type="radio" id="radio2" name="radio" value="2">
|
|
80
|
+
<label for="radio2" class="u-display-ib">Option 2</label>
|
|
73
81
|
</div>
|
|
74
|
-
|
|
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,9 @@
|
|
|
123
137
|
</code>
|
|
124
138
|
</div>
|
|
125
139
|
|
|
140
|
+
<label for="progres" class="u-display-b txt--bold">Progress</label>
|
|
141
|
+
<progress id="progres" max="100" value="70">70%</progress>
|
|
142
|
+
|
|
126
143
|
<hr>
|
|
127
144
|
|
|
128
145
|
<ul class="list--unindented ">
|
|
@@ -138,7 +155,7 @@
|
|
|
138
155
|
</ol>
|
|
139
156
|
|
|
140
157
|
<dl>
|
|
141
|
-
<dt
|
|
158
|
+
<dt>Description lists</dt>
|
|
142
159
|
<dd>A description list is perfect for defining terms.</dd>
|
|
143
160
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
|
144
161
|
</dl>
|
data/README.md
CHANGED
|
@@ -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)
|
|
@@ -114,7 +114,7 @@ input[type="checkbox"], input[type="radio"] {
|
|
|
114
114
|
margin: $size-1;
|
|
115
115
|
|
|
116
116
|
&:focus {
|
|
117
|
-
box-shadow: ring($
|
|
117
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
|
118
118
|
@include outline-none;
|
|
119
119
|
}
|
|
120
120
|
}
|
|
@@ -180,6 +180,10 @@ ol {
|
|
|
180
180
|
list-style: decimal outside;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
+
legend, dt {
|
|
184
|
+
font-weight: $font-bold;
|
|
185
|
+
}
|
|
186
|
+
|
|
183
187
|
label, legend, dt {
|
|
184
188
|
margin-bottom: $size-1;
|
|
185
189
|
}
|
|
@@ -192,25 +196,31 @@ fieldset, .input {
|
|
|
192
196
|
margin-bottom: $size-6;
|
|
193
197
|
}
|
|
194
198
|
|
|
195
|
-
table, details, blockquote, figure,
|
|
199
|
+
table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
|
|
196
200
|
margin-bottom: $size-6;
|
|
197
201
|
}
|
|
198
202
|
|
|
203
|
+
@include progress-bar {
|
|
204
|
+
background-color: var(--color-primary);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
progress {
|
|
208
|
+
background-color: var(--color-bg--surface);
|
|
209
|
+
}
|
|
210
|
+
|
|
199
211
|
details {
|
|
200
212
|
padding: $size-2 $size-3;
|
|
201
213
|
background-color: var(--color-bg--surface);
|
|
202
214
|
border-left-width: $border-4;
|
|
203
215
|
}
|
|
204
216
|
|
|
205
|
-
details[open] > summary {
|
|
206
|
-
margin-bottom: $size-1;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
217
|
summary {
|
|
218
|
+
padding: $size-1 $size-0;
|
|
219
|
+
font-weight: $font-bold;
|
|
210
220
|
cursor: pointer;
|
|
211
221
|
}
|
|
212
222
|
|
|
213
|
-
table {
|
|
223
|
+
table, progress {
|
|
214
224
|
width: $w-full;
|
|
215
225
|
}
|
|
216
226
|
|
|
@@ -248,7 +258,3 @@ h5, .hdg--lg {
|
|
|
248
258
|
h6, .hdg--base {
|
|
249
259
|
font-size: $text-base;
|
|
250
260
|
}
|
|
251
|
-
|
|
252
|
-
figcaption, cite {
|
|
253
|
-
font-size: $text-sm;
|
|
254
|
-
}
|
|
@@ -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.7",
|
|
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.7
|
|
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-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|