sass-zero 0.0.45 → 0.0.49

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.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/Example.html +2 -2
  3. data/README.md +1 -0
  4. data/app/assets/stylesheets/sass-zero/base/normalize.css +159 -223
  5. data/app/assets/stylesheets/sass-zero/base/preflight.scss +37 -17
  6. data/app/assets/stylesheets/sass-zero/breadboard.scss +61 -64
  7. data/app/assets/stylesheets/sass-zero/mixins.scss +0 -36
  8. data/app/assets/stylesheets/sass-zero/utilities/flex.scss +3 -3
  9. data/app/assets/stylesheets/sass-zero/utilities/list.scss +6 -6
  10. data/app/assets/stylesheets/sass-zero/utilities/position.scss +12 -4
  11. data/app/assets/stylesheets/sass-zero/utilities/text.scss +0 -33
  12. data/app/assets/stylesheets/sass-zero/utilities.scss +0 -7
  13. data/app/assets/stylesheets/sass-zero/variables/border.scss +1 -1
  14. data/app/assets/stylesheets/sass-zero/variables/colors.scss +11 -10
  15. data/app/assets/stylesheets/sass-zero/variables/height.scss +48 -0
  16. data/app/assets/stylesheets/sass-zero/variables/spacing.scss +37 -37
  17. data/app/assets/stylesheets/sass-zero/variables/transform.scss +13 -0
  18. data/app/assets/stylesheets/sass-zero/variables/width.scss +33 -43
  19. data/app/assets/stylesheets/sass-zero/variables.scss +1 -0
  20. data/lib/sass/zero/version.rb +1 -1
  21. data/package.json +1 -1
  22. data/sass-zero.gemspec +1 -1
  23. metadata +7 -6
data/app/assets/stylesheets/sass-zero/breadboard.scss CHANGED
@@ -6,29 +6,25 @@ $font-family: $font-sans;
6
6
  $radius-input: $rounded;
7
7
  $radius-button: $rounded;
8
8
 
9
- $color-bg--main: $white;
10
- $color-bg--surface: $gray-100;
11
- $color-primary: $gray-900;
12
- $color-txt: $gray-900;
13
- $color-focus-ring: rgba($gray-900, $opacity-50);
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)};
14
15
 
15
- $image-bg-select-black: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
16
- $image-checked-checkbox-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
17
- $image-checked-radio-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
16
+ --image-bg-select: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
17
+ --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
18
+ --image-checked-radio: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
19
+ }
18
20
 
19
21
  html {
20
- background: $color-bg--main;
21
- color: $color-txt;
22
+ background: var(--color-bg--main);
23
+ color: var(--color-text);
22
24
  font-family: $font-family;
23
25
  font-size: 16px;
24
26
  }
25
27
 
26
- blockquote {
27
- border-color: $color-primary;
28
- border-left-width: $border-4;
29
- padding: $size-3 $size-4;
30
- }
31
-
32
28
  .btn {
33
29
  border-radius: $radius-button;
34
30
  border-width: $border;
@@ -37,25 +33,21 @@ blockquote {
37
33
  padding: $size-2 $size-4;
38
34
  cursor: pointer;
39
35
 
40
- &:focus {
41
- outline: 2px dotted $color-primary;
42
- outline-offset: 2px;
43
- }
44
-
45
36
  &:disabled {
46
37
  pointer-events: none;
47
38
  opacity: $opacity-50;
48
39
  }
49
40
 
50
41
  &--primary {
51
- background-color: $color-primary;
52
- border-color: $color-primary;
53
- color: $color-bg--main;
42
+ background-color: var(--color-primary);
43
+ border-color: var(--color-primary);
44
+ color: var(--color-bg--main);
54
45
  }
55
46
 
56
47
  &--secondary {
57
- background-color: $color-bg--main;
58
- border-color: $color-primary;
48
+ background-color: var(--color-bg--main);
49
+ border-color: var(--color-primary);
50
+ color: var(--color-primary);
59
51
  }
60
52
 
61
53
  &--tertiary {
@@ -64,43 +56,17 @@ blockquote {
64
56
  }
65
57
  }
66
58
 
67
- code {
68
- background-color: $color-bg--surface;
69
- border-radius: $rounded-xl;
70
- font-size: $text-sm;
71
- margin: $size-0 $size-1;
72
- padding: $size-1 $size-2;
73
- white-space: nowrap;
74
- }
75
-
76
- pre {
77
- background-color: $color-bg--surface;
78
- border-color: $color-primary;
79
- border-left-width: $border-4;
80
- overflow-y: hidden;
81
-
82
- & > code {
83
- border-radius: $rounded-none;
84
- display: block;
85
- padding: $size-2 $size-3;
86
- white-space: pre;
87
- }
88
- }
89
-
90
- hr {
91
- margin: $size-6 $size-0;
92
- }
93
-
94
59
  .input {
60
+ resize: none;
95
61
  appearance: none;
96
62
  background-color: $transparent;
97
63
  border-radius: $radius-input;
98
64
  border-width: $border;
99
65
  padding: $size-2 $size-3;
100
- width: $size-full;
66
+ width: $w-full;
101
67
 
102
68
  &--select {
103
- background-image: $image-bg-select-black;
69
+ background-image: var(--image-bg-select);
104
70
  background-position: right $size-2 center;
105
71
  background-repeat: no-repeat;
106
72
  background-size: auto $size-5;
@@ -108,41 +74,72 @@ hr {
108
74
  }
109
75
 
110
76
  &:focus {
111
- box-shadow: ring($color: $color-focus-ring);
77
+ box-shadow: ring($color: var(--color-focus-ring));
112
78
  @include outline-none;
113
79
  }
114
80
  }
115
81
 
116
82
  .checkbox {
117
83
  border-radius: $rounded;
118
- @include input-selection($color-primary);
84
+ @include input-selection(var(--color-primary));
119
85
 
120
86
  &:checked {
121
- background-image: $image-checked-checkbox-white;
87
+ background-image: var(--image-checked-checkbox);
122
88
  @include checked;
123
89
  }
124
90
 
125
91
  &:focus {
126
- box-shadow: ring($color: $color-focus-ring);
92
+ box-shadow: ring($color: var(--color-focus-ring));
127
93
  @include outline-none;
128
94
  }
129
95
  }
130
96
 
131
97
  .radio {
132
98
  border-radius: $rounded-full;
133
- @include input-selection($color-primary);
99
+ @include input-selection(var(--color-primary));
134
100
 
135
101
  &:checked {
136
- background-image: $image-checked-radio-white;
102
+ background-image: var(--image-checked-radio);
137
103
  @include checked;
138
104
  }
139
105
 
140
106
  &:focus {
141
- box-shadow: ring($color: $color-focus-ring);
107
+ box-shadow: ring($color: var(--color-focus-ring));
142
108
  @include outline-none;
143
109
  }
144
110
  }
145
111
 
112
+ blockquote {
113
+ border-left-width: $border-4;
114
+ padding: $size-3 $size-4;
115
+ }
116
+
117
+ code {
118
+ background-color: var(--color-bg--surface);
119
+ border-radius: $rounded;
120
+ font-size: $text-sm;
121
+ margin: $size-0 $size-1;
122
+ padding: $size-1 $size-2;
123
+ white-space: nowrap;
124
+ }
125
+
126
+ pre {
127
+ background-color: var(--color-bg--surface);
128
+ border-left-width: $border-4;
129
+ overflow-y: hidden;
130
+
131
+ & > code {
132
+ border-radius: $rounded-none;
133
+ display: block;
134
+ padding: $size-2 $size-3;
135
+ white-space: pre;
136
+ }
137
+ }
138
+
139
+ hr {
140
+ margin: $size-6 $size-0;
141
+ }
142
+
146
143
  a {
147
144
  font-weight: $font-bold;
148
145
  }
@@ -176,13 +173,13 @@ blockquote, figure, p, pre, table, ul, ol, dl {
176
173
  }
177
174
 
178
175
  table {
179
- width: $size-full;
176
+ width: $w-full;
180
177
  }
181
178
 
182
179
  td, th {
183
180
  border-bottom-width: $border;
184
181
  padding: $size-3 $size-4;
185
- text-align: left;
182
+ text-align: inherit;
186
183
  }
187
184
 
188
185
  h1, h2, h3, h4, h5, h6, .hdg {
data/app/assets/stylesheets/sass-zero/mixins.scss CHANGED
@@ -58,42 +58,6 @@
58
58
  outline-offset: 2px;
59
59
  }
60
60
 
61
- @mixin divider($color) {
62
- position: relative;
63
- z-index: $z-10;
64
-
65
- ::before {
66
- content: '';
67
- position: absolute;
68
- top: 50%;
69
- left: $size-0;
70
- right: $size-0;
71
- height: $size-px;
72
- background-color: $color;
73
- z-index: -1;
74
- }
75
- }
76
-
77
- @mixin space-x($space, $reverse: false) {
78
- & > :not([hidden]) ~ :not([hidden]) {
79
- @if $reverse {
80
- margin-right: $space;
81
- } @else {
82
- margin-left: $space;
83
- }
84
- }
85
- }
86
-
87
- @mixin space-y($space, $reverse: false) {
88
- & > :not([hidden]) ~ :not([hidden]) {
89
- @if $reverse {
90
- margin-bottom: $space;
91
- } @else {
92
- margin-top: $space;
93
- }
94
- }
95
- }
96
-
97
61
  @mixin make-container($padding-x: $size-4) {
98
62
  width: 100%;
99
63
  padding-right: $padding-x;
data/app/assets/stylesheets/sass-zero/utilities/flex.scss CHANGED
@@ -10,15 +10,15 @@
10
10
  flex-direction: column;
11
11
  }
12
12
 
13
- .flex--justify-center {
13
+ .flex--centered {
14
14
  justify-content: center;
15
15
  }
16
16
 
17
- .flex--justify-between {
17
+ .flex--space-items {
18
18
  justify-content: space-between;
19
19
  }
20
20
 
21
- .flex--items-center {
21
+ .flex--align-center {
22
22
  align-items: center;
23
23
  }
24
24
 
data/app/assets/stylesheets/sass-zero/utilities/list.scss CHANGED
@@ -14,8 +14,8 @@
14
14
  list-style: none;
15
15
  }
16
16
 
17
- .list--spaced {
18
- @include space-y($size-2);
17
+ .list--spaced > li + li {
18
+ margin-top: $size-2;
19
19
  }
20
20
 
21
21
  .list--inside-bulleted {
@@ -27,14 +27,14 @@
27
27
  border-top-width: $border;
28
28
  }
29
29
 
30
- .list--inline {
31
- @include space-x($size-2);
32
- }
33
-
34
30
  .list--inline > li {
35
31
  display: inline-block;
36
32
  }
37
33
 
34
+ .list--inline > li + li {
35
+ margin-left: $size-2;
36
+ }
37
+
38
38
  .list--ruled > li {
39
39
  padding: $size-4 $size-2;
40
40
  border-top-width: $border;
data/app/assets/stylesheets/sass-zero/utilities/position.scss CHANGED
@@ -4,12 +4,20 @@
4
4
 
5
5
  .u-position {
6
6
  position: absolute;
7
+ }
7
8
 
8
- &--right { right: 0; }
9
+ .u-position--right {
10
+ right: 0;
11
+ }
9
12
 
10
- &--left { left: 0; }
13
+ .u-position--left {
14
+ left: 0;
15
+ }
11
16
 
12
- &--top { top: 0; }
17
+ .u-position--top {
18
+ top: 0;
19
+ }
13
20
 
14
- &--bottom { bottom: 0; }
21
+ .u-position--bottom {
22
+ bottom: 0;
15
23
  }
data/app/assets/stylesheets/sass-zero/utilities/text.scss CHANGED
@@ -18,23 +18,6 @@
18
18
  text-transform: uppercase;
19
19
  }
20
20
 
21
- .txt--subtle {
22
- color: $color-txt--subtle;
23
- }
24
-
25
- .txt--subtle-reversed {
26
- color: $color-txt--subtle-reversed;
27
- }
28
-
29
- .txt--full-contrast {
30
- color: $color-txt;
31
- }
32
-
33
- .txt--meta {
34
- font-size: $text-sm;
35
- color: $color-txt--subtle;
36
- }
37
-
38
21
  .txt--nowrap {
39
22
  white-space: nowrap;
40
23
  }
@@ -63,12 +46,6 @@
63
46
  opacity: $opacity-50;
64
47
  }
65
48
 
66
- .txt--highlight {
67
- background-color: $color-bg--highlight;
68
- border-radius: $rounded-full;
69
- padding: $size-0 $size-1;
70
- }
71
-
72
49
  .txt--overflow-hidden {
73
50
  overflow: hidden;
74
51
  }
@@ -138,16 +115,6 @@
138
115
  line-height: $leading-none;
139
116
  }
140
117
 
141
- .decorated {
142
- color: $color-txt--decorated;
143
- text-decoration: underline;
144
- }
145
-
146
- .decorated--subtle {
147
- color: $color-txt--subtle;
148
- text-decoration: underline;
149
- }
150
-
151
118
  .undecorated {
152
119
  color: inherit;
153
120
  text-decoration: none;
data/app/assets/stylesheets/sass-zero/utilities.scss CHANGED
@@ -1,10 +1,3 @@
1
- $color-txt: #18181b;
2
- $color-txt--subtle: #3f3f46;
3
- $color-txt--subtle-reversed: #fff;
4
- $color-txt--decorated: #3b82f6;
5
-
6
- $color-bg--highlight: #f4f4f5;
7
-
8
1
  @import "sass-zero/utilities/align";
9
2
  @import "sass-zero/utilities/animation";
10
3
  @import "sass-zero/utilities/container";
data/app/assets/stylesheets/sass-zero/variables/border.scss CHANGED
@@ -19,7 +19,7 @@ $rounded-full: 9999px;
19
19
  // border-width: $border;
20
20
  // *******************************************************************
21
21
  $border-0: 0;
22
+ $border: 1px;
22
23
  $border-2: 2px;
23
24
  $border-4: 4px;
24
25
  $border-8: 8px;
25
- $border: 1px;
data/app/assets/stylesheets/sass-zero/variables/colors.scss CHANGED
@@ -3,6 +3,7 @@
3
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.
4
4
  // *******************************************************************
5
5
  $transparent: transparent;
6
+ $current: currentColor;
6
7
 
7
8
  $black: #000;
8
9
  $white: #fff;
@@ -84,16 +85,16 @@ $blue-700: #1d4ed8;
84
85
  $blue-800: #1e40af;
85
86
  $blue-900: #1e3a8a;
86
87
 
87
- $light-blue-50: #f0f9ff;
88
- $light-blue-100: #e0f2fe;
89
- $light-blue-200: #bae6fd;
90
- $light-blue-300: #7dd3fc;
91
- $light-blue-400: #38bdf8;
92
- $light-blue-500: #0ea5e9;
93
- $light-blue-600: #0284c7;
94
- $light-blue-700: #0369a1;
95
- $light-blue-800: #075985;
96
- $light-blue-900: #0c4a6e;
88
+ $sky-50: #f0f9ff;
89
+ $sky-100: #e0f2fe;
90
+ $sky-200: #bae6fd;
91
+ $sky-300: #7dd3fc;
92
+ $sky-400: #38bdf8;
93
+ $sky-500: #0ea5e9;
94
+ $sky-600: #0284c7;
95
+ $sky-700: #0369a1;
96
+ $sky-800: #075985;
97
+ $sky-900: #0c4a6e;
97
98
 
98
99
  $cyan-50: #ecfeff;
99
100
  $cyan-100: #cffafe;
data/app/assets/stylesheets/sass-zero/variables/height.scss ADDED
@@ -0,0 +1,48 @@
1
+ // *******************************************************************
2
+ // Height
3
+ // Variables for setting the height of an element
4
+ // height: $h-1-2;
5
+ // *******************************************************************
6
+ $h-1-2: 50%;
7
+ $h-1-3: 33.333333%;
8
+ $h-2-3: 66.666667%;
9
+ $h-1-4: 25%;
10
+ $h-2-4: 50%;
11
+ $h-3-4: 75%;
12
+ $h-1-5: 20%;
13
+ $h-2-5: 40%;
14
+ $h-3-5: 60%;
15
+ $h-4-5: 80%;
16
+ $h-1-6: 16.666667%;
17
+ $h-2-6: 33.333333%;
18
+ $h-3-6: 50%;
19
+ $h-4-6: 66.666667%;
20
+ $h-5-6: 83.333333%;
21
+ $h-full: 100%;
22
+ $h-screen: 100vw;
23
+ $h-min: min-content;
24
+ $h-max: max-content;
25
+ $h-fit: fit-content;
26
+
27
+ // *******************************************************************
28
+ // Min-Height
29
+ // Variables for setting the minimum height of an element
30
+ // min-height: $min-h-0;
31
+ // *******************************************************************
32
+ $min-h-0: 0px;
33
+ $min-h-full: 100%;
34
+ $min-h-screen: 100vh;
35
+ $min-h-min: min-content;
36
+ $min-h-max: max-content;
37
+ $min-h-fit: fit-content;
38
+
39
+ // *******************************************************************
40
+ // Max-Height
41
+ // Variables for setting the maximum height of an element
42
+ // max-height: $max-h-full;
43
+ // *******************************************************************
44
+ $max-h-full: 100%;
45
+ $max-h-screen: 100vh;
46
+ $max-h-min: min-content;
47
+ $max-h-max: max-content;
48
+ $max-h-fit: fit-content;
data/app/assets/stylesheets/sass-zero/variables/spacing.scss CHANGED
@@ -1,44 +1,44 @@
1
1
  // *******************************************************************
2
2
  // Default spacing scale
3
3
  // By default, Tailwind includes a generous and comprehensive numeric spacing scale.
4
- // Use as padding, margin, width, height, transform
4
+ // Use as padding, margin, width, height, translate, etc...
5
5
  // *******************************************************************
6
- $size-px: 1px;
7
- $size-0: 0px;
8
- $size-1: 0.25rem;
9
- $size-2: 0.5rem;
10
- $size-3: 0.75rem;
11
- $size-4: 1rem;
12
- $size-5: 1.25rem;
13
- $size-6: 1.5rem;
14
- $size-7: 1.75rem;
15
- $size-8: 2rem;
16
- $size-9: 2.25rem;
17
- $size-10: 2.5rem;
18
- $size-11: 2.75rem;
19
- $size-12: 3rem;
20
- $size-14: 3.5rem;
21
- $size-16: 4rem;
22
- $size-20: 5rem;
23
- $size-24: 6rem;
24
- $size-28: 7rem;
25
- $size-32: 8rem;
26
- $size-36: 9rem;
27
- $size-40: 10rem;
28
- $size-44: 11rem;
29
- $size-48: 12rem;
30
- $size-52: 13rem;
31
- $size-56: 14rem;
32
- $size-60: 15rem;
33
- $size-64: 16rem;
34
- $size-72: 18rem;
35
- $size-80: 20rem;
36
- $size-96: 24rem;
6
+ $size-auto: auto;
37
7
 
38
- $size-auto: auto;
39
- $size-full: 100%;
40
- $size-screen: 100vw;
41
- $size-min: min-content;
42
- $size-max: max-content;
8
+ $size-px: 1px;
9
+ $size-0: 0px;
10
+ $size-0-5: 0.125rem;
11
+ $size-1: 0.25rem;
12
+ $size-1-5: 0.375rem;
13
+ $size-2: 0.5rem;
14
+ $size-2-5: 0.625rem;
15
+ $size-3: 0.75rem;
16
+ $size-3-5: 0.875rem;
17
+ $size-4: 1rem;
18
+ $size-5: 1.25rem;
19
+ $size-6: 1.5rem;
20
+ $size-7: 1.75rem;
21
+ $size-8: 2rem;
22
+ $size-9: 2.25rem;
23
+ $size-10: 2.5rem;
24
+ $size-11: 2.75rem;
25
+ $size-12: 3rem;
26
+ $size-14: 3.5rem;
27
+ $size-16: 4rem;
28
+ $size-20: 5rem;
29
+ $size-24: 6rem;
30
+ $size-28: 7rem;
31
+ $size-32: 8rem;
32
+ $size-36: 9rem;
33
+ $size-40: 10rem;
34
+ $size-44: 11rem;
35
+ $size-48: 12rem;
36
+ $size-52: 13rem;
37
+ $size-56: 14rem;
38
+ $size-60: 15rem;
39
+ $size-64: 16rem;
40
+ $size-72: 18rem;
41
+ $size-80: 20rem;
42
+ $size-96: 24rem;
43
43
 
44
44
  $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
data/app/assets/stylesheets/sass-zero/variables/transform.scss CHANGED
@@ -29,6 +29,19 @@ $rotate-45: 45deg;
29
29
  $rotate-90: 90deg;
30
30
  $rotate-180: 180deg;
31
31
 
32
+ // *******************************************************************
33
+ // Translate
34
+ // Variables for translating elements with transform.
35
+ // transform: translate($translate-1-2);
36
+ // *******************************************************************
37
+ $translate-1-2: 50%;
38
+ $translate-1-3: 33.333333%;
39
+ $translate-2-3: 66.666667%;
40
+ $translate-1-4: 25%;
41
+ $translate-2-4: 50%;
42
+ $translate-3-4: 75%;
43
+ $translate-full: 100%;
44
+
32
45
  // *******************************************************************
33
46
  // Skew
34
47
  // Variables for skewing elements with transform.
data/app/assets/stylesheets/sass-zero/variables/width.scss CHANGED
@@ -3,32 +3,37 @@
3
3
  // Variables for setting the width of an element
4
4
  // width: $w-1-2;
5
5
  // *******************************************************************
6
- $w-1-2: 50%;
7
- $w-1-3: 33.333333%;
8
- $w-2-3: 66.666667%;
9
- $w-1-4: 25%;
10
- $w-2-4: 50%;
11
- $w-3-4: 75%;
12
- $w-1-5: 20%;
13
- $w-2-5: 40%;
14
- $w-3-5: 60%;
15
- $w-4-5: 80%;
16
- $w-1-6: 16.666667%;
17
- $w-2-6: 33.333333%;
18
- $w-3-6: 50%;
19
- $w-4-6: 66.666667%;
20
- $w-5-6: 83.333333%;
21
- $w-1-12: 8.333333%;
22
- $w-2-12: 16.666667%;
23
- $w-3-12: 25%;
24
- $w-4-12: 33.333333%;
25
- $w-5-12: 41.666667%;
26
- $w-6-12: 50%;
27
- $w-7-12: 58.333333%;
28
- $w-8-12: 66.666667%;
29
- $w-9-12: 75%;
30
- $w-10-12: 83.333333%;
31
- $w-11-12: 91.666667%;
6
+ $w-1-2: 50%;
7
+ $w-1-3: 33.333333%;
8
+ $w-2-3: 66.666667%;
9
+ $w-1-4: 25%;
10
+ $w-2-4: 50%;
11
+ $w-3-4: 75%;
12
+ $w-1-5: 20%;
13
+ $w-2-5: 40%;
14
+ $w-3-5: 60%;
15
+ $w-4-5: 80%;
16
+ $w-1-6: 16.666667%;
17
+ $w-2-6: 33.333333%;
18
+ $w-3-6: 50%;
19
+ $w-4-6: 66.666667%;
20
+ $w-5-6: 83.333333%;
21
+ $w-1-12: 8.333333%;
22
+ $w-2-12: 16.666667%;
23
+ $w-3-12: 25%;
24
+ $w-4-12: 33.333333%;
25
+ $w-5-12: 41.666667%;
26
+ $w-6-12: 50%;
27
+ $w-7-12: 58.333333%;
28
+ $w-8-12: 66.666667%;
29
+ $w-9-12: 75%;
30
+ $w-10-12: 83.333333%;
31
+ $w-11-12: 91.666667%;
32
+ $w-full: 100%;
33
+ $w-screen: 100vw;
34
+ $w-min: min-content;
35
+ $w-max: max-content;
36
+ $w-fit: fit-content;
32
37
 
33
38
  // *******************************************************************
34
39
  // Min-Width
@@ -39,6 +44,7 @@ $min-w-0: 0px;
39
44
  $min-w-full: 100%;
40
45
  $min-w-min: min-content;
41
46
  $min-w-max: max-content;
47
+ $min-w-fit: fit-content;
42
48
 
43
49
  // *******************************************************************
44
50
  // Max-Width
@@ -61,20 +67,4 @@ $max-w-7xl: 80rem;
61
67
  $max-w-full: 100%;
62
68
  $max-w-min: min-content;
63
69
  $max-w-max: max-content;
64
-
65
- // *******************************************************************
66
- // Min-Height
67
- // Variables for setting the minimum height of an element
68
- // min-height: $min-h-0;
69
- // *******************************************************************
70
- $min-h-0: 0px;
71
- $min-h-full: 100%;
72
- $min-h-screen: 100vh;
73
-
74
- // *******************************************************************
75
- // Max-Height
76
- // Variables for setting the maximum height of an element
77
- // max-height: $max-h-full;
78
- // *******************************************************************
79
- $max-h-full: 100%;
80
- $max-h-screen: 100vh;
70
+ $max-w-fit: fit-content;
data/app/assets/stylesheets/sass-zero/variables.scss CHANGED
@@ -9,4 +9,5 @@
9
9
  @import "variables/transform";
10
10
  @import "variables/typography";
11
11
  @import "variables/width";
12
+ @import "variables/height";
12
13
  @import "variables/zindex";