sass-zero 0.0.53 → 0.0.57
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 +53 -45
- data/app/assets/stylesheets/sass-zero/mixins.scss +0 -16
- data/app/assets/stylesheets/sass-zero/utilities/list.scss +4 -21
- 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: 1d59dcac8d72f42763e08239e15c235964dac127c94acf45f09964919f01cfa9
|
4
|
+
data.tar.gz: ce884ee7a8cf2612e37852f294be33be241d62c3a7c3f77e250a4aec47ec3e0b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d632a79c4cf523755d8e7059887c9f16074261de72c9bddec8dbec10bd2054c9cd72e86b52eaa1592806be40e9cad5b74acdb751b13ca738460a8a0b50092009
|
7
|
+
data.tar.gz: 441fe39c8be344a7cf6e433ec5f8cb410eca2fb03d70e2372df8b792e513974ffce9209cfca94ee85fce8d76cd66b82b75b5e7dee8911c9a07620401b5f656ff
|
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,19 @@ $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
|
-
--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>');
|
17
|
-
--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>');
|
18
|
-
--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>');
|
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($gray-900, $opacity-50)};
|
19
16
|
}
|
20
17
|
|
21
18
|
html {
|
19
|
+
accent-color: var(--color-primary);
|
22
20
|
background: var(--color-bg--main);
|
23
21
|
color: var(--color-text);
|
24
22
|
font-family: $font-family;
|
25
|
-
font-size: 16px;
|
26
23
|
}
|
27
24
|
|
28
25
|
.btn {
|
@@ -33,11 +30,6 @@ html {
|
|
33
30
|
padding: $size-2 $size-4;
|
34
31
|
cursor: pointer;
|
35
32
|
|
36
|
-
&:disabled {
|
37
|
-
pointer-events: none;
|
38
|
-
opacity: $opacity-50;
|
39
|
-
}
|
40
|
-
|
41
33
|
&--primary {
|
42
34
|
background-color: var(--color-primary);
|
43
35
|
border-color: var(--color-primary);
|
@@ -54,6 +46,16 @@ html {
|
|
54
46
|
background-color: $transparent;
|
55
47
|
border-color: $transparent;
|
56
48
|
}
|
49
|
+
|
50
|
+
&:focus {
|
51
|
+
box-shadow: ring($color: var(--color-focus-ring));
|
52
|
+
@include outline-none;
|
53
|
+
}
|
54
|
+
|
55
|
+
&:disabled {
|
56
|
+
pointer-events: none;
|
57
|
+
opacity: $opacity-50;
|
58
|
+
}
|
57
59
|
}
|
58
60
|
|
59
61
|
.input {
|
@@ -66,11 +68,10 @@ html {
|
|
66
68
|
width: $w-full;
|
67
69
|
|
68
70
|
&--select {
|
69
|
-
background-image: var(--
|
70
|
-
background-position:
|
71
|
+
background-image: linear-gradient(45deg, transparent 49%, var(--color-text) 51%), linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
|
72
|
+
background-position: calc(100% - 20px), calc(100% - 15px);
|
71
73
|
background-repeat: no-repeat;
|
72
|
-
background-size:
|
73
|
-
padding-right: $size-8;
|
74
|
+
background-size: 5px 5px, 5px 5px;
|
74
75
|
}
|
75
76
|
|
76
77
|
&:focus {
|
@@ -79,32 +80,12 @@ html {
|
|
79
80
|
}
|
80
81
|
}
|
81
82
|
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
&:checked {
|
87
|
-
background-image: var(--image-checked-checkbox);
|
88
|
-
@include checked;
|
89
|
-
}
|
83
|
+
input[type="checkbox"], input[type="radio"] {
|
84
|
+
transform: scale(1.2, 1.2);
|
85
|
+
margin: $size-1;
|
90
86
|
|
91
87
|
&:focus {
|
92
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
93
|
-
@include outline-none;
|
94
|
-
}
|
95
|
-
}
|
96
|
-
|
97
|
-
.radio {
|
98
|
-
border-radius: $rounded-full;
|
99
|
-
@include input-selection(var(--color-primary));
|
100
|
-
|
101
|
-
&:checked {
|
102
|
-
background-image: var(--image-checked-radio);
|
103
|
-
@include checked;
|
104
|
-
}
|
105
|
-
|
106
|
-
&:focus {
|
107
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
88
|
+
box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
|
108
89
|
@include outline-none;
|
109
90
|
}
|
110
91
|
}
|
@@ -114,11 +95,14 @@ blockquote {
|
|
114
95
|
padding: $size-3 $size-4;
|
115
96
|
}
|
116
97
|
|
98
|
+
cite {
|
99
|
+
font-size: $text-sm;
|
100
|
+
}
|
101
|
+
|
117
102
|
code {
|
118
103
|
background-color: var(--color-bg--surface);
|
119
104
|
border-radius: $rounded;
|
120
105
|
font-size: $text-sm;
|
121
|
-
margin: $size-0 $size-1;
|
122
106
|
padding: $size-1 $size-2;
|
123
107
|
white-space: nowrap;
|
124
108
|
}
|
@@ -136,6 +120,20 @@ pre {
|
|
136
120
|
}
|
137
121
|
}
|
138
122
|
|
123
|
+
kbd {
|
124
|
+
background-color: var(--color-primary);
|
125
|
+
border-radius: $rounded;
|
126
|
+
font-size: $text-sm;
|
127
|
+
padding: $size-1 $size-2;
|
128
|
+
color: var(--color-bg--main);
|
129
|
+
}
|
130
|
+
|
131
|
+
mark {
|
132
|
+
background-color: var(--color-bg--highlight);
|
133
|
+
border-radius: $rounded;
|
134
|
+
padding: $size-1 $size-2;
|
135
|
+
}
|
136
|
+
|
139
137
|
hr {
|
140
138
|
margin: $size-6 $size-0;
|
141
139
|
}
|
@@ -168,10 +166,20 @@ fieldset, .input {
|
|
168
166
|
margin-bottom: $size-6;
|
169
167
|
}
|
170
168
|
|
171
|
-
|
169
|
+
table, details, blockquote, p, pre, ul, ol, dl {
|
172
170
|
margin-bottom: $size-6;
|
173
171
|
}
|
174
172
|
|
173
|
+
details {
|
174
|
+
padding: $size-2 $size-3;
|
175
|
+
background-color: var(--color-bg--surface);
|
176
|
+
border-left-width: $border-4;
|
177
|
+
}
|
178
|
+
|
179
|
+
summary {
|
180
|
+
cursor: pointer;
|
181
|
+
}
|
182
|
+
|
175
183
|
table {
|
176
184
|
width: $w-full;
|
177
185
|
}
|
@@ -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;
|
@@ -14,28 +14,11 @@
|
|
14
14
|
list-style: none;
|
15
15
|
}
|
16
16
|
|
17
|
-
.list--
|
18
|
-
margin-top: $size-2;
|
19
|
-
}
|
20
|
-
|
21
|
-
.list--inside-bulleted {
|
22
|
-
padding-left: $size-0;
|
23
|
-
list-style-position: inside;
|
24
|
-
}
|
25
|
-
|
26
|
-
.list--ruled-top {
|
27
|
-
border-top-width: $border;
|
28
|
-
}
|
29
|
-
|
30
|
-
.list--inline > li {
|
17
|
+
.list--inline li {
|
31
18
|
display: inline-block;
|
19
|
+
vertical-align: middle;
|
32
20
|
}
|
33
21
|
|
34
|
-
.list--
|
35
|
-
|
36
|
-
}
|
37
|
-
|
38
|
-
.list--ruled > li {
|
39
|
-
padding: $size-4 $size-2;
|
40
|
-
border-top-width: $border;
|
22
|
+
.list--dividers li:not(:last-child) {
|
23
|
+
border-bottom-width: $border;
|
41
24
|
}
|
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.57",
|
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.57
|
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-12 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|