sass-zero 0.0.42 → 0.0.43
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/README.md +2 -2
- data/app/assets/stylesheets/sass-zero/breadboard.scss +45 -22
- data/app/assets/stylesheets/sass-zero/utilities/text.scss +0 -4
- data/app/assets/stylesheets/sass-zero/variables/effects.scss +3 -5
- 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: 06e133db6d4914987dbc2d77f08bcdd1671ad91fd57debe8c720330bfb708cb0
|
4
|
+
data.tar.gz: def1eda7c32c8f426ebb2b0bd43608e3b15ff917e88abb5056c67e07d8633004
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4ad3cb7aad00280da0c4777c1fb10308c77dee3b58855c17aaa193215c320768cfec6906bbd1eb988dd5c498431eb29b46f0223cc4902f643803d9b0470b6861
|
7
|
+
data.tar.gz: 8544b5ce046ca7f5742c1e1212fb41d1c65d58829341f741f2d3db3305313f9644df84403299dc59aafcae3240c7f3764136f4eb2bf2a4ca47145b1f399f0e1f
|
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
|
|
@@ -78,7 +78,7 @@ Add this line to your application.css:
|
|
78
78
|
```css
|
79
79
|
*= require sass-zero/base
|
80
80
|
*= require sass-zero/utilities
|
81
|
-
*= require sass-zero/breadboard
|
81
|
+
*= require sass-zero/breadboard
|
82
82
|
```
|
83
83
|
|
84
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,10 +1,20 @@
|
|
1
1
|
@import "sass-zero/variables";
|
2
2
|
@import "sass-zero/mixins";
|
3
3
|
|
4
|
-
|
5
|
-
|
4
|
+
:root {
|
5
|
+
--color-bg--main: #{$white};
|
6
|
+
--color-bg--surface: #{$gray-100};
|
7
|
+
--color-primary: #{$gray-900};
|
8
|
+
--color-txt: #{$gray-900};
|
9
|
+
--color-focus-ring: #{rgba($gray-900, 0.5)};
|
10
|
+
--image-bg-select: 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: 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: 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
|
+
}
|
6
14
|
|
7
15
|
html {
|
16
|
+
background: var(--color-bg--main);
|
17
|
+
color: var(--color-txt);
|
8
18
|
font-size: 14px;
|
9
19
|
}
|
10
20
|
|
@@ -14,23 +24,22 @@ main {
|
|
14
24
|
}
|
15
25
|
|
16
26
|
blockquote {
|
17
|
-
border-color:
|
27
|
+
border-color: var(--color-primary);
|
18
28
|
border-left-width: $border-4;
|
19
29
|
padding: $size-3 $size-4;
|
20
30
|
}
|
21
31
|
|
22
32
|
.btn {
|
23
|
-
background-color: $white;
|
24
33
|
border-radius: $rounded;
|
25
34
|
border-width: $border;
|
26
|
-
color: $breadboard-primary;
|
27
35
|
display: inline-block;
|
28
36
|
font-weight: $font-bold;
|
29
37
|
padding: $size-2 $size-4;
|
30
38
|
cursor: pointer;
|
31
39
|
|
32
40
|
&:focus {
|
33
|
-
|
41
|
+
outline: 2px dotted var(--color-primary);
|
42
|
+
outline-offset: 2px;
|
34
43
|
}
|
35
44
|
|
36
45
|
&:disabled {
|
@@ -39,14 +48,14 @@ blockquote {
|
|
39
48
|
}
|
40
49
|
|
41
50
|
&--primary {
|
42
|
-
background-color:
|
43
|
-
border-color:
|
44
|
-
color:
|
51
|
+
background-color: var(--color-primary);
|
52
|
+
border-color: var(--color-primary);
|
53
|
+
color: var(--color-bg--main);
|
45
54
|
}
|
46
55
|
|
47
56
|
&--secondary {
|
48
|
-
|
49
|
-
|
57
|
+
background-color: var(--color-bg--main);
|
58
|
+
border-color: var(--color-primary);
|
50
59
|
}
|
51
60
|
|
52
61
|
&--tertiary {
|
@@ -56,7 +65,7 @@ blockquote {
|
|
56
65
|
}
|
57
66
|
|
58
67
|
code {
|
59
|
-
background-color:
|
68
|
+
background-color: var(--color-bg--surface);
|
60
69
|
border-radius: $rounded;
|
61
70
|
font-size: $text-sm;
|
62
71
|
margin: $size-0 $size-1;
|
@@ -65,8 +74,8 @@ code {
|
|
65
74
|
}
|
66
75
|
|
67
76
|
pre {
|
68
|
-
background-color:
|
69
|
-
border-color:
|
77
|
+
background-color: var(--color-bg--surface);
|
78
|
+
border-color: var(--color-primary);
|
70
79
|
border-left-width: $border-4;
|
71
80
|
overflow-y: hidden;
|
72
81
|
|
@@ -84,13 +93,14 @@ hr {
|
|
84
93
|
|
85
94
|
.input {
|
86
95
|
appearance: none;
|
96
|
+
background-color: $transparent;
|
87
97
|
border-radius: $rounded;
|
88
98
|
border-width: $border;
|
89
99
|
padding: $size-2 $size-3;
|
90
100
|
width: $size-full;
|
91
101
|
|
92
102
|
&--select {
|
93
|
-
background-image:
|
103
|
+
background-image: var(--image-bg-select);
|
94
104
|
background-position: right $size-2 center;
|
95
105
|
background-repeat: no-repeat;
|
96
106
|
background-size: auto $size-5;
|
@@ -98,37 +108,37 @@ hr {
|
|
98
108
|
}
|
99
109
|
|
100
110
|
&:focus {
|
101
|
-
box-shadow: ring($color:
|
111
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
102
112
|
@include outline-none;
|
103
113
|
}
|
104
114
|
}
|
105
115
|
|
106
116
|
.checkbox {
|
107
117
|
border-radius: $rounded;
|
108
|
-
@include input-selection(
|
118
|
+
@include input-selection(var(--color-primary));
|
109
119
|
|
110
120
|
&:checked {
|
111
|
-
background-image:
|
121
|
+
background-image: var(--image-checked-checkbox);
|
112
122
|
@include checked;
|
113
123
|
}
|
114
124
|
|
115
125
|
&:focus {
|
116
|
-
box-shadow: ring($color:
|
126
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
117
127
|
@include outline-none;
|
118
128
|
}
|
119
129
|
}
|
120
130
|
|
121
131
|
.radio {
|
122
132
|
border-radius: $rounded-full;
|
123
|
-
@include input-selection(
|
133
|
+
@include input-selection(var(--color-primary));
|
124
134
|
|
125
135
|
&:checked {
|
126
|
-
background-image:
|
136
|
+
background-image: var(--image-checked-radio);
|
127
137
|
@include checked;
|
128
138
|
}
|
129
139
|
|
130
140
|
&:focus {
|
131
|
-
box-shadow: ring($color:
|
141
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
132
142
|
@include outline-none;
|
133
143
|
}
|
134
144
|
}
|
@@ -201,6 +211,19 @@ h6, .hdg--base {
|
|
201
211
|
font-size: $text-base;
|
202
212
|
}
|
203
213
|
|
214
|
+
@media (prefers-color-scheme: dark) {
|
215
|
+
:root {
|
216
|
+
--color-bg--main: #{$gray-900};
|
217
|
+
--color-bg--surface: #{$gray-800};
|
218
|
+
--color-primary: #{$white};
|
219
|
+
--color-txt: #{$white};
|
220
|
+
--color-focus-ring: #{rgba($gray-100, 0.5)};
|
221
|
+
--image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
|
222
|
+
--image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" 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>');
|
223
|
+
--image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
|
224
|
+
}
|
225
|
+
}
|
226
|
+
|
204
227
|
@media (min-width: $breakpoint-md) {
|
205
228
|
html { font-size: 16px; }
|
206
229
|
main { @include make-container($size-10, $breakpoint-xl); }
|
@@ -38,16 +38,14 @@ $opacity-100: 1;
|
|
38
38
|
// Utilities for creating outline rings with box-shadows.
|
39
39
|
// box-shadow: ring($width: 4px);
|
40
40
|
// *******************************************************************
|
41
|
-
@function ring($width: 3px, $color: $blue-500, $offset-width: 0px, $offset-color: $white, $
|
42
|
-
$ring-color: rgba($color, $opacity);
|
43
|
-
|
41
|
+
@function ring($width: 3px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
|
44
42
|
@if $inset {
|
45
43
|
$ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
|
46
|
-
$ring-shadow: inset 0 0 0 ($width + $offset-width) $
|
44
|
+
$ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
|
47
45
|
@return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
|
48
46
|
} @else {
|
49
47
|
$ring-offset-shadow: 0 0 0 $offset-width $offset-color;
|
50
|
-
$ring-shadow: 0 0 0 ($width + $offset-width) $
|
48
|
+
$ring-shadow: 0 0 0 ($width + $offset-width) $color;
|
51
49
|
@return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
|
52
50
|
}
|
53
51
|
}
|
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.43",
|
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.43
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-12-
|
11
|
+
date: 2020-12-15 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: autoprefixer-rails
|