sass-zero 0.0.55 → 0.0.56
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 +6 -6
- data/README.md +2 -2
- data/app/assets/stylesheets/sass-zero/breadboard.scss +7 -32
- 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: 681331b510c60fd1ab5c3b9b308a7818164ce3eef6ed19851c436e5a533b694f
|
|
4
|
+
data.tar.gz: 1122523fea09214ded53cd922fe7fd0bf3ed0ed24cfa9d27538631ce98040a27
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 04da4bfeea03866a3c10fb8ffd1bb0f691d0d192faf483e433f9c5f0a867b50b42c0595076b34c83fae46748b26b926bac8b2cd4899e59e6670a560480b16622
|
|
7
|
+
data.tar.gz: 93ec7018d346d113aaafdfa32645e6d9f9539a5bf1046dbe644e1a80a0022e3042a281f766c6d3f5e449876295f310a1dc91e67403a6d623fe3c772352de0a42
|
data/Example.html
CHANGED
|
@@ -40,30 +40,30 @@
|
|
|
40
40
|
|
|
41
41
|
<div class="push-md--bottom">
|
|
42
42
|
<div>
|
|
43
|
-
<input type="checkbox" id="option1" name="option1" value="1"
|
|
43
|
+
<input type="checkbox" id="option1" name="option1" value="1" checked>
|
|
44
44
|
<label for="option1" class="u-display-ib">Option 1</label>
|
|
45
45
|
</div>
|
|
46
46
|
<div>
|
|
47
|
-
<input type="checkbox" id="option2" name="option2" value="2"
|
|
47
|
+
<input type="checkbox" id="option2" name="option2" value="2">
|
|
48
48
|
<label for="option2" class="u-display-ib">Option 2</label>
|
|
49
49
|
</div>
|
|
50
50
|
<div>
|
|
51
|
-
<input type="checkbox" id="option3" name="option3" value="3"
|
|
51
|
+
<input type="checkbox" id="option3" name="option3" value="3">
|
|
52
52
|
<label for="option3" class="u-display-ib">Option 3</label>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
|
|
56
56
|
<div class="push-md--bottom">
|
|
57
57
|
<div>
|
|
58
|
-
<input type="radio" id="radio1" name="radio" value="1"
|
|
58
|
+
<input type="radio" id="radio1" name="radio" value="1" checked>
|
|
59
59
|
<label for="radio1" class="u-display-ib">Option 1</label>
|
|
60
60
|
</div>
|
|
61
61
|
<div>
|
|
62
|
-
<input type="radio" id="radio2" name="radio" value="2"
|
|
62
|
+
<input type="radio" id="radio2" name="radio" value="2">
|
|
63
63
|
<label for="radio2" class="u-display-ib">Option 2</label>
|
|
64
64
|
</div>
|
|
65
65
|
<div>
|
|
66
|
-
<input type="radio" id="radio3" name="radio" value="3"
|
|
66
|
+
<input type="radio" id="radio3" name="radio" value="3">
|
|
67
67
|
<label for="radio3" class="u-display-ib">Option 3</label>
|
|
68
68
|
</div>
|
|
69
69
|
</div>
|
data/README.md
CHANGED
|
@@ -12,13 +12,10 @@ $radius-button: $rounded;
|
|
|
12
12
|
--color-primary: #{$gray-900};
|
|
13
13
|
--color-text: #{$gray-900};
|
|
14
14
|
--color-focus-ring: #{rgba($gray-900, $opacity-50)};
|
|
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>');
|
|
19
15
|
}
|
|
20
16
|
|
|
21
17
|
html {
|
|
18
|
+
accent-color: var(--color-primary);
|
|
22
19
|
background: var(--color-bg--main);
|
|
23
20
|
color: var(--color-text);
|
|
24
21
|
font-family: $font-family;
|
|
@@ -71,26 +68,10 @@ html {
|
|
|
71
68
|
width: $w-full;
|
|
72
69
|
|
|
73
70
|
&--select {
|
|
74
|
-
background-image: var(--
|
|
75
|
-
background-position:
|
|
71
|
+
background-image: linear-gradient(45deg, transparent 49%, var(--color-primary) 51%), linear-gradient(135deg, var(--color-primary) 51%, transparent 49%);
|
|
72
|
+
background-position: calc(100% - 20px), calc(100% - 15px);
|
|
76
73
|
background-repeat: no-repeat;
|
|
77
|
-
background-size:
|
|
78
|
-
padding-right: $size-8;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&:focus {
|
|
82
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
83
|
-
@include outline-none;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.checkbox {
|
|
88
|
-
border-radius: $rounded;
|
|
89
|
-
@include input-selection(var(--color-primary));
|
|
90
|
-
|
|
91
|
-
&:checked {
|
|
92
|
-
background-image: var(--image-checked-checkbox);
|
|
93
|
-
@include checked;
|
|
74
|
+
background-size: 5px 5px, 5px 5px;
|
|
94
75
|
}
|
|
95
76
|
|
|
96
77
|
&:focus {
|
|
@@ -99,17 +80,11 @@ html {
|
|
|
99
80
|
}
|
|
100
81
|
}
|
|
101
82
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
@include input-selection(var(--color-primary));
|
|
105
|
-
|
|
106
|
-
&:checked {
|
|
107
|
-
background-image: var(--image-checked-radio);
|
|
108
|
-
@include checked;
|
|
109
|
-
}
|
|
83
|
+
input[type="checkbox"], input[type="radio"] {
|
|
84
|
+
transform: scale(1.2, 1.2);
|
|
110
85
|
|
|
111
86
|
&:focus {
|
|
112
|
-
box-shadow: ring($color: var(--color-focus-ring));
|
|
87
|
+
box-shadow: ring($width: 1.5px, $color: var(--color-focus-ring));
|
|
113
88
|
@include outline-none;
|
|
114
89
|
}
|
|
115
90
|
}
|
|
@@ -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.56",
|
|
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.56
|
|
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-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email:
|