bulma-rails 0.9.0 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (140) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +49 -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 +126 -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 +640 -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 +143 -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 +145 -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 +86 -106
  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 +80 -67
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -4
  82. data/app/assets/stylesheets/sass/base/generic.sass +0 -142
  83. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  84. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  85. data/app/assets/stylesheets/sass/components/_all.sass +0 -14
  86. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -75
  87. data/app/assets/stylesheets/sass/components/card.sass +0 -79
  88. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -81
  89. data/app/assets/stylesheets/sass/components/level.sass +0 -77
  90. data/app/assets/stylesheets/sass/components/media.sass +0 -52
  91. data/app/assets/stylesheets/sass/components/menu.sass +0 -57
  92. data/app/assets/stylesheets/sass/components/message.sass +0 -99
  93. data/app/assets/stylesheets/sass/components/modal.sass +0 -113
  94. data/app/assets/stylesheets/sass/components/navbar.sass +0 -441
  95. data/app/assets/stylesheets/sass/components/pagination.sass +0 -150
  96. data/app/assets/stylesheets/sass/components/panel.sass +0 -119
  97. data/app/assets/stylesheets/sass/components/tabs.sass +0 -174
  98. data/app/assets/stylesheets/sass/elements/_all.sass +0 -15
  99. data/app/assets/stylesheets/sass/elements/box.sass +0 -24
  100. data/app/assets/stylesheets/sass/elements/button.sass +0 -323
  101. data/app/assets/stylesheets/sass/elements/container.sass +0 -24
  102. data/app/assets/stylesheets/sass/elements/content.sass +0 -155
  103. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  104. data/app/assets/stylesheets/sass/elements/icon.sass +0 -21
  105. data/app/assets/stylesheets/sass/elements/image.sass +0 -71
  106. data/app/assets/stylesheets/sass/elements/notification.sass +0 -48
  107. data/app/assets/stylesheets/sass/elements/other.sass +0 -39
  108. data/app/assets/stylesheets/sass/elements/progress.sass +0 -67
  109. data/app/assets/stylesheets/sass/elements/table.sass +0 -129
  110. data/app/assets/stylesheets/sass/elements/tag.sass +0 -136
  111. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  112. data/app/assets/stylesheets/sass/form/_all.sass +0 -8
  113. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -21
  114. data/app/assets/stylesheets/sass/form/file.sass +0 -180
  115. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -64
  116. data/app/assets/stylesheets/sass/form/select.sass +0 -85
  117. data/app/assets/stylesheets/sass/form/shared.sass +0 -55
  118. data/app/assets/stylesheets/sass/form/tools.sass +0 -213
  119. data/app/assets/stylesheets/sass/grid/_all.sass +0 -4
  120. data/app/assets/stylesheets/sass/grid/columns.sass +0 -504
  121. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -34
  122. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -10
  123. data/app/assets/stylesheets/sass/helpers/color.sass +0 -37
  124. data/app/assets/stylesheets/sass/helpers/float.sass +0 -8
  125. data/app/assets/stylesheets/sass/helpers/other.sass +0 -8
  126. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  127. data/app/assets/stylesheets/sass/helpers/position.sass +0 -5
  128. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -28
  129. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -98
  130. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  131. data/app/assets/stylesheets/sass/layout/_all.sass +0 -5
  132. data/app/assets/stylesheets/sass/layout/footer.sass +0 -9
  133. data/app/assets/stylesheets/sass/layout/hero.sass +0 -145
  134. data/app/assets/stylesheets/sass/layout/section.sass +0 -13
  135. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -8
  136. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -5
  137. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -50
  138. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -115
  139. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  140. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -285
@@ -0,0 +1,640 @@
1
+ @use "sass:list";
2
+
3
+ @use "../utilities/css-variables" as cv;
4
+ @use "../utilities/derived-variables" as dv;
5
+ @use "../utilities/initial-variables" as iv;
6
+ @use "../utilities/extends";
7
+ @use "../utilities/mixins" as mx;
8
+
9
+ $button-h: #{cv.getVar("scheme-h")};
10
+ $button-s: #{cv.getVar("scheme-s")};
11
+ $button-l: #{cv.getVar("scheme-main-l")};
12
+ $button-background-l: #{cv.getVar("scheme-main-l")};
13
+ $button-background-l-delta: 0%;
14
+ $button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")};
15
+ $button-active-background-l-delta: #{cv.getVar("active-background-l-delta")};
16
+ $button-color-l: #{cv.getVar("text-strong-l")};
17
+ $button-border-l: #{cv.getVar("border-l")};
18
+ $button-border-l-delta: 0%;
19
+ $button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")};
20
+ $button-active-border-l-delta: #{cv.getVar("active-border-l-delta")};
21
+ $button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")};
22
+ $button-outer-shadow-h: 0;
23
+ $button-outer-shadow-s: 0%;
24
+ $button-outer-shadow-l: 20%;
25
+ $button-outer-shadow-a: 0.05;
26
+
27
+ $button-weight: cv.getVar("weight-medium") !default;
28
+ $button-family: false !default;
29
+
30
+ $button-border-color: cv.getVar("border") !default;
31
+ $button-border-style: solid !default;
32
+ $button-border-width: cv.getVar("control-border-width") !default;
33
+
34
+ $button-padding-vertical: 0.5em !default;
35
+ $button-padding-horizontal: 1em !default;
36
+
37
+ $button-focus-border-color: cv.getVar("link-focus-border") !default;
38
+ $button-focus-box-shadow-size: 0 0 0 0.125em !default;
39
+ $button-focus-box-shadow-color: hsla(
40
+ #{cv.getVar("link-h")},
41
+ #{cv.getVar("link-s")},
42
+ #{cv.getVar("link-on-scheme-l")},
43
+ 0.25
44
+ ) !default;
45
+
46
+ $button-active-color: cv.getVar("link-active") !default;
47
+ $button-active-border-color: cv.getVar("link-active-border") !default;
48
+
49
+ $button-text-color: cv.getVar("text") !default;
50
+ $button-text-decoration: underline !default;
51
+ $button-text-hover-background-color: cv.getVar("background") !default;
52
+ $button-text-hover-color: cv.getVar("text-strong") !default;
53
+
54
+ $button-ghost-background: none !default;
55
+ $button-ghost-border-color: transparent !default;
56
+ $button-ghost-color: cv.getVar("link-text") !default;
57
+ $button-ghost-decoration: none !default;
58
+ $button-ghost-hover-color: cv.getVar("link") !default;
59
+ $button-ghost-hover-decoration: underline !default;
60
+
61
+ $button-disabled-background-color: cv.getVar("scheme-main") !default;
62
+ $button-disabled-border-color: cv.getVar("border") !default;
63
+ $button-disabled-shadow: none !default;
64
+ $button-disabled-opacity: 0.5 !default;
65
+
66
+ $button-static-color: cv.getVar("text-weak") !default;
67
+ $button-static-background-color: cv.getVar("scheme-main-ter") !default;
68
+ $button-static-border-color: cv.getVar("border") !default;
69
+
70
+ $button-colors: dv.$colors !default;
71
+ $button-responsive-sizes: (
72
+ "mobile": (
73
+ "small": calc(#{cv.getVar("size-small")} * 0.75),
74
+ "normal": calc(#{cv.getVar("size-small")} * 0.875),
75
+ "medium": cv.getVar("size-small"),
76
+ "large": cv.getVar("size-normal"),
77
+ ),
78
+ "tablet-only": (
79
+ "small": calc(#{cv.getVar("size-small")} * 0.875),
80
+ "normal": cv.getVar("size-small"),
81
+ "medium": cv.getVar("size-normal"),
82
+ "large": cv.getVar("size-medium"),
83
+ ),
84
+ ) !default;
85
+
86
+ $no-palette: ("white", "black", "light", "dark");
87
+
88
+ .#{iv.$class-prefix}button {
89
+ @include cv.register-vars(
90
+ (
91
+ "button-family": #{$button-family},
92
+ "button-weight": #{$button-weight},
93
+ "button-border-color": #{$button-border-color},
94
+ "button-border-style": #{$button-border-style},
95
+ "button-border-width": #{$button-border-width},
96
+ "button-padding-vertical": #{$button-padding-vertical},
97
+ "button-padding-horizontal": #{$button-padding-horizontal},
98
+ "button-focus-border-color": #{$button-focus-border-color},
99
+ "button-focus-box-shadow-size": #{$button-focus-box-shadow-size},
100
+ "button-focus-box-shadow-color": #{$button-focus-box-shadow-color},
101
+ "button-active-color": #{$button-active-color},
102
+ "button-active-border-color": #{$button-active-border-color},
103
+ "button-text-color": #{$button-text-color},
104
+ "button-text-decoration": #{$button-text-decoration},
105
+ "button-text-hover-background-color": #{$button-text-hover-background-color},
106
+ "button-text-hover-color": #{$button-text-hover-color},
107
+ "button-ghost-background": #{$button-ghost-background},
108
+ "button-ghost-border-color": #{$button-ghost-border-color},
109
+ "button-ghost-color": #{$button-ghost-color},
110
+ "button-ghost-decoration": #{$button-ghost-decoration},
111
+ "button-ghost-hover-color": #{$button-ghost-hover-color},
112
+ "button-ghost-hover-decoration": #{$button-ghost-hover-decoration},
113
+ "button-disabled-background-color": #{$button-disabled-background-color},
114
+ "button-disabled-border-color": #{$button-disabled-border-color},
115
+ "button-disabled-shadow": #{$button-disabled-shadow},
116
+ "button-disabled-opacity": #{$button-disabled-opacity},
117
+ "button-static-color": #{$button-static-color},
118
+ "button-static-background-color": #{$button-static-background-color},
119
+ "button-static-border-color": #{$button-static-border-color},
120
+ )
121
+ );
122
+ }
123
+
124
+ .#{iv.$class-prefix}button {
125
+ @include cv.register-vars(
126
+ (
127
+ "button-h": #{$button-h},
128
+ "button-s": #{$button-s},
129
+ "button-l": #{$button-l},
130
+ "button-background-l": #{$button-background-l},
131
+ "button-background-l-delta": #{$button-background-l-delta},
132
+ "button-hover-background-l-delta": #{$button-hover-background-l-delta},
133
+ "button-active-background-l-delta": #{$button-active-background-l-delta},
134
+ "button-color-l": #{$button-color-l},
135
+ "button-border-l": #{$button-border-l},
136
+ "button-border-l-delta": #{$button-border-l-delta},
137
+ "button-hover-border-l-delta": #{$button-hover-border-l-delta},
138
+ "button-active-border-l-delta": #{$button-active-border-l-delta},
139
+ "button-focus-border-l-delta": #{$button-focus-border-l-delta},
140
+ "button-outer-shadow-h": #{$button-outer-shadow-h},
141
+ "button-outer-shadow-s": #{$button-outer-shadow-s},
142
+ "button-outer-shadow-l": #{$button-outer-shadow-l},
143
+ "button-outer-shadow-a": #{$button-outer-shadow-a},
144
+ "loading-color":
145
+ hsl(
146
+ #{cv.getVar("button-h")},
147
+ #{cv.getVar("button-s")},
148
+ #{cv.getVar("button-color-l")}
149
+ ),
150
+ )
151
+ );
152
+
153
+ @extend %control;
154
+ @extend %unselectable;
155
+
156
+ background-color: hsl(
157
+ #{cv.getVar("button-h")},
158
+ #{cv.getVar("button-s")},
159
+ calc(
160
+ #{cv.getVar("button-background-l")} + #{cv.getVar(
161
+ "button-background-l-delta"
162
+ )}
163
+ )
164
+ );
165
+ border-color: hsl(
166
+ #{cv.getVar("button-h")},
167
+ #{cv.getVar("button-s")},
168
+ calc(
169
+ #{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")}
170
+ )
171
+ );
172
+ border-style: cv.getVar("button-border-style");
173
+ border-width: cv.getVar("button-border-width");
174
+ box-shadow:
175
+ 0px 0.0625em 0.125em
176
+ hsla(
177
+ cv.getVar("button-outer-shadow-h"),
178
+ cv.getVar("button-outer-shadow-s"),
179
+ cv.getVar("button-outer-shadow-l"),
180
+ cv.getVar("button-outer-shadow-a")
181
+ ),
182
+ 0px 0.125em 0.25em
183
+ hsla(
184
+ cv.getVar("button-outer-shadow-h"),
185
+ cv.getVar("button-outer-shadow-s"),
186
+ cv.getVar("button-outer-shadow-l"),
187
+ cv.getVar("button-outer-shadow-a")
188
+ );
189
+ color: hsl(
190
+ #{cv.getVar("button-h")},
191
+ #{cv.getVar("button-s")},
192
+ #{cv.getVar("button-color-l")}
193
+ );
194
+ cursor: pointer;
195
+ font-weight: cv.getVar("button-weight");
196
+ height: auto;
197
+ justify-content: center;
198
+ padding-bottom: calc(
199
+ #{cv.getVar("button-padding-vertical")} - #{cv.getVar(
200
+ "button-border-width"
201
+ )}
202
+ );
203
+ padding-left: calc(
204
+ #{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
205
+ "button-border-width"
206
+ )}
207
+ );
208
+ padding-right: calc(
209
+ #{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
210
+ "button-border-width"
211
+ )}
212
+ );
213
+ padding-top: calc(
214
+ #{cv.getVar("button-padding-vertical")} - #{cv.getVar(
215
+ "button-border-width"
216
+ )}
217
+ );
218
+ text-align: center;
219
+ white-space: nowrap;
220
+
221
+ @if $button-family {
222
+ font-family: cv.getVar("button-family");
223
+ }
224
+
225
+ strong {
226
+ color: inherit;
227
+ }
228
+
229
+ .#{iv.$class-prefix}icon {
230
+ &,
231
+ &.#{iv.$class-prefix}is-small,
232
+ &.#{iv.$class-prefix}is-medium,
233
+ &.#{iv.$class-prefix}is-large {
234
+ height: 1.5em;
235
+ width: 1.5em;
236
+ }
237
+
238
+ &:first-child:not(:last-child) {
239
+ margin-inline-start: calc(
240
+ -0.5 * #{cv.getVar("button-padding-horizontal")}
241
+ );
242
+ margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25);
243
+ }
244
+
245
+ &:last-child:not(:first-child) {
246
+ margin-inline-start: calc(
247
+ #{cv.getVar("button-padding-horizontal")} * 0.25
248
+ );
249
+ margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
250
+ }
251
+
252
+ &:first-child:last-child {
253
+ margin-inline-start: calc(
254
+ -0.5 * #{cv.getVar("button-padding-horizontal")}
255
+ );
256
+ margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
257
+ }
258
+ }
259
+
260
+ // States
261
+ &:hover,
262
+ &.#{iv.$class-prefix}is-hovered {
263
+ @include cv.register-vars(
264
+ (
265
+ "button-background-l-delta": #{cv.getVar(
266
+ "button-hover-background-l-delta"
267
+ )},
268
+ "button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")},
269
+ )
270
+ );
271
+ }
272
+
273
+ &:focus-visible,
274
+ &.#{iv.$class-prefix}is-focused {
275
+ @include cv.register-var("button-border-width", 1px);
276
+
277
+ border-color: hsl(
278
+ #{cv.getVar("focus-h")},
279
+ #{cv.getVar("focus-s")},
280
+ #{cv.getVar("focus-l")}
281
+ );
282
+ box-shadow: cv.getVar("focus-shadow-size")
283
+ hsla(
284
+ cv.getVar("focus-h"),
285
+ cv.getVar("focus-s"),
286
+ cv.getVar("focus-l"),
287
+ cv.getVar("focus-shadow-alpha")
288
+ );
289
+ }
290
+
291
+ &:active,
292
+ &.#{iv.$class-prefix}is-active {
293
+ @include cv.register-vars(
294
+ (
295
+ "button-background-l-delta": #{cv.getVar(
296
+ "button-active-background-l-delta"
297
+ )},
298
+ "button-border-l-delta": #{cv.getVar("button-active-border-l-delta")},
299
+ "button-outer-shadow-a": 0,
300
+ )
301
+ );
302
+ }
303
+
304
+ &[disabled],
305
+ fieldset[disabled] & {
306
+ background-color: cv.getVar("button-disabled-background-color");
307
+ border-color: cv.getVar("button-disabled-border-color");
308
+ box-shadow: cv.getVar("button-disabled-shadow");
309
+ opacity: cv.getVar("button-disabled-opacity");
310
+ }
311
+
312
+ // Colors
313
+ @each $name, $pair in $button-colors {
314
+ &.#{iv.$class-prefix}is-#{$name} {
315
+ @include cv.register-vars(
316
+ (
317
+ "button-h": #{cv.getVar($name, "", "-h")},
318
+ "button-s": #{cv.getVar($name, "", "-s")},
319
+ "button-l": #{cv.getVar($name, "", "-l")},
320
+ "button-background-l": #{cv.getVar($name, "", "-l")},
321
+ "button-border-l": #{cv.getVar($name, "", "-l")},
322
+ "button-border-width": 0px,
323
+ "button-color-l": #{cv.getVar($name, "", "-invert-l")},
324
+ "button-outer-shadow-a": 0,
325
+ )
326
+ );
327
+
328
+ &:focus-visible,
329
+ &.#{iv.$class-prefix}is-focused {
330
+ @include cv.register-var("button-border-width", 1px);
331
+ }
332
+
333
+ @if not list.index($no-palette, $name) {
334
+ &.#{iv.$class-prefix}is-light {
335
+ @include cv.register-vars(
336
+ (
337
+ "button-background-l": #{cv.getVar("light-l")},
338
+ "button-color-l": #{cv.getVar($name, "", "-light-invert-l")},
339
+ )
340
+ );
341
+ }
342
+
343
+ &.#{iv.$class-prefix}is-dark {
344
+ @include cv.register-vars(
345
+ (
346
+ "button-background-l": #{cv.getVar("dark-l")},
347
+ "button-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
348
+ )
349
+ );
350
+ }
351
+ }
352
+
353
+ &.#{iv.$class-prefix}is-soft {
354
+ @include cv.register-vars(
355
+ (
356
+ "button-background-l": #{cv.getVar("soft-l")},
357
+ "button-color-l": #{cv.getVar("soft-invert-l")},
358
+ )
359
+ );
360
+ }
361
+
362
+ &.#{iv.$class-prefix}is-bold {
363
+ @include cv.register-vars(
364
+ (
365
+ "button-background-l": #{cv.getVar("bold-l")},
366
+ "button-color-l": #{cv.getVar("bold-invert-l")},
367
+ )
368
+ );
369
+ }
370
+
371
+ &[disabled],
372
+ fieldset[disabled] & {
373
+ background-color: cv.getVar($name);
374
+ border-color: cv.getVar($name);
375
+ box-shadow: none;
376
+ }
377
+ }
378
+ }
379
+
380
+ // Styles
381
+ &.#{iv.$class-prefix}is-outlined {
382
+ @include cv.register-vars(
383
+ (
384
+ "button-border-width": max(1px, 0.0625em),
385
+ )
386
+ );
387
+
388
+ background-color: transparent;
389
+ border-color: hsl(
390
+ #{cv.getVar("button-h")},
391
+ #{cv.getVar("button-s")},
392
+ #{cv.getVar("button-l")}
393
+ );
394
+ color: hsl(
395
+ #{cv.getVar("button-h")},
396
+ #{cv.getVar("button-s")},
397
+ #{cv.getVar("button-l")}
398
+ );
399
+
400
+ &:hover {
401
+ @include cv.register-vars(
402
+ (
403
+ "button-border-width": max(2px, 0.125em),
404
+ "button-outer-shadow-alpha": 1,
405
+ )
406
+ );
407
+ }
408
+
409
+ &:active {
410
+ @include cv.register-vars(());
411
+ }
412
+ }
413
+
414
+ &.#{iv.$class-prefix}is-inverted {
415
+ background-color: hsl(
416
+ #{cv.getVar("button-h")},
417
+ #{cv.getVar("button-s")},
418
+ calc(
419
+ #{cv.getVar("button-color-l")} + #{cv.getVar(
420
+ "button-background-l-delta"
421
+ )}
422
+ )
423
+ );
424
+ color: hsl(
425
+ #{cv.getVar("button-h")},
426
+ #{cv.getVar("button-s")},
427
+ #{cv.getVar("button-background-l")}
428
+ );
429
+ }
430
+
431
+ &.#{iv.$class-prefix}is-text {
432
+ background-color: transparent;
433
+ border-color: transparent;
434
+ color: cv.getVar("button-text-color");
435
+ text-decoration: cv.getVar("button-text-decoration");
436
+
437
+ &:hover,
438
+ &.#{iv.$class-prefix}is-hovered {
439
+ background-color: cv.getVar("button-text-hover-background-color");
440
+ color: cv.getVar("button-text-hover-color");
441
+ }
442
+
443
+ &:active,
444
+ &.#{iv.$class-prefix}is-active {
445
+ // background-color: bulmaDarken($button-text-hover-background-color, 5%);
446
+ color: cv.getVar("button-text-hover-color");
447
+ }
448
+
449
+ &[disabled],
450
+ fieldset[disabled] & {
451
+ background-color: transparent;
452
+ border-color: transparent;
453
+ box-shadow: none;
454
+ }
455
+ }
456
+
457
+ &.#{iv.$class-prefix}is-ghost {
458
+ background: cv.getVar("button-ghost-background");
459
+ border-color: cv.getVar("button-ghost-border-color");
460
+ box-shadow: none;
461
+ color: cv.getVar("button-ghost-color");
462
+ text-decoration: cv.getVar("button-ghost-decoration");
463
+
464
+ &:hover,
465
+ &.#{iv.$class-prefix}is-hovered {
466
+ color: cv.getVar("button-ghost-hover-color");
467
+ text-decoration: cv.getVar("button-ghost-hover-decoration");
468
+ }
469
+ }
470
+
471
+ // Sizes
472
+ &.#{iv.$class-prefix}is-small {
473
+ @include cv.register-vars(
474
+ (
475
+ "control-size": #{cv.getVar("size-small")},
476
+ "control-radius": #{cv.getVar("radius-small")},
477
+ )
478
+ );
479
+ }
480
+
481
+ &.#{iv.$class-prefix}is-normal {
482
+ @include cv.register-vars(
483
+ (
484
+ "control-size": #{cv.getVar("size-normal")},
485
+ "control-radius": #{cv.getVar("radius")},
486
+ )
487
+ );
488
+ }
489
+
490
+ &.#{iv.$class-prefix}is-medium {
491
+ @include cv.register-vars(
492
+ (
493
+ "control-size": #{cv.getVar("size-medium")},
494
+ "control-radius": #{cv.getVar("radius-medium")},
495
+ )
496
+ );
497
+ }
498
+
499
+ &.#{iv.$class-prefix}is-large {
500
+ @include cv.register-vars(
501
+ (
502
+ "control-size": #{cv.getVar("size-large")},
503
+ "control-radius": #{cv.getVar("radius-medium")},
504
+ )
505
+ );
506
+ }
507
+
508
+ // Modifiers
509
+ &.#{iv.$class-prefix}is-fullwidth {
510
+ display: flex;
511
+ width: 100%;
512
+ }
513
+
514
+ &.#{iv.$class-prefix}is-loading {
515
+ box-shadow: none;
516
+ color: transparent !important;
517
+ pointer-events: none;
518
+
519
+ &::after {
520
+ @extend %loader;
521
+ @include mx.center(1em);
522
+ position: absolute !important;
523
+ }
524
+ }
525
+
526
+ &.#{iv.$class-prefix}is-static {
527
+ background-color: cv.getVar("button-static-background-color");
528
+ border-color: cv.getVar("button-static-border-color");
529
+ color: cv.getVar("button-static-color");
530
+ box-shadow: none;
531
+ pointer-events: none;
532
+ }
533
+
534
+ &.#{iv.$class-prefix}is-rounded {
535
+ border-radius: cv.getVar("radius-rounded");
536
+ padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
537
+ padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
538
+ }
539
+ }
540
+
541
+ .#{iv.$class-prefix}buttons {
542
+ @extend %block;
543
+ align-items: center;
544
+ display: flex;
545
+ flex-wrap: wrap;
546
+ gap: 0.75rem;
547
+ justify-content: flex-start;
548
+
549
+ // Sizes
550
+ &.#{iv.$class-prefix}are-small {
551
+ @include cv.register-vars(
552
+ (
553
+ "control-size": #{cv.getVar("size-small")},
554
+ "control-radius": #{cv.getVar("radius-small")},
555
+ )
556
+ );
557
+ }
558
+
559
+ &.#{iv.$class-prefix}are-medium {
560
+ @include cv.register-vars(
561
+ (
562
+ "control-size": #{cv.getVar("size-medium")},
563
+ "control-radius": #{cv.getVar("radius-medium")},
564
+ )
565
+ );
566
+ }
567
+
568
+ &.#{iv.$class-prefix}are-large {
569
+ @include cv.register-vars(
570
+ (
571
+ "control-size": #{cv.getVar("size-large")},
572
+ "control-radius": #{cv.getVar("radius-large")},
573
+ )
574
+ );
575
+ }
576
+
577
+ &.#{iv.$class-prefix}has-addons {
578
+ gap: 0;
579
+
580
+ .#{iv.$class-prefix}button {
581
+ &:not(:first-child) {
582
+ border-end-start-radius: 0;
583
+ border-start-start-radius: 0;
584
+ }
585
+
586
+ &:not(:last-child) {
587
+ border-end-end-radius: 0;
588
+ border-start-end-radius: 0;
589
+ margin-inline-end: -1px;
590
+ }
591
+
592
+ &:hover,
593
+ &.#{iv.$class-prefix}is-hovered {
594
+ z-index: 2;
595
+ }
596
+
597
+ &:focus,
598
+ &.#{iv.$class-prefix}is-focused,
599
+ &:active,
600
+ &.#{iv.$class-prefix}is-active,
601
+ &.#{iv.$class-prefix}is-selected {
602
+ z-index: 3;
603
+
604
+ &:hover {
605
+ z-index: 4;
606
+ }
607
+ }
608
+
609
+ &.#{iv.$class-prefix}is-expanded {
610
+ flex-grow: 1;
611
+ flex-shrink: 1;
612
+ }
613
+ }
614
+ }
615
+
616
+ &.#{iv.$class-prefix}is-centered {
617
+ justify-content: center;
618
+ }
619
+
620
+ &.#{iv.$class-prefix}is-right {
621
+ justify-content: flex-end;
622
+ }
623
+ }
624
+
625
+ @each $bp-name, $bp-sizes in $button-responsive-sizes {
626
+ @include mx.breakpoint($bp-name) {
627
+ @each $size, $value in $bp-sizes {
628
+ @if $size != "normal" {
629
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} {
630
+ font-size: $value;
631
+ }
632
+ } @else {
633
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive,
634
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal {
635
+ font-size: $value;
636
+ }
637
+ }
638
+ }
639
+ }
640
+ }