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,379 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/derived-variables" as dv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $pagination-margin: -0.25rem !default;
8
+ $pagination-min-width: cv.getVar("control-height") !default;
9
+
10
+ $pagination-item-h: cv.getVar("scheme-h");
11
+ $pagination-item-s: cv.getVar("scheme-s");
12
+ $pagination-item-l: cv.getVar("scheme-main-l");
13
+ $pagination-item-background-l-delta: 0%;
14
+ $pagination-item-hover-background-l-delta: cv.getVar(
15
+ "hover-background-l-delta"
16
+ );
17
+ $pagination-item-active-background-l-delta: cv.getVar(
18
+ "active-background-l-delta"
19
+ );
20
+ $pagination-item-border-l: cv.getVar("border-l");
21
+ $pagination-item-border-l-delta: 0%;
22
+ $pagination-item-border-style: solid !default;
23
+ $pagination-item-border-width: cv.getVar("control-border-width") !default;
24
+ $pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
25
+ $pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
26
+ $pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
27
+ $pagination-item-color-l: cv.getVar("text-strong-l");
28
+ $pagination-item-font-size: 1em !default;
29
+ $pagination-item-margin: 0.25rem !default;
30
+ $pagination-item-padding-left: 0.5em !default;
31
+ $pagination-item-padding-right: 0.5em !default;
32
+ $pagination-item-outer-shadow-h: 0;
33
+ $pagination-item-outer-shadow-s: 0%;
34
+ $pagination-item-outer-shadow-l: 20%;
35
+ $pagination-item-outer-shadow-a: 0.05;
36
+
37
+ $pagination-selected-item-h: cv.getVar("link-h");
38
+ $pagination-selected-item-s: cv.getVar("link-s");
39
+ $pagination-selected-item-l: cv.getVar("link-l");
40
+ $pagination-selected-item-background-l: cv.getVar("link-l");
41
+ $pagination-selected-item-border-l: cv.getVar("link-l");
42
+ $pagination-selected-item-color-l: cv.getVar("link-invert-l");
43
+
44
+ $pagination-nav-padding-left: 0.75em !default;
45
+ $pagination-nav-padding-right: 0.75em !default;
46
+
47
+ $pagination-disabled-color: cv.getVar("text-weak") !default;
48
+ $pagination-disabled-background-color: cv.getVar("border") !default;
49
+ $pagination-disabled-border-color: cv.getVar("border") !default;
50
+
51
+ $pagination-current-color: cv.getVar("link-invert") !default;
52
+ $pagination-current-background-color: cv.getVar("link") !default;
53
+ $pagination-current-border-color: cv.getVar("link") !default;
54
+
55
+ $pagination-ellipsis-color: cv.getVar("text-weak") !default;
56
+
57
+ $pagination-shadow-inset: inset 0 0.0625em 0.125em
58
+ hsla(
59
+ #{cv.getVar("scheme-h")},
60
+ #{cv.getVar("scheme-s")},
61
+ #{cv.getVar("scheme-invert-l")},
62
+ 0.2
63
+ ) !default;
64
+
65
+ .#{iv.$class-prefix}pagination {
66
+ @include cv.register-vars(
67
+ (
68
+ "pagination-margin": #{$pagination-margin},
69
+ "pagination-min-width": #{$pagination-min-width},
70
+ "pagination-item-h": #{$pagination-item-h},
71
+ "pagination-item-s": #{$pagination-item-s},
72
+ "pagination-item-l": #{$pagination-item-l},
73
+ "pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
74
+ "pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
75
+ "pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
76
+ "pagination-item-border-style": #{$pagination-item-border-style},
77
+ "pagination-item-border-width": #{$pagination-item-border-width},
78
+ "pagination-item-border-l": #{$pagination-item-border-l},
79
+ "pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
80
+ "pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
81
+ "pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
82
+ "pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
83
+ "pagination-item-color-l": #{$pagination-item-color-l},
84
+ "pagination-item-font-size": #{$pagination-item-font-size},
85
+ "pagination-item-margin": #{$pagination-item-margin},
86
+ "pagination-item-padding-left": #{$pagination-item-padding-left},
87
+ "pagination-item-padding-right": #{$pagination-item-padding-right},
88
+ "pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
89
+ "pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
90
+ "pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
91
+ "pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
92
+ "pagination-nav-padding-left": #{$pagination-nav-padding-left},
93
+ "pagination-nav-padding-right": #{$pagination-nav-padding-right},
94
+ "pagination-disabled-color": #{$pagination-disabled-color},
95
+ "pagination-disabled-background-color": #{$pagination-disabled-background-color},
96
+ "pagination-disabled-border-color": #{$pagination-disabled-border-color},
97
+ "pagination-current-color": #{$pagination-current-color},
98
+ "pagination-current-background-color": #{$pagination-current-background-color},
99
+ "pagination-current-border-color": #{$pagination-current-border-color},
100
+ "pagination-ellipsis-color": #{$pagination-ellipsis-color},
101
+ "pagination-shadow-inset": #{$pagination-shadow-inset},
102
+ "pagination-selected-item-h": #{$pagination-selected-item-h},
103
+ "pagination-selected-item-s": #{$pagination-selected-item-s},
104
+ "pagination-selected-item-l": #{$pagination-selected-item-l},
105
+ "pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
106
+ "pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
107
+ "pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
108
+ )
109
+ );
110
+ }
111
+
112
+ .#{iv.$class-prefix}pagination {
113
+ @extend %block;
114
+
115
+ font-size: cv.getVar("size-normal");
116
+ margin: cv.getVar("pagination-margin");
117
+
118
+ // Sizes
119
+ &.#{iv.$class-prefix}is-small {
120
+ font-size: cv.getVar("size-small");
121
+ }
122
+
123
+ &.#{iv.$class-prefix}is-medium {
124
+ font-size: cv.getVar("size-medium");
125
+ }
126
+
127
+ &.#{iv.$class-prefix}is-large {
128
+ font-size: cv.getVar("size-large");
129
+ }
130
+
131
+ &.#{iv.$class-prefix}is-rounded {
132
+ .#{iv.$class-prefix}pagination-previous,
133
+ .#{iv.$class-prefix}pagination-next {
134
+ padding-left: 1em;
135
+ padding-right: 1em;
136
+ border-radius: cv.getVar("radius-rounded");
137
+ }
138
+
139
+ .#{iv.$class-prefix}pagination-link {
140
+ border-radius: cv.getVar("radius-rounded");
141
+ }
142
+ }
143
+ }
144
+
145
+ .#{iv.$class-prefix}pagination,
146
+ .#{iv.$class-prefix}pagination-list {
147
+ align-items: center;
148
+ display: flex;
149
+ justify-content: center;
150
+ text-align: center;
151
+ }
152
+
153
+ .#{iv.$class-prefix}pagination-previous,
154
+ .#{iv.$class-prefix}pagination-next,
155
+ .#{iv.$class-prefix}pagination-link,
156
+ .#{iv.$class-prefix}pagination-ellipsis {
157
+ @extend %control;
158
+ @extend %unselectable;
159
+ color: hsl(
160
+ #{cv.getVar("pagination-item-h")},
161
+ #{cv.getVar("pagination-item-s")},
162
+ #{cv.getVar("pagination-item-color-l")}
163
+ );
164
+ font-size: cv.getVar("pagination-item-font-size");
165
+ justify-content: center;
166
+ margin: cv.getVar("pagination-item-margin");
167
+ padding-left: cv.getVar("pagination-item-padding-left");
168
+ padding-right: cv.getVar("pagination-item-padding-right");
169
+ text-align: center;
170
+ }
171
+
172
+ .#{iv.$class-prefix}pagination-previous,
173
+ .#{iv.$class-prefix}pagination-next,
174
+ .#{iv.$class-prefix}pagination-link {
175
+ background-color: hsl(
176
+ #{cv.getVar("pagination-item-h")},
177
+ #{cv.getVar("pagination-item-s")},
178
+ calc(
179
+ #{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
180
+ "pagination-item-background-l-delta"
181
+ )}
182
+ )
183
+ );
184
+ border-color: hsl(
185
+ #{cv.getVar("pagination-item-h")},
186
+ #{cv.getVar("pagination-item-s")},
187
+ calc(
188
+ #{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
189
+ "pagination-item-border-l-delta"
190
+ )}
191
+ )
192
+ );
193
+ border-style: cv.getVar("pagination-item-border-style");
194
+ border-width: cv.getVar("pagination-item-border-width");
195
+ box-shadow:
196
+ 0px 0.0625em 0.125em
197
+ hsla(
198
+ cv.getVar("pagination-item-outer-shadow-h"),
199
+ cv.getVar("pagination-item-outer-shadow-s"),
200
+ cv.getVar("pagination-item-outer-shadow-l"),
201
+ cv.getVar("pagination-item-outer-shadow-a")
202
+ ),
203
+ 0px 0.125em 0.25em
204
+ hsla(
205
+ cv.getVar("pagination-item-outer-shadow-h"),
206
+ cv.getVar("pagination-item-outer-shadow-s"),
207
+ cv.getVar("pagination-item-outer-shadow-l"),
208
+ cv.getVar("pagination-item-outer-shadow-a")
209
+ );
210
+ color: hsl(
211
+ #{cv.getVar("pagination-item-h")},
212
+ #{cv.getVar("pagination-item-s")},
213
+ #{cv.getVar("pagination-item-color-l")}
214
+ );
215
+ min-width: cv.getVar("pagination-min-width");
216
+ transition-duration: cv.getVar("duration");
217
+ transition-property: background-color, border-color, box-shadow, color;
218
+
219
+ &:hover {
220
+ @include cv.register-vars(
221
+ (
222
+ "pagination-item-background-l-delta": #{cv.getVar(
223
+ "pagination-item-hover-background-l-delta"
224
+ )},
225
+ "pagination-item-border-l-delta": #{cv.getVar(
226
+ "pagination-item-hover-border-l-delta"
227
+ )},
228
+ )
229
+ );
230
+ }
231
+
232
+ &:focus {
233
+ @include cv.register-vars(
234
+ (
235
+ "pagination-item-background-l-delta": #{cv.getVar(
236
+ "pagination-item-hover-background-l-delta"
237
+ )},
238
+ "pagination-item-border-l-delta": #{cv.getVar(
239
+ "pagination-item-hover-border-l-delta"
240
+ )},
241
+ )
242
+ );
243
+ }
244
+
245
+ &:active {
246
+ box-shadow: cv.getVar("pagination-shadow-inset");
247
+ }
248
+
249
+ &[disabled],
250
+ &.#{iv.$class-prefix}is-disabled {
251
+ background-color: cv.getVar("pagination-disabled-background-color");
252
+ border-color: cv.getVar("pagination-disabled-border-color");
253
+ box-shadow: none;
254
+ color: cv.getVar("pagination-disabled-color");
255
+ opacity: 0.5;
256
+ }
257
+ }
258
+
259
+ .#{iv.$class-prefix}pagination-previous,
260
+ .#{iv.$class-prefix}pagination-next {
261
+ padding-left: cv.getVar("pagination-nav-padding-left");
262
+ padding-right: cv.getVar("pagination-nav-padding-right");
263
+ white-space: nowrap;
264
+ }
265
+
266
+ .#{iv.$class-prefix}pagination-link {
267
+ &.#{iv.$class-prefix}is-current,
268
+ &.#{iv.$class-prefix}is-selected {
269
+ @include cv.register-vars(
270
+ (
271
+ "pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
272
+ "pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
273
+ "pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
274
+ "pagination-item-background-l": #{cv.getVar(
275
+ "pagination-selected-item-background-l"
276
+ )},
277
+ "pagination-item-border-l": #{cv.getVar(
278
+ "pagination-selected-item-border-l"
279
+ )},
280
+ "pagination-item-color-l": #{cv.getVar(
281
+ "pagination-selected-item-color-l"
282
+ )},
283
+ )
284
+ );
285
+ }
286
+ }
287
+
288
+ .#{iv.$class-prefix}pagination-ellipsis {
289
+ color: cv.getVar("pagination-ellipsis-color");
290
+ pointer-events: none;
291
+ }
292
+
293
+ .#{iv.$class-prefix}pagination-list {
294
+ flex-wrap: wrap;
295
+
296
+ li {
297
+ list-style: none;
298
+ }
299
+ }
300
+
301
+ @include mx.mobile {
302
+ .#{iv.$class-prefix}pagination {
303
+ flex-wrap: wrap;
304
+ }
305
+
306
+ .#{iv.$class-prefix}pagination-previous,
307
+ .#{iv.$class-prefix}pagination-next {
308
+ flex-grow: 1;
309
+ flex-shrink: 1;
310
+ }
311
+
312
+ .#{iv.$class-prefix}pagination-list {
313
+ li {
314
+ flex-grow: 1;
315
+ flex-shrink: 1;
316
+ }
317
+ }
318
+ }
319
+
320
+ @include mx.tablet {
321
+ .#{iv.$class-prefix}pagination-list {
322
+ flex-grow: 1;
323
+ flex-shrink: 1;
324
+ justify-content: flex-start;
325
+ order: 1;
326
+ }
327
+
328
+ .#{iv.$class-prefix}pagination-previous,
329
+ .#{iv.$class-prefix}pagination-next,
330
+ .#{iv.$class-prefix}pagination-link,
331
+ .#{iv.$class-prefix}pagination-ellipsis {
332
+ margin-bottom: 0;
333
+ margin-top: 0;
334
+ }
335
+
336
+ .#{iv.$class-prefix}pagination-previous {
337
+ order: 2;
338
+ }
339
+
340
+ .#{iv.$class-prefix}pagination-next {
341
+ order: 3;
342
+ }
343
+
344
+ .#{iv.$class-prefix}pagination {
345
+ justify-content: space-between;
346
+ margin-bottom: 0;
347
+ margin-top: 0;
348
+
349
+ &.#{iv.$class-prefix}is-centered {
350
+ .#{iv.$class-prefix}pagination-previous {
351
+ order: 1;
352
+ }
353
+
354
+ .#{iv.$class-prefix}pagination-list {
355
+ justify-content: center;
356
+ order: 2;
357
+ }
358
+
359
+ .#{iv.$class-prefix}pagination-next {
360
+ order: 3;
361
+ }
362
+ }
363
+
364
+ &.#{iv.$class-prefix}is-right {
365
+ .#{iv.$class-prefix}pagination-previous {
366
+ order: 1;
367
+ }
368
+
369
+ .#{iv.$class-prefix}pagination-next {
370
+ order: 2;
371
+ }
372
+
373
+ .#{iv.$class-prefix}pagination-list {
374
+ justify-content: flex-end;
375
+ order: 3;
376
+ }
377
+ }
378
+ }
379
+ }
@@ -0,0 +1,218 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/derived-variables" as dv;
4
+ @use "../utilities/extends";
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $panel-margin: cv.getVar("block-spacing") !default;
8
+ $panel-item-border: 1px solid cv.getVar("border-weak") !default;
9
+ $panel-radius: cv.getVar("radius-large") !default;
10
+ $panel-shadow: cv.getVar("shadow") !default;
11
+
12
+ $panel-heading-line-height: 1.25 !default;
13
+ $panel-heading-padding: 1em 1.25em !default;
14
+ $panel-heading-radius: cv.getVar("radius") !default;
15
+ $panel-heading-size: 1.25em !default;
16
+ $panel-heading-weight: cv.getVar("weight-bold") !default;
17
+
18
+ $panel-tabs-font-size: 1em !default;
19
+ $panel-tab-border-bottom-color: cv.getVar("border") !default;
20
+ $panel-tab-border-bottom-style: solid !default;
21
+ $panel-tab-border-bottom-width: 1px !default;
22
+ $panel-tab-active-color: cv.getVar("link-active") !default;
23
+
24
+ $panel-list-item-color: cv.getVar("text") !default;
25
+ $panel-list-item-hover-color: cv.getVar("link") !default;
26
+
27
+ $panel-block-color: cv.getVar("text-strong") !default;
28
+ $panel-block-hover-background-color: cv.getVar("background") !default;
29
+ $panel-block-active-border-left-color: cv.getVar("link") !default;
30
+ $panel-block-active-color: cv.getVar("link-active") !default;
31
+ $panel-block-active-icon-color: cv.getVar("link") !default;
32
+
33
+ $panel-icon-color: cv.getVar("text-weak") !default;
34
+ $panel-colors: dv.$colors !default;
35
+
36
+ .#{iv.$class-prefix}panel {
37
+ @include cv.register-vars(
38
+ (
39
+ "panel-margin": #{$panel-margin},
40
+ "panel-item-border": #{$panel-item-border},
41
+ "panel-radius": #{$panel-radius},
42
+ "panel-shadow": #{$panel-shadow},
43
+ "panel-heading-line-height": #{$panel-heading-line-height},
44
+ "panel-heading-padding": #{$panel-heading-padding},
45
+ "panel-heading-radius": #{$panel-heading-radius},
46
+ "panel-heading-size": #{$panel-heading-size},
47
+ "panel-heading-weight": #{$panel-heading-weight},
48
+ "panel-tabs-font-size": #{$panel-tabs-font-size},
49
+ "panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color},
50
+ "panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style},
51
+ "panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width},
52
+ "panel-tab-active-color": #{$panel-tab-active-color},
53
+ "panel-list-item-color": #{$panel-list-item-color},
54
+ "panel-list-item-hover-color": #{$panel-list-item-hover-color},
55
+ "panel-block-color": #{$panel-block-color},
56
+ "panel-block-hover-background-color": #{$panel-block-hover-background-color},
57
+ "panel-block-active-border-left-color": #{$panel-block-active-border-left-color},
58
+ "panel-block-active-color": #{$panel-block-active-color},
59
+ "panel-block-active-icon-color": #{$panel-block-active-icon-color},
60
+ "panel-icon-color": #{$panel-icon-color},
61
+ )
62
+ );
63
+ }
64
+
65
+ .#{iv.$class-prefix}panel {
66
+ @include cv.register-vars(
67
+ (
68
+ "panel-h": #{cv.getVar("scheme-h")},
69
+ "panel-s": #{cv.getVar("scheme-s")},
70
+ "panel-color-l": #{cv.getVar("text-l")},
71
+ "panel-heading-background-l": #{cv.getVar("text-l")},
72
+ "panel-heading-color-l": #{cv.getVar("text-invert-l")},
73
+ )
74
+ );
75
+
76
+ border-radius: cv.getVar("panel-radius");
77
+ box-shadow: cv.getVar("panel-shadow");
78
+ font-size: cv.getVar("size-normal");
79
+
80
+ &:not(:last-child) {
81
+ margin-bottom: cv.getVar("panel-margin");
82
+ }
83
+
84
+ // Colors
85
+ @each $name, $components in $panel-colors {
86
+ &.#{iv.$class-prefix}is-#{$name} {
87
+ @include cv.register-vars(
88
+ (
89
+ "panel-h": #{cv.getVar($name, "", "-h")},
90
+ "panel-s": #{cv.getVar($name, "", "-s")},
91
+ "panel-color-l": #{cv.getVar($name, "", "-l")},
92
+ "panel-heading-background-l": #{cv.getVar($name, "", "-l")},
93
+ "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
94
+ )
95
+ );
96
+ }
97
+ }
98
+ }
99
+
100
+ .#{iv.$class-prefix}panel-tabs,
101
+ .#{iv.$class-prefix}panel-block {
102
+ &:not(:last-child) {
103
+ border-bottom: cv.getVar("panel-item-border");
104
+ }
105
+ }
106
+
107
+ .#{iv.$class-prefix}panel-heading {
108
+ background-color: hsl(
109
+ cv.getVar("panel-h"),
110
+ cv.getVar("panel-s"),
111
+ cv.getVar("panel-heading-background-l")
112
+ );
113
+ border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0;
114
+ color: hsl(
115
+ cv.getVar("panel-h"),
116
+ cv.getVar("panel-s"),
117
+ cv.getVar("panel-heading-color-l")
118
+ );
119
+ font-size: cv.getVar("panel-heading-size");
120
+ font-weight: cv.getVar("panel-heading-weight");
121
+ line-height: cv.getVar("panel-heading-line-height");
122
+ padding: cv.getVar("panel-heading-padding");
123
+ }
124
+
125
+ .#{iv.$class-prefix}panel-tabs {
126
+ align-items: flex-end;
127
+ display: flex;
128
+ font-size: cv.getVar("panel-tabs-font-size");
129
+ justify-content: center;
130
+
131
+ a {
132
+ border-bottom-color: cv.getVar("panel-tab-border-bottom-color");
133
+ border-bottom-style: cv.getVar("panel-tab-border-bottom-style");
134
+ border-bottom-width: cv.getVar("panel-tab-border-bottom-width");
135
+ margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width});
136
+ padding: 0.75em;
137
+
138
+ // Modifiers
139
+ &.#{iv.$class-prefix}is-active {
140
+ border-bottom-color: hsl(
141
+ cv.getVar("panel-h"),
142
+ cv.getVar("panel-s"),
143
+ cv.getVar("panel-color-l")
144
+ );
145
+ color: cv.getVar("panel-tab-active-color");
146
+ }
147
+ }
148
+ }
149
+
150
+ .#{iv.$class-prefix}panel-list {
151
+ a {
152
+ color: cv.getVar("panel-list-item-color");
153
+
154
+ &:hover {
155
+ color: cv.getVar("panel-list-item-hover-color");
156
+ }
157
+ }
158
+ }
159
+
160
+ .#{iv.$class-prefix}panel-block {
161
+ align-items: center;
162
+ color: cv.getVar("panel-block-color");
163
+ display: flex;
164
+ justify-content: flex-start;
165
+ padding: 0.75em 1em;
166
+
167
+ input[type="checkbox"] {
168
+ margin-inline-end: 0.75em;
169
+ }
170
+
171
+ & > .#{iv.$class-prefix}control {
172
+ flex-grow: 1;
173
+ flex-shrink: 1;
174
+ width: 100%;
175
+ }
176
+
177
+ &.#{iv.$class-prefix}is-wrapped {
178
+ flex-wrap: wrap;
179
+ }
180
+
181
+ &.#{iv.$class-prefix}is-active {
182
+ border-left-color: cv.getVar("panel-block-active-border-left-color");
183
+ color: cv.getVar("panel-block-active-color");
184
+
185
+ .#{iv.$class-prefix}panel-icon {
186
+ color: hsl(
187
+ cv.getVar("panel-h"),
188
+ cv.getVar("panel-s"),
189
+ cv.getVar("panel-color-l")
190
+ );
191
+ }
192
+ }
193
+
194
+ &:last-child {
195
+ border-bottom-left-radius: cv.getVar("panel-radius");
196
+ border-bottom-right-radius: cv.getVar("panel-radius");
197
+ }
198
+ }
199
+
200
+ a.#{iv.$class-prefix}panel-block,
201
+ label.#{iv.$class-prefix}panel-block {
202
+ cursor: pointer;
203
+
204
+ &:hover {
205
+ background-color: cv.getVar("panel-block-hover-background-color");
206
+ }
207
+ }
208
+
209
+ .#{iv.$class-prefix}panel-icon {
210
+ @include mx.fa(1em, 1em);
211
+ color: cv.getVar("panel-icon-color");
212
+ margin-inline-end: 0.75em;
213
+
214
+ .#{iv.$class-prefix}fa {
215
+ font-size: inherit;
216
+ line-height: inherit;
217
+ }
218
+ }