sass-zero 0.0.54 → 0.0.58
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 +25 -15
- data/README.md +4 -3
- data/app/assets/stylesheets/sass-zero/breadboard.scss +69 -47
- data/app/assets/stylesheets/sass-zero/mixins.scss +0 -16
- 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: '0495f5c1711cbe1d7fa9fc1ef264522dc5684f9229eddd808b70a191910a8070'
|
|
4
|
+
data.tar.gz: e92f3f0ab36b10b0747bfec381fc170669b0ca3f18e888c61f1980aff29b19a9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ff787f9232779444363027e93241bc246ae19bef623502f58eed52a06322cf50bc50018d636e5d4348fd7fc4e893f6b05a3e88b95a15c77bf55c9b6a5f68486d
|
|
7
|
+
data.tar.gz: 1e404d206ac5cce0c669190cac0618f6315f7de0093900abde3a77d0b222fc617486223b28831bffc429fcbde1f9f1ac22ab1160f6ebc9a93ec12ca0fae43381
|
data/Example.html
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
<small>Small</small>
|
|
6
6
|
<strong>Strong</strong>
|
|
7
7
|
<u>Underline</u>
|
|
8
|
+
<kbd>CTRL+C</kbd>
|
|
9
|
+
<mark>Highlighted text</mark>
|
|
8
10
|
<h1>Heading</h1>
|
|
9
11
|
<h2>Heading</h2>
|
|
10
12
|
<h3>Heading</h3>
|
|
@@ -40,31 +42,31 @@
|
|
|
40
42
|
|
|
41
43
|
<div class="push-md--bottom">
|
|
42
44
|
<div>
|
|
43
|
-
<input type="checkbox"
|
|
45
|
+
<input type="checkbox" id="option1" name="option1" value="1" checked>
|
|
44
46
|
<label for="option1" class="u-display-ib">Option 1</label>
|
|
45
47
|
</div>
|
|
46
48
|
<div>
|
|
47
|
-
<input type="checkbox"
|
|
49
|
+
<input type="checkbox" id="option2" name="option2" value="2">
|
|
48
50
|
<label for="option2" class="u-display-ib">Option 2</label>
|
|
49
51
|
</div>
|
|
50
52
|
<div>
|
|
51
|
-
<input type="checkbox"
|
|
53
|
+
<input type="checkbox" id="option3" name="option3" value="3">
|
|
52
54
|
<label for="option3" class="u-display-ib">Option 3</label>
|
|
53
55
|
</div>
|
|
54
56
|
</div>
|
|
55
57
|
|
|
56
58
|
<div class="push-md--bottom">
|
|
57
59
|
<div>
|
|
58
|
-
<input type="radio" name="radio" value="1"
|
|
59
|
-
<label for="
|
|
60
|
+
<input type="radio" id="radio1" name="radio" value="1" checked>
|
|
61
|
+
<label for="radio1" class="u-display-ib">Option 1</label>
|
|
60
62
|
</div>
|
|
61
63
|
<div>
|
|
62
|
-
<input type="radio" name="radio" value="2"
|
|
63
|
-
<label for="
|
|
64
|
+
<input type="radio" id="radio2" name="radio" value="2">
|
|
65
|
+
<label for="radio2" class="u-display-ib">Option 2</label>
|
|
64
66
|
</div>
|
|
65
67
|
<div>
|
|
66
|
-
<input type="radio" name="radio" value="3"
|
|
67
|
-
<label for="
|
|
68
|
+
<input type="radio" id="radio3" name="radio" value="3">
|
|
69
|
+
<label for="radio3" class="u-display-ib">Option 3</label>
|
|
68
70
|
</div>
|
|
69
71
|
</div>
|
|
70
72
|
</div>
|
|
@@ -97,19 +99,27 @@
|
|
|
97
99
|
</tbody>
|
|
98
100
|
</table>
|
|
99
101
|
|
|
102
|
+
<details>
|
|
103
|
+
<summary class="txt--bold">Some details</summary>
|
|
104
|
+
<p>More info about the details.</p>
|
|
105
|
+
</details>
|
|
106
|
+
|
|
100
107
|
<blockquote>
|
|
101
|
-
<p class="flush"
|
|
108
|
+
<p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
|
|
109
|
+
<cite>– Stephen King</cite>
|
|
102
110
|
</blockquote>
|
|
103
111
|
|
|
104
112
|
<pre><code>.milligram {
|
|
105
113
|
color: #9b4dca;
|
|
106
114
|
}</code></pre>
|
|
107
115
|
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
<div class="push-md--bottom">
|
|
117
|
+
<code>
|
|
118
|
+
.milligram {
|
|
119
|
+
color: #9b4dca;
|
|
120
|
+
}
|
|
121
|
+
</code>
|
|
122
|
+
</div>
|
|
113
123
|
|
|
114
124
|
<hr>
|
|
115
125
|
|
data/README.md
CHANGED
|
@@ -70,7 +70,8 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
|
70
70
|
Add this to your application's Gemfile:
|
|
71
71
|
|
|
72
72
|
```ruby
|
|
73
|
-
gem
|
|
73
|
+
gem "sass-zero"
|
|
74
|
+
gem "autoprefixer-rails"
|
|
74
75
|
```
|
|
75
76
|
|
|
76
77
|
## Usage
|
|
@@ -91,11 +92,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
|
|
|
91
92
|
.block {
|
|
92
93
|
color: $red-300;
|
|
93
94
|
|
|
94
|
-
&
|
|
95
|
+
&__element {
|
|
95
96
|
color: $red-400;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
&--
|
|
99
|
+
&--modifier {
|
|
99
100
|
color: $red-500;
|
|
100
101
|
}
|
|
101
102
|
}
|
|
@@ -7,22 +7,30 @@ $radius-input: $rounded;
|
|
|
7
7
|
$radius-button: $rounded;
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
-
--color-bg--main:
|
|
11
|
-
--color-bg--surface:
|
|
12
|
-
--color-
|
|
13
|
-
--color-
|
|
14
|
-
--color-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
--color-bg--main: #{$white};
|
|
11
|
+
--color-bg--surface: #{$gray-100};
|
|
12
|
+
--color-bg--highlight: #{$gray-200};
|
|
13
|
+
--color-primary: #{$gray-900};
|
|
14
|
+
--color-text: #{$gray-900};
|
|
15
|
+
--color-focus-ring: #{rgba($black, $opacity-60)};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@media (prefers-color-scheme: dark) {
|
|
19
|
+
:root {
|
|
20
|
+
--color-bg--main: #{$gray-900};
|
|
21
|
+
--color-bg--surface: #{$gray-800};
|
|
22
|
+
--color-bg--highlight: #{$gray-700};
|
|
23
|
+
--color-primary: #{$white};
|
|
24
|
+
--color-text: #{$white};
|
|
25
|
+
--color-focus-ring: #{rgba($white, $opacity-60)};
|
|
26
|
+
}
|
|
19
27
|
}
|
|
20
28
|
|
|
21
29
|
html {
|
|
30
|
+
accent-color: var(--color-primary);
|
|
22
31
|
background: var(--color-bg--main);
|
|
23
32
|
color: var(--color-text);
|
|
24
33
|
font-family: $font-family;
|
|
25
|
-
font-size: 16px;
|
|
26
34
|
}
|
|
27
35
|
|
|
28
36
|
.btn {
|
|
@@ -33,11 +41,6 @@ html {
|
|
|
33
41
|
padding: $size-2 $size-4;
|
|
34
42
|
cursor: pointer;
|
|
35
43
|
|
|
36
|
-
&:disabled {
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
opacity: $opacity-50;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
44
|
&--primary {
|
|
42
45
|
background-color: var(--color-primary);
|
|
43
46
|
border-color: var(--color-primary);
|
|
@@ -54,38 +57,34 @@ html {
|
|
|
54
57
|
background-color: $transparent;
|
|
55
58
|
border-color: $transparent;
|
|
56
59
|
}
|
|
60
|
+
|
|
61
|
+
&:focus {
|
|
62
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
|
63
|
+
@include outline-none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:disabled {
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
opacity: $opacity-50;
|
|
69
|
+
}
|
|
57
70
|
}
|
|
58
71
|
|
|
59
72
|
.input {
|
|
60
73
|
resize: none;
|
|
61
74
|
appearance: none;
|
|
62
|
-
background-color:
|
|
75
|
+
background-color: var(--color-bg--main);
|
|
63
76
|
border-radius: $radius-input;
|
|
64
77
|
border-width: $border;
|
|
65
78
|
padding: $size-2 $size-3;
|
|
66
79
|
width: $w-full;
|
|
67
80
|
|
|
68
81
|
&--select {
|
|
69
|
-
background-image:
|
|
70
|
-
|
|
82
|
+
background-image:
|
|
83
|
+
linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
|
|
84
|
+
linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
|
|
85
|
+
background-position: calc(100% - 20px), calc(100% - 15px);
|
|
71
86
|
background-repeat: no-repeat;
|
|
72
|
-
background-size:
|
|
73
|
-
padding-right: $size-8;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&:focus {
|
|
77
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
78
|
-
@include outline-none;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.checkbox {
|
|
83
|
-
border-radius: $rounded;
|
|
84
|
-
@include input-selection(var(--color-primary));
|
|
85
|
-
|
|
86
|
-
&:checked {
|
|
87
|
-
background-image: var(--image-checked-checkbox);
|
|
88
|
-
@include checked;
|
|
87
|
+
background-size: 5px 5px, 5px 5px;
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
&:focus {
|
|
@@ -94,17 +93,12 @@ html {
|
|
|
94
93
|
}
|
|
95
94
|
}
|
|
96
95
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
&:checked {
|
|
102
|
-
background-image: var(--image-checked-radio);
|
|
103
|
-
@include checked;
|
|
104
|
-
}
|
|
96
|
+
input[type="checkbox"], input[type="radio"] {
|
|
97
|
+
transform: scale(1.2, 1.2);
|
|
98
|
+
margin: $size-1;
|
|
105
99
|
|
|
106
100
|
&:focus {
|
|
107
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
101
|
+
box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
|
|
108
102
|
@include outline-none;
|
|
109
103
|
}
|
|
110
104
|
}
|
|
@@ -114,12 +108,15 @@ blockquote {
|
|
|
114
108
|
padding: $size-3 $size-4;
|
|
115
109
|
}
|
|
116
110
|
|
|
111
|
+
cite {
|
|
112
|
+
font-size: $text-sm;
|
|
113
|
+
}
|
|
114
|
+
|
|
117
115
|
code {
|
|
118
116
|
background-color: var(--color-bg--surface);
|
|
119
117
|
border-radius: $rounded;
|
|
120
118
|
font-size: $text-sm;
|
|
121
|
-
|
|
122
|
-
padding: $size-1 $size-2;
|
|
119
|
+
padding: $size-1;
|
|
123
120
|
white-space: nowrap;
|
|
124
121
|
}
|
|
125
122
|
|
|
@@ -136,6 +133,21 @@ pre {
|
|
|
136
133
|
}
|
|
137
134
|
}
|
|
138
135
|
|
|
136
|
+
kbd {
|
|
137
|
+
background-color: var(--color-primary);
|
|
138
|
+
border-radius: $rounded;
|
|
139
|
+
font-size: $text-sm;
|
|
140
|
+
padding: $size-1;
|
|
141
|
+
color: var(--color-bg--main);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
mark {
|
|
145
|
+
background-color: var(--color-bg--highlight);
|
|
146
|
+
border-radius: $rounded;
|
|
147
|
+
padding: $size-1;
|
|
148
|
+
color: inherit;
|
|
149
|
+
}
|
|
150
|
+
|
|
139
151
|
hr {
|
|
140
152
|
margin: $size-6 $size-0;
|
|
141
153
|
}
|
|
@@ -168,10 +180,20 @@ fieldset, .input {
|
|
|
168
180
|
margin-bottom: $size-6;
|
|
169
181
|
}
|
|
170
182
|
|
|
171
|
-
|
|
183
|
+
table, details, blockquote, p, pre, ul, ol, dl {
|
|
172
184
|
margin-bottom: $size-6;
|
|
173
185
|
}
|
|
174
186
|
|
|
187
|
+
details {
|
|
188
|
+
padding: $size-2 $size-3;
|
|
189
|
+
background-color: var(--color-bg--surface);
|
|
190
|
+
border-left-width: $border-4;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
summary {
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
}
|
|
196
|
+
|
|
175
197
|
table {
|
|
176
198
|
width: $w-full;
|
|
177
199
|
}
|
|
@@ -19,22 +19,6 @@
|
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
@mixin input-selection($color) {
|
|
23
|
-
appearance: none;
|
|
24
|
-
border-width: $border;
|
|
25
|
-
color: $color;
|
|
26
|
-
margin-bottom: -0.1rem;
|
|
27
|
-
height: $size-4;
|
|
28
|
-
width: $size-4;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin checked {
|
|
32
|
-
border-color: transparent;
|
|
33
|
-
background-color: currentColor;
|
|
34
|
-
background-position: center;
|
|
35
|
-
background-repeat: no-repeat;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
@mixin outline-none {
|
|
39
23
|
outline: 2px solid transparent;
|
|
40
24
|
outline-offset: 2px;
|
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.58",
|
|
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.58
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- lazaronixon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2022-01-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|