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,330 @@
1
+ @use "shared";
2
+ @use "../utilities/css-variables" as cv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/controls";
5
+ @use "../utilities/extends";
6
+
7
+ $file-radius: cv.getVar("radius") !default;
8
+
9
+ $file-h: cv.getVar("scheme-h");
10
+ $file-s: cv.getVar("scheme-s");
11
+ $file-background-l: cv.getVar("scheme-main-ter-l");
12
+ $file-background-l-delta: 0%;
13
+ $file-hover-background-l-delta: -5%;
14
+ $file-active-background-l-delta: -10%;
15
+ $file-border-l: cv.getVar("border-l");
16
+ $file-border-l-delta: 0%;
17
+ $file-hover-border-l-delta: -10%;
18
+ $file-active-border-l-delta: -20%;
19
+ $file-cta-color-l: cv.getVar("text-strong-l");
20
+ $file-name-color-l: cv.getVar("text-strong-l");
21
+ $file-color-l-delta: 0%;
22
+ $file-hover-color-l-delta: -5%;
23
+ $file-active-color-l-delta: -10%;
24
+
25
+ $file-cta-color: cv.getVar("text") !default;
26
+ $file-cta-hover-color: cv.getVar("text-strong") !default;
27
+ $file-cta-active-color: cv.getVar("text-strong") !default;
28
+
29
+ $file-name-border-color: cv.getVar("border") !default;
30
+ $file-name-border-style: solid !default;
31
+ $file-name-border-width: 1px 1px 1px 0 !default;
32
+ $file-name-max-width: 16em !default;
33
+
34
+ $file-colors: shared.$form-colors !default;
35
+
36
+ .#{iv.$class-prefix}file {
37
+ @extend %block;
38
+ @extend %unselectable;
39
+
40
+ @include cv.register-vars(
41
+ (
42
+ "file-radius": #{$file-radius},
43
+ "file-name-border-color": #{$file-name-border-color},
44
+ "file-name-border-style": #{$file-name-border-style},
45
+ "file-name-border-width": #{$file-name-border-width},
46
+ "file-name-max-width": #{$file-name-max-width},
47
+ "file-h": #{$file-h},
48
+ "file-s": #{$file-s},
49
+ "file-background-l": #{$file-background-l},
50
+ "file-background-l-delta": #{$file-background-l-delta},
51
+ "file-hover-background-l-delta": #{$file-hover-background-l-delta},
52
+ "file-active-background-l-delta": #{$file-active-background-l-delta},
53
+ "file-border-l": #{$file-border-l},
54
+ "file-border-l-delta": #{$file-border-l-delta},
55
+ "file-hover-border-l-delta": #{$file-hover-border-l-delta},
56
+ "file-active-border-l-delta": #{$file-active-border-l-delta},
57
+ "file-cta-color-l": #{$file-cta-color-l},
58
+ "file-name-color-l": #{$file-name-color-l},
59
+ "file-color-l-delta": #{$file-color-l-delta},
60
+ "file-hover-color-l-delta": #{$file-hover-color-l-delta},
61
+ "file-active-color-l-delta": #{$file-active-color-l-delta},
62
+ )
63
+ );
64
+
65
+ align-items: stretch;
66
+ display: flex;
67
+ justify-content: flex-start;
68
+ position: relative;
69
+
70
+ // Colors
71
+ @each $name, $pair in $file-colors {
72
+ &.#{iv.$class-prefix}is-#{$name} {
73
+ @include cv.register-vars(
74
+ (
75
+ "file-h": #{cv.getVar($name, "", "-h")},
76
+ "file-s": #{cv.getVar($name, "", "-s")},
77
+ "file-background-l": #{cv.getVar($name, "", "-l")},
78
+ "file-border-l": #{cv.getVar($name, "", "-l")},
79
+ "file-cta-color-l": #{cv.getVar($name, "", "-invert-l")},
80
+ "file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
81
+ )
82
+ );
83
+ }
84
+ }
85
+
86
+ // Sizes
87
+ &.#{iv.$class-prefix}is-small {
88
+ font-size: cv.getVar("size-small");
89
+ }
90
+
91
+ &.#{iv.$class-prefix}is-normal {
92
+ font-size: cv.getVar("size-normal");
93
+ }
94
+
95
+ &.#{iv.$class-prefix}is-medium {
96
+ font-size: cv.getVar("size-medium");
97
+
98
+ .#{iv.$class-prefix}file-icon {
99
+ .#{iv.$class-prefix}fa {
100
+ font-size: 1.5rem;
101
+ }
102
+ }
103
+ }
104
+
105
+ &.#{iv.$class-prefix}is-large {
106
+ font-size: cv.getVar("size-large");
107
+
108
+ .#{iv.$class-prefix}file-icon {
109
+ .#{iv.$class-prefix}fa {
110
+ font-size: 2rem;
111
+ }
112
+ }
113
+ }
114
+
115
+ // Modifiers
116
+ &.#{iv.$class-prefix}has-name {
117
+ .#{iv.$class-prefix}file-cta {
118
+ border-end-end-radius: 0;
119
+ border-start-end-radius: 0;
120
+ }
121
+
122
+ .#{iv.$class-prefix}file-name {
123
+ border-end-start-radius: 0;
124
+ border-start-start-radius: 0;
125
+ }
126
+
127
+ &.#{iv.$class-prefix}is-empty {
128
+ .#{iv.$class-prefix}file-cta {
129
+ border-radius: cv.getVar("file-radius");
130
+ }
131
+
132
+ .#{iv.$class-prefix}file-name {
133
+ display: none;
134
+ }
135
+ }
136
+ }
137
+
138
+ &.#{iv.$class-prefix}is-boxed {
139
+ .#{iv.$class-prefix}file-label {
140
+ flex-direction: column;
141
+ }
142
+
143
+ .#{iv.$class-prefix}file-cta {
144
+ flex-direction: column;
145
+ height: auto;
146
+ padding: 1em 3em;
147
+ }
148
+
149
+ .#{iv.$class-prefix}file-name {
150
+ border-width: 0 1px 1px;
151
+ }
152
+
153
+ .#{iv.$class-prefix}file-icon {
154
+ height: 1.5em;
155
+ width: 1.5em;
156
+
157
+ .#{iv.$class-prefix}fa {
158
+ font-size: 1.5rem;
159
+ }
160
+ }
161
+
162
+ &.#{iv.$class-prefix}is-small {
163
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
164
+ font-size: 1rem;
165
+ }
166
+ }
167
+
168
+ &.#{iv.$class-prefix}is-medium {
169
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
170
+ font-size: 2rem;
171
+ }
172
+ }
173
+
174
+ &.#{iv.$class-prefix}is-large {
175
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
176
+ font-size: 2.5rem;
177
+ }
178
+ }
179
+
180
+ &.#{iv.$class-prefix}has-name {
181
+ .#{iv.$class-prefix}file-cta {
182
+ border-end-end-radius: 0;
183
+ border-end-start-radius: 0;
184
+ border-start-end-radius: cv.getVar("file-radius");
185
+ border-start-start-radius: cv.getVar("file-radius");
186
+ }
187
+
188
+ .#{iv.$class-prefix}file-name {
189
+ border-end-end-radius: cv.getVar("file-radius");
190
+ border-end-start-radius: cv.getVar("file-radius");
191
+ border-start-end-radius: 0;
192
+ border-start-start-radius: 0;
193
+ border-width: 0 1px 1px;
194
+ }
195
+ }
196
+ }
197
+
198
+ &.#{iv.$class-prefix}is-centered {
199
+ justify-content: center;
200
+ }
201
+
202
+ &.#{iv.$class-prefix}is-fullwidth {
203
+ .#{iv.$class-prefix}file-label {
204
+ width: 100%;
205
+ }
206
+
207
+ .#{iv.$class-prefix}file-name {
208
+ flex-grow: 1;
209
+ max-width: none;
210
+ }
211
+ }
212
+
213
+ &.#{iv.$class-prefix}is-right {
214
+ justify-content: flex-end;
215
+
216
+ .#{iv.$class-prefix}file-cta {
217
+ border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0;
218
+ }
219
+
220
+ .#{iv.$class-prefix}file-name {
221
+ border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius");
222
+ border-width: 1px 0 1px 1px;
223
+ order: -1;
224
+ }
225
+ }
226
+ }
227
+
228
+ .#{iv.$class-prefix}file-label {
229
+ align-items: stretch;
230
+ display: flex;
231
+ cursor: pointer;
232
+ justify-content: flex-start;
233
+ overflow: hidden;
234
+ position: relative;
235
+
236
+ &:hover {
237
+ @include cv.register-vars(
238
+ (
239
+ "file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")},
240
+ "file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")},
241
+ "file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")},
242
+ )
243
+ );
244
+ }
245
+
246
+ &:active {
247
+ @include cv.register-vars(
248
+ (
249
+ "file-background-l-delta": #{cv.getVar("file-active-background-l-delta")},
250
+ "file-border-l-delta": #{cv.getVar("file-active-border-l-delta")},
251
+ "file-color-l-delta": #{cv.getVar("file-active-color-l-delta")},
252
+ )
253
+ );
254
+ }
255
+ }
256
+
257
+ .#{iv.$class-prefix}file-input {
258
+ height: 100%;
259
+ left: 0;
260
+ opacity: 0;
261
+ outline: none;
262
+ position: absolute;
263
+ top: 0;
264
+ width: 100%;
265
+ }
266
+
267
+ .#{iv.$class-prefix}file-cta,
268
+ .#{iv.$class-prefix}file-name {
269
+ @extend %control;
270
+ border-color: hsl(
271
+ cv.getVar("file-h"),
272
+ cv.getVar("file-s"),
273
+ calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")})
274
+ );
275
+ border-radius: cv.getVar("file-radius");
276
+ font-size: 1em;
277
+ padding-left: 1em;
278
+ padding-right: 1em;
279
+ white-space: nowrap;
280
+ }
281
+
282
+ .#{iv.$class-prefix}file-cta {
283
+ background-color: hsl(
284
+ cv.getVar("file-h"),
285
+ cv.getVar("file-s"),
286
+ calc(
287
+ #{cv.getVar("file-background-l")} + #{cv.getVar(
288
+ "file-background-l-delta"
289
+ )}
290
+ )
291
+ );
292
+ color: hsl(
293
+ cv.getVar("file-h"),
294
+ cv.getVar("file-s"),
295
+ calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")})
296
+ );
297
+ }
298
+
299
+ .#{iv.$class-prefix}file-name {
300
+ border-color: hsl(
301
+ cv.getVar("file-h"),
302
+ cv.getVar("file-s"),
303
+ calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")})
304
+ );
305
+ border-style: cv.getVar("file-name-border-style");
306
+ border-width: cv.getVar("file-name-border-width");
307
+ color: hsl(
308
+ cv.getVar("file-h"),
309
+ cv.getVar("file-s"),
310
+ calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")})
311
+ );
312
+ display: block;
313
+ max-width: cv.getVar("file-name-max-width");
314
+ overflow: hidden;
315
+ text-align: inherit;
316
+ text-overflow: ellipsis;
317
+ }
318
+
319
+ .#{iv.$class-prefix}file-icon {
320
+ align-items: center;
321
+ display: flex;
322
+ height: 1em;
323
+ justify-content: center;
324
+ margin-inline-end: 0.5em;
325
+ width: 1em;
326
+
327
+ .#{iv.$class-prefix}fa {
328
+ font-size: 1rem;
329
+ }
330
+ }
@@ -0,0 +1,123 @@
1
+ @use "shared";
2
+ @use "../utilities/css-variables" as cv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/controls";
5
+
6
+ $textarea-padding: cv.getVar("control-padding-horizontal") !default;
7
+ $textarea-max-height: 40em !default;
8
+ $textarea-min-height: 8em !default;
9
+
10
+ $textarea-colors: shared.$form-colors !default;
11
+
12
+ %input-textarea {
13
+ @extend %input;
14
+
15
+ @include cv.register-vars(
16
+ (
17
+ "input-h": #{cv.getVar("scheme-h")},
18
+ "input-s": #{cv.getVar("scheme-s")},
19
+ "input-border-style": solid,
20
+ "input-border-width": 1px,
21
+ "input-border-l": #{cv.getVar("border-l")},
22
+ )
23
+ );
24
+
25
+ box-shadow: shared.$input-shadow;
26
+ max-width: 100%;
27
+ width: 100%;
28
+
29
+ &[readonly] {
30
+ box-shadow: none;
31
+ }
32
+
33
+ // Colors
34
+ @each $name, $pair in $textarea-colors {
35
+ $color: nth($pair, 1);
36
+
37
+ &.#{iv.$class-prefix}is-#{$name} {
38
+ @include cv.register-vars(
39
+ (
40
+ "input-h": #{cv.getVar($name, "", "-h")},
41
+ "input-s": #{cv.getVar($name, "", "-s")},
42
+ "input-l": #{cv.getVar($name, "", "-l")},
43
+ "input-focus-h": #{cv.getVar($name, "", "-h")},
44
+ "input-focus-s": #{cv.getVar($name, "", "-s")},
45
+ "input-focus-l": #{cv.getVar($name, "", "-l")},
46
+ "input-border-l": #{cv.getVar($name, "", "-l")},
47
+ )
48
+ );
49
+ }
50
+ }
51
+
52
+ // Sizes
53
+ &.#{iv.$class-prefix}is-small {
54
+ @include controls.control-small;
55
+ }
56
+
57
+ &.#{iv.$class-prefix}is-medium {
58
+ @include controls.control-medium;
59
+ }
60
+
61
+ &.#{iv.$class-prefix}is-large {
62
+ @include controls.control-large;
63
+ }
64
+
65
+ // Modifiers
66
+ &.#{iv.$class-prefix}is-fullwidth {
67
+ display: block;
68
+ width: 100%;
69
+ }
70
+
71
+ &.#{iv.$class-prefix}is-inline {
72
+ display: inline;
73
+ width: auto;
74
+ }
75
+ }
76
+
77
+ .#{iv.$class-prefix}input {
78
+ @extend %input-textarea;
79
+
80
+ &.#{iv.$class-prefix}is-rounded {
81
+ border-radius: cv.getVar("radius-rounded");
82
+ padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em);
83
+ padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em);
84
+ }
85
+
86
+ &.#{iv.$class-prefix}is-static {
87
+ background-color: transparent;
88
+ border-color: transparent;
89
+ box-shadow: none;
90
+ padding-left: 0;
91
+ padding-right: 0;
92
+ }
93
+ }
94
+
95
+ .#{iv.$class-prefix}textarea {
96
+ @extend %input-textarea;
97
+ @include cv.register-vars(
98
+ (
99
+ "textarea-padding": #{$textarea-padding},
100
+ "textarea-max-height": #{$textarea-max-height},
101
+ "textarea-min-height": #{$textarea-min-height},
102
+ )
103
+ );
104
+ display: block;
105
+ max-width: 100%;
106
+ min-width: 100%;
107
+ padding: cv.getVar("textarea-padding");
108
+ resize: vertical;
109
+
110
+ &:not([rows]) {
111
+ max-height: cv.getVar("textarea-max-height");
112
+ min-height: cv.getVar("textarea-min-height");
113
+ }
114
+
115
+ &[rows] {
116
+ height: initial;
117
+ }
118
+
119
+ // Modifiers
120
+ &.#{iv.$class-prefix}has-fixed-size {
121
+ resize: none;
122
+ }
123
+ }
@@ -0,0 +1,143 @@
1
+ @use "shared";
2
+ @use "../utilities/controls";
3
+ @use "../utilities/css-variables" as cv;
4
+ @use "../utilities/initial-variables" as iv;
5
+ @use "../utilities/extends";
6
+
7
+ $select-colors: shared.$form-colors !default;
8
+
9
+ .#{iv.$class-prefix}select {
10
+ @include cv.register-vars(
11
+ (
12
+ "input-h": #{cv.getVar("scheme-h")},
13
+ "input-s": #{cv.getVar("scheme-s")},
14
+ "input-border-style": solid,
15
+ "input-border-width": 1px,
16
+ "input-border-l": #{cv.getVar("border-l")},
17
+ )
18
+ );
19
+
20
+ display: inline-block;
21
+ max-width: 100%;
22
+ position: relative;
23
+ vertical-align: top;
24
+
25
+ &:not(.#{iv.$class-prefix}is-multiple) {
26
+ height: shared.$input-height;
27
+ }
28
+
29
+ &:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) {
30
+ &::after {
31
+ @extend %arrow;
32
+ inset-inline-end: 1.125em;
33
+ z-index: 4;
34
+ }
35
+ }
36
+
37
+ &.#{iv.$class-prefix}is-rounded {
38
+ select {
39
+ border-radius: cv.getVar("radius-rounded");
40
+ padding-inline-start: 1em;
41
+ }
42
+ }
43
+
44
+ select {
45
+ @extend %input;
46
+ cursor: pointer;
47
+ display: block;
48
+ font-size: 1em;
49
+ max-width: 100%;
50
+ outline: none;
51
+
52
+ &::-ms-expand {
53
+ display: none;
54
+ }
55
+
56
+ &[disabled]:hover,
57
+ fieldset[disabled] &:hover {
58
+ border-color: shared.$input-disabled-border-color;
59
+ }
60
+
61
+ &:not([multiple]) {
62
+ padding-inline-end: 2.5em;
63
+ }
64
+
65
+ &[multiple] {
66
+ height: auto;
67
+ padding: 0;
68
+
69
+ option {
70
+ padding: 0.5em 1em;
71
+ }
72
+ }
73
+ }
74
+
75
+ // Colors
76
+ @each $name, $pair in $select-colors {
77
+ &.#{iv.$class-prefix}is-#{$name} {
78
+ @include cv.register-vars(
79
+ (
80
+ "input-h": #{cv.getVar($name, "", "-h")},
81
+ "input-s": #{cv.getVar($name, "", "-s")},
82
+ "input-l": #{cv.getVar($name, "", "-l")},
83
+ "input-focus-h": #{cv.getVar($name, "", "-h")},
84
+ "input-focus-s": #{cv.getVar($name, "", "-s")},
85
+ "input-focus-l": #{cv.getVar($name, "", "-l")},
86
+ "input-border-l": #{cv.getVar($name, "", "-l")},
87
+ )
88
+ );
89
+ }
90
+ }
91
+
92
+ // Sizes
93
+ &.#{iv.$class-prefix}is-small {
94
+ @include controls.control-small;
95
+ }
96
+
97
+ &.#{iv.$class-prefix}is-medium {
98
+ @include controls.control-medium;
99
+ }
100
+
101
+ &.#{iv.$class-prefix}is-large {
102
+ @include controls.control-large;
103
+ }
104
+
105
+ // Modifiers
106
+ &.#{iv.$class-prefix}is-disabled {
107
+ &::after {
108
+ border-color: shared.$input-disabled-color !important;
109
+ opacity: 0.5;
110
+ }
111
+ }
112
+
113
+ &.#{iv.$class-prefix}is-fullwidth {
114
+ width: 100%;
115
+
116
+ select {
117
+ width: 100%;
118
+ }
119
+ }
120
+
121
+ &.#{iv.$class-prefix}is-loading {
122
+ &::after {
123
+ @extend %loader;
124
+ inset-inline-end: 0.625em;
125
+ margin-top: 0;
126
+ position: absolute;
127
+ top: 0.625em;
128
+ transform: none;
129
+ }
130
+
131
+ &.#{iv.$class-prefix}is-small:after {
132
+ font-size: cv.getVar("size-small");
133
+ }
134
+
135
+ &.#{iv.$class-prefix}is-medium:after {
136
+ font-size: cv.getVar("size-medium");
137
+ }
138
+
139
+ &.#{iv.$class-prefix}is-large:after {
140
+ font-size: cv.getVar("size-large");
141
+ }
142
+ }
143
+ }