bulma-rails 0.9.4 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +48 -14
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +114 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +788 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +647 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +283 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +144 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +146 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -167
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -357
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -162
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -134
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -88
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -135
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -79
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -303
@@ -0,0 +1,209 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $max-column-count: 12;
7
+ $grip-gap: 0.75rem;
8
+ $column-min-base: 1.5rem;
9
+
10
+ @mixin fixed-grid-properties($suffix: "") {
11
+ @for $i from 1 through $max-column-count {
12
+ &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
13
+ > .#{iv.$class-prefix}grid {
14
+ @include cv.register-var("grid-column-count", #{$i});
15
+ }
16
+ }
17
+ }
18
+ }
19
+
20
+ $grid-container-name: bulma-fixed-grid;
21
+
22
+ .#{iv.$class-prefix}fixed-grid {
23
+ @extend %block;
24
+ container-name: $grid-container-name;
25
+ container-type: inline-size;
26
+
27
+ > .#{iv.$class-prefix}grid {
28
+ @include cv.register-vars(
29
+ (
30
+ "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
31
+ "grid-column-count": 2,
32
+ )
33
+ );
34
+
35
+ grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr);
36
+ }
37
+
38
+ @include fixed-grid-properties;
39
+
40
+ @include mx.container-until($grid-container-name, iv.$tablet) {
41
+ @include fixed-grid-properties("-mobile");
42
+ }
43
+
44
+ @include mx.container-from($grid-container-name, iv.$tablet) {
45
+ @include fixed-grid-properties("-tablet");
46
+ }
47
+
48
+ @include mx.container-from($grid-container-name, iv.$desktop) {
49
+ @include fixed-grid-properties("-desktop");
50
+ }
51
+
52
+ @include mx.container-from($grid-container-name, iv.$widescreen) {
53
+ @include fixed-grid-properties("-widescreen");
54
+ }
55
+
56
+ @include mx.container-from($grid-container-name, iv.$fullhd) {
57
+ @include fixed-grid-properties("-fullhd");
58
+ }
59
+
60
+ &.#{iv.$class-prefix}has-auto-count {
61
+ .#{iv.$class-prefix}grid {
62
+ @include mx.container-until($grid-container-name, iv.$tablet) {
63
+ @include cv.register-var("grid-column-count", 2);
64
+ }
65
+
66
+ @include mx.container-from($grid-container-name, iv.$tablet) {
67
+ @include cv.register-var("grid-column-count", 4);
68
+ }
69
+
70
+ @include mx.container-from($grid-container-name, iv.$desktop) {
71
+ @include cv.register-var("grid-column-count", 8);
72
+ }
73
+
74
+ @include mx.container-from($grid-container-name, iv.$widescreen) {
75
+ @include cv.register-var("grid-column-count", 12);
76
+ }
77
+
78
+ @include mx.container-from($grid-container-name, iv.$fullhd) {
79
+ @include cv.register-var("grid-column-count", 16);
80
+ }
81
+ }
82
+ }
83
+ }
84
+
85
+ .#{iv.$class-prefix}grid {
86
+ @include cv.register-vars(
87
+ (
88
+ "grid-gap": $grip-gap,
89
+ "grid-column-min": 9rem,
90
+ "grid-cell-column-span": 1,
91
+ "grid-cell-row-span": 1,
92
+ )
93
+ );
94
+
95
+ @extend %block;
96
+ display: grid;
97
+ gap: cv.getVar("grid-gap");
98
+ column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")};
99
+ row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")};
100
+ grid-template-columns: repeat(
101
+ auto-fit,
102
+ minmax(#{cv.getVar("grid-column-min")}, 1fr)
103
+ );
104
+ grid-template-rows: auto;
105
+
106
+ &.is-auto-fill {
107
+ grid-template-columns: repeat(
108
+ auto-fill,
109
+ minmax(#{cv.getVar("grid-column-min")}, 1fr)
110
+ );
111
+ }
112
+
113
+ @for $i from 1 through 12 {
114
+ &.#{iv.$class-prefix}is-col-min-#{$i} {
115
+ @include cv.register-vars(
116
+ (
117
+ "grid-column-min": #{$column-min-base * $i},
118
+ )
119
+ );
120
+ }
121
+ }
122
+ }
123
+
124
+ @mixin cell-properties($suffix: "") {
125
+ @for $i from 1 through $max-column-count {
126
+ $name: $i + $suffix;
127
+
128
+ &.#{iv.$class-prefix}is-col-start-#{$name} {
129
+ @include cv.register-var("grid-cell-column-start", #{$i});
130
+ }
131
+
132
+ &.#{iv.$class-prefix}is-col-end-#{$name} {
133
+ @include cv.register-var("grid-cell-column-end", #{$i});
134
+ }
135
+
136
+ &.#{iv.$class-prefix}is-col-from-end-#{$name} {
137
+ @include cv.register-var("grid-cell-column-start", #{$i * -1});
138
+ }
139
+
140
+ &.#{iv.$class-prefix}is-col-span-#{$name} {
141
+ @include cv.register-var("grid-cell-column-span", #{$i});
142
+ }
143
+
144
+ &.#{iv.$class-prefix}is-row-start-#{$name} {
145
+ @include cv.register-var("grid-cell-row-start", #{$i});
146
+ }
147
+
148
+ &.#{iv.$class-prefix}is-row-end-#{$name} {
149
+ @include cv.register-var("grid-cell-row-end", #{$i});
150
+ }
151
+
152
+ &.#{iv.$class-prefix}is-row-from-end-#{$name} {
153
+ @include cv.register-var("grid-cell-row-start", #{$i * -1});
154
+ }
155
+
156
+ &.#{iv.$class-prefix}is-row-span-#{$name} {
157
+ @include cv.register-var("grid-cell-row-span", #{$i});
158
+ }
159
+ }
160
+ }
161
+
162
+ .#{iv.$class-prefix}cell {
163
+ grid-column-end: span cv.getVar("grid-cell-column-span");
164
+ grid-column-start: cv.getVar("grid-cell-column-start");
165
+ grid-row-end: span cv.getVar("grid-cell-row-span");
166
+ grid-row-start: cv.getVar("grid-cell-row-start");
167
+
168
+ // Sizes
169
+ &.#{iv.$class-prefix}is-col-start-end {
170
+ @include cv.register-var("grid-cell-column-start", -1);
171
+ }
172
+
173
+ &.#{iv.$class-prefix}is-row-start-end {
174
+ @include cv.register-var("grid-cell-row-start", -1);
175
+ }
176
+
177
+ @include cell-properties;
178
+ @include mx.mobile {
179
+ @include cell-properties("-mobile");
180
+ }
181
+
182
+ @include mx.tablet {
183
+ @include cell-properties("-tablet");
184
+ }
185
+
186
+ @include mx.tablet-only {
187
+ @include cell-properties("-tablet-only");
188
+ }
189
+
190
+ @include mx.desktop {
191
+ @include cell-properties("-desktop");
192
+ }
193
+
194
+ @include mx.desktop-only {
195
+ @include cell-properties("-desktop-only");
196
+ }
197
+
198
+ @include mx.widescreen {
199
+ @include cell-properties("-widescreen");
200
+ }
201
+
202
+ @include mx.widescreen-only {
203
+ @include cell-properties("-widescreen-only");
204
+ }
205
+
206
+ @include mx.fullhd {
207
+ @include cell-properties("-fullhd");
208
+ }
209
+ }
@@ -0,0 +1,15 @@
1
+ /* Bulma Helpers */
2
+ @charset "utf-8";
3
+
4
+ @forward "aspect-ratio";
5
+ @forward "border";
6
+ @forward "color";
7
+ @forward "flexbox";
8
+ @forward "float";
9
+ @forward "gap";
10
+ @forward "overflow";
11
+ @forward "position";
12
+ @forward "spacing";
13
+ @forward "typography";
14
+ @forward "visibility";
15
+ @forward "other";
@@ -0,0 +1,10 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+
3
+ @each $pair in iv.$aspect-ratios {
4
+ $w: nth($pair, 1);
5
+ $h: nth($pair, 2);
6
+
7
+ .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
8
+ aspect-ratio: #{$w} / #{$h};
9
+ }
10
+ }
@@ -0,0 +1,15 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+
4
+ $radii: (
5
+ "small": "radius-small",
6
+ "normal": "radius",
7
+ "large": "radius-large",
8
+ "rounded": "radius-rounded",
9
+ );
10
+
11
+ @each $name, $var in $radii {
12
+ .#{iv.$helpers-has-prefix}radius-#{$name} {
13
+ border-radius: cv.getVar($var);
14
+ }
15
+ }
@@ -0,0 +1,364 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+
5
+ $digits: (
6
+ "00",
7
+ "05",
8
+ "10",
9
+ "15",
10
+ "20",
11
+ "25",
12
+ "30",
13
+ "35",
14
+ "40",
15
+ "45",
16
+ "50",
17
+ "55",
18
+ "60",
19
+ "65",
20
+ "70",
21
+ "75",
22
+ "80",
23
+ "85",
24
+ "90",
25
+ "95",
26
+ "100"
27
+ );
28
+
29
+ .#{iv.$helpers-has-prefix}background {
30
+ background-color: cv.getVar("background");
31
+ }
32
+
33
+ @each $name, $color in dv.$colors {
34
+ $background: hsl(
35
+ #{cv.getVar($name, "", "-h")},
36
+ #{cv.getVar($name, "", "-s")},
37
+ calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
38
+ );
39
+
40
+ $color: hsl(
41
+ #{cv.getVar($name, "", "-h")},
42
+ #{cv.getVar($name, "", "-s")},
43
+ calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
44
+ );
45
+
46
+ [class*="#{iv.$helpers-prefix}color-#{$name}"],
47
+ [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
48
+ @include cv.register-vars(
49
+ (
50
+ "color-l": #{cv.getVar($name, "", "-l")},
51
+ "color-l-delta": 0%,
52
+ )
53
+ );
54
+ color: $color !important;
55
+ }
56
+
57
+ [class*="#{iv.$helpers-prefix}background-#{$name}"],
58
+ [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
59
+ @include cv.register-vars(
60
+ (
61
+ "background-l": #{cv.getVar($name, "", "-l")},
62
+ "background-l-delta": 0%,
63
+ )
64
+ );
65
+ background-color: $background !important;
66
+ }
67
+
68
+ // Invert
69
+ .#{iv.$helpers-prefix}color-#{$name}-invert,
70
+ .#{iv.$helpers-has-prefix}text-#{$name}-invert {
71
+ @include cv.register-vars(
72
+ (
73
+ "color-l": #{cv.getVar($name, "", "-invert-l")},
74
+ )
75
+ );
76
+ }
77
+
78
+ .#{iv.$helpers-prefix}background-#{$name}-invert,
79
+ .#{iv.$helpers-has-prefix}background-#{$name}-invert {
80
+ @include cv.register-vars(
81
+ (
82
+ "background-l": #{cv.getVar($name, "", "-invert-l")},
83
+ )
84
+ );
85
+ }
86
+
87
+ // On Scheme
88
+ .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
89
+ .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
90
+ @include cv.register-vars(
91
+ (
92
+ "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
93
+ )
94
+ );
95
+ }
96
+
97
+ .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
98
+ .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
99
+ @include cv.register-vars(
100
+ (
101
+ "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
102
+ )
103
+ );
104
+ }
105
+
106
+ // Light
107
+ .#{iv.$helpers-prefix}color-#{$name}-light,
108
+ .#{iv.$helpers-has-prefix}text-#{$name}-light {
109
+ @include cv.register-vars(
110
+ (
111
+ "color-l": #{cv.getVar($name, "", "-light-l")},
112
+ )
113
+ );
114
+ }
115
+
116
+ .#{iv.$helpers-prefix}background-#{$name}-light,
117
+ .#{iv.$helpers-has-prefix}background-#{$name}-light {
118
+ @include cv.register-vars(
119
+ (
120
+ "background-l": #{cv.getVar($name, "", "-light-l")},
121
+ )
122
+ );
123
+ }
124
+
125
+ .#{iv.$helpers-prefix}color-#{$name}-light-invert,
126
+ .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
127
+ @include cv.register-vars(
128
+ (
129
+ "color-l": #{cv.getVar($name, "", "-light-invert-l")},
130
+ )
131
+ );
132
+ }
133
+
134
+ .#{iv.$helpers-prefix}background-#{$name}-light-invert,
135
+ .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
136
+ @include cv.register-vars(
137
+ (
138
+ "background-l": #{cv.getVar($name, "", "-light-invert-l")},
139
+ )
140
+ );
141
+ }
142
+
143
+ // Dark
144
+ .#{iv.$helpers-prefix}color-#{$name}-dark,
145
+ .#{iv.$helpers-has-prefix}text-#{$name}-dark {
146
+ @include cv.register-vars(
147
+ (
148
+ "color-l": #{cv.getVar($name, "", "-dark-l")},
149
+ )
150
+ );
151
+ }
152
+
153
+ .#{iv.$helpers-prefix}background-#{$name}-dark,
154
+ .#{iv.$helpers-has-prefix}background-#{$name}-dark {
155
+ @include cv.register-vars(
156
+ (
157
+ "background-l": #{cv.getVar($name, "", "-dark-l")},
158
+ )
159
+ );
160
+ }
161
+
162
+ .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
163
+ .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
164
+ @include cv.register-vars(
165
+ (
166
+ "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
167
+ )
168
+ );
169
+ }
170
+
171
+ .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
172
+ .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
173
+ @include cv.register-vars(
174
+ (
175
+ "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
176
+ )
177
+ );
178
+ }
179
+
180
+ // Soft/Bold
181
+ .#{iv.$helpers-prefix}color-#{$name}-soft,
182
+ .#{iv.$helpers-has-prefix}text-#{$name}-soft {
183
+ @include cv.register-vars(
184
+ (
185
+ "color-l": #{cv.getVar("soft-l")},
186
+ )
187
+ );
188
+ }
189
+
190
+ .#{iv.$helpers-prefix}background-#{$name}-soft,
191
+ .#{iv.$helpers-has-prefix}background-#{$name}-soft {
192
+ @include cv.register-vars(
193
+ (
194
+ "background-l": #{cv.getVar("soft-l")},
195
+ )
196
+ );
197
+ }
198
+
199
+ .#{iv.$helpers-prefix}color-#{$name}-bold,
200
+ .#{iv.$helpers-has-prefix}text-#{$name}-bold {
201
+ @include cv.register-vars(
202
+ (
203
+ "color-l": #{cv.getVar("bold-l")},
204
+ )
205
+ );
206
+ }
207
+
208
+ .#{iv.$helpers-prefix}background-#{$name}-bold,
209
+ .#{iv.$helpers-has-prefix}background-#{$name}-bold {
210
+ @include cv.register-vars(
211
+ (
212
+ "background-l": #{cv.getVar("bold-l")},
213
+ )
214
+ );
215
+ }
216
+
217
+ .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
218
+ .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
219
+ @include cv.register-vars(
220
+ (
221
+ "color-l": #{cv.getVar("soft-invert-l")},
222
+ )
223
+ );
224
+ }
225
+
226
+ .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
227
+ .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
228
+ @include cv.register-vars(
229
+ (
230
+ "background-l": #{cv.getVar("soft-invert-l")},
231
+ )
232
+ );
233
+ }
234
+
235
+ .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
236
+ .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
237
+ @include cv.register-vars(
238
+ (
239
+ "color-l": #{cv.getVar("bold-invert-l")},
240
+ )
241
+ );
242
+ }
243
+
244
+ .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
245
+ .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
246
+ @include cv.register-vars(
247
+ (
248
+ "background-l": #{cv.getVar("bold-invert-l")},
249
+ )
250
+ );
251
+ }
252
+
253
+ @each $digit in $digits {
254
+ .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
255
+ .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
256
+ @include cv.register-vars(
257
+ (
258
+ "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
259
+ )
260
+ );
261
+ }
262
+
263
+ .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
264
+ .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
265
+ @include cv.register-vars(
266
+ (
267
+ "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
268
+ )
269
+ );
270
+ }
271
+
272
+ .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
273
+ .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
274
+ @include cv.register-vars(
275
+ (
276
+ "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
277
+ )
278
+ );
279
+ }
280
+
281
+ .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
282
+ .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
283
+ @include cv.register-vars(
284
+ (
285
+ "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
286
+ )
287
+ );
288
+ }
289
+ }
290
+
291
+ // Hover
292
+ a.#{iv.$helpers-prefix}color-#{$name},
293
+ button.#{iv.$helpers-prefix}color-#{$name},
294
+ #{iv.$helpers-prefix}color-#{$name}.is-hoverable,
295
+ a.#{iv.$helpers-has-prefix}text-#{$name},
296
+ button.#{iv.$helpers-has-prefix}text-#{$name},
297
+ #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
298
+ &:hover,
299
+ &:focus-visible {
300
+ @include cv.register-vars(
301
+ (
302
+ "color-l-delta": #{cv.getVar("hover-color-l-delta")},
303
+ )
304
+ );
305
+ }
306
+
307
+ &:active {
308
+ @include cv.register-vars(
309
+ (
310
+ "color-l-delta": #{cv.getVar("active-color-l-delta")},
311
+ )
312
+ );
313
+ }
314
+ }
315
+
316
+ a.#{iv.$helpers-prefix}background-#{$name},
317
+ button.#{iv.$helpers-prefix}background-#{$name},
318
+ #{iv.$helpers-prefix}background-#{$name}.is-hoverable,
319
+ a.#{iv.$helpers-has-prefix}background-#{$name},
320
+ button.#{iv.$helpers-has-prefix}background-#{$name},
321
+ #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
322
+ &:hover,
323
+ &:focus-visible {
324
+ @include cv.register-vars(
325
+ (
326
+ "background-l-delta": #{cv.getVar("hover-background-l-delta")},
327
+ )
328
+ );
329
+ }
330
+
331
+ &:active {
332
+ @include cv.register-vars(
333
+ (
334
+ "background-l-delta": #{cv.getVar("active-background-l-delta")},
335
+ )
336
+ );
337
+ }
338
+ }
339
+
340
+ // Palettes
341
+ .#{iv.$helpers-prefix}palette-#{$name} {
342
+ --h: #{cv.getVar($name, "", "-h")};
343
+ --s: #{cv.getVar($name, "", "-s")};
344
+ --l: #{cv.getVar($name, "", "-l")};
345
+ --color: hsl(var(--h), var(--s), var(--l));
346
+
347
+ @each $digit in $digits {
348
+ --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")};
349
+ --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l));
350
+ }
351
+ }
352
+ }
353
+
354
+ @each $name, $shade in dv.$shades {
355
+ .#{iv.$helpers-prefix}color-#{$name},
356
+ .#{iv.$helpers-has-prefix}text-#{$name} {
357
+ color: $shade !important;
358
+ }
359
+
360
+ .#{iv.$helpers-prefix}background-#{$name},
361
+ .#{iv.$helpers-has-prefix}background-#{$name} {
362
+ background-color: $shade !important;
363
+ }
364
+ }
@@ -0,0 +1,62 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+
3
+ $flex-direction-values: row, row-reverse, column, column-reverse;
4
+
5
+ @each $value in $flex-direction-values {
6
+ .#{iv.$helpers-prefix}flex-direction-#{$value} {
7
+ flex-direction: $value !important;
8
+ }
9
+ }
10
+
11
+ $flex-wrap-values: nowrap, wrap, wrap-reverse;
12
+
13
+ @each $value in $flex-wrap-values {
14
+ .#{iv.$helpers-prefix}flex-wrap-#{$value} {
15
+ flex-wrap: $value !important;
16
+ }
17
+ }
18
+
19
+ $justify-content-values: flex-start, flex-end, center, space-between,
20
+ space-around, space-evenly, start, end, left, right;
21
+
22
+ @each $value in $justify-content-values {
23
+ .#{iv.$helpers-prefix}justify-content-#{$value} {
24
+ justify-content: $value !important;
25
+ }
26
+ }
27
+
28
+ $align-content-values: flex-start, flex-end, center, space-between, space-around,
29
+ space-evenly, stretch, start, end, baseline;
30
+
31
+ @each $value in $align-content-values {
32
+ .#{iv.$helpers-prefix}align-content-#{$value} {
33
+ align-content: $value !important;
34
+ }
35
+ }
36
+
37
+ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end,
38
+ self-start, self-end;
39
+
40
+ @each $value in $align-items-values {
41
+ .#{iv.$helpers-prefix}align-items-#{$value} {
42
+ align-items: $value !important;
43
+ }
44
+ }
45
+
46
+ $align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
47
+
48
+ @each $value in $align-self-values {
49
+ .#{iv.$helpers-prefix}align-self-#{$value} {
50
+ align-self: $value !important;
51
+ }
52
+ }
53
+
54
+ $flex-operators: grow, shrink;
55
+
56
+ @each $operator in $flex-operators {
57
+ @for $i from 0 through 5 {
58
+ .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
59
+ flex-#{$operator}: $i !important;
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,28 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+ @use "../utilities/mixins" as mx;
3
+
4
+ .#{iv.$helpers-prefix}clearfix {
5
+ @include mx.clearfix;
6
+ }
7
+
8
+ .#{iv.$helpers-prefix}float-left,
9
+ .#{iv.$helpers-prefix}pulled-left {
10
+ float: left !important;
11
+ }
12
+
13
+ .#{iv.$helpers-prefix}float-right,
14
+ .#{iv.$helpers-prefix}pulled-right {
15
+ float: right !important;
16
+ }
17
+
18
+ .#{iv.$helpers-prefix}float-none {
19
+ float: none !important;
20
+ }
21
+
22
+ $clears: both left none right;
23
+
24
+ @each $clear in $clears {
25
+ .#{iv.$helpers-prefix}clear-#{$clear} {
26
+ clear: $clear !important;
27
+ }
28
+ }