sass-zero 0.0.37 → 0.0.42
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 +7 -7
- data/README.md +3 -0
- data/app/assets/stylesheets/sass-zero/base.scss +0 -1
- data/app/assets/stylesheets/sass-zero/base/preflight.scss +14 -4
- data/app/assets/stylesheets/sass-zero/{base/breadboard.scss → breadboard.scss} +36 -33
- data/app/assets/stylesheets/sass-zero/mixins.scss +28 -15
- data/app/assets/stylesheets/sass-zero/utilities.scss +1 -0
- data/app/assets/stylesheets/sass-zero/utilities/animation.scss +59 -0
- data/app/assets/stylesheets/sass-zero/utilities/flex.scss +33 -21
- data/app/assets/stylesheets/sass-zero/utilities/layout.scss +11 -1
- data/app/assets/stylesheets/sass-zero/utilities/list.scss +20 -4
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +59 -2
- data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
- data/app/assets/stylesheets/sass-zero/variables/border.scss +4 -1
- data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss +5 -4
- data/app/assets/stylesheets/sass-zero/variables/colors.scss +242 -100
- data/app/assets/stylesheets/sass-zero/variables/effects.scss +30 -4
- data/app/assets/stylesheets/sass-zero/variables/flex.scss +17 -1
- data/app/assets/stylesheets/sass-zero/variables/grid.scss +85 -0
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +16 -2
- data/app/assets/stylesheets/sass-zero/variables/transform.scss +9 -2
- data/app/assets/stylesheets/sass-zero/variables/typography.scss +18 -15
- data/app/assets/stylesheets/sass-zero/variables/width.scss +9 -3
- data/app/assets/stylesheets/sass-zero/variables/zindex.scss +1 -1
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- metadata +10 -9
- data/app/assets/stylesheets/sass-zero/base/variables.scss +0 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
|
4
|
+
data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
|
7
|
+
data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51
|
data/Example.html
CHANGED
@@ -22,7 +22,7 @@
|
|
22
22
|
|
23
23
|
<hr>
|
24
24
|
|
25
|
-
<form>
|
25
|
+
<form class="push-lg--bottom">
|
26
26
|
<div class="push-md--bottom">
|
27
27
|
<label for="nameField">Name</label>
|
28
28
|
<input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
|
@@ -41,30 +41,30 @@
|
|
41
41
|
<div class="push-md--bottom">
|
42
42
|
<div>
|
43
43
|
<input type="checkbox" name="option1" value="1" class="checkbox" checked>
|
44
|
-
<label for="option1"
|
44
|
+
<label for="option1">Option 1</label>
|
45
45
|
</div>
|
46
46
|
<div>
|
47
47
|
<input type="checkbox" name="option2" value="2" class="checkbox">
|
48
|
-
<label for="option2"
|
48
|
+
<label for="option2">Option 2</label>
|
49
49
|
</div>
|
50
50
|
<div>
|
51
51
|
<input type="checkbox" name="option3" value="3" class="checkbox">
|
52
|
-
<label for="option3"
|
52
|
+
<label for="option3">Option 3</label>
|
53
53
|
</div>
|
54
54
|
</div>
|
55
55
|
|
56
56
|
<div class="push-md--bottom">
|
57
57
|
<div>
|
58
58
|
<input type="radio" name="radio" value="1" class="radio" checked>
|
59
|
-
<label for="radio"
|
59
|
+
<label for="radio">Option 1</label>
|
60
60
|
</div>
|
61
61
|
<div>
|
62
62
|
<input type="radio" name="radio" value="2" class="radio">
|
63
|
-
<label for="radio"
|
63
|
+
<label for="radio">Option 2</label>
|
64
64
|
</div>
|
65
65
|
<div>
|
66
66
|
<input type="radio" name="radio" value="3" class="radio">
|
67
|
-
<label for="radio"
|
67
|
+
<label for="radio">Option 3</label>
|
68
68
|
</div>
|
69
69
|
</div>
|
70
70
|
</div>
|
data/README.md
CHANGED
@@ -40,6 +40,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
40
40
|
- [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
|
41
41
|
- [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
|
42
42
|
- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
|
43
|
+
- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
|
43
44
|
- [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
|
44
45
|
- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
|
45
46
|
- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
|
@@ -50,6 +51,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
50
51
|
|
51
52
|
### Utilities
|
52
53
|
|
54
|
+
- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
|
53
55
|
- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
|
54
56
|
- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
|
55
57
|
- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
|
@@ -76,6 +78,7 @@ Add this line to your application.css:
|
|
76
78
|
```css
|
77
79
|
*= require sass-zero/base
|
78
80
|
*= require sass-zero/utilities
|
81
|
+
*= require sass-zero/breadboard
|
79
82
|
```
|
80
83
|
|
81
84
|
Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
|
@@ -1,4 +1,4 @@
|
|
1
|
-
@import "sass-zero/
|
1
|
+
@import "sass-zero/variables";
|
2
2
|
|
3
3
|
/**
|
4
4
|
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
@@ -29,7 +29,6 @@ pre {
|
|
29
29
|
button {
|
30
30
|
background-color: transparent;
|
31
31
|
background-image: none;
|
32
|
-
padding: 0;
|
33
32
|
}
|
34
33
|
|
35
34
|
/**
|
@@ -70,6 +69,17 @@ html {
|
|
70
69
|
line-height: 1.5; /* 2 */
|
71
70
|
}
|
72
71
|
|
72
|
+
|
73
|
+
/**
|
74
|
+
* Inherit font-family and line-height from `html` so users can set them as
|
75
|
+
* a class directly on the `html` element.
|
76
|
+
*/
|
77
|
+
|
78
|
+
body {
|
79
|
+
font-family: inherit;
|
80
|
+
line-height: inherit;
|
81
|
+
}
|
82
|
+
|
73
83
|
/**
|
74
84
|
* 1. Prevent padding and border from affecting element width.
|
75
85
|
*
|
@@ -102,7 +112,7 @@ html {
|
|
102
112
|
box-sizing: border-box; /* 1 */
|
103
113
|
border-width: 0; /* 2 */
|
104
114
|
border-style: solid; /* 2 */
|
105
|
-
border-color: $
|
115
|
+
border-color: $gray-200; /* 2 */
|
106
116
|
}
|
107
117
|
|
108
118
|
/*
|
@@ -133,7 +143,7 @@ textarea {
|
|
133
143
|
|
134
144
|
input::placeholder,
|
135
145
|
textarea::placeholder {
|
136
|
-
color: $
|
146
|
+
color: $gray-400;
|
137
147
|
}
|
138
148
|
|
139
149
|
button,
|
@@ -1,8 +1,10 @@
|
|
1
|
-
@import "sass-zero/
|
1
|
+
@import "sass-zero/variables";
|
2
2
|
@import "sass-zero/mixins";
|
3
3
|
|
4
|
+
$breadboard-primary: $gray-900;
|
5
|
+
$breadboard-background: $gray-100;
|
6
|
+
|
4
7
|
html {
|
5
|
-
color: $breadboard-color;
|
6
8
|
font-size: 14px;
|
7
9
|
}
|
8
10
|
|
@@ -12,6 +14,7 @@ main {
|
|
12
14
|
}
|
13
15
|
|
14
16
|
blockquote {
|
17
|
+
border-color: $breadboard-primary;
|
15
18
|
border-left-width: $border-4;
|
16
19
|
padding: $size-3 $size-4;
|
17
20
|
}
|
@@ -20,13 +23,17 @@ blockquote {
|
|
20
23
|
background-color: $white;
|
21
24
|
border-radius: $rounded;
|
22
25
|
border-width: $border;
|
23
|
-
color: $breadboard-
|
26
|
+
color: $breadboard-primary;
|
24
27
|
display: inline-block;
|
25
28
|
font-weight: $font-bold;
|
26
29
|
padding: $size-2 $size-4;
|
27
30
|
cursor: pointer;
|
28
31
|
|
29
|
-
&:
|
32
|
+
&:focus {
|
33
|
+
@include outline-black;
|
34
|
+
}
|
35
|
+
|
36
|
+
&:disabled {
|
30
37
|
pointer-events: none;
|
31
38
|
opacity: $opacity-50;
|
32
39
|
}
|
@@ -43,8 +50,8 @@ blockquote {
|
|
43
50
|
}
|
44
51
|
|
45
52
|
&--tertiary {
|
46
|
-
background-color: transparent;
|
47
|
-
border-color: transparent;
|
53
|
+
background-color: $transparent;
|
54
|
+
border-color: $transparent;
|
48
55
|
}
|
49
56
|
}
|
50
57
|
|
@@ -65,14 +72,14 @@ pre {
|
|
65
72
|
|
66
73
|
& > code {
|
67
74
|
border-radius: $rounded-none;
|
68
|
-
|
69
|
-
|
75
|
+
display: block;
|
76
|
+
padding: $size-2 $size-3;
|
70
77
|
white-space: pre;
|
71
78
|
}
|
72
79
|
}
|
73
80
|
|
74
81
|
hr {
|
75
|
-
margin: $size-
|
82
|
+
margin: $size-6 $size-0;
|
76
83
|
}
|
77
84
|
|
78
85
|
.input {
|
@@ -83,41 +90,50 @@ hr {
|
|
83
90
|
width: $size-full;
|
84
91
|
|
85
92
|
&--select {
|
86
|
-
|
93
|
+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
|
87
94
|
background-position: right $size-2 center;
|
88
95
|
background-repeat: no-repeat;
|
89
96
|
background-size: auto $size-5;
|
90
97
|
padding-right: $size-8;
|
91
98
|
}
|
92
99
|
|
93
|
-
&:focus {
|
100
|
+
&:focus {
|
101
|
+
box-shadow: ring($color: $breadboard-primary);
|
102
|
+
@include outline-none;
|
103
|
+
}
|
94
104
|
}
|
95
105
|
|
96
106
|
.checkbox {
|
97
107
|
border-radius: $rounded;
|
98
|
-
@include selection;
|
108
|
+
@include input-selection($breadboard-primary);
|
99
109
|
|
100
110
|
&:checked {
|
101
|
-
background-image:
|
111
|
+
background-image:url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
|
102
112
|
@include checked;
|
103
113
|
}
|
104
114
|
|
105
|
-
&:focus {
|
115
|
+
&:focus {
|
116
|
+
box-shadow: ring($color: $breadboard-primary);
|
117
|
+
@include outline-none;
|
118
|
+
}
|
106
119
|
}
|
107
120
|
|
108
121
|
.radio {
|
109
122
|
border-radius: $rounded-full;
|
110
|
-
@include selection;
|
123
|
+
@include input-selection($breadboard-primary);
|
111
124
|
|
112
125
|
&:checked {
|
113
126
|
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
|
114
127
|
@include checked;
|
115
128
|
}
|
116
129
|
|
117
|
-
&:focus {
|
130
|
+
&:focus {
|
131
|
+
box-shadow: ring($color: $breadboard-primary);
|
132
|
+
@include outline-none;
|
133
|
+
}
|
118
134
|
}
|
119
135
|
|
120
|
-
label, legend {
|
136
|
+
label, legend, dt {
|
121
137
|
display: inline-block;
|
122
138
|
margin-bottom: $size-1;
|
123
139
|
}
|
@@ -134,25 +150,12 @@ ol {
|
|
134
150
|
list-style: decimal inside;
|
135
151
|
}
|
136
152
|
|
137
|
-
td, th {
|
138
|
-
&:first-child { padding-left: $size-0; }
|
139
|
-
&:last-child { padding-right: $size-0; }
|
140
|
-
}
|
141
|
-
|
142
|
-
dt, dd, li {
|
143
|
-
&:last-child { margin-bottom: $size-0; }
|
144
|
-
}
|
145
|
-
|
146
153
|
h1, h2, h3, h4, h5, h6, .hdg {
|
147
|
-
margin-bottom: $size-
|
148
|
-
}
|
149
|
-
|
150
|
-
dt, dd, li, .btn {
|
151
|
-
margin-bottom: $size-2;
|
154
|
+
margin-bottom: $size-4;
|
152
155
|
}
|
153
156
|
|
154
157
|
fieldset, .input {
|
155
|
-
margin-bottom: $size-
|
158
|
+
margin-bottom: $size-6;
|
156
159
|
}
|
157
160
|
|
158
161
|
blockquote, figure, p, pre, table, ul, ol, dl {
|
@@ -200,5 +203,5 @@ h6, .hdg--base {
|
|
200
203
|
|
201
204
|
@media (min-width: $breakpoint-md) {
|
202
205
|
html { font-size: 16px; }
|
203
|
-
main { @include make-container($size-10, $breakpoint-
|
206
|
+
main { @include make-container($size-10, $breakpoint-xl); }
|
204
207
|
}
|
@@ -1,7 +1,11 @@
|
|
1
|
+
@import "sass-zero/variables/border";
|
2
|
+
@import "sass-zero/variables/effects";
|
3
|
+
@import "sass-zero/variables/spacing";
|
4
|
+
|
1
5
|
@mixin ellipsis {
|
2
|
-
overflow: hidden;
|
3
6
|
text-overflow: ellipsis;
|
4
7
|
white-space: nowrap;
|
8
|
+
overflow: hidden;
|
5
9
|
}
|
6
10
|
|
7
11
|
@mixin antialiased {
|
@@ -22,30 +26,39 @@
|
|
22
26
|
}
|
23
27
|
}
|
24
28
|
|
25
|
-
@mixin
|
26
|
-
border-color:
|
27
|
-
|
28
|
-
|
29
|
+
@mixin checked {
|
30
|
+
border-color: transparent;
|
31
|
+
background-color: currentColor;
|
32
|
+
background-position: center;
|
33
|
+
background-repeat: no-repeat;
|
29
34
|
}
|
30
35
|
|
31
|
-
@mixin selection {
|
36
|
+
@mixin input-selection($color) {
|
32
37
|
appearance: none;
|
33
38
|
border-width: $border;
|
34
|
-
color: $
|
35
|
-
margin-bottom: -0.
|
39
|
+
color: $color;
|
40
|
+
margin-bottom: -0.1rem;
|
36
41
|
height: $size-4;
|
37
42
|
width: $size-4;
|
38
43
|
}
|
39
44
|
|
40
|
-
@mixin
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
+
@mixin outline-none {
|
46
|
+
outline: 2px solid transparent;
|
47
|
+
outline-offset: 2px;
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin outline-white {
|
51
|
+
outline: 2px dotted white;
|
52
|
+
outline-offset: 2px;
|
53
|
+
}
|
54
|
+
|
55
|
+
@mixin outline-black {
|
56
|
+
outline: 2px dotted black;
|
57
|
+
outline-offset: 2px;
|
45
58
|
}
|
46
59
|
|
47
60
|
@mixin space-x($space, $reverse: false) {
|
48
|
-
& > :not(
|
61
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
49
62
|
@if $reverse {
|
50
63
|
margin-right: $space;
|
51
64
|
} @else {
|
@@ -55,7 +68,7 @@
|
|
55
68
|
}
|
56
69
|
|
57
70
|
@mixin space-y($space, $reverse: false) {
|
58
|
-
& > :not(
|
71
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
59
72
|
@if $reverse {
|
60
73
|
margin-bottom: $space;
|
61
74
|
} @else {
|
@@ -0,0 +1,59 @@
|
|
1
|
+
.animate-none {
|
2
|
+
animation: none;
|
3
|
+
}
|
4
|
+
|
5
|
+
.animate-spin {
|
6
|
+
animation: spin 1s linear infinite;
|
7
|
+
}
|
8
|
+
|
9
|
+
.animate-ping {
|
10
|
+
animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
|
11
|
+
}
|
12
|
+
|
13
|
+
.animate-pulse {
|
14
|
+
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
15
|
+
}
|
16
|
+
|
17
|
+
.animate-bounce {
|
18
|
+
animation: bounce 1s infinite;
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes spin {
|
22
|
+
from {
|
23
|
+
transform: rotate(0deg);
|
24
|
+
}
|
25
|
+
to {
|
26
|
+
transform: rotate(360deg);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
@keyframes ping {
|
31
|
+
0% {
|
32
|
+
transform: scale(1);
|
33
|
+
opacity: 1;
|
34
|
+
}
|
35
|
+
75%, 100% {
|
36
|
+
transform: scale(2);
|
37
|
+
opacity: 0;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
@keyframes pulse {
|
42
|
+
0%, 100% {
|
43
|
+
opacity: 1;
|
44
|
+
}
|
45
|
+
50% {
|
46
|
+
opacity: .5;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
@keyframes bounce {
|
51
|
+
0%, 100% {
|
52
|
+
transform: translateY(-25%);
|
53
|
+
animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
|
54
|
+
}
|
55
|
+
50% {
|
56
|
+
transform: translateY(0);
|
57
|
+
animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
|
58
|
+
}
|
59
|
+
}
|
@@ -1,31 +1,43 @@
|
|
1
1
|
.flex {
|
2
2
|
display: flex;
|
3
|
+
}
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
5
|
+
.i-flex {
|
6
|
+
display: inline-flex;
|
7
|
+
}
|
7
8
|
|
8
|
-
|
9
|
-
|
10
|
-
|
9
|
+
.flex--column {
|
10
|
+
flex-direction: column;
|
11
|
+
}
|
11
12
|
|
12
|
-
|
13
|
-
|
14
|
-
|
13
|
+
.flex--justify-center {
|
14
|
+
justify-content: center;
|
15
|
+
}
|
15
16
|
|
16
|
-
|
17
|
-
|
18
|
-
|
17
|
+
.flex--justify-between {
|
18
|
+
justify-content: space-between;
|
19
|
+
}
|
19
20
|
|
20
|
-
|
21
|
-
|
22
|
-
|
21
|
+
.flex--items-center {
|
22
|
+
align-items: center;
|
23
|
+
}
|
23
24
|
|
24
|
-
|
25
|
-
|
26
|
-
|
25
|
+
.flex--wrap {
|
26
|
+
flex-wrap: wrap;
|
27
|
+
}
|
28
|
+
|
29
|
+
.flex-item--grow {
|
30
|
+
flex-grow: 1;
|
31
|
+
}
|
32
|
+
|
33
|
+
.flex-item--no-shrink {
|
34
|
+
flex-shrink: 0;
|
35
|
+
}
|
36
|
+
|
37
|
+
.flex-item--fill {
|
38
|
+
flex: 1;
|
39
|
+
}
|
27
40
|
|
28
|
-
|
29
|
-
|
30
|
-
}
|
41
|
+
.flex-item--align-center {
|
42
|
+
align-self: center;
|
31
43
|
}
|