sass-zero 0.0.56 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
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