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