bulma-rails 0.9.3 → 1.0.0

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 +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 +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 -166
  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 -345
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -159
  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 -133
  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 -87
  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 -136
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -280
@@ -0,0 +1,261 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $table-color: cv.getVar("text-strong") !default;
8
+ $table-background-color: cv.getVar("scheme-main") !default;
9
+
10
+ $table-cell-border-color: cv.getVar("border") !default;
11
+ $table-cell-border-style: solid !default;
12
+ $table-cell-border-width: 0 0 1px !default;
13
+ $table-cell-padding: 0.5em 0.75em !default;
14
+ $table-cell-heading-color: cv.getVar("text-strong") !default;
15
+ $table-cell-text-align: left !default;
16
+
17
+ $table-head-cell-border-width: 0 0 2px !default;
18
+ $table-head-cell-color: cv.getVar("text-strong") !default;
19
+ $table-foot-cell-border-width: 2px 0 0 !default;
20
+ $table-foot-cell-color: cv.getVar("text-strong") !default;
21
+
22
+ $table-head-background-color: transparent !default;
23
+ $table-body-background-color: transparent !default;
24
+ $table-foot-background-color: transparent !default;
25
+
26
+ $table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
27
+
28
+ $table-row-active-background-color: cv.getVar("primary") !default;
29
+ $table-row-active-color: cv.getVar("primary-invert") !default;
30
+
31
+ $table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
32
+ $table-striped-row-even-hover-background-color: cv.getVar(
33
+ "scheme-main-ter"
34
+ ) !default;
35
+
36
+ $table-colors: dv.$colors !default;
37
+
38
+ .#{iv.$class-prefix}table {
39
+ @include cv.register-vars(
40
+ (
41
+ "table-color": #{$table-color},
42
+ "table-background-color": #{$table-background-color},
43
+ "table-cell-border-color": #{$table-cell-border-color},
44
+ "table-cell-border-style": #{$table-cell-border-style},
45
+ "table-cell-border-width": #{$table-cell-border-width},
46
+ "table-cell-padding": #{$table-cell-padding},
47
+ "table-cell-heading-color": #{$table-cell-heading-color},
48
+ "table-cell-text-align": #{$table-cell-text-align},
49
+ "table-head-cell-border-width": #{$table-head-cell-border-width},
50
+ "table-head-cell-color": #{$table-head-cell-color},
51
+ "table-foot-cell-border-width": #{$table-foot-cell-border-width},
52
+ "table-foot-cell-color": #{$table-foot-cell-color},
53
+ "table-head-background-color": #{$table-head-background-color},
54
+ "table-body-background-color": #{$table-body-background-color},
55
+ "table-foot-background-color": #{$table-foot-background-color},
56
+ "table-row-hover-background-color": #{$table-row-hover-background-color},
57
+ "table-row-active-background-color": #{$table-row-active-background-color},
58
+ "table-row-active-color": #{$table-row-active-color},
59
+ "table-striped-row-even-background-color": #{$table-striped-row-even-background-color},
60
+ "table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color},
61
+ )
62
+ );
63
+ }
64
+
65
+ .#{iv.$class-prefix}table {
66
+ @extend %block;
67
+
68
+ background-color: cv.getVar("table-background-color");
69
+ color: cv.getVar("table-color");
70
+
71
+ td,
72
+ th {
73
+ background-color: cv.getVar("table-cell-background-color");
74
+ border-color: cv.getVar("table-cell-border-color");
75
+ border-style: cv.getVar("table-cell-border-style");
76
+ border-width: cv.getVar("table-cell-border-width");
77
+ color: cv.getVar("table-color");
78
+ padding: cv.getVar("table-cell-padding");
79
+ vertical-align: top;
80
+
81
+ // Colors
82
+ @each $name, $pair in $table-colors {
83
+ &.#{iv.$class-prefix}is-#{$name} {
84
+ @include cv.register-vars(
85
+ (
86
+ "table-color": #{cv.getVar($name, "", "-invert")},
87
+ "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
88
+ "table-cell-background-color": #{cv.getVar($name)},
89
+ "table-cell-border-color": #{cv.getVar($name)},
90
+ )
91
+ );
92
+ }
93
+ }
94
+
95
+ // Modifiers
96
+ &.#{iv.$class-prefix}is-narrow {
97
+ white-space: nowrap;
98
+ width: 1%;
99
+ }
100
+
101
+ &.#{iv.$class-prefix}is-selected {
102
+ background-color: cv.getVar("table-row-active-background-color");
103
+ color: cv.getVar("table-row-active-color");
104
+
105
+ a,
106
+ strong {
107
+ color: currentColor;
108
+ }
109
+ }
110
+
111
+ &.#{iv.$class-prefix}is-vcentered {
112
+ vertical-align: middle;
113
+ }
114
+ }
115
+
116
+ th {
117
+ color: cv.getVar("table-cell-heading-color");
118
+
119
+ &:not([align]) {
120
+ text-align: cv.getVar("table-cell-text-align");
121
+ }
122
+ }
123
+
124
+ tr {
125
+ &.#{iv.$class-prefix}is-selected {
126
+ background-color: cv.getVar("table-row-active-background-color");
127
+ color: cv.getVar("table-row-active-color");
128
+
129
+ a,
130
+ strong {
131
+ color: currentColor;
132
+ }
133
+
134
+ td,
135
+ th {
136
+ border-color: cv.getVar("table-row-active-color");
137
+ color: currentColor;
138
+ }
139
+ }
140
+
141
+ @each $name, $pair in $table-colors {
142
+ &.#{iv.$class-prefix}is-#{$name} {
143
+ @include cv.register-vars(
144
+ (
145
+ "table-color": #{cv.getVar($name, "", "-invert")},
146
+ "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
147
+ "table-cell-background-color": #{cv.getVar($name)},
148
+ "table-cell-border-color": #{cv.getVar($name)},
149
+ )
150
+ );
151
+ }
152
+ }
153
+ }
154
+
155
+ thead {
156
+ background-color: cv.getVar("table-head-background-color");
157
+
158
+ td,
159
+ th {
160
+ border-width: cv.getVar("table-head-cell-border-width");
161
+ color: cv.getVar("table-head-cell-color");
162
+ }
163
+ }
164
+
165
+ tfoot {
166
+ background-color: cv.getVar("table-foot-background-color");
167
+
168
+ td,
169
+ th {
170
+ border-width: cv.getVar("table-foot-cell-border-width");
171
+ color: cv.getVar("table-foot-cell-color");
172
+ }
173
+ }
174
+
175
+ tbody {
176
+ background-color: cv.getVar("table-body-background-color");
177
+
178
+ tr {
179
+ &:last-child {
180
+ td,
181
+ th {
182
+ border-bottom-width: 0;
183
+ }
184
+ }
185
+ }
186
+ }
187
+
188
+ // Modifiers
189
+ &.#{iv.$class-prefix}is-bordered {
190
+ td,
191
+ th {
192
+ border-width: 1px;
193
+ }
194
+
195
+ tr {
196
+ &:last-child {
197
+ td,
198
+ th {
199
+ border-bottom-width: 1px;
200
+ }
201
+ }
202
+ }
203
+ }
204
+
205
+ &.#{iv.$class-prefix}is-fullwidth {
206
+ width: 100%;
207
+ }
208
+
209
+ &.#{iv.$class-prefix}is-hoverable {
210
+ tbody {
211
+ tr:not(.#{iv.$class-prefix}is-selected) {
212
+ &:hover {
213
+ background-color: cv.getVar("table-row-hover-background-color");
214
+ }
215
+ }
216
+ }
217
+
218
+ &.#{iv.$class-prefix}is-striped {
219
+ tbody {
220
+ tr:not(.#{iv.$class-prefix}is-selected) {
221
+ &:hover {
222
+ background-color: cv.getVar("table-row-hover-background-color");
223
+
224
+ &:nth-child(even) {
225
+ background-color: cv.getVar(
226
+ "table-striped-row-even-hover-background-color"
227
+ );
228
+ }
229
+ }
230
+ }
231
+ }
232
+ }
233
+ }
234
+
235
+ &.#{iv.$class-prefix}is-narrow {
236
+ td,
237
+ th {
238
+ padding: 0.25em 0.5em;
239
+ }
240
+ }
241
+
242
+ &.#{iv.$class-prefix}is-striped {
243
+ tbody {
244
+ tr:not(.#{iv.$class-prefix}is-selected) {
245
+ &:nth-child(even) {
246
+ background-color: cv.getVar(
247
+ "table-striped-row-even-background-color"
248
+ );
249
+ }
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+ .#{iv.$class-prefix}table-container {
256
+ @extend %block;
257
+ @include mx.overflow-touch;
258
+ overflow: auto;
259
+ overflow-y: hidden;
260
+ max-width: 100%;
261
+ }
@@ -0,0 +1,219 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $tag-h: cv.getVar("scheme-h");
8
+ $tag-s: cv.getVar("scheme-s");
9
+ $tag-background-l: cv.getVar("background-l");
10
+ $tag-background-l-delta: 0%;
11
+ $tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
12
+ $tag-active-background-l-delta: cv.getVar("active-background-l-delta");
13
+ $tag-color-l: cv.getVar("text-l");
14
+ $tag-radius: cv.getVar("radius") !default;
15
+ $tag-delete-margin: 1px !default;
16
+
17
+ $tag-colors: dv.$colors !default;
18
+
19
+ .#{iv.$class-prefix}tags {
20
+ @extend %block;
21
+
22
+ align-items: center;
23
+ color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
24
+ display: flex;
25
+ flex-wrap: wrap;
26
+ gap: 0.5rem;
27
+ justify-content: flex-start;
28
+
29
+ // Sizes
30
+ &.#{iv.$class-prefix}are-medium {
31
+ .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
32
+ .#{iv.$class-prefix}is-large
33
+ ) {
34
+ font-size: cv.getVar("size-normal");
35
+ }
36
+ }
37
+
38
+ &.#{iv.$class-prefix}are-large {
39
+ .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
40
+ .#{iv.$class-prefix}is-medium
41
+ ) {
42
+ font-size: cv.getVar("size-medium");
43
+ }
44
+ }
45
+
46
+ &.#{iv.$class-prefix}is-centered {
47
+ gap: 0.25rem;
48
+ justify-content: center;
49
+ }
50
+
51
+ &.#{iv.$class-prefix}is-right {
52
+ justify-content: flex-end;
53
+ }
54
+
55
+ &.#{iv.$class-prefix}has-addons {
56
+ gap: 0;
57
+
58
+ .#{iv.$class-prefix}tag {
59
+ &:not(:first-child) {
60
+ border-start-start-radius: 0; // Top left
61
+ border-end-start-radius: 0; // Top right
62
+ }
63
+
64
+ &:not(:last-child) {
65
+ border-start-end-radius: 0; // Bottom left
66
+ border-end-end-radius: 0; // Bottom right
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ .#{iv.$class-prefix}tag {
73
+ @include cv.register-vars(
74
+ (
75
+ "tag-h": #{$tag-h},
76
+ "tag-s": #{$tag-s},
77
+ "tag-background-l": #{$tag-background-l},
78
+ "tag-background-l-delta": #{$tag-background-l-delta},
79
+ "tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
80
+ "tag-active-background-l-delta": #{$tag-active-background-l-delta},
81
+ "tag-color-l": #{$tag-color-l},
82
+ "tag-radius": #{$tag-radius},
83
+ "tag-delete-margin": #{$tag-delete-margin},
84
+ )
85
+ );
86
+
87
+ align-items: center;
88
+ background-color: hsl(
89
+ cv.getVar("tag-h"),
90
+ cv.getVar("tag-s"),
91
+ calc(
92
+ #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
93
+ )
94
+ );
95
+ border-radius: $tag-radius;
96
+ color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
97
+ display: inline-flex;
98
+ font-size: cv.getVar("size-small");
99
+ height: 2em;
100
+ justify-content: center;
101
+ line-height: 1.5;
102
+ padding-left: 0.75em;
103
+ padding-right: 0.75em;
104
+ white-space: nowrap;
105
+
106
+ .#{iv.$class-prefix}delete {
107
+ margin-inline-start: 0.25rem;
108
+ margin-inline-end: -0.375rem;
109
+ }
110
+
111
+ // Colors
112
+ @each $name, $pair in $tag-colors {
113
+ &.#{iv.$class-prefix}is-#{$name} {
114
+ @include cv.register-vars(
115
+ (
116
+ "tag-h": #{cv.getVar($name, "", "-h")},
117
+ "tag-s": #{cv.getVar($name, "", "-s")},
118
+ "tag-background-l": #{cv.getVar($name, "", "-l")},
119
+ "tag-color-l": #{cv.getVar($name, "", "-invert-l")},
120
+ )
121
+ );
122
+
123
+ &.#{iv.$class-prefix}is-light {
124
+ @include cv.register-vars(
125
+ (
126
+ "tag-background-l": #{cv.getVar("light-l")},
127
+ "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
128
+ )
129
+ );
130
+ }
131
+ }
132
+ }
133
+
134
+ // Sizes
135
+ &.#{iv.$class-prefix}is-normal {
136
+ font-size: cv.getVar("size-small");
137
+ }
138
+
139
+ &.#{iv.$class-prefix}is-medium {
140
+ font-size: cv.getVar("size-normal");
141
+ }
142
+
143
+ &.#{iv.$class-prefix}is-large {
144
+ font-size: cv.getVar("size-medium");
145
+ }
146
+
147
+ .#{iv.$class-prefix}icon {
148
+ &:first-child:not(:last-child) {
149
+ margin-inline-start: -0.375em;
150
+ margin-inline-end: 0.1875em;
151
+ }
152
+
153
+ &:last-child:not(:first-child) {
154
+ margin-inline-start: 0.1875em;
155
+ margin-inline-end: -0.375em;
156
+ }
157
+
158
+ &:first-child:last-child {
159
+ margin-inline-start: -0.375em;
160
+ margin-inline-end: -0.375em;
161
+ }
162
+ }
163
+
164
+ // Modifiers
165
+ &.#{iv.$class-prefix}is-delete {
166
+ margin-inline-start: cv.getVar("tag-delete-margin");
167
+ padding: 0;
168
+ position: relative;
169
+ width: 2em;
170
+
171
+ &::before,
172
+ &::after {
173
+ background-color: currentColor;
174
+ content: "";
175
+ display: block;
176
+ left: 50%;
177
+ position: absolute;
178
+ top: 50%;
179
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
180
+ transform-origin: center center;
181
+ }
182
+
183
+ &::before {
184
+ height: 1px;
185
+ width: 50%;
186
+ }
187
+
188
+ &::after {
189
+ height: 50%;
190
+ width: 1px;
191
+ }
192
+ }
193
+
194
+ &.#{iv.$class-prefix}is-rounded {
195
+ border-radius: cv.getVar("radius-rounded");
196
+ }
197
+ }
198
+
199
+ a.#{iv.$class-prefix}tag,
200
+ button.#{iv.$class-prefix}tag,
201
+ .#{iv.$class-prefix}tag.is-hoverable {
202
+ cursor: pointer;
203
+
204
+ &:hover {
205
+ @include cv.register-vars(
206
+ (
207
+ "tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")},
208
+ )
209
+ );
210
+ }
211
+
212
+ &:active {
213
+ @include cv.register-vars(
214
+ (
215
+ "tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")},
216
+ )
217
+ );
218
+ }
219
+ }
@@ -0,0 +1,128 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $title-color: cv.getVar("text-strong") !default;
8
+ $title-family: false !default;
9
+ $title-size: cv.getVar("size-3") !default;
10
+ $title-weight: cv.getVar("weight-extrabold") !default;
11
+ $title-line-height: 1.125 !default;
12
+ $title-strong-color: inherit !default;
13
+ $title-strong-weight: inherit !default;
14
+ $title-sub-size: 0.75em !default;
15
+ $title-sup-size: 0.75em !default;
16
+
17
+ $subtitle-color: cv.getVar("text") !default;
18
+ $subtitle-family: false !default;
19
+ $subtitle-size: cv.getVar("size-5") !default;
20
+ $subtitle-weight: cv.getVar("weight-normal") !default;
21
+ $subtitle-line-height: 1.25 !default;
22
+ $subtitle-strong-color: cv.getVar("text-strong") !default;
23
+ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
24
+
25
+ .#{iv.$class-prefix}title,
26
+ .#{iv.$class-prefix}subtitle {
27
+ @include cv.register-vars(
28
+ (
29
+ "title-color": #{$title-color},
30
+ "title-family": #{$title-family},
31
+ "title-size": #{$title-size},
32
+ "title-weight": #{$title-weight},
33
+ "title-line-height": #{$title-line-height},
34
+ "title-strong-color": #{$title-strong-color},
35
+ "title-strong-weight": #{$title-strong-weight},
36
+ "title-sub-size": #{$title-sub-size},
37
+ "title-sup-size": #{$title-sup-size},
38
+ "subtitle-color": #{$subtitle-color},
39
+ "subtitle-family": #{$subtitle-family},
40
+ "subtitle-size": #{$subtitle-size},
41
+ "subtitle-weight": #{$subtitle-weight},
42
+ "subtitle-line-height": #{$subtitle-line-height},
43
+ "subtitle-strong-color": #{$subtitle-strong-color},
44
+ "subtitle-strong-weight": #{$subtitle-strong-weight},
45
+ )
46
+ );
47
+ }
48
+
49
+ .#{iv.$class-prefix}title,
50
+ .#{iv.$class-prefix}subtitle {
51
+ @extend %block;
52
+ word-break: break-word;
53
+
54
+ em,
55
+ span {
56
+ font-weight: inherit;
57
+ }
58
+
59
+ sub {
60
+ font-size: cv.getVar("title-sub-size");
61
+ }
62
+
63
+ sup {
64
+ font-size: cv.getVar("title-sup-size");
65
+ }
66
+
67
+ .#{iv.$class-prefix}tag {
68
+ vertical-align: middle;
69
+ }
70
+ }
71
+
72
+ .#{iv.$class-prefix}title {
73
+ color: cv.getVar("title-color");
74
+ font-size: cv.getVar("title-size");
75
+ font-weight: cv.getVar("title-weight");
76
+ line-height: cv.getVar("title-line-height");
77
+
78
+ @if $title-family {
79
+ font-family: cv.getVar("title-family");
80
+ }
81
+
82
+ strong {
83
+ color: cv.getVar("title-strong-color");
84
+ font-weight: cv.getVar("title-strong-weight");
85
+ }
86
+
87
+ &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) {
88
+ margin-bottom: 0;
89
+ }
90
+
91
+ // Sizes
92
+ @each $size in dv.$sizes {
93
+ $i: index(dv.$sizes, $size);
94
+
95
+ &.#{iv.$class-prefix}is-#{$i} {
96
+ font-size: $size;
97
+ }
98
+ }
99
+ }
100
+
101
+ .#{iv.$class-prefix}subtitle {
102
+ color: cv.getVar("subtitle-color");
103
+ font-size: cv.getVar("subtitle-size");
104
+ font-weight: cv.getVar("subtitle-weight");
105
+ line-height: cv.getVar("subtitle-line-height");
106
+
107
+ @if $subtitle-family {
108
+ font-family: cv.getVar("subtitle-family");
109
+ }
110
+
111
+ strong {
112
+ color: cv.getVar("subtitle-strong-color");
113
+ font-weight: cv.getVar("subtitle-strong-weight");
114
+ }
115
+
116
+ &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) {
117
+ margin-bottom: 0;
118
+ }
119
+
120
+ // Sizes
121
+ @each $size in dv.$sizes {
122
+ $i: index(dv.$sizes, $size);
123
+
124
+ &.#{iv.$class-prefix}is-#{$i} {
125
+ font-size: $size;
126
+ }
127
+ }
128
+ }
@@ -0,0 +1,9 @@
1
+ /* Bulma Form */
2
+ @charset "utf-8";
3
+
4
+ @forward "shared";
5
+ @forward "input-textarea";
6
+ @forward "checkbox-radio";
7
+ @forward "select";
8
+ @forward "file";
9
+ @forward "tools";
@@ -0,0 +1,32 @@
1
+ @use "shared";
2
+ @use "../utilities/initial-variables" as iv;
3
+
4
+ %checkbox-radio {
5
+ cursor: pointer;
6
+ display: inline-block;
7
+ line-height: 1.25;
8
+ position: relative;
9
+
10
+ input {
11
+ cursor: pointer;
12
+ }
13
+
14
+ &[disabled],
15
+ fieldset[disabled] &,
16
+ input[disabled] {
17
+ color: shared.$input-disabled-color;
18
+ cursor: not-allowed;
19
+ }
20
+ }
21
+
22
+ .#{iv.$class-prefix}checkbox {
23
+ @extend %checkbox-radio;
24
+ }
25
+
26
+ .#{iv.$class-prefix}radio {
27
+ @extend %checkbox-radio;
28
+
29
+ & + .#{iv.$class-prefix}radio {
30
+ margin-inline-start: 0.5em;
31
+ }
32
+ }