sass-zero 0.0.39 → 0.0.44
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 +1 -1
- data/README.md +4 -1
- 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} +53 -32
- data/app/assets/stylesheets/sass-zero/mixins.scss +23 -14
- 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 +47 -5
- 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 +239 -118
- data/app/assets/stylesheets/sass-zero/variables/effects.scss +28 -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 +8 -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 +6 -5
- 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: 1bedb80a3b82ff395f4fcb62ace52fa617d6dfbf57071c0ccfbe896cf07927e8
|
4
|
+
data.tar.gz: 0af153c127e2f31ebcf72b198b6524599d5a3a1e0346568ff175c20c51ebb398
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8c9d00ad068770c7f76c458ffd0111c96f6a673a6397a8999df4394275a648451dc93f977f67dace21a1a7ce5451c7b4caab1080220301f073d7aae06c227e04
|
7
|
+
data.tar.gz: 72a68175415ff39c9e565a851af374bbd3ab1587d3d72bca6ea7f151e8af0958618cd434aaaf2d889be141ca91c97a8a4b6a5cb28273b60c4917d1e99632e307
|
data/Example.html
CHANGED
data/README.md
CHANGED
@@ -31,7 +31,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
31
31
|
### Breadboard Theme
|
32
32
|
|
33
33
|
- [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
|
34
|
-
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/
|
34
|
+
- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
|
35
35
|
|
36
36
|
### Variables
|
37
37
|
|
@@ -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,19 @@
|
|
1
|
-
@import "sass-zero/
|
1
|
+
@import "sass-zero/variables";
|
2
2
|
@import "sass-zero/mixins";
|
3
3
|
|
4
|
+
$color-bg--main: $white;
|
5
|
+
$color-bg--surface: $gray-100;
|
6
|
+
$color-primary: $gray-900;
|
7
|
+
$color-txt: $gray-900;
|
8
|
+
$color-focus-ring: rgba($gray-900, $opacity-50);
|
9
|
+
|
10
|
+
$image-bg-select-black: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
|
11
|
+
$image-checked-checkbox-white: 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>');
|
12
|
+
$image-checked-radio-white: 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>');
|
13
|
+
|
4
14
|
html {
|
5
|
-
|
15
|
+
background: $color-bg--main;
|
16
|
+
color: $color-txt;
|
6
17
|
font-size: 14px;
|
7
18
|
}
|
8
19
|
|
@@ -12,34 +23,38 @@ main {
|
|
12
23
|
}
|
13
24
|
|
14
25
|
blockquote {
|
26
|
+
border-color: $color-primary;
|
15
27
|
border-left-width: $border-4;
|
16
28
|
padding: $size-3 $size-4;
|
17
29
|
}
|
18
30
|
|
19
31
|
.btn {
|
20
|
-
background-color: $white;
|
21
32
|
border-radius: $rounded;
|
22
33
|
border-width: $border;
|
23
|
-
color: $breadboard-color;
|
24
34
|
display: inline-block;
|
25
35
|
font-weight: $font-bold;
|
26
36
|
padding: $size-2 $size-4;
|
27
37
|
cursor: pointer;
|
28
38
|
|
29
|
-
&:
|
39
|
+
&:focus {
|
40
|
+
outline: 2px dotted $color-primary;
|
41
|
+
outline-offset: 2px;
|
42
|
+
}
|
43
|
+
|
44
|
+
&:disabled {
|
30
45
|
pointer-events: none;
|
31
46
|
opacity: $opacity-50;
|
32
47
|
}
|
33
48
|
|
34
49
|
&--primary {
|
35
|
-
background-color: $
|
36
|
-
border-color: $
|
37
|
-
color: $
|
50
|
+
background-color: $color-primary;
|
51
|
+
border-color: $color-primary;
|
52
|
+
color: $color-bg--main;
|
38
53
|
}
|
39
54
|
|
40
55
|
&--secondary {
|
41
|
-
|
42
|
-
|
56
|
+
background-color: $color-bg--main;
|
57
|
+
border-color: $color-primary;
|
43
58
|
}
|
44
59
|
|
45
60
|
&--tertiary {
|
@@ -49,7 +64,7 @@ blockquote {
|
|
49
64
|
}
|
50
65
|
|
51
66
|
code {
|
52
|
-
background-color: $
|
67
|
+
background-color: $color-bg--surface;
|
53
68
|
border-radius: $rounded;
|
54
69
|
font-size: $text-sm;
|
55
70
|
margin: $size-0 $size-1;
|
@@ -58,15 +73,15 @@ code {
|
|
58
73
|
}
|
59
74
|
|
60
75
|
pre {
|
61
|
-
background-color: $
|
62
|
-
border-color: $
|
76
|
+
background-color: $color-bg--surface;
|
77
|
+
border-color: $color-primary;
|
63
78
|
border-left-width: $border-4;
|
64
79
|
overflow-y: hidden;
|
65
80
|
|
66
81
|
& > code {
|
67
82
|
border-radius: $rounded-none;
|
68
|
-
|
69
|
-
|
83
|
+
display: block;
|
84
|
+
padding: $size-2 $size-3;
|
70
85
|
white-space: pre;
|
71
86
|
}
|
72
87
|
}
|
@@ -77,47 +92,57 @@ hr {
|
|
77
92
|
|
78
93
|
.input {
|
79
94
|
appearance: none;
|
95
|
+
background-color: $transparent;
|
80
96
|
border-radius: $rounded;
|
81
97
|
border-width: $border;
|
82
98
|
padding: $size-2 $size-3;
|
83
99
|
width: $size-full;
|
84
100
|
|
85
101
|
&--select {
|
86
|
-
|
102
|
+
background-image: $image-bg-select-black;
|
87
103
|
background-position: right $size-2 center;
|
88
104
|
background-repeat: no-repeat;
|
89
105
|
background-size: auto $size-5;
|
90
106
|
padding-right: $size-8;
|
91
107
|
}
|
92
108
|
|
93
|
-
&:focus {
|
109
|
+
&:focus {
|
110
|
+
box-shadow: ring($color: $color-focus-ring);
|
111
|
+
@include outline-none;
|
112
|
+
}
|
94
113
|
}
|
95
114
|
|
96
115
|
.checkbox {
|
97
116
|
border-radius: $rounded;
|
98
|
-
@include selection($
|
117
|
+
@include input-selection($color-primary);
|
99
118
|
|
100
119
|
&:checked {
|
101
|
-
background-image:
|
120
|
+
background-image: $image-checked-checkbox-white;
|
102
121
|
@include checked;
|
103
122
|
}
|
104
123
|
|
105
|
-
&:focus {
|
124
|
+
&:focus {
|
125
|
+
box-shadow: ring($color: $color-focus-ring);
|
126
|
+
@include outline-none;
|
127
|
+
}
|
106
128
|
}
|
107
129
|
|
108
130
|
.radio {
|
109
131
|
border-radius: $rounded-full;
|
110
|
-
@include selection($
|
132
|
+
@include input-selection($color-primary);
|
111
133
|
|
112
134
|
&:checked {
|
113
|
-
background-image:
|
135
|
+
background-image: $image-checked-radio-white;
|
114
136
|
@include checked;
|
115
137
|
}
|
116
138
|
|
117
|
-
&:focus {
|
139
|
+
&:focus {
|
140
|
+
box-shadow: ring($color: $color-focus-ring);
|
141
|
+
@include outline-none;
|
142
|
+
}
|
118
143
|
}
|
119
144
|
|
120
|
-
label, legend {
|
145
|
+
label, legend, dt {
|
121
146
|
display: inline-block;
|
122
147
|
margin-bottom: $size-1;
|
123
148
|
}
|
@@ -135,19 +160,15 @@ ol {
|
|
135
160
|
}
|
136
161
|
|
137
162
|
h1, h2, h3, h4, h5, h6, .hdg {
|
138
|
-
margin-bottom: $size-
|
139
|
-
}
|
140
|
-
|
141
|
-
dd {
|
142
|
-
margin-bottom: $size-2;
|
163
|
+
margin-bottom: $size-4;
|
143
164
|
}
|
144
165
|
|
145
166
|
fieldset, .input {
|
146
|
-
margin-bottom: $size-
|
167
|
+
margin-bottom: $size-6;
|
147
168
|
}
|
148
169
|
|
149
170
|
blockquote, figure, p, pre, table, ul, ol, dl {
|
150
|
-
margin-bottom: $size-
|
171
|
+
margin-bottom: $size-6;
|
151
172
|
}
|
152
173
|
|
153
174
|
table {
|
@@ -191,5 +212,5 @@ h6, .hdg--base {
|
|
191
212
|
|
192
213
|
@media (min-width: $breakpoint-md) {
|
193
214
|
html { font-size: 16px; }
|
194
|
-
main { @include make-container($size-10, $breakpoint-
|
215
|
+
main { @include make-container($size-10, $breakpoint-xl); }
|
195
216
|
}
|
@@ -3,9 +3,9 @@
|
|
3
3
|
@import "sass-zero/variables/spacing";
|
4
4
|
|
5
5
|
@mixin ellipsis {
|
6
|
-
overflow: hidden;
|
7
6
|
text-overflow: ellipsis;
|
8
7
|
white-space: nowrap;
|
8
|
+
overflow: hidden;
|
9
9
|
}
|
10
10
|
|
11
11
|
@mixin antialiased {
|
@@ -26,30 +26,39 @@
|
|
26
26
|
}
|
27
27
|
}
|
28
28
|
|
29
|
-
@mixin
|
30
|
-
border-color:
|
31
|
-
|
32
|
-
|
29
|
+
@mixin checked {
|
30
|
+
border-color: transparent;
|
31
|
+
background-color: currentColor;
|
32
|
+
background-position: center;
|
33
|
+
background-repeat: no-repeat;
|
33
34
|
}
|
34
35
|
|
35
|
-
@mixin selection($color) {
|
36
|
+
@mixin input-selection($color) {
|
36
37
|
appearance: none;
|
37
38
|
border-width: $border;
|
38
39
|
color: $color;
|
39
|
-
margin-bottom: -0.
|
40
|
+
margin-bottom: -0.1rem;
|
40
41
|
height: $size-4;
|
41
42
|
width: $size-4;
|
42
43
|
}
|
43
44
|
|
44
|
-
@mixin
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
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;
|
49
58
|
}
|
50
59
|
|
51
60
|
@mixin space-x($space, $reverse: false) {
|
52
|
-
& > :not(
|
61
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
53
62
|
@if $reverse {
|
54
63
|
margin-right: $space;
|
55
64
|
} @else {
|
@@ -59,7 +68,7 @@
|
|
59
68
|
}
|
60
69
|
|
61
70
|
@mixin space-y($space, $reverse: false) {
|
62
|
-
& > :not(
|
71
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
63
72
|
@if $reverse {
|
64
73
|
margin-bottom: $space;
|
65
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
|
}
|