sass-zero 0.0.16 → 0.0.17
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Example.html +124 -120
- data/app/assets/stylesheets/sass-zero/base/breadboard.scss +62 -50
- data/app/assets/stylesheets/sass-zero/base/preflight.scss +3 -3
- data/app/assets/stylesheets/sass-zero/base/variables.scss +7 -0
- data/app/assets/stylesheets/sass-zero/utilities/flush.scss +20 -20
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +5 -9
- data/app/assets/stylesheets/sass-zero/utilities/pull.scss +21 -21
- data/app/assets/stylesheets/sass-zero/utilities/push.scss +21 -21
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +103 -87
- data/app/assets/stylesheets/sass-zero/utilities/unpad.scss +12 -12
- data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss +1 -1
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +2 -2
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: aebcb1df4bd5282119b667302b006ced48c2669eaef25f7f3f68f08f65adbdbd
|
|
4
|
+
data.tar.gz: 7f9e3967528ee6231c5271e59f71b4bfbe69ca1f4b053bb14b7522db8dd86699
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 77808a82717af9b2518f3751f2267940f053f0f3b0fc5cdb8f405d0d6a2ac3802a837a4f60bb3dde5edef52af7204f7ebae928d70e7d5e5b37909170cb708bfa
|
|
7
|
+
data.tar.gz: ef4386a8755e002e1846a758bf7bfbc202a8e251057e5a2234ec8939f8c21787f0a5a3fdb480b9c51da6cf02c330eb1ed4e77e1a360b6568f2731d3ffa009e95
|
data/Example.html
CHANGED
|
@@ -4,134 +4,138 @@
|
|
|
4
4
|
}
|
|
5
5
|
</style>
|
|
6
6
|
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<button
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
<button class="btn
|
|
25
|
-
<button class="btn
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
7
|
+
<main>
|
|
8
|
+
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
|
|
9
|
+
<a>Anchor</a>
|
|
10
|
+
<em>Emphasis</em>
|
|
11
|
+
<small>Small</small>
|
|
12
|
+
<strong>Strong</strong>
|
|
13
|
+
<u>Underline</u>
|
|
14
|
+
<h1>Heading</h1>
|
|
15
|
+
<h2>Heading</h2>
|
|
16
|
+
<h3>Heading</h3>
|
|
17
|
+
<h4>Heading</h4>
|
|
18
|
+
<h5>Heading</h5>
|
|
19
|
+
<h6>Heading</h6>
|
|
20
|
+
|
|
21
|
+
<button>Default Button</button>
|
|
22
|
+
<input type="submit" value="Submit Button" />
|
|
23
|
+
<a href="#" class="btn">Link Button</a>
|
|
24
|
+
<button class="btn--primary">Button Primary</button>
|
|
25
|
+
<button class="btn--secondary">Button Secondary</button>
|
|
26
|
+
<button class="btn--tertiary">Button Tertiary</button>
|
|
27
|
+
<button class="btn--with-icon btn--plus-icon">Button With Icon</button>
|
|
28
|
+
<button class="btn--small">Button Small</button>
|
|
29
|
+
|
|
30
|
+
<hr>
|
|
31
|
+
|
|
32
|
+
<form>
|
|
33
|
+
<fieldset>
|
|
34
|
+
<label for="nameField">Name</label>
|
|
35
|
+
<input type="text" placeholder="CJ Patoilo" id="nameField">
|
|
36
|
+
<label for="ageRangeField">Age Range</label>
|
|
37
|
+
|
|
38
|
+
<select id="ageRangeField">
|
|
39
|
+
<option value="0-13">0-13</option>
|
|
40
|
+
<option value="14-17">14-17</option>
|
|
41
|
+
<option value="18-23">18-23</option>
|
|
42
|
+
<option value="24+">24+</option>
|
|
43
|
+
</select>
|
|
44
|
+
|
|
45
|
+
<select multiple>
|
|
46
|
+
<option>Option 1</option>
|
|
47
|
+
<option>Option 2</option>
|
|
48
|
+
<option>Option 3</option>
|
|
49
|
+
<option>Option 4</option>
|
|
50
|
+
<option>Option 5</option>
|
|
51
|
+
</select>
|
|
52
|
+
|
|
53
|
+
<label for="commentField">Comment</label>
|
|
54
|
+
<textarea placeholder="Hi CJ …" id="commentField" rows="3"></textarea>
|
|
55
|
+
|
|
56
|
+
<div class="flush-md--bottom">
|
|
57
|
+
<div>
|
|
58
|
+
<input type="checkbox" name="option1" value="1" checked>
|
|
59
|
+
<label for="option1" class="u-display-ib">Option 1</label>
|
|
60
|
+
</div>
|
|
61
|
+
<div>
|
|
62
|
+
<input type="checkbox" name="option2" value="2">
|
|
63
|
+
<label for="option2" class="u-display-ib">Option 2</label>
|
|
64
|
+
</div>
|
|
65
|
+
<div>
|
|
66
|
+
<input type="checkbox" name="option3" value="3">
|
|
67
|
+
<label for="option3" class="u-display-ib">Option 3</label>
|
|
68
|
+
</div>
|
|
57
69
|
</div>
|
|
58
|
-
<div>
|
|
59
|
-
<input type="checkbox" name="option2" value="2">
|
|
60
|
-
<label for="option2" style="display: inline-block;">Option 2</label>
|
|
61
|
-
</div>
|
|
62
|
-
<div>
|
|
63
|
-
<input type="checkbox" name="option3" value="3">
|
|
64
|
-
<label for="option3" style="display: inline-block;">Option 3</label>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
70
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
71
|
+
<div class="flush-md--bottom">
|
|
72
|
+
<div>
|
|
73
|
+
<input type="radio" name="radio" value="1" checked>
|
|
74
|
+
<label for="radio" class="u-display-ib">Option 1</label>
|
|
75
|
+
</div>
|
|
76
|
+
<div>
|
|
77
|
+
<input type="radio" name="radio" value="2">
|
|
78
|
+
<label for="radio" class="u-display-ib">Option 2</label>
|
|
79
|
+
</div>
|
|
80
|
+
<div>
|
|
81
|
+
<input type="radio" name="radio" value="3">
|
|
82
|
+
<label for="radio" class="u-display-ib">Option 3</label>
|
|
83
|
+
</div>
|
|
80
84
|
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
</
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
</
|
|
109
|
-
</
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
</blockquote>
|
|
85
|
+
|
|
86
|
+
<input type="submit" value="Send">
|
|
87
|
+
</fieldset>
|
|
88
|
+
</form>
|
|
89
|
+
|
|
90
|
+
<table>
|
|
91
|
+
<thead>
|
|
92
|
+
<tr>
|
|
93
|
+
<th>Name</th>
|
|
94
|
+
<th>Age</th>
|
|
95
|
+
<th>Height</th>
|
|
96
|
+
<th>Location</th>
|
|
97
|
+
</tr>
|
|
98
|
+
</thead>
|
|
99
|
+
<tbody>
|
|
100
|
+
<tr>
|
|
101
|
+
<td>Stephen Curry</td>
|
|
102
|
+
<td>27</td>
|
|
103
|
+
<td>1,91</td>
|
|
104
|
+
<td>Akron, OH</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td>Klay Thompson</td>
|
|
108
|
+
<td>25</td>
|
|
109
|
+
<td>2,01</td>
|
|
110
|
+
<td>Los Angeles, CA</td>
|
|
111
|
+
</tr>
|
|
112
|
+
</tbody>
|
|
113
|
+
</table>
|
|
114
|
+
|
|
115
|
+
<blockquote>
|
|
116
|
+
<p><em>Yeah!! Milligram is amazing.</em></p>
|
|
117
|
+
</blockquote>
|
|
115
118
|
|
|
116
119
|
<pre><code>.milligram {
|
|
117
120
|
color: #9b4dca;
|
|
118
121
|
}</code></pre>
|
|
119
122
|
|
|
120
|
-
<code>
|
|
121
|
-
.milligram {
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
</code>
|
|
123
|
+
<code>
|
|
124
|
+
.milligram {
|
|
125
|
+
color: #9b4dca;
|
|
126
|
+
}
|
|
127
|
+
</code>
|
|
125
128
|
|
|
126
|
-
<hr>
|
|
129
|
+
<hr>
|
|
127
130
|
|
|
128
|
-
<div></div>
|
|
131
|
+
<div></div>
|
|
129
132
|
|
|
130
|
-
<ul>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
</ul>
|
|
134
|
-
<ol>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
</ol>
|
|
133
|
+
<ul>
|
|
134
|
+
<li>Unordered list item 1</li>
|
|
135
|
+
<li>Unordered list item 2</li>
|
|
136
|
+
</ul>
|
|
137
|
+
<ol>
|
|
138
|
+
<li>Ordered list item 1</li>
|
|
139
|
+
<li>Ordered list item 2</li>
|
|
140
|
+
</ol>
|
|
141
|
+
</main>
|
|
@@ -1,25 +1,11 @@
|
|
|
1
|
-
@import "sass-zero/variables";
|
|
1
|
+
@import "sass-zero/base/variables";
|
|
2
2
|
@import "sass-zero/mixins";
|
|
3
3
|
|
|
4
|
-
$breadboard-primary: $gray-900;
|
|
5
|
-
$breadboard-color: $gray-700;
|
|
6
|
-
$breadboard-border: $gray-400;
|
|
7
|
-
$breadboard-border-control: $gray-300;
|
|
8
|
-
$breadboard-background: $gray-200;
|
|
9
|
-
|
|
10
4
|
html {
|
|
11
|
-
background-color: $white;
|
|
12
5
|
color: $breadboard-color;
|
|
13
|
-
@include antialiased;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
body {
|
|
17
|
-
font-size: $text-base;
|
|
18
|
-
line-height: $leading-normal;
|
|
19
6
|
}
|
|
20
7
|
|
|
21
8
|
blockquote {
|
|
22
|
-
border-color: $breadboard-border;
|
|
23
9
|
border-left-width: $border-4;
|
|
24
10
|
padding: $size-3 $size-4;
|
|
25
11
|
|
|
@@ -34,7 +20,6 @@ input[type='button'],
|
|
|
34
20
|
input[type='reset'],
|
|
35
21
|
input[type='submit'] {
|
|
36
22
|
background-color: $white;
|
|
37
|
-
border-color: $breadboard-border-control;
|
|
38
23
|
border-radius: $rounded;
|
|
39
24
|
border-width: $border;
|
|
40
25
|
color: $breadboard-primary;
|
|
@@ -50,38 +35,61 @@ input[type='submit'] {
|
|
|
50
35
|
}
|
|
51
36
|
|
|
52
37
|
.btn {
|
|
53
|
-
|
|
54
|
-
background-color: $breadboard-primary;
|
|
38
|
+
&--primary {
|
|
39
|
+
background-color: $breadboard-primary !important;
|
|
55
40
|
border-color: $breadboard-primary;
|
|
56
|
-
color: $white;
|
|
41
|
+
color: $white !important;
|
|
57
42
|
}
|
|
58
43
|
|
|
59
|
-
|
|
60
|
-
background-color: $white;
|
|
44
|
+
&--secondary {
|
|
45
|
+
background-color: $white !important;
|
|
61
46
|
border-color: $breadboard-primary;
|
|
62
47
|
}
|
|
63
48
|
|
|
64
|
-
|
|
65
|
-
background-color: transparent;
|
|
49
|
+
&--tertiary {
|
|
50
|
+
background-color: transparent !important;
|
|
66
51
|
border-color: transparent;
|
|
67
52
|
}
|
|
68
53
|
|
|
69
|
-
|
|
54
|
+
&--with-icon {
|
|
70
55
|
padding-left: $size-8;
|
|
71
56
|
background-position: $size-2 center;
|
|
72
57
|
background-repeat: no-repeat;
|
|
73
|
-
background-size: $size-5
|
|
58
|
+
background-size: auto $size-5;
|
|
74
59
|
}
|
|
75
60
|
|
|
76
|
-
|
|
61
|
+
&--small {
|
|
77
62
|
font-size: $text-sm;
|
|
78
63
|
padding-top: 0.35rem;
|
|
79
64
|
padding-bottom: 0.35rem;
|
|
80
65
|
}
|
|
66
|
+
|
|
67
|
+
&--small-icon {
|
|
68
|
+
width: $size-10;
|
|
69
|
+
height: $size-10;
|
|
70
|
+
padding: 0 !important;
|
|
71
|
+
background-position: center !important;
|
|
72
|
+
background-repeat: no-repeat;
|
|
73
|
+
background-size: auto $size-5;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&--tiny-icon {
|
|
77
|
+
width: $size-6;
|
|
78
|
+
height: $size-6;
|
|
79
|
+
padding: 0 !important;
|
|
80
|
+
background-position: center !important;
|
|
81
|
+
background-repeat: no-repeat;
|
|
82
|
+
background-size: auto $size-4;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&--borderless {
|
|
86
|
+
border-color: transparent !important;
|
|
87
|
+
background-color: transparent !important
|
|
88
|
+
}
|
|
81
89
|
}
|
|
82
90
|
|
|
83
91
|
code {
|
|
84
|
-
background: $breadboard-background;
|
|
92
|
+
background-color: $breadboard-background;
|
|
85
93
|
border-radius: $rounded;
|
|
86
94
|
font-size: $text-sm;
|
|
87
95
|
margin: 0 $size-1;
|
|
@@ -90,7 +98,7 @@ code {
|
|
|
90
98
|
}
|
|
91
99
|
|
|
92
100
|
pre {
|
|
93
|
-
background: $breadboard-background;
|
|
101
|
+
background-color: $breadboard-background;
|
|
94
102
|
border-color: $breadboard-primary;
|
|
95
103
|
border-left-width: $border-4;
|
|
96
104
|
overflow-y: hidden;
|
|
@@ -104,8 +112,6 @@ pre {
|
|
|
104
112
|
}
|
|
105
113
|
|
|
106
114
|
hr {
|
|
107
|
-
border-color: $breadboard-border;
|
|
108
|
-
border-top-width: $border;
|
|
109
115
|
margin: $size-8 $size-0;
|
|
110
116
|
}
|
|
111
117
|
|
|
@@ -126,7 +132,6 @@ input:not([type]),
|
|
|
126
132
|
textarea,
|
|
127
133
|
select {
|
|
128
134
|
appearance: none;
|
|
129
|
-
border-color: $breadboard-border-control;
|
|
130
135
|
border-radius: $rounded;
|
|
131
136
|
border-width: $border;
|
|
132
137
|
display: block;
|
|
@@ -143,7 +148,7 @@ select:not([multiple]) {
|
|
|
143
148
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a0aec0"><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>');
|
|
144
149
|
background-position: right $size-2 center;
|
|
145
150
|
background-repeat: no-repeat;
|
|
146
|
-
background-size: $size-6;
|
|
151
|
+
background-size: auto $size-6;
|
|
147
152
|
padding-right: $size-10;
|
|
148
153
|
}
|
|
149
154
|
|
|
@@ -156,7 +161,6 @@ input[type='checkbox'],
|
|
|
156
161
|
input[type='radio'] {
|
|
157
162
|
appearance: none;
|
|
158
163
|
background-origin: border-box;
|
|
159
|
-
border-color: $breadboard-border-control;
|
|
160
164
|
border-width: $border;
|
|
161
165
|
color: $breadboard-primary;
|
|
162
166
|
display: inline-block;
|
|
@@ -189,9 +193,9 @@ input[type='radio'] {
|
|
|
189
193
|
}
|
|
190
194
|
|
|
191
195
|
a {
|
|
192
|
-
|
|
196
|
+
color: $breadboard-primary;
|
|
197
|
+
font-weight: $font-bold;
|
|
193
198
|
cursor: pointer;
|
|
194
|
-
font-weight: $font-medium;
|
|
195
199
|
}
|
|
196
200
|
|
|
197
201
|
ol {
|
|
@@ -199,7 +203,16 @@ ol {
|
|
|
199
203
|
}
|
|
200
204
|
|
|
201
205
|
ul {
|
|
202
|
-
list-style:
|
|
206
|
+
list-style: disc inside;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
h1,
|
|
210
|
+
h2,
|
|
211
|
+
h3,
|
|
212
|
+
h4,
|
|
213
|
+
h5,
|
|
214
|
+
h6 {
|
|
215
|
+
margin-bottom: $size-2;
|
|
203
216
|
}
|
|
204
217
|
|
|
205
218
|
button,
|
|
@@ -213,7 +226,7 @@ fieldset,
|
|
|
213
226
|
input,
|
|
214
227
|
select,
|
|
215
228
|
textarea {
|
|
216
|
-
margin-bottom: $size-
|
|
229
|
+
margin-bottom: $size-3;
|
|
217
230
|
}
|
|
218
231
|
|
|
219
232
|
blockquote,
|
|
@@ -225,32 +238,27 @@ p,
|
|
|
225
238
|
pre,
|
|
226
239
|
table,
|
|
227
240
|
ul {
|
|
228
|
-
margin-bottom: $size-
|
|
241
|
+
margin-bottom: $size-4;
|
|
229
242
|
}
|
|
230
243
|
|
|
231
244
|
table {
|
|
232
245
|
width: $size-full;
|
|
233
246
|
}
|
|
234
247
|
|
|
248
|
+
thead th {
|
|
249
|
+
border-bottom-width: $border-2;
|
|
250
|
+
}
|
|
251
|
+
|
|
235
252
|
td, th {
|
|
236
|
-
border-color: $breadboard-border;
|
|
237
253
|
border-bottom-width: $border;
|
|
238
|
-
padding: $size-3 $size-
|
|
254
|
+
padding: $size-3 $size-2;
|
|
239
255
|
text-align: left;
|
|
240
256
|
}
|
|
241
257
|
|
|
242
|
-
td:first-child, th:first-child {
|
|
243
|
-
padding-left: 0;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
td:last-child, th:last-child {
|
|
247
|
-
padding-right: 0;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
258
|
h1, h2, h3, h4, h5, h6 {
|
|
251
|
-
|
|
259
|
+
color: $breadboard-primary;
|
|
260
|
+
font-weight: $font-bold;
|
|
252
261
|
line-height: $leading-tight;
|
|
253
|
-
margin-bottom: $size-2;
|
|
254
262
|
}
|
|
255
263
|
|
|
256
264
|
h1 {
|
|
@@ -276,3 +284,7 @@ h5 {
|
|
|
276
284
|
h6 {
|
|
277
285
|
font-size: $text-base;
|
|
278
286
|
}
|
|
287
|
+
|
|
288
|
+
main {
|
|
289
|
+
@include make-container($size-6, $breakpoint-xl);
|
|
290
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "sass-zero/variables";
|
|
1
|
+
@import "sass-zero/base/variables";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
|
@@ -102,7 +102,7 @@ html {
|
|
|
102
102
|
box-sizing: border-box; /* 1 */
|
|
103
103
|
border-width: 0; /* 2 */
|
|
104
104
|
border-style: solid; /* 2 */
|
|
105
|
-
border-color: $
|
|
105
|
+
border-color: $breadboard-border; /* 2 */
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
/*
|
|
@@ -133,7 +133,7 @@ textarea {
|
|
|
133
133
|
|
|
134
134
|
input::placeholder,
|
|
135
135
|
textarea::placeholder {
|
|
136
|
-
color:
|
|
136
|
+
color: $breadboard-placeholder;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
button,
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
.flush {
|
|
2
2
|
margin: 0 !important;
|
|
3
|
-
}
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
4
|
+
&--top {
|
|
5
|
+
margin-top: 0 !important;
|
|
6
|
+
}
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
8
|
+
&--right {
|
|
9
|
+
margin-right: 0 !important;
|
|
10
|
+
}
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
12
|
+
&--bottom {
|
|
13
|
+
margin-bottom: 0 !important;
|
|
14
|
+
}
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
16
|
+
&--left {
|
|
17
|
+
margin-left: 0 !important;
|
|
18
|
+
}
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
20
|
+
&--ends {
|
|
21
|
+
margin-top: 0 !important;
|
|
22
|
+
margin-bottom: 0 !important;
|
|
23
|
+
}
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
&--sides {
|
|
26
|
+
margin-right: 0 !important;
|
|
27
|
+
margin-left: 0 !important;
|
|
28
|
+
}
|
|
29
29
|
}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
@import "sass-zero/variables";
|
|
2
2
|
@import "sass-zero/mixins";
|
|
3
3
|
|
|
4
|
-
.u-container {
|
|
5
|
-
@include make-container($size-6, $breakpoint-lg);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
4
|
.u-clearfix {
|
|
9
5
|
@include clearfix;
|
|
10
6
|
}
|
|
@@ -71,13 +67,13 @@
|
|
|
71
67
|
margin-right: auto;
|
|
72
68
|
}
|
|
73
69
|
|
|
74
|
-
@media
|
|
70
|
+
@media (min-width: $breakpoint-md) {
|
|
75
71
|
.u-wrap-on-desktop {
|
|
76
72
|
display: block;
|
|
77
73
|
}
|
|
78
74
|
}
|
|
79
75
|
|
|
80
|
-
@media
|
|
76
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
81
77
|
.u-wrap-on-mobile {
|
|
82
78
|
display: block;
|
|
83
79
|
}
|
|
@@ -111,7 +107,7 @@
|
|
|
111
107
|
clear: right;
|
|
112
108
|
}
|
|
113
109
|
|
|
114
|
-
@media
|
|
110
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
115
111
|
.u-float-n-on-mobile {
|
|
116
112
|
float: none;
|
|
117
113
|
}
|
|
@@ -125,13 +121,13 @@
|
|
|
125
121
|
outline: none !important;
|
|
126
122
|
}
|
|
127
123
|
|
|
128
|
-
@media
|
|
124
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
129
125
|
.u-hide-on-media-small {
|
|
130
126
|
display: none;
|
|
131
127
|
}
|
|
132
128
|
}
|
|
133
129
|
|
|
134
|
-
@media
|
|
130
|
+
@media (min-width: $breakpoint-md) {
|
|
135
131
|
.u-hide-on-media-medium {
|
|
136
132
|
display: none;
|
|
137
133
|
}
|
|
@@ -2,36 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
// *******************************************************************
|
|
4
4
|
// Pull Utilities
|
|
5
|
-
// $size-map: ("
|
|
5
|
+
// $size-map: ("xs": $size-1, "sm": $size-2, "base": $size-3, "lg": $size-4, "md": $size-6, "lg": $size-10);
|
|
6
6
|
// *******************************************************************
|
|
7
7
|
@each $scale, $size in $size-map {
|
|
8
8
|
.pull-#{$scale} {
|
|
9
9
|
margin: (-$size) !important;
|
|
10
|
-
}
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
&--top {
|
|
12
|
+
margin-top: (-$size) !important;
|
|
13
|
+
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
&--right {
|
|
16
|
+
margin-right: (-$size) !important;
|
|
17
|
+
}
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
&--bottom {
|
|
20
|
+
margin-bottom: (-$size) !important;
|
|
21
|
+
}
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
&--left {
|
|
24
|
+
margin-left: (-$size) !important;
|
|
25
|
+
}
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
&--ends {
|
|
28
|
+
margin-top: (-$size) !important;
|
|
29
|
+
margin-bottom: (-$size) !important;
|
|
30
|
+
}
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
&--sides {
|
|
33
|
+
margin-right: (-$size) !important;
|
|
34
|
+
margin-left: (-$size) !important;
|
|
35
|
+
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -2,36 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
// *******************************************************************
|
|
4
4
|
// Push Utilities
|
|
5
|
-
// $size-map: ("
|
|
5
|
+
// $size-map: ("xs": $size-1, "sm": $size-2, "base": $size-3, "lg": $size-4, "md": $size-6, "lg": $size-10);
|
|
6
6
|
// *******************************************************************
|
|
7
7
|
@each $scale, $size in $size-map {
|
|
8
8
|
.push-#{$scale} {
|
|
9
9
|
margin: $size !important;
|
|
10
|
-
}
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
&--top {
|
|
12
|
+
margin-top: $size !important;
|
|
13
|
+
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
&--right {
|
|
16
|
+
margin-right: $size !important;
|
|
17
|
+
}
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
&--bottom {
|
|
20
|
+
margin-bottom: $size !important;
|
|
21
|
+
}
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
&--left {
|
|
24
|
+
margin-left: $size !important;
|
|
25
|
+
}
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
&--ends {
|
|
28
|
+
margin-top: $size !important;
|
|
29
|
+
margin-bottom: $size !important;
|
|
30
|
+
}
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
&--sides {
|
|
33
|
+
margin-right: $size !important;
|
|
34
|
+
margin-left: $size !important;
|
|
35
|
+
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -1,91 +1,107 @@
|
|
|
1
1
|
@import "sass-zero/variables";
|
|
2
2
|
@import "sass-zero/mixins";
|
|
3
3
|
|
|
4
|
-
.txt
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
4
|
+
.txt {
|
|
5
|
+
&--xs {
|
|
6
|
+
font-size: $text-xs;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&--sm {
|
|
10
|
+
font-size: $text-sm;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&--md {
|
|
14
|
+
font-size: $text-base;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&--lg {
|
|
18
|
+
font-size: $text-lg;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&--truncate {
|
|
22
|
+
@include truncate;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&--highlight {
|
|
26
|
+
background-color: $gray-300;
|
|
27
|
+
margin-left: 3px;
|
|
28
|
+
padding: 0 0.2em;
|
|
29
|
+
border-radius: 4rem 2rem 4.2rem 1.1rem;
|
|
30
|
+
box-shadow: 0.2em 0 0 $gray-300, -0.2em 0 0 $gray-300;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&--highlight-underline {
|
|
34
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 284 11" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
|
|
35
|
+
background-repeat: no-repeat;
|
|
36
|
+
background-position: center 103%;
|
|
37
|
+
background-size: 105%
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&--highlight-bottom {
|
|
41
|
+
border-bottom: $border solid $gray-300;
|
|
42
|
+
box-shadow: inset 0 -6px 0 $gray-300;
|
|
43
|
+
font-style: normal;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&--normal {
|
|
47
|
+
font-weight: $font-normal;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--bold {
|
|
51
|
+
font-weight: $font-bold;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--underline {
|
|
55
|
+
text-decoration: underline;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&--subtle {
|
|
59
|
+
color: $gray-600;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&--very-subtle {
|
|
63
|
+
color: $gray-500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&--capitalize {
|
|
67
|
+
text-transform: capitalize;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&--sentence-case::first-letter {
|
|
71
|
+
text-transform: uppercase;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&--strike {
|
|
75
|
+
text-decoration: line-through;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--nowrap {
|
|
79
|
+
white-space: nowrap;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.align {
|
|
84
|
+
&--top {
|
|
85
|
+
vertical-align: top;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&--middle {
|
|
89
|
+
vertical-align: middle;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&--bottom {
|
|
93
|
+
vertical-align: bottom;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&--left {
|
|
97
|
+
text-align: left;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&--center {
|
|
101
|
+
text-align: center;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&--right {
|
|
105
|
+
text-align: right;
|
|
106
|
+
}
|
|
91
107
|
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
.unpad {
|
|
2
2
|
padding: 0 !important;
|
|
3
|
-
}
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
4
|
+
&--top {
|
|
5
|
+
padding-top: 0 !important;
|
|
6
|
+
}
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
8
|
+
&--right {
|
|
9
|
+
padding-right: 0 !important;
|
|
10
|
+
}
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
12
|
+
&--bottom {
|
|
13
|
+
padding-bottom: 0 !important;
|
|
14
|
+
}
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
&--left {
|
|
17
|
+
padding-left: 0 !important;
|
|
18
|
+
}
|
|
19
19
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// *******************************************************************
|
|
2
2
|
// Breakpoints
|
|
3
3
|
// Customizing the default breakpoints for your project.
|
|
4
|
-
// @media
|
|
4
|
+
// @media (min-width: $breakpoint-md) { }
|
|
5
5
|
// *******************************************************************
|
|
6
6
|
$breakpoint-sm: 640px;
|
|
7
7
|
$breakpoint-md: 768px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// *******************************************************************
|
|
2
2
|
// Default spacing scale
|
|
3
3
|
// By default, Tailwind includes a generous and comprehensive numeric spacing scale.
|
|
4
|
-
// Use as
|
|
4
|
+
// Use as padding, margin, width, height, transform
|
|
5
5
|
// *******************************************************************
|
|
6
6
|
$size-0: 0;
|
|
7
7
|
$size-1: 0.25rem;
|
|
@@ -27,4 +27,4 @@ $size-auto: auto;
|
|
|
27
27
|
$size-full: 100%;
|
|
28
28
|
$size-screen: 100vw;
|
|
29
29
|
|
|
30
|
-
$size-map: ("
|
|
30
|
+
$size-map: ("xs": $size-1, "sm": $size-2, "md": $size-3, "lg": $size-4, "xl": $size-6, "2xl": $size-10);
|
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.17",
|
|
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.17
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- lazaronixon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-
|
|
11
|
+
date: 2020-03-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: autoprefixer-rails
|
|
@@ -39,6 +39,7 @@ files:
|
|
|
39
39
|
- app/assets/stylesheets/sass-zero/base/breadboard.scss
|
|
40
40
|
- app/assets/stylesheets/sass-zero/base/normalize.css
|
|
41
41
|
- app/assets/stylesheets/sass-zero/base/preflight.scss
|
|
42
|
+
- app/assets/stylesheets/sass-zero/base/variables.scss
|
|
42
43
|
- app/assets/stylesheets/sass-zero/mixins.scss
|
|
43
44
|
- app/assets/stylesheets/sass-zero/utilities.scss
|
|
44
45
|
- app/assets/stylesheets/sass-zero/utilities/flush.scss
|