sass-zero 0.0.57 → 1.0.2
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 +1 -1
- data/app/assets/stylesheets/sass-zero/breadboard.scss +22 -6
- 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: 1a233cf6a266b03c3639d31c8055d766cbe473e66ad48eff4d3df9599763b538
|
|
4
|
+
data.tar.gz: f2c7067732a97a31b7c48eb276dcd5c8e600d84ed648e199d93c7ce40406d8f7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 78bcb353879ee97d6490927bf5922a7ea8ce0e296fee8d478f943bb3c6629e3710a48db167dec9f8945e04ef78709d4413014b90cc4ef35e9462179d88f013d6
|
|
7
|
+
data.tar.gz: 2fa2121cff849f96a68fd49c45775d75b31b3858fc0833fa3a7db75f50832701da917fa7362b3c7003c34283ff00e33ed81bfc20065e119181a8b3fd71a7b3e2
|
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)
|
|
@@ -71,7 +72,6 @@ Add this to your application's Gemfile:
|
|
|
71
72
|
|
|
72
73
|
```ruby
|
|
73
74
|
gem "sass-zero"
|
|
74
|
-
gem "autoprefixer-rails"
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
## Usage
|
|
@@ -12,7 +12,18 @@ $radius-button: $rounded;
|
|
|
12
12
|
--color-bg--highlight: #{$gray-200};
|
|
13
13
|
--color-primary: #{$gray-900};
|
|
14
14
|
--color-text: #{$gray-900};
|
|
15
|
-
--color-focus-ring: #{rgba($
|
|
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
|
+
}
|
|
16
27
|
}
|
|
17
28
|
|
|
18
29
|
html {
|
|
@@ -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;
|
|
@@ -103,7 +118,7 @@ code {
|
|
|
103
118
|
background-color: var(--color-bg--surface);
|
|
104
119
|
border-radius: $rounded;
|
|
105
120
|
font-size: $text-sm;
|
|
106
|
-
padding: $size-1
|
|
121
|
+
padding: $size-1;
|
|
107
122
|
white-space: nowrap;
|
|
108
123
|
}
|
|
109
124
|
|
|
@@ -124,14 +139,15 @@ kbd {
|
|
|
124
139
|
background-color: var(--color-primary);
|
|
125
140
|
border-radius: $rounded;
|
|
126
141
|
font-size: $text-sm;
|
|
127
|
-
padding: $size-1
|
|
142
|
+
padding: $size-1;
|
|
128
143
|
color: var(--color-bg--main);
|
|
129
144
|
}
|
|
130
145
|
|
|
131
146
|
mark {
|
|
132
147
|
background-color: var(--color-bg--highlight);
|
|
133
148
|
border-radius: $rounded;
|
|
134
|
-
padding: $size-1
|
|
149
|
+
padding: $size-1;
|
|
150
|
+
color: inherit;
|
|
135
151
|
}
|
|
136
152
|
|
|
137
153
|
hr {
|
|
@@ -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-16,
|
|
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.2",
|
|
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.2
|
|
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
|