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,283 @@
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
+ $content-heading-color: #{cv.getVar("text-strong")} !default;
8
+ $content-heading-weight: #{cv.getVar("weight-extrabold")} !default;
9
+ $content-heading-line-height: 1.125 !default;
10
+
11
+ $content-block-margin-bottom: 1em !default;
12
+
13
+ $content-blockquote-background-color: #{cv.getVar("background")} !default;
14
+ $content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default;
15
+ $content-blockquote-padding: 1.25em 1.5em !default;
16
+
17
+ $content-pre-padding: 1.25em 1.5em !default;
18
+
19
+ $content-table-cell-border: 1px solid #{cv.getVar("border")} !default;
20
+ $content-table-cell-border-width: 0 0 1px !default;
21
+ $content-table-cell-padding: 0.5em 0.75em !default;
22
+ $content-table-cell-heading-color: #{cv.getVar("text-strong")} !default;
23
+ $content-table-head-cell-border-width: 0 0 2px !default;
24
+ $content-table-head-cell-color: #{cv.getVar("text-strong")} !default;
25
+ $content-table-body-last-row-cell-border-bottom-width: 0 !default;
26
+ $content-table-foot-cell-border-width: 2px 0 0 !default;
27
+ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
28
+
29
+ .#{iv.$class-prefix}content {
30
+ @include cv.register-vars(
31
+ (
32
+ "content-heading-color": #{$content-heading-color},
33
+ "content-heading-weight": #{$content-heading-weight},
34
+ "content-heading-line-height": #{$content-heading-line-height},
35
+ "content-block-margin-bottom": #{$content-block-margin-bottom},
36
+ "content-blockquote-background-color": #{$content-blockquote-background-color},
37
+ "content-blockquote-border-left": #{$content-blockquote-border-left},
38
+ "content-blockquote-padding": #{$content-blockquote-padding},
39
+ "content-pre-padding": #{$content-pre-padding},
40
+ "content-table-cell-border": #{$content-table-cell-border},
41
+ "content-table-cell-border-width": #{$content-table-cell-border-width},
42
+ "content-table-cell-padding": #{$content-table-cell-padding},
43
+ "content-table-cell-heading-color": #{$content-table-cell-heading-color},
44
+ "content-table-head-cell-border-width": #{$content-table-head-cell-border-width},
45
+ "content-table-head-cell-color": #{$content-table-head-cell-color},
46
+ "content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width},
47
+ "content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width},
48
+ "content-table-foot-cell-color": #{$content-table-foot-cell-color},
49
+ )
50
+ );
51
+ }
52
+
53
+ .#{iv.$class-prefix}content {
54
+ @extend %block;
55
+
56
+ // Inline
57
+ li + li {
58
+ margin-top: 0.25em;
59
+ }
60
+
61
+ // Block
62
+ p,
63
+ dl,
64
+ ol,
65
+ ul,
66
+ blockquote,
67
+ pre,
68
+ table {
69
+ &:not(:last-child) {
70
+ margin-bottom: cv.getVar("content-block-margin-bottom");
71
+ }
72
+ }
73
+
74
+ h1,
75
+ h2,
76
+ h3,
77
+ h4,
78
+ h5,
79
+ h6 {
80
+ color: cv.getVar("content-heading-color");
81
+ font-weight: cv.getVar("content-heading-weight");
82
+ line-height: cv.getVar("content-heading-line-height");
83
+ }
84
+
85
+ h1 {
86
+ font-size: 2em;
87
+ margin-bottom: 0.5em;
88
+
89
+ &:not(:first-child) {
90
+ margin-top: 1em;
91
+ }
92
+ }
93
+
94
+ h2 {
95
+ font-size: 1.75em;
96
+ margin-bottom: 0.5714em;
97
+
98
+ &:not(:first-child) {
99
+ margin-top: 1.1428em;
100
+ }
101
+ }
102
+
103
+ h3 {
104
+ font-size: 1.5em;
105
+ margin-bottom: 0.6666em;
106
+
107
+ &:not(:first-child) {
108
+ margin-top: 1.3333em;
109
+ }
110
+ }
111
+
112
+ h4 {
113
+ font-size: 1.25em;
114
+ margin-bottom: 0.8em;
115
+ }
116
+
117
+ h5 {
118
+ font-size: 1.125em;
119
+ margin-bottom: 0.8888em;
120
+ }
121
+
122
+ h6 {
123
+ font-size: 1em;
124
+ margin-bottom: 1em;
125
+ }
126
+
127
+ blockquote {
128
+ background-color: cv.getVar("content-blockquote-background-color");
129
+ border-inline-start: cv.getVar("content-blockquote-border-left");
130
+ padding: cv.getVar("content-blockquote-padding");
131
+ }
132
+
133
+ ol {
134
+ list-style-position: outside;
135
+ margin-inline-start: 2em;
136
+ margin-top: 1em;
137
+
138
+ &:not([type]) {
139
+ list-style-type: decimal;
140
+
141
+ &.#{iv.$class-prefix}is-lower-alpha {
142
+ list-style-type: lower-alpha;
143
+ }
144
+
145
+ &.#{iv.$class-prefix}is-lower-roman {
146
+ list-style-type: lower-roman;
147
+ }
148
+
149
+ &.#{iv.$class-prefix}is-upper-alpha {
150
+ list-style-type: upper-alpha;
151
+ }
152
+
153
+ &.#{iv.$class-prefix}is-upper-roman {
154
+ list-style-type: upper-roman;
155
+ }
156
+ }
157
+ }
158
+
159
+ ul {
160
+ list-style: disc outside;
161
+ margin-inline-start: 2em;
162
+ margin-top: 1em;
163
+
164
+ ul {
165
+ list-style-type: circle;
166
+ margin-bottom: 0.25em;
167
+ margin-top: 0.25em;
168
+
169
+ ul {
170
+ list-style-type: square;
171
+ }
172
+ }
173
+ }
174
+
175
+ dd {
176
+ margin-inline-start: 2em;
177
+ }
178
+
179
+ figure:not([class]) {
180
+ margin-left: 2em;
181
+ margin-right: 2em;
182
+ text-align: center;
183
+
184
+ &:not(:first-child) {
185
+ margin-top: 2em;
186
+ }
187
+
188
+ &:not(:last-child) {
189
+ margin-bottom: 2em;
190
+ }
191
+
192
+ img {
193
+ display: inline-block;
194
+ }
195
+
196
+ figcaption {
197
+ font-style: italic;
198
+ }
199
+ }
200
+
201
+ pre {
202
+ @include mx.overflow-touch;
203
+ overflow-x: auto;
204
+ padding: cv.getVar("content-pre-padding");
205
+ white-space: pre;
206
+ word-wrap: normal;
207
+ }
208
+
209
+ sup,
210
+ sub {
211
+ font-size: 75%;
212
+ }
213
+
214
+ table {
215
+ td,
216
+ th {
217
+ border: cv.getVar("content-table-cell-border");
218
+ border-width: cv.getVar("content-table-cell-border-width");
219
+ padding: cv.getVar("content-table-cell-padding");
220
+ vertical-align: top;
221
+ }
222
+
223
+ th {
224
+ color: cv.getVar("content-table-cell-heading-color");
225
+
226
+ &:not([align]) {
227
+ text-align: inherit;
228
+ }
229
+ }
230
+
231
+ thead {
232
+ td,
233
+ th {
234
+ border-width: cv.getVar("content-table-head-cell-border-width");
235
+ color: cv.getVar("content-table-head-cell-color");
236
+ }
237
+ }
238
+
239
+ tfoot {
240
+ td,
241
+ th {
242
+ border-width: cv.getVar("content-table-foot-cell-border-width");
243
+ color: cv.getVar("content-table-foot-cell-color");
244
+ }
245
+ }
246
+
247
+ tbody {
248
+ tr {
249
+ &:last-child {
250
+ td,
251
+ th {
252
+ border-bottom-width: cv.getVar(
253
+ "content-table-body-last-row-cell-border-bottom-width"
254
+ );
255
+ }
256
+ }
257
+ }
258
+ }
259
+ }
260
+
261
+ .#{iv.$class-prefix}tabs {
262
+ li + li {
263
+ margin-top: 0;
264
+ }
265
+ }
266
+
267
+ // Sizes
268
+ &.#{iv.$class-prefix}is-small {
269
+ font-size: cv.getVar("size-small");
270
+ }
271
+
272
+ &.#{iv.$class-prefix}is-normal {
273
+ font-size: cv.getVar("size-normal");
274
+ }
275
+
276
+ &.#{iv.$class-prefix}is-medium {
277
+ font-size: cv.getVar("size-medium");
278
+ }
279
+
280
+ &.#{iv.$class-prefix}is-large {
281
+ font-size: cv.getVar("size-large");
282
+ }
283
+ }
@@ -0,0 +1,6 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+ @use "../utilities/mixins" as mx;
3
+
4
+ .#{iv.$class-prefix}delete {
5
+ @include mx.delete;
6
+ }
@@ -0,0 +1,67 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+
4
+ $icon-dimensions: 1.5rem !default;
5
+ $icon-dimensions-small: 1rem !default;
6
+ $icon-dimensions-medium: 2rem !default;
7
+ $icon-dimensions-large: 3rem !default;
8
+ $icon-text-spacing: 0.25em !default;
9
+
10
+ .#{iv.$class-prefix}icon,
11
+ .#{iv.$class-prefix}icon-text {
12
+ @include cv.register-vars(
13
+ (
14
+ "icon-dimensions": #{$icon-dimensions},
15
+ "icon-dimensions-small": #{$icon-dimensions-small},
16
+ "icon-dimensions-medium": #{$icon-dimensions-medium},
17
+ "icon-dimensions-large": #{$icon-dimensions-large},
18
+ "icon-text-spacing": #{$icon-text-spacing},
19
+ )
20
+ );
21
+ }
22
+
23
+ .#{iv.$class-prefix}icon {
24
+ align-items: center;
25
+ display: inline-flex;
26
+ flex-shrink: 0;
27
+ justify-content: center;
28
+ height: cv.getVar("icon-dimensions");
29
+ transition-duration: cv.getVar("duration");
30
+ transition-property: color;
31
+ width: cv.getVar("icon-dimensions");
32
+
33
+ // Sizes
34
+ &.#{iv.$class-prefix}is-small {
35
+ height: cv.getVar("icon-dimensions-small");
36
+ width: cv.getVar("icon-dimensions-small");
37
+ }
38
+
39
+ &.#{iv.$class-prefix}is-medium {
40
+ height: cv.getVar("icon-dimensions-medium");
41
+ width: cv.getVar("icon-dimensions-medium");
42
+ }
43
+
44
+ &.#{iv.$class-prefix}is-large {
45
+ height: cv.getVar("icon-dimensions-large");
46
+ width: cv.getVar("icon-dimensions-large");
47
+ }
48
+ }
49
+
50
+ .#{iv.$class-prefix}icon-text {
51
+ align-items: flex-start;
52
+ color: inherit;
53
+ display: inline-flex;
54
+ flex-wrap: wrap;
55
+ gap: cv.getVar("icon-text-spacing");
56
+ line-height: cv.getVar("icon-dimensions");
57
+ vertical-align: top;
58
+
59
+ .#{iv.$class-prefix}icon {
60
+ flex-grow: 0;
61
+ flex-shrink: 0;
62
+ }
63
+ }
64
+
65
+ div.#{iv.$class-prefix}icon-text {
66
+ display: flex;
67
+ }
@@ -0,0 +1,62 @@
1
+ @use "../utilities/initial-variables" as iv;
2
+ @use "../utilities/css-variables" as cv;
3
+ @use "../utilities/mixins" as mx;
4
+
5
+ $dimensions: 16 24 32 48 64 96 128 !default;
6
+
7
+ .#{iv.$class-prefix}image {
8
+ display: block;
9
+ position: relative;
10
+
11
+ img {
12
+ display: block;
13
+ height: auto;
14
+ width: 100%;
15
+
16
+ &.#{iv.$class-prefix}is-rounded {
17
+ border-radius: cv.getVar("radius-rounded");
18
+ }
19
+ }
20
+
21
+ &.#{iv.$class-prefix}is-fullwidth {
22
+ width: 100%;
23
+ }
24
+
25
+ // Ratio
26
+ &.#{iv.$class-prefix}is-square {
27
+ img,
28
+ .#{iv.$class-prefix}has-ratio {
29
+ @include mx.overlay;
30
+ height: 100%;
31
+ width: 100%;
32
+ }
33
+ }
34
+
35
+ &.#{iv.$class-prefix}is-square {
36
+ aspect-ratio: 1;
37
+ }
38
+
39
+ @each $pair in iv.$aspect-ratios {
40
+ $w: nth($pair, 1);
41
+ $h: nth($pair, 2);
42
+
43
+ &.#{iv.$class-prefix}is-#{$w}by#{$h} {
44
+ aspect-ratio: #{$w} / #{$h};
45
+
46
+ img,
47
+ .#{iv.$class-prefix}has-ratio {
48
+ @include mx.overlay;
49
+ height: 100%;
50
+ width: 100%;
51
+ }
52
+ }
53
+ }
54
+
55
+ // Sizes
56
+ @each $dimension in $dimensions {
57
+ &.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} {
58
+ height: $dimension * 1px;
59
+ width: $dimension * 1px;
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,15 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+
4
+ .#{iv.$class-prefix}loader {
5
+ animation: spinAround 500ms infinite linear;
6
+ border: 2px solid cv.getVar("border");
7
+ border-radius: cv.getVar("radius-rounded");
8
+ border-right-color: transparent;
9
+ border-top-color: transparent;
10
+ content: "";
11
+ display: block;
12
+ height: 1em;
13
+ position: relative;
14
+ width: 1em;
15
+ }
@@ -0,0 +1,105 @@
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
+ $notification-code-background-color: cv.getVar("scheme-main") !default;
8
+ $notification-radius: cv.getVar("radius") !default;
9
+ $notification-padding: 1.375em 1.5em !default;
10
+
11
+ $notification-colors: dv.$colors !default;
12
+
13
+ .#{iv.$class-prefix}notification {
14
+ @include cv.register-vars(
15
+ (
16
+ "notification-h": #{cv.getVar("scheme-h")},
17
+ "notification-s": #{cv.getVar("scheme-s")},
18
+ "notification-background-l": #{cv.getVar("background-l")},
19
+ "notification-color-l": #{cv.getVar("text-strong-l")},
20
+ "notification-code-background-color": #{$notification-code-background-color},
21
+ "notification-radius": #{$notification-radius},
22
+ "notification-padding": #{$notification-padding},
23
+ )
24
+ );
25
+ }
26
+
27
+ .#{iv.$class-prefix}notification {
28
+ @extend %block;
29
+
30
+ background-color: hsl(
31
+ cv.getVar("notification-h"),
32
+ cv.getVar("notification-s"),
33
+ cv.getVar("notification-background-l")
34
+ );
35
+ border-radius: cv.getVar("notification-radius");
36
+ color: hsl(
37
+ cv.getVar("notification-h"),
38
+ cv.getVar("notification-s"),
39
+ cv.getVar("notification-color-l")
40
+ );
41
+ padding: cv.getVar("notification-padding");
42
+ position: relative;
43
+
44
+ a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) {
45
+ color: currentColor;
46
+ text-decoration: underline;
47
+ }
48
+
49
+ strong {
50
+ color: currentColor;
51
+ }
52
+
53
+ code,
54
+ pre {
55
+ background: cv.getVar("notification-code-background-color");
56
+ }
57
+
58
+ pre code {
59
+ background: transparent;
60
+ }
61
+
62
+ & > .#{iv.$class-prefix}delete {
63
+ position: absolute;
64
+ inset-inline-end: 1rem;
65
+ top: 1rem;
66
+ }
67
+
68
+ .#{iv.$class-prefix}title,
69
+ .#{iv.$class-prefix}subtitle,
70
+ .#{iv.$class-prefix}content {
71
+ color: currentColor;
72
+ }
73
+
74
+ // Colors
75
+ @each $name, $pair in $notification-colors {
76
+ &.#{iv.$class-prefix}is-#{$name} {
77
+ @include cv.register-vars(
78
+ (
79
+ "notification-h": #{cv.getVar($name, "", "-h")},
80
+ "notification-s": #{cv.getVar($name, "", "-s")},
81
+ "notification-background-l": #{cv.getVar($name, "", "-l")},
82
+ "notification-color-l": #{cv.getVar($name, "", "-invert-l")},
83
+ )
84
+ );
85
+
86
+ &.#{iv.$class-prefix}is-light {
87
+ @include cv.register-vars(
88
+ (
89
+ "notification-background-l": 90%,
90
+ "notification-color-l": #{cv.getVar($name, "", "-light-invert-l")},
91
+ )
92
+ );
93
+ }
94
+
95
+ &.#{iv.$class-prefix}is-dark {
96
+ @include cv.register-vars(
97
+ (
98
+ "notification-background-l": 20%,
99
+ "notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
100
+ )
101
+ );
102
+ }
103
+ }
104
+ }
105
+ }
@@ -0,0 +1,115 @@
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
+ $progress-bar-background-color: cv.getVar("border-weak") !default;
8
+ $progress-value-background-color: cv.getVar("text") !default;
9
+ $progress-border-radius: cv.getVar("radius-rounded") !default;
10
+
11
+ $progress-indeterminate-duration: 1.5s !default;
12
+
13
+ $progress-colors: dv.$colors !default;
14
+
15
+ .#{iv.$class-prefix}progress {
16
+ @include cv.register-vars(
17
+ (
18
+ "progress-border-radius": #{$progress-border-radius},
19
+ "progress-bar-background-color": #{$progress-bar-background-color},
20
+ "progress-value-background-color": #{$progress-value-background-color},
21
+ "progress-indeterminate-duration": #{$progress-indeterminate-duration},
22
+ )
23
+ );
24
+ }
25
+
26
+ .#{iv.$class-prefix}progress {
27
+ @extend %block;
28
+
29
+ appearance: none;
30
+ border: none;
31
+ border-radius: cv.getVar("progress-border-radius");
32
+ display: block;
33
+ height: cv.getVar("size-normal");
34
+ overflow: hidden;
35
+ padding: 0;
36
+ width: 100%;
37
+
38
+ &::-webkit-progress-bar {
39
+ background-color: cv.getVar("progress-bar-background-color");
40
+ }
41
+
42
+ &::-webkit-progress-value {
43
+ background-color: cv.getVar("progress-value-background-color");
44
+ }
45
+
46
+ &::-moz-progress-bar {
47
+ background-color: cv.getVar("progress-value-background-color");
48
+ }
49
+
50
+ &::-ms-fill {
51
+ background-color: cv.getVar("progress-value-background-color");
52
+ border: none;
53
+ }
54
+
55
+ // Colors
56
+ @each $name, $pair in $progress-colors {
57
+ &.#{iv.$class-prefix}is-#{$name} {
58
+ @include cv.register-var(
59
+ "progress-value-background-color",
60
+ #{cv.getVar($name)}
61
+ );
62
+ }
63
+ }
64
+
65
+ &:indeterminate {
66
+ animation-duration: cv.getVar("progress-indeterminate-duration");
67
+ animation-iteration-count: infinite;
68
+ animation-name: moveIndeterminate;
69
+ animation-timing-function: linear;
70
+ background-color: cv.getVar("progress-bar-background-color");
71
+ background-image: linear-gradient(
72
+ to right,
73
+ cv.getVar("progress-value-background-color") 30%,
74
+ cv.getVar("progress-bar-background-color") 30%
75
+ );
76
+ background-position: top left;
77
+ background-repeat: no-repeat;
78
+ background-size: 150% 150%;
79
+
80
+ &::-webkit-progress-bar {
81
+ background-color: transparent;
82
+ }
83
+
84
+ &::-moz-progress-bar {
85
+ background-color: transparent;
86
+ }
87
+
88
+ &::-ms-fill {
89
+ animation-name: none;
90
+ }
91
+ }
92
+
93
+ // Sizes
94
+ &.#{iv.$class-prefix}is-small {
95
+ height: cv.getVar("size-small");
96
+ }
97
+
98
+ &.#{iv.$class-prefix}is-medium {
99
+ height: cv.getVar("size-medium");
100
+ }
101
+
102
+ &.#{iv.$class-prefix}is-large {
103
+ height: cv.getVar("size-large");
104
+ }
105
+ }
106
+
107
+ @keyframes moveIndeterminate {
108
+ from {
109
+ background-position: 200% 0;
110
+ }
111
+
112
+ to {
113
+ background-position: (-200%) 0;
114
+ }
115
+ }