sass-zero 0.0.56 → 1.0.1
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 +16 -6
- data/README.md +2 -1
- data/app/assets/stylesheets/sass-zero/breadboard.scss +56 -12
- data/app/assets/stylesheets/sass-zero/utilities/animation.scss +3 -3
- data/app/assets/stylesheets/sass-zero/utilities/pull.scss +5 -1
- data/app/assets/stylesheets/sass-zero/utilities/push.scss +7 -1
- data/app/assets/stylesheets/sass-zero/variables/effects.scss +8 -8
- data/app/assets/stylesheets/sass-zero/variables/filters.scss +103 -0
- data/app/assets/stylesheets/sass-zero/variables/spacing.scss +9 -1
- data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
- data/lib/sass/zero/version.rb +1 -1
- data/package.json +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c854b53b284807e980381e23c97a299e4a3418d9fc6ed2ea159c72b22f2ff675
|
4
|
+
data.tar.gz: 5b677eefbd12f5ef3ecb04c799b68bc58173a9448f574e847804f0393efb8375
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7383e893ded2ce3166429798fb3bc3f9121368a2ad7ce7a877c960cd9c20e56b55f81bb89467a8063b0cb5cdf590f5a9da8a5d8daa22359d73ad4b24903d4608
|
7
|
+
data.tar.gz: f90ce8c8f05de51f39a1d04183c262a0c07e1946b130eb5cec11984a05386bcb2f36f4810530353cbb5537300bb13eebbe7b1a756030d5f845277e03d7485f10
|
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>
|
@@ -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
@@ -39,6 +39,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
39
39
|
- [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
|
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
|
+
- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
|
42
43
|
- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
|
43
44
|
- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
|
44
45
|
- [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
|
@@ -70,7 +71,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
|
|
70
71
|
Add this to your application's Gemfile:
|
71
72
|
|
72
73
|
```ruby
|
73
|
-
gem
|
74
|
+
gem "sass-zero"
|
74
75
|
```
|
75
76
|
|
76
77
|
## Usage
|
@@ -7,11 +7,23 @@ $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-
|
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
|
+
}
|
15
27
|
}
|
16
28
|
|
17
29
|
html {
|
@@ -19,7 +31,6 @@ html {
|
|
19
31
|
background: var(--color-bg--main);
|
20
32
|
color: var(--color-text);
|
21
33
|
font-family: $font-family;
|
22
|
-
font-size: 16px;
|
23
34
|
}
|
24
35
|
|
25
36
|
.btn {
|
@@ -59,16 +70,20 @@ html {
|
|
59
70
|
}
|
60
71
|
|
61
72
|
.input {
|
73
|
+
-webkit-appearance: none;
|
74
|
+
|
62
75
|
resize: none;
|
63
76
|
appearance: none;
|
64
|
-
background-color:
|
77
|
+
background-color: var(--color-bg--main);
|
65
78
|
border-radius: $radius-input;
|
66
79
|
border-width: $border;
|
67
80
|
padding: $size-2 $size-3;
|
68
81
|
width: $w-full;
|
69
82
|
|
70
83
|
&--select {
|
71
|
-
background-image:
|
84
|
+
background-image:
|
85
|
+
linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
|
86
|
+
linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
|
72
87
|
background-position: calc(100% - 20px), calc(100% - 15px);
|
73
88
|
background-repeat: no-repeat;
|
74
89
|
background-size: 5px 5px, 5px 5px;
|
@@ -82,9 +97,10 @@ html {
|
|
82
97
|
|
83
98
|
input[type="checkbox"], input[type="radio"] {
|
84
99
|
transform: scale(1.2, 1.2);
|
100
|
+
margin: $size-1;
|
85
101
|
|
86
102
|
&:focus {
|
87
|
-
box-shadow: ring($width:
|
103
|
+
box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
|
88
104
|
@include outline-none;
|
89
105
|
}
|
90
106
|
}
|
@@ -94,12 +110,15 @@ blockquote {
|
|
94
110
|
padding: $size-3 $size-4;
|
95
111
|
}
|
96
112
|
|
113
|
+
cite {
|
114
|
+
font-size: $text-sm;
|
115
|
+
}
|
116
|
+
|
97
117
|
code {
|
98
118
|
background-color: var(--color-bg--surface);
|
99
119
|
border-radius: $rounded;
|
100
120
|
font-size: $text-sm;
|
101
|
-
|
102
|
-
padding: $size-1 $size-2;
|
121
|
+
padding: $size-1;
|
103
122
|
white-space: nowrap;
|
104
123
|
}
|
105
124
|
|
@@ -116,6 +135,21 @@ pre {
|
|
116
135
|
}
|
117
136
|
}
|
118
137
|
|
138
|
+
kbd {
|
139
|
+
background-color: var(--color-primary);
|
140
|
+
border-radius: $rounded;
|
141
|
+
font-size: $text-sm;
|
142
|
+
padding: $size-1;
|
143
|
+
color: var(--color-bg--main);
|
144
|
+
}
|
145
|
+
|
146
|
+
mark {
|
147
|
+
background-color: var(--color-bg--highlight);
|
148
|
+
border-radius: $rounded;
|
149
|
+
padding: $size-1;
|
150
|
+
color: inherit;
|
151
|
+
}
|
152
|
+
|
119
153
|
hr {
|
120
154
|
margin: $size-6 $size-0;
|
121
155
|
}
|
@@ -148,10 +182,20 @@ fieldset, .input {
|
|
148
182
|
margin-bottom: $size-6;
|
149
183
|
}
|
150
184
|
|
151
|
-
|
185
|
+
table, details, blockquote, p, pre, ul, ol, dl {
|
152
186
|
margin-bottom: $size-6;
|
153
187
|
}
|
154
188
|
|
189
|
+
details {
|
190
|
+
padding: $size-2 $size-3;
|
191
|
+
background-color: var(--color-bg--surface);
|
192
|
+
border-left-width: $border-4;
|
193
|
+
}
|
194
|
+
|
195
|
+
summary {
|
196
|
+
cursor: pointer;
|
197
|
+
}
|
198
|
+
|
155
199
|
table {
|
156
200
|
width: $w-full;
|
157
201
|
}
|
@@ -7,11 +7,11 @@
|
|
7
7
|
}
|
8
8
|
|
9
9
|
.animate-ping {
|
10
|
-
animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
|
10
|
+
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
11
11
|
}
|
12
12
|
|
13
13
|
.animate-pulse {
|
14
|
-
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
14
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
15
15
|
}
|
16
16
|
|
17
17
|
.animate-bounce {
|
@@ -43,7 +43,7 @@
|
|
43
43
|
opacity: 1;
|
44
44
|
}
|
45
45
|
50% {
|
46
|
-
opacity: .5;
|
46
|
+
opacity: 0.5;
|
47
47
|
}
|
48
48
|
}
|
49
49
|
|
@@ -2,7 +2,11 @@
|
|
2
2
|
|
3
3
|
// *******************************************************************
|
4
4
|
// Pull Utilities
|
5
|
-
//
|
5
|
+
// .pull-[xs|md|lg|xl|2xl|3xl]--top
|
6
|
+
// .pull-[xs|md|lg|xl|2xl|3xl]--right
|
7
|
+
// .pull-[xs|md|lg|xl|2xl|3xl]--bottom
|
8
|
+
// .pull-[xs|md|lg|xl|2xl|3xl]--left
|
9
|
+
// .pull-[xs|md|lg|xl|2xl|3xl]--sides
|
6
10
|
// *******************************************************************
|
7
11
|
@each $scale, $size in $size-map {
|
8
12
|
.pull-#{$scale}--top {
|
@@ -2,7 +2,13 @@
|
|
2
2
|
|
3
3
|
// *******************************************************************
|
4
4
|
// Push Utilities
|
5
|
-
//
|
5
|
+
// .push-[xs|md|lg|xl|2xl|3xl]
|
6
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--top
|
7
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--right
|
8
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--bottom
|
9
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--left
|
10
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--ends
|
11
|
+
// .push-[xs|md|lg|xl|2xl|3xl]--sides
|
6
12
|
// *******************************************************************
|
7
13
|
@each $scale, $size in $size-map {
|
8
14
|
.push-#{$scale} {
|
@@ -3,14 +3,14 @@
|
|
3
3
|
// Variables for controlling the box shadow of an element.
|
4
4
|
// box-shadow: $shadow;
|
5
5
|
// *******************************************************************
|
6
|
-
$shadow-sm:
|
7
|
-
$shadow:
|
8
|
-
$shadow-md:
|
9
|
-
$shadow-lg:
|
10
|
-
$shadow-xl:
|
11
|
-
$shadow-2xl:
|
12
|
-
$shadow-inner:
|
13
|
-
$shadow-none:
|
6
|
+
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
7
|
+
$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
8
|
+
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
9
|
+
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
10
|
+
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
11
|
+
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
12
|
+
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
13
|
+
$shadow-none: none;
|
14
14
|
|
15
15
|
// *******************************************************************
|
16
16
|
// Opacity
|
@@ -0,0 +1,103 @@
|
|
1
|
+
// *******************************************************************
|
2
|
+
// Blur
|
3
|
+
// Variables for applying blur filters to an element.
|
4
|
+
// filter: $blur; backdrop-filter: $blur;
|
5
|
+
// *******************************************************************
|
6
|
+
$blur-none: blur(0);
|
7
|
+
$blur-sm: blur(4px);
|
8
|
+
$blur: blur(8px);
|
9
|
+
$blur-md: blur(12px);
|
10
|
+
$blur-lg: blur(16px);
|
11
|
+
$blur-xl: blur(24px);
|
12
|
+
$blur-2xl: blur(40px);
|
13
|
+
$blur-3xl: blur(64px);
|
14
|
+
|
15
|
+
// *******************************************************************
|
16
|
+
// Brightness
|
17
|
+
// Variables for applying brightness filters to an element.
|
18
|
+
// filter: $brightness-50; backdrop-filter: $brightness-50;
|
19
|
+
// *******************************************************************
|
20
|
+
$brightness-0: brightness(0);
|
21
|
+
$brightness-50: brightness(0.5);
|
22
|
+
$brightness-75: brightness(0.75);
|
23
|
+
$brightness-90: brightness(0.9);
|
24
|
+
$brightness-95: brightness(0.95);
|
25
|
+
$brightness-100: brightness(1);
|
26
|
+
$brightness-105: brightness(1.05);
|
27
|
+
$brightness-110: brightness(1.1);
|
28
|
+
$brightness-125: brightness(1.25);
|
29
|
+
$brightness-150: brightness(1.5);
|
30
|
+
$brightness-200: brightness(2);
|
31
|
+
|
32
|
+
// *******************************************************************
|
33
|
+
// Contrast
|
34
|
+
// Variables for applying brightness filters to an element.
|
35
|
+
// filter: $contrast-50; backdrop-filter: $contrast-50;
|
36
|
+
// *******************************************************************
|
37
|
+
$contrast-0: contrast(0);
|
38
|
+
$contrast-50: contrast(0.5);
|
39
|
+
$contrast-75: contrast(0.75);
|
40
|
+
$contrast-100: contrast(1);
|
41
|
+
$contrast-125: contrast(1.25);
|
42
|
+
$contrast-150: contrast(1.5);
|
43
|
+
$contrast-200: contrast(2);
|
44
|
+
|
45
|
+
// *******************************************************************
|
46
|
+
// Drop Shadow
|
47
|
+
// Variables for applying drop-shadow filters to an element.
|
48
|
+
// filter: $drop-shadow; backdrop-filter: $drop-shadow;
|
49
|
+
// *******************************************************************
|
50
|
+
$drop-shadow-none: drop-shadow(0 0 #0000);
|
51
|
+
$drop-shadow-sm: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
|
52
|
+
$drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
|
53
|
+
$drop-shadow-md: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
54
|
+
$drop-shadow-lg: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
|
55
|
+
$drop-shadow-xl: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
|
56
|
+
$drop-shadow-2xl: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
|
57
|
+
|
58
|
+
// *******************************************************************
|
59
|
+
// Grayscale
|
60
|
+
// Variables for applying grayscale filters to an element.
|
61
|
+
// filter: $grayscale; backdrop-filter: $grayscale;
|
62
|
+
// *******************************************************************
|
63
|
+
$grayscale-0: grayscale(0);
|
64
|
+
$grayscale: grayscale(100%);
|
65
|
+
|
66
|
+
// *******************************************************************
|
67
|
+
// Hue Rotate
|
68
|
+
// Variables for applying hue-rotate filters to an element.
|
69
|
+
// filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
|
70
|
+
// *******************************************************************
|
71
|
+
$hue-rotate-0: hue-rotate(0deg);
|
72
|
+
$hue-rotate-15: hue-rotate(15deg);
|
73
|
+
$hue-rotate-30: hue-rotate(30deg);
|
74
|
+
$hue-rotate-60: hue-rotate(60deg);
|
75
|
+
$hue-rotate-90: hue-rotate(90deg);
|
76
|
+
$hue-rotate-180: hue-rotate(180deg);
|
77
|
+
|
78
|
+
// *******************************************************************
|
79
|
+
// Invert
|
80
|
+
// Variables for applying invert filters to an element.
|
81
|
+
// filter: $invert; backdrop-filter: $invert;
|
82
|
+
// *******************************************************************
|
83
|
+
$invert-0: invert(0);
|
84
|
+
$invert: invert(100%);
|
85
|
+
|
86
|
+
// *******************************************************************
|
87
|
+
// Saturate
|
88
|
+
// Variables for applying saturation filters to an element.
|
89
|
+
// filter: $saturate-50; backdrop-filter: $saturate-50;
|
90
|
+
// *******************************************************************
|
91
|
+
$saturate-0: saturate(0);
|
92
|
+
$saturate-50: saturate(0.5);
|
93
|
+
$saturate-100: saturate(1);
|
94
|
+
$saturate-150: saturate(1.5);
|
95
|
+
$saturate-200: saturate(2);
|
96
|
+
|
97
|
+
// *******************************************************************
|
98
|
+
// Sepia
|
99
|
+
// Variables for applying sepia filters to an element.
|
100
|
+
// filter: $sepia; backdrop-filter: $sepia;
|
101
|
+
// *******************************************************************
|
102
|
+
$sepia-0: sepia(0);
|
103
|
+
$sepia: sepia(100%);
|
@@ -35,4 +35,12 @@ $size-72: 18rem;
|
|
35
35
|
$size-80: 20rem;
|
36
36
|
$size-96: 24rem;
|
37
37
|
|
38
|
-
$size-map: (
|
38
|
+
$size-map: (
|
39
|
+
"xs": $size-2,
|
40
|
+
"sm": $size-4,
|
41
|
+
"md": $size-6,
|
42
|
+
"lg": $size-12,
|
43
|
+
"xl": $size-20,
|
44
|
+
"2xl": $size-24,
|
45
|
+
"3xl": $size-32
|
46
|
+
);
|
data/lib/sass/zero/version.rb
CHANGED
data/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "sass-zero",
|
3
|
-
"version": "
|
3
|
+
"version": "1.0.1",
|
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:
|
4
|
+
version: 1.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lazaronixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-01-
|
11
|
+
date: 2022-01-31 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|
@@ -45,6 +45,7 @@ files:
|
|
45
45
|
- app/assets/stylesheets/sass-zero/variables/breakpoints.scss
|
46
46
|
- app/assets/stylesheets/sass-zero/variables/colors.scss
|
47
47
|
- app/assets/stylesheets/sass-zero/variables/effects.scss
|
48
|
+
- app/assets/stylesheets/sass-zero/variables/filters.scss
|
48
49
|
- app/assets/stylesheets/sass-zero/variables/flex.scss
|
49
50
|
- app/assets/stylesheets/sass-zero/variables/grid.scss
|
50
51
|
- app/assets/stylesheets/sass-zero/variables/height.scss
|