sass-zero 0.0.58 → 1.0.3

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: '0495f5c1711cbe1d7fa9fc1ef264522dc5684f9229eddd808b70a191910a8070'
4
- data.tar.gz: e92f3f0ab36b10b0747bfec381fc170669b0ca3f18e888c61f1980aff29b19a9
3
+ metadata.gz: 58c3fb4cc95db1127d5646180ee3ea766882a1326a0cc5a11142c5918822293d
4
+ data.tar.gz: 1698339f84559f3692e37f8bb6b125d5634950878776d91d7551feaa8d89e984
5
5
  SHA512:
6
- metadata.gz: ff787f9232779444363027e93241bc246ae19bef623502f58eed52a06322cf50bc50018d636e5d4348fd7fc4e893f6b05a3e88b95a15c77bf55c9b6a5f68486d
7
- data.tar.gz: 1e404d206ac5cce0c669190cac0618f6315f7de0093900abde3a77d0b222fc617486223b28831bffc429fcbde1f9f1ac22ab1160f6ebc9a93ec12ca0fae43381
6
+ metadata.gz: a4dcf12faca09349e37f55d0e6b170c806db0bbbfaa3ce62a89965306e4b48237dd5fb691ed3b4eee43b800358e4fe746fcd59781a4320b1351ebec9537faf76
7
+ data.tar.gz: 1c2bef8ccfc4e157ba3b2ab77682f0b7bb8242268dbbd04d5132da594821b9f648b764640b7b10ae346eeacf956994ca28587e23e04a74cc04058be249d532b0
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
@@ -102,6 +102,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
102
102
  }
103
103
  ```
104
104
 
105
+ ```html
106
+ <div class="block block--modifier">
107
+ <div class="block__element" />
108
+ </div>
109
+ ```
110
+
105
111
  ## References
106
112
 
107
113
  - [SASS](https://sass-lang.com)
@@ -260,3 +260,12 @@ video {
260
260
  [hidden] {
261
261
  display: none;
262
262
  }
263
+
264
+ /**
265
+ * Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
266
+ * This sucks because users can't change line-height with a utility on date inputs now.
267
+ * Reference: https://github.com/twbs/bootstrap/pull/31993
268
+ */
269
+ ::-webkit-date-and-time-value {
270
+ min-height: 1.5em;
271
+ }
@@ -38,7 +38,7 @@ html {
38
38
  border-width: $border;
39
39
  display: inline-block;
40
40
  font-weight: $font-bold;
41
- padding: $size-2 $size-4;
41
+ padding: $size-2 $size-3;
42
42
  cursor: pointer;
43
43
 
44
44
  &--primary {
@@ -70,6 +70,8 @@ html {
70
70
  }
71
71
 
72
72
  .input {
73
+ -webkit-appearance: none;
74
+
73
75
  resize: none;
74
76
  appearance: none;
75
77
  background-color: var(--color-bg--main);
@@ -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-16,
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.58"
3
+ VERSION = "1.0.3"
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.58",
3
+ "version": "1.0.3",
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.58
4
+ version: 1.0.3
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-13 00:00:00.000000000 Z
11
+ date: 2022-02-02 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