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,270 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/derived-variables" as dv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/initial-variables" as iv;
5
+ @use "../utilities/mixins" as mx;
6
+
7
+ $hero-body-padding: 3rem 1.5rem !default;
8
+ $hero-body-padding-tablet: 3rem 3rem !default;
9
+ $hero-body-padding-small: 1.5rem !default;
10
+ $hero-body-padding-medium: 9rem 4.5rem !default;
11
+ $hero-body-padding-large: 18rem 6rem !default;
12
+
13
+ $hero-gradient-h-offset: 5deg;
14
+ $hero-gradient-s-offset: 10%;
15
+ $hero-gradient-l-offset: 5%;
16
+
17
+ $hero-colors: dv.$colors !default;
18
+
19
+ // Main container
20
+ .#{iv.$class-prefix}hero {
21
+ @include cv.register-vars(
22
+ (
23
+ "hero-body-padding": #{$hero-body-padding},
24
+ "hero-body-padding-tablet": #{$hero-body-padding-tablet},
25
+ "hero-body-padding-small": #{$hero-body-padding-small},
26
+ "hero-body-padding-medium": #{$hero-body-padding-medium},
27
+ "hero-body-padding-large": #{$hero-body-padding-large},
28
+ )
29
+ );
30
+ }
31
+
32
+ .#{iv.$class-prefix}hero {
33
+ align-items: stretch;
34
+ display: flex;
35
+ flex-direction: column;
36
+ justify-content: space-between;
37
+
38
+ .#{iv.$class-prefix}navbar {
39
+ background: none;
40
+ }
41
+
42
+ .#{iv.$class-prefix}tabs {
43
+ ul {
44
+ border-bottom: none;
45
+ }
46
+ }
47
+
48
+ // Colors
49
+ @each $name, $pair in $hero-colors {
50
+ &.#{iv.$class-prefix}is-#{$name} {
51
+ @include cv.register-vars(
52
+ (
53
+ "hero-h": #{cv.getVar($name, "", "-h")},
54
+ "hero-s": #{cv.getVar($name, "", "-s")},
55
+ "hero-background-l": #{cv.getVar($name, "", "-l")},
56
+ "hero-color-l": #{cv.getVar($name, "", "-invert-l")},
57
+ )
58
+ );
59
+
60
+ $background-color: hsl(
61
+ #{cv.getVar("hero-h")},
62
+ #{cv.getVar("hero-s")},
63
+ #{cv.getVar("hero-background-l")}
64
+ );
65
+ $color: hsl(
66
+ #{cv.getVar("hero-h")},
67
+ #{cv.getVar("hero-s")},
68
+ #{cv.getVar("hero-color-l")}
69
+ );
70
+
71
+ background-color: hsl(
72
+ #{cv.getVar("hero-h")},
73
+ #{cv.getVar("hero-s")},
74
+ #{cv.getVar("hero-background-l")}
75
+ );
76
+ color: $color;
77
+
78
+ .#{iv.$class-prefix}navbar {
79
+ @include cv.register-vars(
80
+ (
81
+ "navbar-item-color": $color,
82
+ "navbar-item-hover-background-color": $color,
83
+ "navbar-item-hover-color": $background-color,
84
+ "navbar-item-active-background-color": $color,
85
+ "navbar-item-active-color": $background-color,
86
+ )
87
+ );
88
+ }
89
+
90
+ .#{iv.$class-prefix}tabs {
91
+ @include cv.register-vars(
92
+ (
93
+ "tabs-link-color": $color,
94
+ "tabs-boxed-link-active-background-color": $color,
95
+ "tabs-boxed-link-active-border-color": $background-color,
96
+ "tabs-link-active-color": $background-color,
97
+ )
98
+ );
99
+ }
100
+
101
+ .#{iv.$class-prefix}subtitle {
102
+ @include cv.register-vars(
103
+ (
104
+ "subtitle-color": $color,
105
+ "subtitle-strong-color": $color,
106
+ )
107
+ );
108
+ }
109
+
110
+ .#{iv.$class-prefix}title {
111
+ @include cv.register-vars(
112
+ (
113
+ "title-color": $color,
114
+ "title-strong-color": $color,
115
+ )
116
+ );
117
+ }
118
+
119
+ // Modifiers
120
+ &.#{iv.$class-prefix}is-bold {
121
+ $gradient-top-left: hsl(
122
+ calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset),
123
+ calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset),
124
+ calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset)
125
+ );
126
+ $gradient-middle: hsl(
127
+ #{cv.getVar("hero-h")},
128
+ #{cv.getVar("hero-s")},
129
+ #{cv.getVar("hero-background-l")}
130
+ );
131
+ $gradient-bottom-right: hsl(
132
+ calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset),
133
+ calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset),
134
+ calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset)
135
+ );
136
+
137
+ background-image: linear-gradient(
138
+ 141deg,
139
+ $gradient-top-left 0%,
140
+ $gradient-middle 71%,
141
+ $gradient-bottom-right 100%
142
+ );
143
+
144
+ @include mx.mobile {
145
+ .#{iv.$class-prefix}navbar-menu {
146
+ background-image: linear-gradient(
147
+ 141deg,
148
+ $gradient-top-left 0%,
149
+ $color 71%,
150
+ $gradient-bottom-right 100%
151
+ );
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+
158
+ // Sizes
159
+ &.#{iv.$class-prefix}is-small {
160
+ .#{iv.$class-prefix}hero-body {
161
+ padding: cv.getVar("hero-body-padding-small");
162
+ }
163
+ }
164
+
165
+ &.#{iv.$class-prefix}is-medium {
166
+ @include mx.tablet {
167
+ .#{iv.$class-prefix}hero-body {
168
+ padding: cv.getVar("hero-body-padding-medium");
169
+ }
170
+ }
171
+ }
172
+
173
+ &.#{iv.$class-prefix}is-large {
174
+ @include mx.tablet {
175
+ .#{iv.$class-prefix}hero-body {
176
+ padding: cv.getVar("hero-body-padding-large");
177
+ }
178
+ }
179
+ }
180
+
181
+ &.#{iv.$class-prefix}is-halfheight,
182
+ &.#{iv.$class-prefix}is-fullheight,
183
+ &.#{iv.$class-prefix}is-fullheight-with-navbar {
184
+ .#{iv.$class-prefix}hero-body {
185
+ align-items: center;
186
+ display: flex;
187
+
188
+ & > .#{iv.$class-prefix}container {
189
+ flex-grow: 1;
190
+ flex-shrink: 1;
191
+ }
192
+ }
193
+ }
194
+
195
+ &.#{iv.$class-prefix}is-halfheight {
196
+ min-height: 50vh;
197
+ }
198
+
199
+ &.#{iv.$class-prefix}is-fullheight {
200
+ min-height: 100vh;
201
+ }
202
+ }
203
+
204
+ // Components
205
+
206
+ .#{iv.$class-prefix}hero-video {
207
+ @extend %overlay;
208
+ overflow: hidden;
209
+
210
+ video {
211
+ left: 50%;
212
+ min-height: 100%;
213
+ min-width: 100%;
214
+ position: absolute;
215
+ top: 50%;
216
+ transform: translate3d(-50%, -50%, 0);
217
+ }
218
+
219
+ // Modifiers
220
+ &.#{iv.$class-prefix}is-transparent {
221
+ opacity: 0.3;
222
+ }
223
+
224
+ // Responsiveness
225
+ @include mx.mobile {
226
+ display: none;
227
+ }
228
+ }
229
+
230
+ .#{iv.$class-prefix}hero-buttons {
231
+ margin-top: 1.5rem;
232
+
233
+ // Responsiveness
234
+ @include mx.mobile {
235
+ .#{iv.$class-prefix}button {
236
+ display: flex;
237
+
238
+ &:not(:last-child) {
239
+ margin-bottom: 0.75rem;
240
+ }
241
+ }
242
+ }
243
+
244
+ @include mx.tablet {
245
+ display: flex;
246
+ justify-content: center;
247
+
248
+ .#{iv.$class-prefix}button:not(:last-child) {
249
+ margin-inline-end: 1.5rem;
250
+ }
251
+ }
252
+ }
253
+
254
+ // Containers
255
+
256
+ .#{iv.$class-prefix}hero-head,
257
+ .#{iv.$class-prefix}hero-foot {
258
+ flex-grow: 0;
259
+ flex-shrink: 0;
260
+ }
261
+
262
+ .#{iv.$class-prefix}hero-body {
263
+ flex-grow: 1;
264
+ flex-shrink: 0;
265
+ padding: cv.getVar("hero-body-padding");
266
+
267
+ @include mx.tablet {
268
+ padding: cv.getVar("hero-body-padding-tablet");
269
+ }
270
+ }
@@ -0,0 +1,107 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default;
7
+
8
+ .#{iv.$class-prefix}level {
9
+ @extend %block;
10
+ @include cv.register-var("level-item-spacing", #{$level-item-spacing});
11
+ align-items: center;
12
+ display: flex;
13
+ flex-direction: column;
14
+ justify-content: space-between;
15
+ gap: cv.getVar("level-item-spacing");
16
+
17
+ code {
18
+ border-radius: cv.getVar("radius");
19
+ }
20
+
21
+ img {
22
+ display: inline-block;
23
+ vertical-align: top;
24
+ }
25
+
26
+ // Modifiers
27
+ &.#{iv.$class-prefix}is-mobile {
28
+ display: flex;
29
+ flex-direction: row;
30
+
31
+ .#{iv.$class-prefix}level-left,
32
+ .#{iv.$class-prefix}level-right {
33
+ display: flex;
34
+ }
35
+
36
+ .#{iv.$class-prefix}level-item {
37
+ &:not(.#{iv.$class-prefix}is-narrow) {
38
+ flex-grow: 1;
39
+ }
40
+ }
41
+ }
42
+
43
+ // Responsiveness
44
+ @include mx.tablet {
45
+ display: flex;
46
+ flex-direction: row;
47
+
48
+ & > .#{iv.$class-prefix}level-item {
49
+ &:not(.#{iv.$class-prefix}is-narrow) {
50
+ flex-grow: 1;
51
+ }
52
+ }
53
+ }
54
+ }
55
+
56
+ .#{iv.$class-prefix}level-item {
57
+ align-items: center;
58
+ display: flex;
59
+ flex-basis: auto;
60
+ flex-grow: 0;
61
+ flex-shrink: 0;
62
+ justify-content: center;
63
+
64
+ .#{iv.$class-prefix}title,
65
+ .#{iv.$class-prefix}subtitle {
66
+ margin-bottom: 0;
67
+ }
68
+ }
69
+
70
+ .#{iv.$class-prefix}level-left,
71
+ .#{iv.$class-prefix}level-right {
72
+ flex-basis: auto;
73
+ flex-grow: 0;
74
+ flex-shrink: 0;
75
+ gap: $level-item-spacing;
76
+
77
+ .#{iv.$class-prefix}level-item {
78
+ // Modifiers
79
+ &.#{iv.$class-prefix}is-flexible {
80
+ flex-grow: 1;
81
+ }
82
+ }
83
+ }
84
+
85
+ .#{iv.$class-prefix}level-left {
86
+ align-items: center;
87
+ display: flex;
88
+ flex-direction: column;
89
+ justify-content: flex-start;
90
+
91
+ // Responsiveness
92
+ @include mx.tablet {
93
+ flex-direction: row;
94
+ }
95
+ }
96
+
97
+ .#{iv.$class-prefix}level-right {
98
+ align-items: center;
99
+ display: flex;
100
+ flex-direction: column;
101
+ justify-content: flex-end;
102
+
103
+ // Responsiveness
104
+ @include mx.tablet {
105
+ flex-direction: row;
106
+ }
107
+ }
@@ -0,0 +1,106 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $media-border-color: hsla(
7
+ #{cv.getVar("scheme-h")},
8
+ #{cv.getVar("scheme-s")},
9
+ #{cv.getVar("border-l")},
10
+ 0.5
11
+ ) !default;
12
+ $media-border-size: 1px !default;
13
+ $media-spacing: 1rem !default;
14
+ $media-spacing-large: 1.5rem !default;
15
+ $media-content-spacing: 0.75rem !default;
16
+ $media-level-1-spacing: 0.75rem !default;
17
+ $media-level-1-content-spacing: 0.5rem !default;
18
+ $media-level-2-spacing: 0.5rem !default;
19
+
20
+ .#{iv.$class-prefix}media {
21
+ @extend %block;
22
+ @include cv.register-vars(
23
+ (
24
+ "media-border-color": #{$media-border-color},
25
+ "media-border-size": #{$media-border-size},
26
+ "media-spacing": #{$media-spacing},
27
+ "media-spacing-large": #{$media-spacing-large},
28
+ "media-content-spacing": #{$media-content-spacing},
29
+ "media-level-1-spacing": #{$media-level-1-spacing},
30
+ "media-level-1-content-spacing": #{$media-level-1-content-spacing},
31
+ "media-level-2-spacing": #{$media-level-2-spacing},
32
+ )
33
+ );
34
+ align-items: flex-start;
35
+ display: flex;
36
+ text-align: inherit;
37
+
38
+ .#{iv.$class-prefix}content:not(:last-child) {
39
+ margin-bottom: cv.getVar("media-content-spacing");
40
+ }
41
+
42
+ .#{iv.$class-prefix}media {
43
+ border-top-color: cv.getVar("media-border-color");
44
+ border-top-style: solid;
45
+ border-top-width: cv.getVar("media-border-size");
46
+ display: flex;
47
+ padding-top: cv.getVar("media-level-1-spacing");
48
+
49
+ .#{iv.$class-prefix}content:not(:last-child),
50
+ .#{iv.$class-prefix}control:not(:last-child) {
51
+ margin-bottom: cv.getVar("media-level-1-content-spacing");
52
+ }
53
+
54
+ .#{iv.$class-prefix}media {
55
+ padding-top: cv.getVar("media-level-2-spacing");
56
+
57
+ & + .#{iv.$class-prefix}media {
58
+ margin-top: cv.getVar("media-level-2-spacing");
59
+ }
60
+ }
61
+ }
62
+
63
+ & + .#{iv.$class-prefix}media {
64
+ border-top-color: cv.getVar("media-border-color");
65
+ border-top-style: solid;
66
+ border-top-width: cv.getVar("media-border-size");
67
+ margin-top: cv.getVar("media-spacing");
68
+ padding-top: cv.getVar("media-spacing");
69
+ }
70
+
71
+ // Sizes
72
+ &.#{iv.$class-prefix}is-large {
73
+ & + .#{iv.$class-prefix}media {
74
+ margin-top: cv.getVar("media-spacing-large");
75
+ padding-top: cv.getVar("media-spacing-large");
76
+ }
77
+ }
78
+ }
79
+
80
+ .#{iv.$class-prefix}media-left,
81
+ .#{iv.$class-prefix}media-right {
82
+ flex-basis: auto;
83
+ flex-grow: 0;
84
+ flex-shrink: 0;
85
+ }
86
+
87
+ .#{iv.$class-prefix}media-left {
88
+ margin-inline-end: cv.getVar("media-spacing");
89
+ }
90
+
91
+ .#{iv.$class-prefix}media-right {
92
+ margin-inline-start: cv.getVar("media-spacing");
93
+ }
94
+
95
+ .#{iv.$class-prefix}media-content {
96
+ flex-basis: auto;
97
+ flex-grow: 1;
98
+ flex-shrink: 1;
99
+ text-align: inherit;
100
+ }
101
+
102
+ @include mx.mobile {
103
+ .#{iv.$class-prefix}media-content {
104
+ overflow-x: auto;
105
+ }
106
+ }
@@ -0,0 +1,34 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/mixins" as mx;
4
+
5
+ $section-padding: 3rem 1.5rem !default;
6
+ $section-padding-desktop: 3rem 3rem !default;
7
+ $section-padding-medium: 9rem 4.5rem !default;
8
+ $section-padding-large: 18rem 6rem !default;
9
+
10
+ .#{iv.$class-prefix}section {
11
+ @include cv.register-vars(
12
+ (
13
+ "section-padding": #{$section-padding},
14
+ "section-padding-desktop": #{$section-padding-desktop},
15
+ "section-padding-medium": #{$section-padding-medium},
16
+ "section-padding-large": #{$section-padding-large},
17
+ )
18
+ );
19
+ padding: cv.getVar("section-padding");
20
+
21
+ // Responsiveness
22
+ @include mx.desktop {
23
+ padding: cv.getVar("section-padding-desktop");
24
+
25
+ // Sizes
26
+ &.#{iv.$class-prefix}is-medium {
27
+ padding: cv.getVar("section-padding-medium");
28
+ }
29
+
30
+ &.#{iv.$class-prefix}is-large {
31
+ padding: cv.getVar("section-padding-large");
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,35 @@
1
+ /* Bulma Themes */
2
+ @charset "utf-8";
3
+
4
+ @use "../utilities/css-variables" as cv;
5
+
6
+ @use "light";
7
+ @use "dark";
8
+ @use "setup";
9
+
10
+ :root {
11
+ @include light.light-theme;
12
+ @include setup.setup-theme;
13
+ }
14
+
15
+ // prefers-color-scheme: light
16
+ @include cv.system-theme($name: "light") {
17
+ @include light.light-theme;
18
+ }
19
+
20
+ // prefers-color-scheme: dark
21
+ @include cv.system-theme($name: "dark") {
22
+ @include dark.dark-theme;
23
+ }
24
+
25
+ // :root, [data-theme=light], .theme-light
26
+ @include cv.bulma-theme($name: "light") {
27
+ @include light.light-theme;
28
+ @include setup.setup-theme;
29
+ }
30
+
31
+ // [data-theme=dark], .theme-dark
32
+ @include cv.bulma-theme($name: "dark") {
33
+ @include dark.dark-theme;
34
+ @include setup.setup-theme;
35
+ }
@@ -0,0 +1,56 @@
1
+ @use "sass:list";
2
+
3
+ @use "../utilities/initial-variables" as iv;
4
+ @use "../utilities/css-variables" as cv;
5
+ @use "../utilities/derived-variables" as dv;
6
+ @use "setup";
7
+
8
+ // The main lightness of this theme
9
+ $scheme-main-l: 9%;
10
+ $background-l: 14%;
11
+ $text-l: 71%;
12
+
13
+ // The main scheme color, used to make calculations
14
+ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
15
+ $background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
16
+ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
17
+
18
+ @mixin dark-theme {
19
+ @each $name, $color in dv.$colors {
20
+ $base: $color;
21
+
22
+ @if type-of($color == "list") {
23
+ $base: list.nth($color, 1);
24
+ }
25
+
26
+ @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
27
+ }
28
+
29
+ @include cv.register-vars(
30
+ (
31
+ "scheme-brightness": "dark",
32
+ "scheme-main-l": $scheme-main-l,
33
+ "scheme-main-bis-l": $scheme-main-l + 2%,
34
+ "scheme-main-ter-l": $scheme-main-l + 4%,
35
+ "soft-l": iv.$dark-l,
36
+ "bold-l": iv.$light-l,
37
+ "soft-invert-l": iv.$light-l,
38
+ "bold-invert-l": iv.$dark-l,
39
+ "background-l": $background-l,
40
+ "border-weak-l": 21%,
41
+ "border-l": 24%,
42
+ "text-weak-l": 53%,
43
+ "text-l": $text-l,
44
+ "text-strong-l": 93%,
45
+ "text-title-l": 100%,
46
+ "hover-background-l-delta": 5%,
47
+ "active-background-l-delta": 10%,
48
+ "hover-border-l-delta": 10%,
49
+ "active-border-l-delta": 20%,
50
+ "hover-color-l-delta": 5%,
51
+ "active-color-l-delta": 10%,
52
+ )
53
+ );
54
+
55
+ @include cv.register-hsl("shadow", white);
56
+ }