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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 681331b510c60fd1ab5c3b9b308a7818164ce3eef6ed19851c436e5a533b694f
4
- data.tar.gz: 1122523fea09214ded53cd922fe7fd0bf3ed0ed24cfa9d27538631ce98040a27
3
+ metadata.gz: c854b53b284807e980381e23c97a299e4a3418d9fc6ed2ea159c72b22f2ff675
4
+ data.tar.gz: 5b677eefbd12f5ef3ecb04c799b68bc58173a9448f574e847804f0393efb8375
5
5
  SHA512:
6
- metadata.gz: 04da4bfeea03866a3c10fb8ffd1bb0f691d0d192faf483e433f9c5f0a867b50b42c0595076b34c83fae46748b26b926bac8b2cd4899e59e6670a560480b16622
7
- data.tar.gz: 93ec7018d346d113aaafdfa32645e6d9f9539a5bf1046dbe644e1a80a0022e3042a281f766c6d3f5e449876295f310a1dc91e67403a6d623fe3c772352de0a42
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"><em>Yeah!! Milligram is amazing.</em></p>
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
- <code>
109
- .milligram {
110
- color: #9b4dca;
111
- }
112
- </code>
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 'sass-zero'
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: #{$white};
11
- --color-bg--surface: #{$gray-100};
12
- --color-primary: #{$gray-900};
13
- --color-text: #{$gray-900};
14
- --color-focus-ring: #{rgba($gray-900, $opacity-50)};
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: $transparent;
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: linear-gradient(45deg, transparent 49%, var(--color-primary) 51%), linear-gradient(135deg, var(--color-primary) 51%, transparent 49%);
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: 1.5px, $color: var(--color-focus-ring));
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
- margin: $size-0 $size-1;
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
- blockquote, figure, p, pre, table, ul, ol, dl {
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
- // $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
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
- // $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
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: 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;
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: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
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
+ );
@@ -2,6 +2,7 @@
2
2
  @import "variables/breakpoints";
3
3
  @import "variables/colors";
4
4
  @import "variables/effects";
5
+ @import "variables/filters";
5
6
  @import "variables/flex";
6
7
  @import "variables/grid";
7
8
  @import "variables/spacing";
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.56"
3
+ VERSION = "1.0.1"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.56",
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: 0.0.56
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 00:00:00.000000000 Z
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