sass-zero 0.0.20 → 0.0.21
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 +15 -24
- data/README.md +1 -1
- data/app/assets/stylesheets/sass-zero/base/breadboard.scss +28 -48
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +20 -0
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +2 -0
- data/app/assets/stylesheets/sass-zero/variables/transform.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: e55fa6443e023b6965d4533d6d8def09aa3f819a64e880478c1b8922e3066f8f
|
|
4
|
+
data.tar.gz: c680e1fcd21f138fa92ae0e9b487a05b1bea065e2d77770c62e1df9058c54505
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8acbcde772936a8a163e08bec0a993ae61ed9e5e30ee0cb0e2b182f839b8713158f9a94db576b8529ca3fffef0616143810a078a3e3053bc6b6eeae6a887f18c
|
|
7
|
+
data.tar.gz: 6c5e9bda9a4ee8f9322e737af191c9c3e595e38b432e5e99edd6ad45b1b27e7ada5f921c2549f7f1e1b70fd7abe074fe219652cf82e43117af36ed4d800af020
|
data/Example.html
CHANGED
|
@@ -13,73 +13,64 @@
|
|
|
13
13
|
<h6>Heading</h6>
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
<button>
|
|
17
|
-
<button class="btn--
|
|
18
|
-
<button class="btn--
|
|
19
|
-
<button class="btn--tertiary">Button Tertiary</button>
|
|
16
|
+
<button class="btn btn--primary">Button Primary</button>
|
|
17
|
+
<button class="btn btn--secondary">Button Secondary</button>
|
|
18
|
+
<button class="btn btn--tertiary">Button Tertiary</button>
|
|
20
19
|
|
|
21
|
-
<a href="#" class="btn">Link Button</a>
|
|
20
|
+
<a href="#" class="btn btn--primary">Link Button</a>
|
|
22
21
|
|
|
23
|
-
<input type="submit" value="Submit Button" />
|
|
22
|
+
<input type="submit" value="Submit Button" class="btn btn--primary" />
|
|
24
23
|
|
|
25
24
|
<hr>
|
|
26
25
|
|
|
27
26
|
<form>
|
|
28
27
|
<fieldset>
|
|
29
28
|
<label for="nameField">Name</label>
|
|
30
|
-
<input type="text" placeholder="CJ Patoilo" id="nameField">
|
|
29
|
+
<input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
|
|
31
30
|
<label for="ageRangeField">Age Range</label>
|
|
32
31
|
|
|
33
|
-
<select id="ageRangeField">
|
|
32
|
+
<select id="ageRangeField" class="input input--select">
|
|
34
33
|
<option value="0-13">0-13</option>
|
|
35
34
|
<option value="14-17">14-17</option>
|
|
36
35
|
<option value="18-23">18-23</option>
|
|
37
36
|
<option value="24+">24+</option>
|
|
38
37
|
</select>
|
|
39
38
|
|
|
40
|
-
<select multiple>
|
|
41
|
-
<option>Option 1</option>
|
|
42
|
-
<option>Option 2</option>
|
|
43
|
-
<option>Option 3</option>
|
|
44
|
-
<option>Option 4</option>
|
|
45
|
-
<option>Option 5</option>
|
|
46
|
-
</select>
|
|
47
|
-
|
|
48
39
|
<label for="commentField">Comment</label>
|
|
49
|
-
<textarea placeholder="Hi CJ …" id="commentField" rows="3"></textarea>
|
|
40
|
+
<textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
|
|
50
41
|
|
|
51
42
|
<div class="push-md--bottom">
|
|
52
43
|
<div>
|
|
53
|
-
<input type="checkbox" name="option1" value="1" checked>
|
|
44
|
+
<input type="checkbox" name="option1" value="1" class="checkbox" checked>
|
|
54
45
|
<label for="option1" class="u-display-ib">Option 1</label>
|
|
55
46
|
</div>
|
|
56
47
|
<div>
|
|
57
|
-
<input type="checkbox" name="option2" value="2">
|
|
48
|
+
<input type="checkbox" name="option2" value="2" class="checkbox">
|
|
58
49
|
<label for="option2" class="u-display-ib">Option 2</label>
|
|
59
50
|
</div>
|
|
60
51
|
<div>
|
|
61
|
-
<input type="checkbox" name="option3" value="3">
|
|
52
|
+
<input type="checkbox" name="option3" value="3" class="checkbox">
|
|
62
53
|
<label for="option3" class="u-display-ib">Option 3</label>
|
|
63
54
|
</div>
|
|
64
55
|
</div>
|
|
65
56
|
|
|
66
57
|
<div class="push-md--bottom">
|
|
67
58
|
<div>
|
|
68
|
-
<input type="radio" name="radio" value="1" checked>
|
|
59
|
+
<input type="radio" name="radio" value="1" class="radio" checked>
|
|
69
60
|
<label for="radio" class="u-display-ib">Option 1</label>
|
|
70
61
|
</div>
|
|
71
62
|
<div>
|
|
72
|
-
<input type="radio" name="radio" value="2">
|
|
63
|
+
<input type="radio" name="radio" value="2" class="radio">
|
|
73
64
|
<label for="radio" class="u-display-ib">Option 2</label>
|
|
74
65
|
</div>
|
|
75
66
|
<div>
|
|
76
|
-
<input type="radio" name="radio" value="3">
|
|
67
|
+
<input type="radio" name="radio" value="3" class="radio">
|
|
77
68
|
<label for="radio" class="u-display-ib">Option 3</label>
|
|
78
69
|
</div>
|
|
79
70
|
</div>
|
|
80
71
|
</fieldset>
|
|
81
72
|
|
|
82
|
-
<input type="submit" value="Send">
|
|
73
|
+
<input type="submit" value="Send" class="btn btn--primary">
|
|
83
74
|
</form>
|
|
84
75
|
|
|
85
76
|
<table>
|
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
|
|
|
@@ -14,15 +14,11 @@ blockquote {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.btn
|
|
18
|
-
button,
|
|
19
|
-
input[type='button'],
|
|
20
|
-
input[type='reset'],
|
|
21
|
-
input[type='submit'] {
|
|
17
|
+
.btn {
|
|
22
18
|
background-color: $white;
|
|
23
19
|
border-radius: $rounded;
|
|
24
20
|
border-width: $border;
|
|
25
|
-
color:
|
|
21
|
+
color: inherit;
|
|
26
22
|
display: inline-block;
|
|
27
23
|
font-weight: $font-bold;
|
|
28
24
|
padding: $size-2 $size-4;
|
|
@@ -32,24 +28,24 @@ input[type='submit'] {
|
|
|
32
28
|
cursor: default;
|
|
33
29
|
opacity: $opacity-50;
|
|
34
30
|
}
|
|
35
|
-
}
|
|
36
31
|
|
|
37
|
-
.btn {
|
|
38
32
|
&--primary {
|
|
39
|
-
background-color: $breadboard-primary
|
|
33
|
+
background-color: $breadboard-primary;
|
|
40
34
|
border-color: $breadboard-primary;
|
|
35
|
+
color: $white;
|
|
41
36
|
box-shadow: $shadow-sm;
|
|
42
|
-
color: $white !important;
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
&--secondary {
|
|
46
|
-
background-color: transparent
|
|
40
|
+
background-color: transparent;
|
|
47
41
|
border-color: $breadboard-primary;
|
|
42
|
+
color: $breadboard-primary;
|
|
48
43
|
}
|
|
49
44
|
|
|
50
45
|
&--tertiary {
|
|
51
|
-
background-color: transparent
|
|
46
|
+
background-color: transparent;
|
|
52
47
|
border-color: transparent;
|
|
48
|
+
color: $breadboard-primary;
|
|
53
49
|
}
|
|
54
50
|
}
|
|
55
51
|
|
|
@@ -81,22 +77,7 @@ hr {
|
|
|
81
77
|
border-bottom-width: $border-2;
|
|
82
78
|
}
|
|
83
79
|
|
|
84
|
-
input
|
|
85
|
-
input[type='number'],
|
|
86
|
-
input[type='password'],
|
|
87
|
-
input[type='search'],
|
|
88
|
-
input[type='tel'],
|
|
89
|
-
input[type='text'],
|
|
90
|
-
input[type='url'],
|
|
91
|
-
input[type='color'],
|
|
92
|
-
input[type='date'],
|
|
93
|
-
input[type='month'],
|
|
94
|
-
input[type='week'],
|
|
95
|
-
input[type='datetime'],
|
|
96
|
-
input[type='datetime-local'],
|
|
97
|
-
input:not([type]),
|
|
98
|
-
textarea,
|
|
99
|
-
select {
|
|
80
|
+
.input {
|
|
100
81
|
appearance: none;
|
|
101
82
|
border-radius: $rounded;
|
|
102
83
|
border-width: $border;
|
|
@@ -109,14 +90,14 @@ select {
|
|
|
109
90
|
box-shadow: $shadow-outline;
|
|
110
91
|
outline: 0;
|
|
111
92
|
}
|
|
112
|
-
}
|
|
113
93
|
|
|
114
|
-
select
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
94
|
+
&--select {
|
|
95
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23a0aec0" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
|
|
96
|
+
background-position: right $size-2 center;
|
|
97
|
+
background-repeat: no-repeat;
|
|
98
|
+
background-size: auto $size-6;
|
|
99
|
+
padding-right: $size-10;
|
|
100
|
+
}
|
|
120
101
|
}
|
|
121
102
|
|
|
122
103
|
label, legend {
|
|
@@ -124,8 +105,7 @@ label, legend {
|
|
|
124
105
|
margin-bottom: $size-1;
|
|
125
106
|
}
|
|
126
107
|
|
|
127
|
-
|
|
128
|
-
input[type='radio'] {
|
|
108
|
+
.checkbox, .radio {
|
|
129
109
|
appearance: none;
|
|
130
110
|
background-origin: border-box;
|
|
131
111
|
border-width: $border;
|
|
@@ -141,9 +121,15 @@ input[type='radio'] {
|
|
|
141
121
|
background-position: center;
|
|
142
122
|
background-repeat: no-repeat;
|
|
143
123
|
}
|
|
124
|
+
|
|
125
|
+
&:focus {
|
|
126
|
+
border-color: $breadboard-color;
|
|
127
|
+
box-shadow: $shadow-outline;
|
|
128
|
+
outline: 0;
|
|
129
|
+
}
|
|
144
130
|
}
|
|
145
131
|
|
|
146
|
-
|
|
132
|
+
.checkbox {
|
|
147
133
|
border-radius: $rounded;
|
|
148
134
|
|
|
149
135
|
&:checked {
|
|
@@ -151,7 +137,7 @@ input[type='checkbox'] {
|
|
|
151
137
|
}
|
|
152
138
|
}
|
|
153
139
|
|
|
154
|
-
|
|
140
|
+
.radio {
|
|
155
141
|
border-radius: $rounded-full;
|
|
156
142
|
|
|
157
143
|
&:checked {
|
|
@@ -161,7 +147,7 @@ input[type='radio'] {
|
|
|
161
147
|
|
|
162
148
|
a {
|
|
163
149
|
color: $breadboard-primary;
|
|
164
|
-
font-weight: $font-
|
|
150
|
+
font-weight: $font-bold;
|
|
165
151
|
cursor: pointer;
|
|
166
152
|
}
|
|
167
153
|
|
|
@@ -182,17 +168,11 @@ h6 {
|
|
|
182
168
|
margin-bottom: $size-2;
|
|
183
169
|
}
|
|
184
170
|
|
|
185
|
-
|
|
186
|
-
dd,
|
|
187
|
-
dt,
|
|
188
|
-
li {
|
|
171
|
+
dd, dt, li, .btn {
|
|
189
172
|
margin-bottom: $size-2;
|
|
190
173
|
}
|
|
191
174
|
|
|
192
|
-
fieldset,
|
|
193
|
-
input,
|
|
194
|
-
select,
|
|
195
|
-
textarea {
|
|
175
|
+
fieldset, .input, .select {
|
|
196
176
|
margin-bottom: $size-4;
|
|
197
177
|
}
|
|
198
178
|
|
|
@@ -9,14 +9,34 @@
|
|
|
9
9
|
flex-direction: row;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
&--justify-start {
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
&--justify-center {
|
|
13
17
|
justify-content: center;
|
|
14
18
|
}
|
|
15
19
|
|
|
20
|
+
&--justify-end {
|
|
21
|
+
justify-content: flex-end;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&--justify-between {
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&--justify-around {
|
|
29
|
+
justify-content: space-around;
|
|
30
|
+
}
|
|
31
|
+
|
|
16
32
|
&--items-center {
|
|
17
33
|
align-items: center;
|
|
18
34
|
}
|
|
19
35
|
|
|
36
|
+
&--items-baseline {
|
|
37
|
+
align-items: baseline;
|
|
38
|
+
}
|
|
39
|
+
|
|
20
40
|
&--none {
|
|
21
41
|
flex: none;
|
|
22
42
|
}
|
data/lib/sass/zero/version.rb
CHANGED
data/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sass-zero",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
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: 0.0.
|
|
4
|
+
version: 0.0.21
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- lazaronixon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-03-
|
|
11
|
+
date: 2020-03-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: autoprefixer-rails
|