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,957 @@
1
+ @use "sass:math";
2
+ @use "../utilities/css-variables" as cv;
3
+ @use "../utilities/derived-variables" as dv;
4
+ @use "../utilities/initial-variables" as iv;
5
+ @use "../utilities/extends";
6
+ @use "../utilities/mixins" as mx;
7
+
8
+ $column-gap: 1.5rem !default;
9
+
10
+ :root {
11
+ @include cv.register-vars(
12
+ (
13
+ "column-gap": #{$column-gap},
14
+ )
15
+ );
16
+ }
17
+
18
+ .#{iv.$class-prefix}column {
19
+ display: block;
20
+ flex-basis: 0;
21
+ flex-grow: 1;
22
+ flex-shrink: 1;
23
+
24
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
25
+ > &.#{iv.$class-prefix}is-narrow {
26
+ flex: none;
27
+ width: unset;
28
+ }
29
+
30
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
31
+ > &.#{iv.$class-prefix}is-full {
32
+ flex: none;
33
+ width: 100%;
34
+ }
35
+
36
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
37
+ > &.#{iv.$class-prefix}is-three-quarters {
38
+ flex: none;
39
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
40
+ }
41
+
42
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
43
+ > &.#{iv.$class-prefix}is-two-thirds {
44
+ flex: none;
45
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
46
+ }
47
+
48
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
49
+ > &.#{iv.$class-prefix}is-half {
50
+ flex: none;
51
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
52
+ }
53
+
54
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
55
+ > &.#{iv.$class-prefix}is-one-third {
56
+ flex: none;
57
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
58
+ }
59
+
60
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
61
+ > &.#{iv.$class-prefix}is-one-quarter {
62
+ flex: none;
63
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
64
+ }
65
+
66
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
67
+ > &.#{iv.$class-prefix}is-one-fifth {
68
+ flex: none;
69
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
70
+ }
71
+
72
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
73
+ > &.#{iv.$class-prefix}is-two-fifths {
74
+ flex: none;
75
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
76
+ }
77
+
78
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
79
+ > &.#{iv.$class-prefix}is-three-fifths {
80
+ flex: none;
81
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
82
+ }
83
+
84
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
85
+ > &.#{iv.$class-prefix}is-four-fifths {
86
+ flex: none;
87
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
88
+ }
89
+
90
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
91
+ > &.#{iv.$class-prefix}is-offset-three-quarters {
92
+ margin-inline-start: 75%;
93
+ }
94
+
95
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
96
+ > &.#{iv.$class-prefix}is-offset-two-thirds {
97
+ margin-inline-start: 66.6666%;
98
+ }
99
+
100
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
101
+ > &.#{iv.$class-prefix}is-offset-half {
102
+ margin-inline-start: 50%;
103
+ }
104
+
105
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
106
+ > &.#{iv.$class-prefix}is-offset-one-third {
107
+ margin-inline-start: 33.3333%;
108
+ }
109
+
110
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
111
+ > &.#{iv.$class-prefix}is-offset-one-quarter {
112
+ margin-inline-start: 25%;
113
+ }
114
+
115
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
116
+ > &.#{iv.$class-prefix}is-offset-one-fifth {
117
+ margin-inline-start: 20%;
118
+ }
119
+
120
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
121
+ > &.#{iv.$class-prefix}is-offset-two-fifths {
122
+ margin-inline-start: 40%;
123
+ }
124
+
125
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
126
+ > &.#{iv.$class-prefix}is-offset-three-fifths {
127
+ margin-inline-start: 60%;
128
+ }
129
+
130
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
131
+ > &.#{iv.$class-prefix}is-offset-four-fifths {
132
+ margin-inline-start: 80%;
133
+ }
134
+
135
+ @for $i from 0 through 12 {
136
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
137
+ > &.#{iv.$class-prefix}is-#{$i} {
138
+ flex: none;
139
+ width: calc(
140
+ math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
141
+ );
142
+ }
143
+
144
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
145
+ > &.#{iv.$class-prefix}is-offset-#{$i} {
146
+ margin-inline-start: math.percentage(math.div($i, 12));
147
+ }
148
+ }
149
+
150
+ @include mx.mobile {
151
+ &.#{iv.$class-prefix}is-narrow-mobile {
152
+ flex: none;
153
+ width: unset;
154
+ }
155
+
156
+ &.#{iv.$class-prefix}is-full-mobile {
157
+ flex: none;
158
+ width: 100%;
159
+ }
160
+
161
+ &.#{iv.$class-prefix}is-three-quarters-mobile {
162
+ flex: none;
163
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
164
+ }
165
+
166
+ &.#{iv.$class-prefix}is-two-thirds-mobile {
167
+ flex: none;
168
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
169
+ }
170
+
171
+ &.#{iv.$class-prefix}is-half-mobile {
172
+ flex: none;
173
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
174
+ }
175
+
176
+ &.#{iv.$class-prefix}is-one-third-mobile {
177
+ flex: none;
178
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
179
+ }
180
+
181
+ &.#{iv.$class-prefix}is-one-quarter-mobile {
182
+ flex: none;
183
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
184
+ }
185
+
186
+ &.#{iv.$class-prefix}is-one-fifth-mobile {
187
+ flex: none;
188
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
189
+ }
190
+
191
+ &.#{iv.$class-prefix}is-two-fifths-mobile {
192
+ flex: none;
193
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
194
+ }
195
+
196
+ &.#{iv.$class-prefix}is-three-fifths-mobile {
197
+ flex: none;
198
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
199
+ }
200
+
201
+ &.#{iv.$class-prefix}is-four-fifths-mobile {
202
+ flex: none;
203
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
204
+ }
205
+
206
+ &.#{iv.$class-prefix}is-offset-three-quarters-mobile {
207
+ margin-inline-start: 75%;
208
+ }
209
+
210
+ &.#{iv.$class-prefix}is-offset-two-thirds-mobile {
211
+ margin-inline-start: 66.6666%;
212
+ }
213
+
214
+ &.#{iv.$class-prefix}is-offset-half-mobile {
215
+ margin-inline-start: 50%;
216
+ }
217
+
218
+ &.#{iv.$class-prefix}is-offset-one-third-mobile {
219
+ margin-inline-start: 33.3333%;
220
+ }
221
+
222
+ &.#{iv.$class-prefix}is-offset-one-quarter-mobile {
223
+ margin-inline-start: 25%;
224
+ }
225
+
226
+ &.#{iv.$class-prefix}is-offset-one-fifth-mobile {
227
+ margin-inline-start: 20%;
228
+ }
229
+
230
+ &.#{iv.$class-prefix}is-offset-two-fifths-mobile {
231
+ margin-inline-start: 40%;
232
+ }
233
+
234
+ &.#{iv.$class-prefix}is-offset-three-fifths-mobile {
235
+ margin-inline-start: 60%;
236
+ }
237
+
238
+ &.#{iv.$class-prefix}is-offset-four-fifths-mobile {
239
+ margin-inline-start: 80%;
240
+ }
241
+
242
+ @for $i from 0 through 12 {
243
+ &.#{iv.$class-prefix}is-#{$i}-mobile {
244
+ flex: none;
245
+ width: calc(
246
+ math.percentage(math.div($i, 12)) - calc(
247
+ #{cv.getVar("column-gap")} / 2
248
+ )
249
+ );
250
+ }
251
+
252
+ &.#{iv.$class-prefix}is-offset-#{$i}-mobile {
253
+ margin-inline-start: math.percentage(math.div($i, 12));
254
+ }
255
+ }
256
+ }
257
+
258
+ @include mx.tablet {
259
+ &.#{iv.$class-prefix}is-narrow,
260
+ &.#{iv.$class-prefix}is-narrow-tablet {
261
+ flex: none;
262
+ width: unset;
263
+ }
264
+
265
+ &.#{iv.$class-prefix}is-full,
266
+ &.#{iv.$class-prefix}is-full-tablet {
267
+ flex: none;
268
+ width: 100%;
269
+ }
270
+
271
+ &.#{iv.$class-prefix}is-three-quarters,
272
+ &.#{iv.$class-prefix}is-three-quarters-tablet {
273
+ flex: none;
274
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
275
+ }
276
+
277
+ &.#{iv.$class-prefix}is-two-thirds,
278
+ &.#{iv.$class-prefix}is-two-thirds-tablet {
279
+ flex: none;
280
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
281
+ }
282
+
283
+ &.#{iv.$class-prefix}is-half,
284
+ &.#{iv.$class-prefix}is-half-tablet {
285
+ flex: none;
286
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
287
+ }
288
+
289
+ &.#{iv.$class-prefix}is-one-third,
290
+ &.#{iv.$class-prefix}is-one-third-tablet {
291
+ flex: none;
292
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
293
+ }
294
+
295
+ &.#{iv.$class-prefix}is-one-quarter,
296
+ &.#{iv.$class-prefix}is-one-quarter-tablet {
297
+ flex: none;
298
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
299
+ }
300
+
301
+ &.#{iv.$class-prefix}is-one-fifth,
302
+ &.#{iv.$class-prefix}is-one-fifth-tablet {
303
+ flex: none;
304
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
305
+ }
306
+
307
+ &.#{iv.$class-prefix}is-two-fifths,
308
+ &.#{iv.$class-prefix}is-two-fifths-tablet {
309
+ flex: none;
310
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
311
+ }
312
+
313
+ &.#{iv.$class-prefix}is-three-fifths,
314
+ &.#{iv.$class-prefix}is-three-fifths-tablet {
315
+ flex: none;
316
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
317
+ }
318
+
319
+ &.#{iv.$class-prefix}is-four-fifths,
320
+ &.#{iv.$class-prefix}is-four-fifths-tablet {
321
+ flex: none;
322
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
323
+ }
324
+
325
+ &.#{iv.$class-prefix}is-offset-three-quarters,
326
+ &.#{iv.$class-prefix}is-offset-three-quarters-tablet {
327
+ margin-inline-start: 75%;
328
+ }
329
+
330
+ &.#{iv.$class-prefix}is-offset-two-thirds,
331
+ &.#{iv.$class-prefix}is-offset-two-thirds-tablet {
332
+ margin-inline-start: 66.6666%;
333
+ }
334
+
335
+ &.#{iv.$class-prefix}is-offset-half,
336
+ &.#{iv.$class-prefix}is-offset-half-tablet {
337
+ margin-inline-start: 50%;
338
+ }
339
+
340
+ &.#{iv.$class-prefix}is-offset-one-third,
341
+ &.#{iv.$class-prefix}is-offset-one-third-tablet {
342
+ margin-inline-start: 33.3333%;
343
+ }
344
+
345
+ &.#{iv.$class-prefix}is-offset-one-quarter,
346
+ &.#{iv.$class-prefix}is-offset-one-quarter-tablet {
347
+ margin-inline-start: 25%;
348
+ }
349
+
350
+ &.#{iv.$class-prefix}is-offset-one-fifth,
351
+ &.#{iv.$class-prefix}is-offset-one-fifth-tablet {
352
+ margin-inline-start: 20%;
353
+ }
354
+
355
+ &.#{iv.$class-prefix}is-offset-two-fifths,
356
+ &.#{iv.$class-prefix}is-offset-two-fifths-tablet {
357
+ margin-inline-start: 40%;
358
+ }
359
+
360
+ &.#{iv.$class-prefix}is-offset-three-fifths,
361
+ &.#{iv.$class-prefix}is-offset-three-fifths-tablet {
362
+ margin-inline-start: 60%;
363
+ }
364
+
365
+ &.#{iv.$class-prefix}is-offset-four-fifths,
366
+ &.#{iv.$class-prefix}is-offset-four-fifths-tablet {
367
+ margin-inline-start: 80%;
368
+ }
369
+
370
+ @for $i from 0 through 12 {
371
+ &.#{iv.$class-prefix}is-#{$i},
372
+ &.#{iv.$class-prefix}is-#{$i}-tablet {
373
+ flex: none;
374
+ width: calc(
375
+ math.percentage(math.div($i, 12)) - calc(
376
+ #{cv.getVar("column-gap")} / 2
377
+ )
378
+ );
379
+ }
380
+
381
+ &.#{iv.$class-prefix}is-offset-#{$i},
382
+ &.#{iv.$class-prefix}is-offset-#{$i}-tablet {
383
+ margin-inline-start: math.percentage(math.div($i, 12));
384
+ }
385
+ }
386
+ }
387
+
388
+ @include mx.touch {
389
+ &.#{iv.$class-prefix}is-narrow-touch {
390
+ flex: none;
391
+ width: unset;
392
+ }
393
+
394
+ &.#{iv.$class-prefix}is-full-touch {
395
+ flex: none;
396
+ width: 100%;
397
+ }
398
+
399
+ &.#{iv.$class-prefix}is-three-quarters-touch {
400
+ flex: none;
401
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
402
+ }
403
+
404
+ &.#{iv.$class-prefix}is-two-thirds-touch {
405
+ flex: none;
406
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
407
+ }
408
+
409
+ &.#{iv.$class-prefix}is-half-touch {
410
+ flex: none;
411
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
412
+ }
413
+
414
+ &.#{iv.$class-prefix}is-one-third-touch {
415
+ flex: none;
416
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
417
+ }
418
+
419
+ &.#{iv.$class-prefix}is-one-quarter-touch {
420
+ flex: none;
421
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
422
+ }
423
+
424
+ &.#{iv.$class-prefix}is-one-fifth-touch {
425
+ flex: none;
426
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
427
+ }
428
+
429
+ &.#{iv.$class-prefix}is-two-fifths-touch {
430
+ flex: none;
431
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
432
+ }
433
+
434
+ &.#{iv.$class-prefix}is-three-fifths-touch {
435
+ flex: none;
436
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
437
+ }
438
+
439
+ &.#{iv.$class-prefix}is-four-fifths-touch {
440
+ flex: none;
441
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
442
+ }
443
+
444
+ &.#{iv.$class-prefix}is-offset-three-quarters-touch {
445
+ margin-inline-start: 75%;
446
+ }
447
+
448
+ &.#{iv.$class-prefix}is-offset-two-thirds-touch {
449
+ margin-inline-start: 66.6666%;
450
+ }
451
+
452
+ &.#{iv.$class-prefix}is-offset-half-touch {
453
+ margin-inline-start: 50%;
454
+ }
455
+
456
+ &.#{iv.$class-prefix}is-offset-one-third-touch {
457
+ margin-inline-start: 33.3333%;
458
+ }
459
+
460
+ &.#{iv.$class-prefix}is-offset-one-quarter-touch {
461
+ margin-inline-start: 25%;
462
+ }
463
+
464
+ &.#{iv.$class-prefix}is-offset-one-fifth-touch {
465
+ margin-inline-start: 20%;
466
+ }
467
+
468
+ &.#{iv.$class-prefix}is-offset-two-fifths-touch {
469
+ margin-inline-start: 40%;
470
+ }
471
+
472
+ &.#{iv.$class-prefix}is-offset-three-fifths-touch {
473
+ margin-inline-start: 60%;
474
+ }
475
+
476
+ &.#{iv.$class-prefix}is-offset-four-fifths-touch {
477
+ margin-inline-start: 80%;
478
+ }
479
+
480
+ @for $i from 0 through 12 {
481
+ &.#{iv.$class-prefix}is-#{$i}-touch {
482
+ flex: none;
483
+ width: math.percentage(math.div($i, 12));
484
+ }
485
+
486
+ &.#{iv.$class-prefix}is-offset-#{$i}-touch {
487
+ margin-inline-start: math.percentage(math.div($i, 12));
488
+ }
489
+ }
490
+ }
491
+
492
+ @include mx.desktop {
493
+ &.#{iv.$class-prefix}is-narrow-desktop {
494
+ flex: none;
495
+ width: unset;
496
+ }
497
+
498
+ &.#{iv.$class-prefix}is-full-desktop {
499
+ flex: none;
500
+ width: 100%;
501
+ }
502
+
503
+ &.#{iv.$class-prefix}is-three-quarters-desktop {
504
+ flex: none;
505
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
506
+ }
507
+
508
+ &.#{iv.$class-prefix}is-two-thirds-desktop {
509
+ flex: none;
510
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
511
+ }
512
+
513
+ &.#{iv.$class-prefix}is-half-desktop {
514
+ flex: none;
515
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
516
+ }
517
+
518
+ &.#{iv.$class-prefix}is-one-third-desktop {
519
+ flex: none;
520
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
521
+ }
522
+
523
+ &.#{iv.$class-prefix}is-one-quarter-desktop {
524
+ flex: none;
525
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
526
+ }
527
+
528
+ &.#{iv.$class-prefix}is-one-fifth-desktop {
529
+ flex: none;
530
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
531
+ }
532
+
533
+ &.#{iv.$class-prefix}is-two-fifths-desktop {
534
+ flex: none;
535
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
536
+ }
537
+
538
+ &.#{iv.$class-prefix}is-three-fifths-desktop {
539
+ flex: none;
540
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
541
+ }
542
+
543
+ &.#{iv.$class-prefix}is-four-fifths-desktop {
544
+ flex: none;
545
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
546
+ }
547
+
548
+ &.#{iv.$class-prefix}is-offset-three-quarters-desktop {
549
+ margin-inline-start: 75%;
550
+ }
551
+
552
+ &.#{iv.$class-prefix}is-offset-two-thirds-desktop {
553
+ margin-inline-start: 66.6666%;
554
+ }
555
+
556
+ &.#{iv.$class-prefix}is-offset-half-desktop {
557
+ margin-inline-start: 50%;
558
+ }
559
+
560
+ &.#{iv.$class-prefix}is-offset-one-third-desktop {
561
+ margin-inline-start: 33.3333%;
562
+ }
563
+
564
+ &.#{iv.$class-prefix}is-offset-one-quarter-desktop {
565
+ margin-inline-start: 25%;
566
+ }
567
+
568
+ &.#{iv.$class-prefix}is-offset-one-fifth-desktop {
569
+ margin-inline-start: 20%;
570
+ }
571
+
572
+ &.#{iv.$class-prefix}is-offset-two-fifths-desktop {
573
+ margin-inline-start: 40%;
574
+ }
575
+
576
+ &.#{iv.$class-prefix}is-offset-three-fifths-desktop {
577
+ margin-inline-start: 60%;
578
+ }
579
+
580
+ &.#{iv.$class-prefix}is-offset-four-fifths-desktop {
581
+ margin-inline-start: 80%;
582
+ }
583
+
584
+ @for $i from 0 through 12 {
585
+ &.#{iv.$class-prefix}is-#{$i}-desktop {
586
+ flex: none;
587
+ width: calc(
588
+ math.percentage(math.div($i, 12)) - calc(
589
+ #{cv.getVar("column-gap")} / 2
590
+ )
591
+ );
592
+ }
593
+
594
+ &.#{iv.$class-prefix}is-offset-#{$i}-desktop {
595
+ margin-inline-start: math.percentage(math.div($i, 12));
596
+ }
597
+ }
598
+ }
599
+
600
+ @include mx.widescreen {
601
+ &.#{iv.$class-prefix}is-narrow-widescreen {
602
+ flex: none;
603
+ width: unset;
604
+ }
605
+
606
+ &.#{iv.$class-prefix}is-full-widescreen {
607
+ flex: none;
608
+ width: 100%;
609
+ }
610
+
611
+ &.#{iv.$class-prefix}is-three-quarters-widescreen {
612
+ flex: none;
613
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
614
+ }
615
+
616
+ &.#{iv.$class-prefix}is-two-thirds-widescreen {
617
+ flex: none;
618
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
619
+ }
620
+
621
+ &.#{iv.$class-prefix}is-half-widescreen {
622
+ flex: none;
623
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
624
+ }
625
+
626
+ &.#{iv.$class-prefix}is-one-third-widescreen {
627
+ flex: none;
628
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
629
+ }
630
+
631
+ &.#{iv.$class-prefix}is-one-quarter-widescreen {
632
+ flex: none;
633
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
634
+ }
635
+
636
+ &.#{iv.$class-prefix}is-one-fifth-widescreen {
637
+ flex: none;
638
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
639
+ }
640
+
641
+ &.#{iv.$class-prefix}is-two-fifths-widescreen {
642
+ flex: none;
643
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
644
+ }
645
+
646
+ &.#{iv.$class-prefix}is-three-fifths-widescreen {
647
+ flex: none;
648
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
649
+ }
650
+
651
+ &.#{iv.$class-prefix}is-four-fifths-widescreen {
652
+ flex: none;
653
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
654
+ }
655
+
656
+ &.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
657
+ margin-inline-start: 75%;
658
+ }
659
+
660
+ &.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
661
+ margin-inline-start: 66.6666%;
662
+ }
663
+
664
+ &.#{iv.$class-prefix}is-offset-half-widescreen {
665
+ margin-inline-start: 50%;
666
+ }
667
+
668
+ &.#{iv.$class-prefix}is-offset-one-third-widescreen {
669
+ margin-inline-start: 33.3333%;
670
+ }
671
+
672
+ &.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
673
+ margin-inline-start: 25%;
674
+ }
675
+
676
+ &.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
677
+ margin-inline-start: 20%;
678
+ }
679
+
680
+ &.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
681
+ margin-inline-start: 40%;
682
+ }
683
+
684
+ &.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
685
+ margin-inline-start: 60%;
686
+ }
687
+
688
+ &.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
689
+ margin-inline-start: 80%;
690
+ }
691
+
692
+ @for $i from 0 through 12 {
693
+ &.#{iv.$class-prefix}is-#{$i}-widescreen {
694
+ flex: none;
695
+ width: calc(
696
+ math.percentage(math.div($i, 12)) - calc(
697
+ #{cv.getVar("column-gap")} / 2
698
+ )
699
+ );
700
+ }
701
+
702
+ &.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
703
+ margin-inline-start: math.percentage(math.div($i, 12));
704
+ }
705
+ }
706
+ }
707
+
708
+ @include mx.fullhd {
709
+ &.#{iv.$class-prefix}is-narrow-fullhd {
710
+ flex: none;
711
+ width: unset;
712
+ }
713
+
714
+ &.#{iv.$class-prefix}is-full-fullhd {
715
+ flex: none;
716
+ width: 100%;
717
+ }
718
+
719
+ &.#{iv.$class-prefix}is-three-quarters-fullhd {
720
+ flex: none;
721
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
722
+ }
723
+
724
+ &.#{iv.$class-prefix}is-two-thirds-fullhd {
725
+ flex: none;
726
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
727
+ }
728
+
729
+ &.#{iv.$class-prefix}is-half-fullhd {
730
+ flex: none;
731
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
732
+ }
733
+
734
+ &.#{iv.$class-prefix}is-one-third-fullhd {
735
+ flex: none;
736
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
737
+ }
738
+
739
+ &.#{iv.$class-prefix}is-one-quarter-fullhd {
740
+ flex: none;
741
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
742
+ }
743
+
744
+ &.#{iv.$class-prefix}is-one-fifth-fullhd {
745
+ flex: none;
746
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
747
+ }
748
+
749
+ &.#{iv.$class-prefix}is-two-fifths-fullhd {
750
+ flex: none;
751
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
752
+ }
753
+
754
+ &.#{iv.$class-prefix}is-three-fifths-fullhd {
755
+ flex: none;
756
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
757
+ }
758
+
759
+ &.#{iv.$class-prefix}is-four-fifths-fullhd {
760
+ flex: none;
761
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
762
+ }
763
+
764
+ &.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
765
+ margin-inline-start: 75%;
766
+ }
767
+
768
+ &.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
769
+ margin-inline-start: 66.6666%;
770
+ }
771
+
772
+ &.#{iv.$class-prefix}is-offset-half-fullhd {
773
+ margin-inline-start: 50%;
774
+ }
775
+
776
+ &.#{iv.$class-prefix}is-offset-one-third-fullhd {
777
+ margin-inline-start: 33.3333%;
778
+ }
779
+
780
+ &.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
781
+ margin-inline-start: 25%;
782
+ }
783
+
784
+ &.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
785
+ margin-inline-start: 20%;
786
+ }
787
+
788
+ &.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
789
+ margin-inline-start: 40%;
790
+ }
791
+
792
+ &.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
793
+ margin-inline-start: 60%;
794
+ }
795
+
796
+ &.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
797
+ margin-inline-start: 80%;
798
+ }
799
+
800
+ @for $i from 0 through 12 {
801
+ &.#{iv.$class-prefix}is-#{$i}-fullhd {
802
+ flex: none;
803
+ width: calc(
804
+ math.percentage(math.div($i, 12)) - calc(
805
+ #{cv.getVar("column-gap")} / 2
806
+ )
807
+ );
808
+ }
809
+
810
+ &.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
811
+ margin-inline-start: math.percentage(math.div($i, 12));
812
+ }
813
+ }
814
+ }
815
+ }
816
+
817
+ .#{iv.$class-prefix}columns {
818
+ @extend %block;
819
+ gap: cv.getVar("column-gap");
820
+
821
+ // Modifiers
822
+ &.#{iv.$class-prefix}is-centered {
823
+ justify-content: center;
824
+ }
825
+
826
+ &.#{iv.$class-prefix}is-gapless {
827
+ gap: 0;
828
+ }
829
+
830
+ &.#{iv.$class-prefix}is-mobile {
831
+ display: flex;
832
+ }
833
+
834
+ &.#{iv.$class-prefix}is-multiline {
835
+ flex-wrap: wrap;
836
+ }
837
+
838
+ &.#{iv.$class-prefix}is-vcentered {
839
+ align-items: center;
840
+ }
841
+
842
+ // Responsiveness
843
+ @include mx.tablet {
844
+ &:not(.#{iv.$class-prefix}is-desktop) {
845
+ display: flex;
846
+ }
847
+ }
848
+
849
+ @include mx.desktop {
850
+ // Modifiers
851
+ &.#{iv.$class-prefix}is-desktop {
852
+ display: flex;
853
+ }
854
+ }
855
+
856
+ &.#{iv.$class-prefix}is-variable {
857
+ @for $i from 0 through 8 {
858
+ &.#{iv.$class-prefix}is-#{$i} {
859
+ @include cv.register-vars(
860
+ (
861
+ "column-gap": #{$i * 0.25rem},
862
+ )
863
+ );
864
+ }
865
+
866
+ @include mx.mobile {
867
+ &.#{iv.$class-prefix}is-#{$i}-mobile {
868
+ @include cv.register-vars(
869
+ (
870
+ "column-gap": #{$i * 0.25rem},
871
+ )
872
+ );
873
+ }
874
+ }
875
+
876
+ @include mx.tablet {
877
+ &.#{iv.$class-prefix}is-#{$i}-tablet {
878
+ @include cv.register-vars(
879
+ (
880
+ "column-gap": #{$i * 0.25rem},
881
+ )
882
+ );
883
+ }
884
+ }
885
+
886
+ @include mx.tablet-only {
887
+ &.#{iv.$class-prefix}is-#{$i}-tablet-only {
888
+ @include cv.register-vars(
889
+ (
890
+ "column-gap": #{$i * 0.25rem},
891
+ )
892
+ );
893
+ }
894
+ }
895
+
896
+ @include mx.touch {
897
+ &.#{iv.$class-prefix}is-#{$i}-touch {
898
+ @include cv.register-vars(
899
+ (
900
+ "column-gap": #{$i * 0.25rem},
901
+ )
902
+ );
903
+ }
904
+ }
905
+
906
+ @include mx.desktop {
907
+ &.#{iv.$class-prefix}is-#{$i}-desktop {
908
+ @include cv.register-vars(
909
+ (
910
+ "column-gap": #{$i * 0.25rem},
911
+ )
912
+ );
913
+ }
914
+ }
915
+
916
+ @include mx.desktop-only {
917
+ &.#{iv.$class-prefix}is-#{$i}-desktop-only {
918
+ @include cv.register-vars(
919
+ (
920
+ "column-gap": #{$i * 0.25rem},
921
+ )
922
+ );
923
+ }
924
+ }
925
+
926
+ @include mx.widescreen {
927
+ &.#{iv.$class-prefix}is-#{$i}-widescreen {
928
+ @include cv.register-vars(
929
+ (
930
+ "column-gap": #{$i * 0.25rem},
931
+ )
932
+ );
933
+ }
934
+ }
935
+
936
+ @include mx.widescreen-only {
937
+ &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
938
+ @include cv.register-vars(
939
+ (
940
+ "column-gap": #{$i * 0.25rem},
941
+ )
942
+ );
943
+ }
944
+ }
945
+
946
+ @include mx.fullhd {
947
+ &.#{iv.$class-prefix}is-#{$i}-fullhd {
948
+ @include cv.register-vars(
949
+ (
950
+ "column-gap": #{$i * 0.25rem},
951
+ )
952
+ );
953
+ }
954
+ }
955
+ }
956
+ }
957
+ }