sass-zero 0.0.21 → 0.0.22
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Example.html +2 -2
- data/app/assets/stylesheets/sass-zero/base/breadboard.scss +48 -10
- data/app/assets/stylesheets/sass-zero/mixins.scss +10 -0
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +11 -11
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +39 -45
- data/app/assets/stylesheets/sass-zero/utilities/pull.scss +9 -9
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +0 -4
- 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: 44626a36062ce7a364a8e9fc32823dd673056ad47e688d827338d9305832d616
|
|
4
|
+
data.tar.gz: 648b67b7889177d6cf618edfd98fd5d6fbb7e2f6774ebafd8d631f142cc8b098
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c90c8d7f328e257932f17cd56d7f6549b100caf45e65a2be9258500663725643dcdb56a25e07cdcbfdc3c3f07da21a9ca7ed8e41851ac58a037a668be0c54303
|
|
7
|
+
data.tar.gz: c46f76a65f9d7af35992a8cde97e4e7a3f375b1497cd55ca5f3ea65c0d8e356bed02f12c628cd86276077c2da2ca701170639b9ea320dbe7b070a03e2a9f5611
|
data/Example.html
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<hr>
|
|
25
25
|
|
|
26
26
|
<form>
|
|
27
|
-
<
|
|
27
|
+
<div class="push-md--bottom">
|
|
28
28
|
<label for="nameField">Name</label>
|
|
29
29
|
<input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
|
|
30
30
|
<label for="ageRangeField">Age Range</label>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<label for="radio" class="u-display-ib">Option 3</label>
|
|
69
69
|
</div>
|
|
70
70
|
</div>
|
|
71
|
-
</
|
|
71
|
+
</div>
|
|
72
72
|
|
|
73
73
|
<input type="submit" value="Send" class="btn btn--primary">
|
|
74
74
|
</form>
|
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
html {
|
|
5
5
|
color: $breadboard-color;
|
|
6
|
+
font-size: 16px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
10
|
+
html {
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
}
|
|
6
13
|
}
|
|
7
14
|
|
|
8
15
|
blockquote {
|
|
@@ -22,6 +29,7 @@ blockquote {
|
|
|
22
29
|
display: inline-block;
|
|
23
30
|
font-weight: $font-bold;
|
|
24
31
|
padding: $size-2 $size-4;
|
|
32
|
+
text-align: center;
|
|
25
33
|
cursor: pointer;
|
|
26
34
|
|
|
27
35
|
&[disabled] {
|
|
@@ -29,11 +37,15 @@ blockquote {
|
|
|
29
37
|
opacity: $opacity-50;
|
|
30
38
|
}
|
|
31
39
|
|
|
40
|
+
&:focus {
|
|
41
|
+
outline: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
32
44
|
&--primary {
|
|
33
45
|
background-color: $breadboard-primary;
|
|
34
46
|
border-color: $breadboard-primary;
|
|
35
47
|
color: $white;
|
|
36
|
-
box-shadow: $shadow
|
|
48
|
+
box-shadow: $shadow;
|
|
37
49
|
}
|
|
38
50
|
|
|
39
51
|
&--secondary {
|
|
@@ -45,7 +57,7 @@ blockquote {
|
|
|
45
57
|
&--tertiary {
|
|
46
58
|
background-color: transparent;
|
|
47
59
|
border-color: transparent;
|
|
48
|
-
color: $breadboard-
|
|
60
|
+
color: $breadboard-color;
|
|
49
61
|
}
|
|
50
62
|
}
|
|
51
63
|
|
|
@@ -81,7 +93,6 @@ hr {
|
|
|
81
93
|
appearance: none;
|
|
82
94
|
border-radius: $rounded;
|
|
83
95
|
border-width: $border;
|
|
84
|
-
display: block;
|
|
85
96
|
padding: $size-2 $size-3;
|
|
86
97
|
width: $size-full;
|
|
87
98
|
|
|
@@ -159,12 +170,7 @@ ul {
|
|
|
159
170
|
list-style: disc inside;
|
|
160
171
|
}
|
|
161
172
|
|
|
162
|
-
h1,
|
|
163
|
-
h2,
|
|
164
|
-
h3,
|
|
165
|
-
h4,
|
|
166
|
-
h5,
|
|
167
|
-
h6 {
|
|
173
|
+
h1, h2, h3, h4, h5, h6 {
|
|
168
174
|
margin-bottom: $size-2;
|
|
169
175
|
}
|
|
170
176
|
|
|
@@ -232,6 +238,38 @@ h6 {
|
|
|
232
238
|
font-size: $text-base;
|
|
233
239
|
}
|
|
234
240
|
|
|
241
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
242
|
+
h1 {
|
|
243
|
+
font-size: $text-3xl;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
h2 {
|
|
247
|
+
font-size: $text-2xl;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
h3 {
|
|
251
|
+
font-size: $text-xl;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
h4 {
|
|
255
|
+
font-size: $text-lg;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
h5 {
|
|
259
|
+
font-size: $text-base;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
h6 {
|
|
263
|
+
font-size: $text-sm;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
235
267
|
main {
|
|
236
|
-
@include make-container($size-
|
|
268
|
+
@include make-container($size-10, $breakpoint-lg);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
@media (max-width: $breakpoint-md - 1) {
|
|
272
|
+
main {
|
|
273
|
+
padding: $size-0;
|
|
274
|
+
}
|
|
237
275
|
}
|
|
@@ -44,3 +44,13 @@
|
|
|
44
44
|
margin: 0 auto;
|
|
45
45
|
max-width: $max-width;
|
|
46
46
|
}
|
|
47
|
+
|
|
48
|
+
// *************************************************
|
|
49
|
+
// Center-align a block level element
|
|
50
|
+
// *************************************************
|
|
51
|
+
|
|
52
|
+
@mixin center-block() {
|
|
53
|
+
display: block;
|
|
54
|
+
margin-right: auto;
|
|
55
|
+
margin-left: auto;
|
|
56
|
+
}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
.flex {
|
|
2
|
-
display: flex;
|
|
2
|
+
display: flex !important;
|
|
3
3
|
|
|
4
4
|
&--column {
|
|
5
|
-
flex-direction: column;
|
|
5
|
+
flex-direction: column !important;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
&--row {
|
|
9
|
-
flex-direction: row;
|
|
9
|
+
flex-direction: row !important;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&--justify-start {
|
|
13
|
-
justify-content: flex-start;
|
|
13
|
+
justify-content: flex-start !important;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&--justify-center {
|
|
17
|
-
justify-content: center;
|
|
17
|
+
justify-content: center !important;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&--justify-end {
|
|
21
|
-
justify-content: flex-end;
|
|
21
|
+
justify-content: flex-end !important;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&--justify-between {
|
|
25
|
-
justify-content: space-between;
|
|
25
|
+
justify-content: space-between !important;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&--justify-around {
|
|
29
|
-
justify-content: space-around;
|
|
29
|
+
justify-content: space-around !important;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&--items-center {
|
|
33
|
-
align-items: center;
|
|
33
|
+
align-items: center !important;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
&--items-baseline {
|
|
37
|
-
align-items: baseline;
|
|
37
|
+
align-items: baseline !important;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&--none {
|
|
41
|
-
flex: none;
|
|
41
|
+
flex: none !important;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
@@ -1,120 +1,114 @@
|
|
|
1
1
|
@import "sass-zero/variables";
|
|
2
2
|
@import "sass-zero/mixins";
|
|
3
3
|
|
|
4
|
-
.u-
|
|
5
|
-
|
|
6
|
-
}
|
|
4
|
+
.u-position {
|
|
5
|
+
position: absolute !important;
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
7
|
+
&--right {
|
|
8
|
+
right: 0 !important;
|
|
9
|
+
}
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.u-position--bottom-right {
|
|
16
|
-
position: absolute !important;
|
|
17
|
-
}
|
|
11
|
+
&--left {
|
|
12
|
+
left: 0 !important;
|
|
13
|
+
}
|
|
18
14
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
15
|
+
&--bottom {
|
|
16
|
+
bottom: 0 !important;
|
|
17
|
+
}
|
|
22
18
|
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
&--top {
|
|
20
|
+
top: 0 !important;
|
|
21
|
+
}
|
|
25
22
|
}
|
|
26
23
|
|
|
27
|
-
.u-position
|
|
28
|
-
|
|
29
|
-
right: 0;
|
|
24
|
+
.u-position-context {
|
|
25
|
+
position: relative !important;
|
|
30
26
|
}
|
|
31
27
|
|
|
32
|
-
.u-
|
|
33
|
-
|
|
34
|
-
right: 0;
|
|
28
|
+
.u-clearfix {
|
|
29
|
+
@include clearfix;
|
|
35
30
|
}
|
|
36
31
|
|
|
37
32
|
.u-full-width {
|
|
38
|
-
width: 100
|
|
33
|
+
width: 100% !important;
|
|
39
34
|
}
|
|
40
35
|
|
|
41
36
|
.u-unscrollable {
|
|
42
|
-
overflow: hidden;
|
|
37
|
+
overflow: hidden !important;
|
|
43
38
|
}
|
|
44
39
|
|
|
45
40
|
.u-display-i {
|
|
46
|
-
display: inline;
|
|
41
|
+
display: inline !important;
|
|
47
42
|
}
|
|
48
43
|
|
|
49
44
|
.u-display-b {
|
|
50
|
-
display: block;
|
|
45
|
+
display: block !important;
|
|
51
46
|
}
|
|
52
47
|
|
|
53
48
|
.u-display-ib {
|
|
54
|
-
display: inline-block;
|
|
49
|
+
display: inline-block !important;
|
|
55
50
|
}
|
|
56
51
|
|
|
57
52
|
.u-display-n {
|
|
58
|
-
display: none;
|
|
53
|
+
display: none !important;
|
|
59
54
|
}
|
|
60
55
|
|
|
61
56
|
.u-pointer-events-n {
|
|
62
|
-
pointer-events: none;
|
|
57
|
+
pointer-events: none !important;
|
|
63
58
|
}
|
|
64
59
|
|
|
65
60
|
.u-margin-centered {
|
|
66
|
-
|
|
67
|
-
margin-right: auto;
|
|
61
|
+
@include center-block;
|
|
68
62
|
}
|
|
69
63
|
|
|
70
64
|
@media (min-width: $breakpoint-md) {
|
|
71
65
|
.u-wrap-on-desktop {
|
|
72
|
-
display: block;
|
|
66
|
+
display: block !important;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
|
|
76
70
|
@media (max-width: $breakpoint-md - 1) {
|
|
77
71
|
.u-wrap-on-mobile {
|
|
78
|
-
display: block;
|
|
72
|
+
display: block !important;
|
|
79
73
|
}
|
|
80
74
|
}
|
|
81
75
|
|
|
82
76
|
.u-nowrap {
|
|
83
|
-
white-space: nowrap;
|
|
77
|
+
white-space: nowrap !important;
|
|
84
78
|
}
|
|
85
79
|
|
|
86
80
|
.u-float-l {
|
|
87
|
-
float: left;
|
|
81
|
+
float: left !important;
|
|
88
82
|
}
|
|
89
83
|
|
|
90
84
|
.u-float-r {
|
|
91
|
-
float: right;
|
|
85
|
+
float: right !important;
|
|
92
86
|
}
|
|
93
87
|
|
|
94
88
|
.u-float-n {
|
|
95
|
-
float: none;
|
|
89
|
+
float: none !important;
|
|
96
90
|
}
|
|
97
91
|
|
|
98
92
|
.u-float-clear {
|
|
99
|
-
clear: both;
|
|
93
|
+
clear: both !important;
|
|
100
94
|
}
|
|
101
95
|
|
|
102
96
|
.u-float-clear-l {
|
|
103
|
-
clear: left;
|
|
97
|
+
clear: left !important;
|
|
104
98
|
}
|
|
105
99
|
|
|
106
100
|
.u-float-clear-r {
|
|
107
|
-
clear: right;
|
|
101
|
+
clear: right !important;
|
|
108
102
|
}
|
|
109
103
|
|
|
110
104
|
@media (max-width: $breakpoint-md - 1) {
|
|
111
105
|
.u-float-n-on-mobile {
|
|
112
|
-
float: none;
|
|
106
|
+
float: none !important;
|
|
113
107
|
}
|
|
114
108
|
}
|
|
115
109
|
|
|
116
110
|
.u-hide {
|
|
117
|
-
display: none;
|
|
111
|
+
display: none !important;
|
|
118
112
|
}
|
|
119
113
|
|
|
120
114
|
.u-hide-focus {
|
|
@@ -123,12 +117,12 @@
|
|
|
123
117
|
|
|
124
118
|
@media (max-width: $breakpoint-md - 1) {
|
|
125
119
|
.u-hide-on-media-small {
|
|
126
|
-
display: none;
|
|
120
|
+
display: none !important;
|
|
127
121
|
}
|
|
128
122
|
}
|
|
129
123
|
|
|
130
124
|
@media (min-width: $breakpoint-md) {
|
|
131
125
|
.u-hide-on-media-medium {
|
|
132
|
-
display: none;
|
|
126
|
+
display: none !important;
|
|
133
127
|
}
|
|
134
128
|
}
|
|
@@ -6,32 +6,32 @@
|
|
|
6
6
|
// *******************************************************************
|
|
7
7
|
@each $scale, $size in $size-map {
|
|
8
8
|
.pull-#{$scale} {
|
|
9
|
-
margin:
|
|
9
|
+
margin: -$size !important;
|
|
10
10
|
|
|
11
11
|
&--top {
|
|
12
|
-
margin-top:
|
|
12
|
+
margin-top: -$size !important;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
&--right {
|
|
16
|
-
margin-right:
|
|
16
|
+
margin-right: -$size !important;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&--bottom {
|
|
20
|
-
margin-bottom:
|
|
20
|
+
margin-bottom: -$size !important;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&--left {
|
|
24
|
-
margin-left:
|
|
24
|
+
margin-left: -$size !important;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&--ends {
|
|
28
|
-
margin-top:
|
|
29
|
-
margin-bottom:
|
|
28
|
+
margin-top: -$size !important;
|
|
29
|
+
margin-bottom: -$size !important;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&--sides {
|
|
33
|
-
margin-right:
|
|
34
|
-
margin-left:
|
|
33
|
+
margin-right: -$size !important;
|
|
34
|
+
margin-left: -$size !important;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
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.22",
|
|
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.22
|
|
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-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: autoprefixer-rails
|