sass-zero 1.1.4 → 1.1.6

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: 0ad4305b5b3ca3d7faf90c57c9a04e49bcb8e41d30462cd2462e74344595a826
4
- data.tar.gz: 0da9bcc60be60b23b01626e6b0cd3eb9f2461a7a1e6191528d22429c6cc8fdd2
3
+ metadata.gz: 4fe9da1ccaf5fbc04d1681efbe93e41526f727adc32be83ebb1682f8fd4df961
4
+ data.tar.gz: d7aded8f5516caa5ae57c307f755630d591d4c5f33a85308710d382a9848e376
5
5
  SHA512:
6
- metadata.gz: f7171112ea81f1b4f2c84a5138a86cd599c73d4204b2df79402cc4efe727ddb6935f03bb0b25a864745d758326e49b6f440fc12088a8f9fd4695b31aa950ecb9
7
- data.tar.gz: 64f542e05eaa2c1291d7ab1e859da3312eb767295911312b5a78b0d7c67777e8d7f4f0e2f5ddc24f284609fc21b69ea4abc4a51571be94faa7206602e76213e8
6
+ metadata.gz: a6ecefd8d3c7ac214b0afe5ef25171a703e704fe8480c3be010ec681cde5003d43c7fe4e7e849ee5650b389307dbb381e7d8e2225f2cbf89f4865aa8c66063a6
7
+ data.tar.gz: a79e1322722d6bfe2fe3b91b16e24c500f4a00297e42607011f2257250b0e07c55b04abc2851ce443d2b2a6f95862e48300e180ae386553ed222ba6f26ad0b6a
@@ -309,8 +309,6 @@ $opacity-90: 0.9;
309
309
  $opacity-95: 0.95;
310
310
  $opacity-100: 1;
311
311
 
312
- @function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {}
313
-
314
312
  // *******************************************************************
315
313
  // filters.scss
316
314
  // *******************************************************************
@@ -378,10 +376,10 @@ $sepia: sepia(100%);
378
376
  // flex.scss
379
377
  // *******************************************************************
380
378
 
381
- $flex-1: 1 1 0%;
382
- $flex-auto: 1 1 auto;
383
- $flex-initial: 0 1 auto;
384
- $flex-none: none;
379
+ $flex-1: 1 1 0%; // Allow grow and shrink, ignoring its initial size.
380
+ $flex-auto: 1 1 auto; // Allow grow and shrink, considering its initial size.
381
+ $flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size.
382
+ $flex-none: none; // Prevent grow or shrink.
385
383
 
386
384
  $flex-grow-0: 0;
387
385
  $flex-grow: 1;
@@ -736,3 +734,4 @@ $z-50: 50;
736
734
  @mixin outline-none {}
737
735
  @mixin progress-bar {}
738
736
  @mixin make-container($padding-x: $size-4) {}
737
+ @mixin gradient($direction, $from, $to: transparent, $via: null) {}
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- sass-zero (1.1.4)
4
+ sass-zero (1.1.6)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # SASS-ZERO
2
2
 
3
- SASS-ZERO is a css framework that mixes concepts from [Tailwindcss](https://tailwindcss.com), [Milligram](https://milligram.io), [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
3
+ SASS-ZERO is a css framework that mixes concepts from [Tailwind CSS](https://tailwindcss.com), [Milligram](https://milligram.io), [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book), and [Shape UP](https://basecamp.com/shapeup).
4
4
 
5
5
  ## Installation
6
6
 
@@ -21,21 +21,25 @@ Add these lines to your application.css:
21
21
 
22
22
  ### Variables
23
23
 
24
+ #### Essential
25
+
24
26
  - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.scss)
25
- - [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
26
27
  - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
27
28
  - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
28
- - [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
29
29
  - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
30
30
  - [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
31
+ - [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
31
32
  - [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/sizing.scss)
32
- - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
33
- - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
34
33
  - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/typography.scss)
35
34
  - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
36
- - [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
37
- - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
38
35
 
36
+ #### Others
37
+
38
+ - [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
39
+ - [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
40
+ - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
41
+ - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
42
+ - [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
39
43
 
40
44
  ### Utility classes
41
45
 
@@ -43,16 +47,16 @@ Add these lines to your application.css:
43
47
  - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
44
48
  - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/border.scss)
45
49
  - [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.scss)
46
- - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
50
+ - [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
51
+ - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
52
+ - [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
47
53
  - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
54
+ - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
48
55
  - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
49
56
  - [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pad.scss)
50
57
  - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
51
- - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
52
- - [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
53
- - [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
54
58
  - [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
55
- - [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
59
+ - [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
56
60
 
57
61
  ### Breadboard
58
62
 
@@ -95,12 +99,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
95
99
 
96
100
  ### Visual Studio Code
97
101
 
98
- 1. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
99
- 2. Just copy `.sass-zero-references.scss` to the root of your application.
102
+ 1. Copy `.sass-zero-references.scss` to the root of your application.
103
+ 2. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
100
104
 
101
105
  ### Atom/TextMate
102
106
 
103
- 1. Just copy `.sass-zero-references.scss` to the root of your application.
107
+ 1. Copy `.sass-zero-references.scss` to the root of your application.
104
108
 
105
109
  ## Development
106
110
 
@@ -41,3 +41,11 @@
41
41
  margin-right: auto;
42
42
  margin-left: auto;
43
43
  }
44
+
45
+ @mixin gradient($direction, $from, $to: transparent, $via: null) {
46
+ @if $via {
47
+ background-image: linear-gradient($direction, $from, $via, $to);
48
+ } @else {
49
+ background-image: linear-gradient($direction, $from, $to);
50
+ }
51
+ }
@@ -1,21 +1,19 @@
1
- @import "../variables/border";
2
-
3
1
  .border--top {
4
- border-top-width: $border;
2
+ border-top-width: 1px;
5
3
  }
6
4
 
7
5
  .border--bottom {
8
- border-bottom-width: $border;
6
+ border-bottom-width: 1px;
9
7
  }
10
8
 
11
9
  .border--left {
12
- border-left-width: $border !important;
10
+ border-left-width: 1px !important;
13
11
  }
14
12
 
15
13
  .border--all {
16
- border-width: $border !important;
14
+ border-width: 1px !important;
17
15
  }
18
16
 
19
17
  .border--round {
20
- border-radius: $rounded-full !important;
18
+ border-radius: 9999px !important;
21
19
  }
@@ -1,5 +1,4 @@
1
1
  @import "../variables/breakpoints";
2
- @import "../variables/effects";
3
2
 
4
3
  .debug * {
5
4
  outline: 1px #f00 solid !important;
@@ -63,7 +62,7 @@
63
62
 
64
63
  .u-disabled {
65
64
  pointer-events: none;
66
- opacity: $opacity-50;
65
+ opacity: 0.5;
67
66
  }
68
67
 
69
68
  .u-off-screen {
@@ -1,16 +1,13 @@
1
- @import "../variables/sizing";
2
- @import "../variables/border";
3
-
4
1
  .list--unindented {
5
2
  padding-left: 1.2em;
6
3
  }
7
4
 
8
5
  .list--flush {
9
- padding-left: $size-0;
6
+ padding-left: 0;
10
7
  }
11
8
 
12
9
  .list--unbulleted {
13
- padding-left: $size-0;
10
+ padding-left: 0;
14
11
  list-style: none;
15
12
  }
16
13
 
@@ -20,5 +17,5 @@
20
17
  }
21
18
 
22
19
  .list--dividers li:not(:last-child) {
23
- border-bottom-width: $border;
20
+ border-bottom-width: 1px;
24
21
  }
@@ -1,5 +1,3 @@
1
- @import "../variables/sizing";
2
-
3
1
  // *******************************************************************
4
2
  // Pad Utilities
5
3
  // .pad-[xs|sm|md|lg|xl]--top
@@ -7,6 +5,9 @@
7
5
  // .pad-[xs|sm|md|lg|xl]--bottom
8
6
  // .pad-[xs|sm|md|lg|xl]--left
9
7
  // *******************************************************************
8
+
9
+ @import "../variables/sizing";
10
+
10
11
  @each $scale, $size in $size-map {
11
12
  .pad-#{$scale}--top {
12
13
  padding-top: $size !important;
@@ -1,5 +1,3 @@
1
- @import "../variables/sizing";
2
-
3
1
  // *******************************************************************
4
2
  // Pull Utilities
5
3
  // .pull-[xs|sm|md|lg|xl]--top
@@ -7,6 +5,9 @@
7
5
  // .pull-[xs|sm|md|lg|xl]--bottom
8
6
  // .pull-[xs|sm|md|lg|xl]--left
9
7
  // *******************************************************************
8
+
9
+ @import "../variables/sizing";
10
+
10
11
  @each $scale, $size in $size-map {
11
12
  .pull-#{$scale}--top {
12
13
  margin-top: $size * -1 !important;
@@ -1,5 +1,3 @@
1
- @import "../variables/sizing";
2
-
3
1
  // *******************************************************************
4
2
  // Push Utilities
5
3
  // .push-[xs|sm|md|lg|xl]
@@ -10,6 +8,9 @@
10
8
  // .push-[xs|sm|md|lg|xl]--ends
11
9
  // .push-[xs|sm|md|lg|xl]--sides
12
10
  // *******************************************************************
11
+
12
+ @import "../variables/sizing";
13
+
13
14
  @each $scale, $size in $size-map {
14
15
  .push-#{$scale} {
15
16
  margin: $size !important;
@@ -1,5 +1,4 @@
1
1
  @import "../variables/typography";
2
- @import "../variables/sizing";
3
2
  @import "../mixins";
4
3
 
5
4
  .txt--normal {
@@ -48,11 +47,11 @@
48
47
  }
49
48
 
50
49
  .txt--dimmed {
51
- opacity: $opacity-75;
50
+ opacity: 0.75;
52
51
  }
53
52
 
54
53
  .txt--very-dimmed {
55
- opacity: $opacity-50;
54
+ opacity: 0.5;
56
55
  }
57
56
 
58
57
  .txt--tight-lines {
@@ -1,6 +1,6 @@
1
1
  // *******************************************************************
2
2
  // Border Style
3
- // Variables for controlling the style of an element's borders.
3
+ // Variables for controlling the border radius of an element.
4
4
  // border-radius: $rounded-none;
5
5
  // *******************************************************************
6
6
  $rounded-none: 0;
@@ -1,6 +1,6 @@
1
1
  // *******************************************************************
2
2
  // Breakpoints
3
- // Customizing the default breakpoints for your project.
3
+ // Five breakpoints inspired by common device resolutions.
4
4
  // @media (min-width: $breakpoint-md) { }
5
5
  // *******************************************************************
6
6
  $breakpoint-sm: 640px;
@@ -1,6 +1,8 @@
1
1
  // *******************************************************************
2
2
  // Default color palette
3
- // sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
3
+ // Sass-zero includes an expertly-crafted default color palette
4
+ // out-of-the-box that is a great starting point if you don’t
5
+ // have your own specific branding in mind.
4
6
  // *******************************************************************
5
7
  $transparent: transparent;
6
8
  $current: currentColor;
@@ -1,6 +1,6 @@
1
1
  // *******************************************************************
2
2
  // Box Shadow
3
- // Variables for controlling the box shadow of an element.
3
+ // Variables for controlling the color of a box shadow.
4
4
  // box-shadow: $shadow;
5
5
  // *******************************************************************
6
6
  $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -32,20 +32,3 @@ $opacity-80: 0.8;
32
32
  $opacity-90: 0.9;
33
33
  $opacity-95: 0.95;
34
34
  $opacity-100: 1;
35
-
36
- // *******************************************************************
37
- // Ring
38
- // Function for creating outline rings with box-shadows.
39
- // box-shadow: ring($width: 4px);
40
- // *******************************************************************
41
- @function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
42
- @if $inset {
43
- $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
44
- $ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
45
- @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
46
- } @else {
47
- $ring-offset-shadow: 0 0 0 $offset-width $offset-color;
48
- $ring-shadow: 0 0 0 ($width + $offset-width) $color;
49
- @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
50
- }
51
- }
@@ -1,7 +1,7 @@
1
1
  // *******************************************************************
2
2
  // Blur
3
3
  // Variables for applying blur filters to an element.
4
- // filter: $blur; backdrop-filter: $blur;
4
+ // filter|backdrop-filter: $blur;
5
5
  // *******************************************************************
6
6
  $blur-none: blur(0);
7
7
  $blur-sm: blur(4px);
@@ -15,7 +15,7 @@ $blur-3xl: blur(64px);
15
15
  // *******************************************************************
16
16
  // Brightness
17
17
  // Variables for applying brightness filters to an element.
18
- // filter: $brightness-50; backdrop-filter: $brightness-50;
18
+ // filter|backdrop-filter: $brightness-50;
19
19
  // *******************************************************************
20
20
  $brightness-0: brightness(0);
21
21
  $brightness-50: brightness(0.5);
@@ -32,7 +32,7 @@ $brightness-200: brightness(2);
32
32
  // *******************************************************************
33
33
  // Contrast
34
34
  // Variables for applying brightness filters to an element.
35
- // filter: $contrast-50; backdrop-filter: $contrast-50;
35
+ // filter|backdrop-filter: $contrast-50;
36
36
  // *******************************************************************
37
37
  $contrast-0: contrast(0);
38
38
  $contrast-50: contrast(0.5);
@@ -45,7 +45,7 @@ $contrast-200: contrast(2);
45
45
  // *******************************************************************
46
46
  // Drop Shadow
47
47
  // Variables for applying drop-shadow filters to an element.
48
- // filter: $drop-shadow; backdrop-filter: $drop-shadow;
48
+ // filter|backdrop-filter: $drop-shadow;
49
49
  // *******************************************************************
50
50
  $drop-shadow-none: drop-shadow(0 0 #0000);
51
51
  $drop-shadow-sm: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
@@ -58,7 +58,7 @@ $drop-shadow-2xl: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
58
58
  // *******************************************************************
59
59
  // Grayscale
60
60
  // Variables for applying grayscale filters to an element.
61
- // filter: $grayscale; backdrop-filter: $grayscale;
61
+ // filter|backdrop-filter: $grayscale;
62
62
  // *******************************************************************
63
63
  $grayscale-0: grayscale(0);
64
64
  $grayscale: grayscale(100%);
@@ -66,7 +66,7 @@ $grayscale: grayscale(100%);
66
66
  // *******************************************************************
67
67
  // Hue Rotate
68
68
  // Variables for applying hue-rotate filters to an element.
69
- // filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
69
+ // filter|backdrop-filter: $hue-rotate-30;
70
70
  // *******************************************************************
71
71
  $hue-rotate-0: hue-rotate(0deg);
72
72
  $hue-rotate-15: hue-rotate(15deg);
@@ -78,7 +78,7 @@ $hue-rotate-180: hue-rotate(180deg);
78
78
  // *******************************************************************
79
79
  // Invert
80
80
  // Variables for applying invert filters to an element.
81
- // filter: $invert; backdrop-filter: $invert;
81
+ // filter|backdrop-filter: $invert;
82
82
  // *******************************************************************
83
83
  $invert-0: invert(0);
84
84
  $invert: invert(100%);
@@ -86,7 +86,7 @@ $invert: invert(100%);
86
86
  // *******************************************************************
87
87
  // Saturate
88
88
  // Variables for applying saturation filters to an element.
89
- // filter: $saturate-50; backdrop-filter: $saturate-50;
89
+ // filter|backdrop-filter: $saturate-50;
90
90
  // *******************************************************************
91
91
  $saturate-0: saturate(0);
92
92
  $saturate-50: saturate(0.5);
@@ -97,7 +97,7 @@ $saturate-200: saturate(2);
97
97
  // *******************************************************************
98
98
  // Sepia
99
99
  // Variables for applying sepia filters to an element.
100
- // filter: $sepia; backdrop-filter: $sepia;
100
+ // filter|backdrop-filter: $sepia;
101
101
  // *******************************************************************
102
102
  $sepia-0: sepia(0);
103
103
  $sepia: sepia(100%);
@@ -3,10 +3,10 @@
3
3
  // Variables for controlling how flex items both grow and shrink.
4
4
  // flex: $flex-1;
5
5
  // *******************************************************************
6
- $flex-1: 1 1 0%;
7
- $flex-auto: 1 1 auto;
8
- $flex-initial: 0 1 auto;
9
- $flex-none: none;
6
+ $flex-1: 1 1 0%; // Allow grow and shrink, ignoring its initial size.
7
+ $flex-auto: 1 1 auto; // Allow grow and shrink, considering its initial size.
8
+ $flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size.
9
+ $flex-none: none; // Prevent grow or shrink.
10
10
 
11
11
  // *******************************************************************
12
12
  // Flex Grow
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "1.1.4"
3
+ VERSION = "1.1.6"
4
4
  end
5
5
  end
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: 1.1.4
4
+ version: 1.1.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-06-30 00:00:00.000000000 Z
11
+ date: 2023-07-04 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: