bulma-sass 0.8.2 → 0.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/bulma.sass +2 -1
  3. data/app/assets/stylesheets/sass/base/_all.sass +4 -3
  4. data/app/assets/stylesheets/sass/base/animations.sass +5 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +4 -1
  6. data/app/assets/stylesheets/sass/base/helpers.sass +1 -281
  7. data/app/assets/stylesheets/sass/base/minireset.sass +1 -1
  8. data/app/assets/stylesheets/sass/components/_all.sass +13 -13
  9. data/app/assets/stylesheets/sass/components/breadcrumb.sass +5 -3
  10. data/app/assets/stylesheets/sass/components/card.sass +26 -2
  11. data/app/assets/stylesheets/sass/components/dropdown.sass +6 -4
  12. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  13. data/app/assets/stylesheets/sass/components/media.sass +24 -15
  14. data/app/assets/stylesheets/sass/components/menu.sass +4 -2
  15. data/app/assets/stylesheets/sass/components/message.sass +3 -1
  16. data/app/assets/stylesheets/sass/components/modal.sass +7 -3
  17. data/app/assets/stylesheets/sass/components/navbar.sass +15 -10
  18. data/app/assets/stylesheets/sass/components/pagination.sass +19 -3
  19. data/app/assets/stylesheets/sass/components/panel.sass +5 -3
  20. data/app/assets/stylesheets/sass/components/tabs.sass +37 -12
  21. data/app/assets/stylesheets/sass/elements/_all.sass +13 -12
  22. data/app/assets/stylesheets/sass/elements/box.sass +3 -1
  23. data/app/assets/stylesheets/sass/elements/button.sass +33 -11
  24. data/app/assets/stylesheets/sass/elements/container.sass +12 -7
  25. data/app/assets/stylesheets/sass/elements/content.sass +9 -5
  26. data/app/assets/stylesheets/sass/elements/icon.sass +25 -0
  27. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  28. data/app/assets/stylesheets/sass/elements/notification.sass +12 -3
  29. data/app/assets/stylesheets/sass/elements/other.sass +2 -10
  30. data/app/assets/stylesheets/sass/elements/progress.sass +7 -1
  31. data/app/assets/stylesheets/sass/elements/table.sass +8 -2
  32. data/app/assets/stylesheets/sass/elements/tag.sass +29 -17
  33. data/app/assets/stylesheets/sass/elements/title.sass +2 -2
  34. data/app/assets/stylesheets/sass/form/_all.sass +7 -6
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +3 -2
  36. data/app/assets/stylesheets/sass/form/file.sass +7 -3
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +3 -1
  38. data/app/assets/stylesheets/sass/form/select.sass +7 -5
  39. data/app/assets/stylesheets/sass/form/shared.sass +5 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +21 -11
  41. data/app/assets/stylesheets/sass/grid/_all.sass +3 -2
  42. data/app/assets/stylesheets/sass/grid/columns.sass +93 -84
  43. data/app/assets/stylesheets/sass/grid/tiles.sass +3 -1
  44. data/app/assets/stylesheets/sass/helpers/_all.sass +12 -0
  45. data/app/assets/stylesheets/sass/helpers/color.sass +39 -0
  46. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  47. data/app/assets/stylesheets/sass/helpers/float.sass +10 -0
  48. data/app/assets/stylesheets/sass/helpers/other.sass +14 -0
  49. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  50. data/app/assets/stylesheets/sass/helpers/position.sass +7 -0
  51. data/app/assets/stylesheets/sass/helpers/spacing.sass +31 -0
  52. data/app/assets/stylesheets/sass/helpers/typography.sass +103 -0
  53. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  54. data/app/assets/stylesheets/sass/layout/_all.sass +4 -3
  55. data/app/assets/stylesheets/sass/layout/footer.sass +2 -0
  56. data/app/assets/stylesheets/sass/layout/hero.sass +12 -4
  57. data/app/assets/stylesheets/sass/layout/section.sass +6 -2
  58. data/app/assets/stylesheets/sass/utilities/_all.sass +7 -6
  59. data/app/assets/stylesheets/sass/utilities/animations.sass +1 -5
  60. data/app/assets/stylesheets/sass/utilities/controls.sass +2 -3
  61. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +9 -1
  62. data/app/assets/stylesheets/sass/utilities/extends.sass +25 -0
  63. data/app/assets/stylesheets/sass/utilities/functions.sass +30 -4
  64. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +6 -5
  65. data/app/assets/stylesheets/sass/utilities/mixins.sass +42 -23
  66. data/bulma-sass.gemspec +2 -2
  67. data/lib/bulma/sass/version.rb +1 -1
  68. data/release.sh +2 -2
  69. metadata +18 -7
  70. data/app/assets/stylesheets/sass/components/list.sass +0 -39
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $column-gap: 0.75rem !default
2
4
 
3
5
  .column
@@ -8,6 +10,7 @@ $column-gap: 0.75rem !default
8
10
  padding: $column-gap
9
11
  .columns.is-mobile > &.is-narrow
10
12
  flex: none
13
+ width: unset
11
14
  .columns.is-mobile > &.is-full
12
15
  flex: none
13
16
  width: 100%
@@ -39,32 +42,33 @@ $column-gap: 0.75rem !default
39
42
  flex: none
40
43
  width: 80%
41
44
  .columns.is-mobile > &.is-offset-three-quarters
42
- margin-left: 75%
45
+ +ltr-property("margin", 75%, false)
43
46
  .columns.is-mobile > &.is-offset-two-thirds
44
- margin-left: 66.6666%
47
+ +ltr-property("margin", 66.6666%, false)
45
48
  .columns.is-mobile > &.is-offset-half
46
- margin-left: 50%
49
+ +ltr-property("margin", 50%, false)
47
50
  .columns.is-mobile > &.is-offset-one-third
48
- margin-left: 33.3333%
51
+ +ltr-property("margin", 33.3333%, false)
49
52
  .columns.is-mobile > &.is-offset-one-quarter
50
- margin-left: 25%
53
+ +ltr-property("margin", 25%, false)
51
54
  .columns.is-mobile > &.is-offset-one-fifth
52
- margin-left: 20%
55
+ +ltr-property("margin", 20%, false)
53
56
  .columns.is-mobile > &.is-offset-two-fifths
54
- margin-left: 40%
57
+ +ltr-property("margin", 40%, false)
55
58
  .columns.is-mobile > &.is-offset-three-fifths
56
- margin-left: 60%
59
+ +ltr-property("margin", 60%, false)
57
60
  .columns.is-mobile > &.is-offset-four-fifths
58
- margin-left: 80%
61
+ +ltr-property("margin", 80%, false)
59
62
  @for $i from 0 through 12
60
63
  .columns.is-mobile > &.is-#{$i}
61
64
  flex: none
62
- width: percentage($i / 12)
65
+ width: percentage(divide($i, 12))
63
66
  .columns.is-mobile > &.is-offset-#{$i}
64
- margin-left: percentage($i / 12)
67
+ +ltr-property("margin", percentage(divide($i, 12)), false)
65
68
  +mobile
66
69
  &.is-narrow-mobile
67
70
  flex: none
71
+ width: unset
68
72
  &.is-full-mobile
69
73
  flex: none
70
74
  width: 100%
@@ -96,33 +100,34 @@ $column-gap: 0.75rem !default
96
100
  flex: none
97
101
  width: 80%
98
102
  &.is-offset-three-quarters-mobile
99
- margin-left: 75%
103
+ +ltr-property("margin", 75%, false)
100
104
  &.is-offset-two-thirds-mobile
101
- margin-left: 66.6666%
105
+ +ltr-property("margin", 66.6666%, false)
102
106
  &.is-offset-half-mobile
103
- margin-left: 50%
107
+ +ltr-property("margin", 50%, false)
104
108
  &.is-offset-one-third-mobile
105
- margin-left: 33.3333%
109
+ +ltr-property("margin", 33.3333%, false)
106
110
  &.is-offset-one-quarter-mobile
107
- margin-left: 25%
111
+ +ltr-property("margin", 25%, false)
108
112
  &.is-offset-one-fifth-mobile
109
- margin-left: 20%
113
+ +ltr-property("margin", 20%, false)
110
114
  &.is-offset-two-fifths-mobile
111
- margin-left: 40%
115
+ +ltr-property("margin", 40%, false)
112
116
  &.is-offset-three-fifths-mobile
113
- margin-left: 60%
117
+ +ltr-property("margin", 60%, false)
114
118
  &.is-offset-four-fifths-mobile
115
- margin-left: 80%
119
+ +ltr-property("margin", 80%, false)
116
120
  @for $i from 0 through 12
117
121
  &.is-#{$i}-mobile
118
122
  flex: none
119
- width: percentage($i / 12)
123
+ width: percentage(divide($i, 12))
120
124
  &.is-offset-#{$i}-mobile
121
- margin-left: percentage($i / 12)
125
+ +ltr-property("margin", percentage(divide($i, 12)), false)
122
126
  +tablet
123
127
  &.is-narrow,
124
128
  &.is-narrow-tablet
125
129
  flex: none
130
+ width: unset
126
131
  &.is-full,
127
132
  &.is-full-tablet
128
133
  flex: none
@@ -165,42 +170,43 @@ $column-gap: 0.75rem !default
165
170
  width: 80%
166
171
  &.is-offset-three-quarters,
167
172
  &.is-offset-three-quarters-tablet
168
- margin-left: 75%
173
+ +ltr-property("margin", 75%, false)
169
174
  &.is-offset-two-thirds,
170
175
  &.is-offset-two-thirds-tablet
171
- margin-left: 66.6666%
176
+ +ltr-property("margin", 66.6666%, false)
172
177
  &.is-offset-half,
173
178
  &.is-offset-half-tablet
174
- margin-left: 50%
179
+ +ltr-property("margin", 50%, false)
175
180
  &.is-offset-one-third,
176
181
  &.is-offset-one-third-tablet
177
- margin-left: 33.3333%
182
+ +ltr-property("margin", 33.3333%, false)
178
183
  &.is-offset-one-quarter,
179
184
  &.is-offset-one-quarter-tablet
180
- margin-left: 25%
185
+ +ltr-property("margin", 25%, false)
181
186
  &.is-offset-one-fifth,
182
187
  &.is-offset-one-fifth-tablet
183
- margin-left: 20%
188
+ +ltr-property("margin", 20%, false)
184
189
  &.is-offset-two-fifths,
185
190
  &.is-offset-two-fifths-tablet
186
- margin-left: 40%
191
+ +ltr-property("margin", 40%, false)
187
192
  &.is-offset-three-fifths,
188
193
  &.is-offset-three-fifths-tablet
189
- margin-left: 60%
194
+ +ltr-property("margin", 60%, false)
190
195
  &.is-offset-four-fifths,
191
196
  &.is-offset-four-fifths-tablet
192
- margin-left: 80%
197
+ +ltr-property("margin", 80%, false)
193
198
  @for $i from 0 through 12
194
199
  &.is-#{$i},
195
200
  &.is-#{$i}-tablet
196
201
  flex: none
197
- width: percentage($i / 12)
202
+ width: percentage(divide($i, 12))
198
203
  &.is-offset-#{$i},
199
204
  &.is-offset-#{$i}-tablet
200
- margin-left: percentage($i / 12)
205
+ +ltr-property("margin", percentage(divide($i, 12)), false)
201
206
  +touch
202
207
  &.is-narrow-touch
203
208
  flex: none
209
+ width: unset
204
210
  &.is-full-touch
205
211
  flex: none
206
212
  width: 100%
@@ -232,32 +238,33 @@ $column-gap: 0.75rem !default
232
238
  flex: none
233
239
  width: 80%
234
240
  &.is-offset-three-quarters-touch
235
- margin-left: 75%
241
+ +ltr-property("margin", 75%, false)
236
242
  &.is-offset-two-thirds-touch
237
- margin-left: 66.6666%
243
+ +ltr-property("margin", 66.6666%, false)
238
244
  &.is-offset-half-touch
239
- margin-left: 50%
245
+ +ltr-property("margin", 50%, false)
240
246
  &.is-offset-one-third-touch
241
- margin-left: 33.3333%
247
+ +ltr-property("margin", 33.3333%, false)
242
248
  &.is-offset-one-quarter-touch
243
- margin-left: 25%
249
+ +ltr-property("margin", 25%, false)
244
250
  &.is-offset-one-fifth-touch
245
- margin-left: 20%
251
+ +ltr-property("margin", 20%, false)
246
252
  &.is-offset-two-fifths-touch
247
- margin-left: 40%
253
+ +ltr-property("margin", 40%, false)
248
254
  &.is-offset-three-fifths-touch
249
- margin-left: 60%
255
+ +ltr-property("margin", 60%, false)
250
256
  &.is-offset-four-fifths-touch
251
- margin-left: 80%
257
+ +ltr-property("margin", 80%, false)
252
258
  @for $i from 0 through 12
253
259
  &.is-#{$i}-touch
254
260
  flex: none
255
- width: percentage($i / 12)
261
+ width: percentage(divide($i, 12))
256
262
  &.is-offset-#{$i}-touch
257
- margin-left: percentage($i / 12)
263
+ +ltr-property("margin", percentage(divide($i, 12)), false)
258
264
  +desktop
259
265
  &.is-narrow-desktop
260
266
  flex: none
267
+ width: unset
261
268
  &.is-full-desktop
262
269
  flex: none
263
270
  width: 100%
@@ -289,32 +296,33 @@ $column-gap: 0.75rem !default
289
296
  flex: none
290
297
  width: 80%
291
298
  &.is-offset-three-quarters-desktop
292
- margin-left: 75%
299
+ +ltr-property("margin", 75%, false)
293
300
  &.is-offset-two-thirds-desktop
294
- margin-left: 66.6666%
301
+ +ltr-property("margin", 66.6666%, false)
295
302
  &.is-offset-half-desktop
296
- margin-left: 50%
303
+ +ltr-property("margin", 50%, false)
297
304
  &.is-offset-one-third-desktop
298
- margin-left: 33.3333%
305
+ +ltr-property("margin", 33.3333%, false)
299
306
  &.is-offset-one-quarter-desktop
300
- margin-left: 25%
307
+ +ltr-property("margin", 25%, false)
301
308
  &.is-offset-one-fifth-desktop
302
- margin-left: 20%
309
+ +ltr-property("margin", 20%, false)
303
310
  &.is-offset-two-fifths-desktop
304
- margin-left: 40%
311
+ +ltr-property("margin", 40%, false)
305
312
  &.is-offset-three-fifths-desktop
306
- margin-left: 60%
313
+ +ltr-property("margin", 60%, false)
307
314
  &.is-offset-four-fifths-desktop
308
- margin-left: 80%
315
+ +ltr-property("margin", 80%, false)
309
316
  @for $i from 0 through 12
310
317
  &.is-#{$i}-desktop
311
318
  flex: none
312
- width: percentage($i / 12)
319
+ width: percentage(divide($i, 12))
313
320
  &.is-offset-#{$i}-desktop
314
- margin-left: percentage($i / 12)
321
+ +ltr-property("margin", percentage(divide($i, 12)), false)
315
322
  +widescreen
316
323
  &.is-narrow-widescreen
317
324
  flex: none
325
+ width: unset
318
326
  &.is-full-widescreen
319
327
  flex: none
320
328
  width: 100%
@@ -346,32 +354,33 @@ $column-gap: 0.75rem !default
346
354
  flex: none
347
355
  width: 80%
348
356
  &.is-offset-three-quarters-widescreen
349
- margin-left: 75%
357
+ +ltr-property("margin", 75%, false)
350
358
  &.is-offset-two-thirds-widescreen
351
- margin-left: 66.6666%
359
+ +ltr-property("margin", 66.6666%, false)
352
360
  &.is-offset-half-widescreen
353
- margin-left: 50%
361
+ +ltr-property("margin", 50%, false)
354
362
  &.is-offset-one-third-widescreen
355
- margin-left: 33.3333%
363
+ +ltr-property("margin", 33.3333%, false)
356
364
  &.is-offset-one-quarter-widescreen
357
- margin-left: 25%
365
+ +ltr-property("margin", 25%, false)
358
366
  &.is-offset-one-fifth-widescreen
359
- margin-left: 20%
367
+ +ltr-property("margin", 20%, false)
360
368
  &.is-offset-two-fifths-widescreen
361
- margin-left: 40%
369
+ +ltr-property("margin", 40%, false)
362
370
  &.is-offset-three-fifths-widescreen
363
- margin-left: 60%
371
+ +ltr-property("margin", 60%, false)
364
372
  &.is-offset-four-fifths-widescreen
365
- margin-left: 80%
373
+ +ltr-property("margin", 80%, false)
366
374
  @for $i from 0 through 12
367
375
  &.is-#{$i}-widescreen
368
376
  flex: none
369
- width: percentage($i / 12)
377
+ width: percentage(divide($i, 12))
370
378
  &.is-offset-#{$i}-widescreen
371
- margin-left: percentage($i / 12)
379
+ +ltr-property("margin", percentage(divide($i, 12)), false)
372
380
  +fullhd
373
381
  &.is-narrow-fullhd
374
382
  flex: none
383
+ width: unset
375
384
  &.is-full-fullhd
376
385
  flex: none
377
386
  width: 100%
@@ -403,33 +412,33 @@ $column-gap: 0.75rem !default
403
412
  flex: none
404
413
  width: 80%
405
414
  &.is-offset-three-quarters-fullhd
406
- margin-left: 75%
415
+ +ltr-property("margin", 75%, false)
407
416
  &.is-offset-two-thirds-fullhd
408
- margin-left: 66.6666%
417
+ +ltr-property("margin", 66.6666%, false)
409
418
  &.is-offset-half-fullhd
410
- margin-left: 50%
419
+ +ltr-property("margin", 50%, false)
411
420
  &.is-offset-one-third-fullhd
412
- margin-left: 33.3333%
421
+ +ltr-property("margin", 33.3333%, false)
413
422
  &.is-offset-one-quarter-fullhd
414
- margin-left: 25%
423
+ +ltr-property("margin", 25%, false)
415
424
  &.is-offset-one-fifth-fullhd
416
- margin-left: 20%
425
+ +ltr-property("margin", 20%, false)
417
426
  &.is-offset-two-fifths-fullhd
418
- margin-left: 40%
427
+ +ltr-property("margin", 40%, false)
419
428
  &.is-offset-three-fifths-fullhd
420
- margin-left: 60%
429
+ +ltr-property("margin", 60%, false)
421
430
  &.is-offset-four-fifths-fullhd
422
- margin-left: 80%
431
+ +ltr-property("margin", 80%, false)
423
432
  @for $i from 0 through 12
424
433
  &.is-#{$i}-fullhd
425
434
  flex: none
426
- width: percentage($i / 12)
435
+ width: percentage(divide($i, 12))
427
436
  &.is-offset-#{$i}-fullhd
428
- margin-left: percentage($i / 12)
437
+ +ltr-property("margin", percentage(divide($i, 12)), false)
429
438
 
430
439
  .columns
431
- margin-left: (-$column-gap)
432
- margin-right: (-$column-gap)
440
+ +ltr-property("margin", (-$column-gap), false)
441
+ +ltr-property("margin", (-$column-gap))
433
442
  margin-top: (-$column-gap)
434
443
  &:last-child
435
444
  margin-bottom: (-$column-gap)
@@ -439,8 +448,8 @@ $column-gap: 0.75rem !default
439
448
  &.is-centered
440
449
  justify-content: center
441
450
  &.is-gapless
442
- margin-left: 0
443
- margin-right: 0
451
+ +ltr-property("margin", 0, false)
452
+ +ltr-property("margin", 0)
444
453
  margin-top: 0
445
454
  & > .column
446
455
  margin: 0
@@ -467,9 +476,9 @@ $column-gap: 0.75rem !default
467
476
  @if $variable-columns
468
477
  .columns.is-variable
469
478
  --columnGap: 0.75rem
470
- margin-left: calc(-1 * var(--columnGap))
471
- margin-right: calc(-1 * var(--columnGap))
472
- .column
479
+ +ltr-property("margin", calc(-1 * var(--columnGap)), false)
480
+ +ltr-property("margin", calc(-1 * var(--columnGap)))
481
+ > .column
473
482
  padding-left: var(--columnGap)
474
483
  padding-right: var(--columnGap)
475
484
  @for $i from 0 through 8
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $tile-spacing: 0.75rem !default
2
4
 
3
5
  .tile
@@ -31,4 +33,4 @@ $tile-spacing: 0.75rem !default
31
33
  @for $i from 1 through 12
32
34
  &.is-#{$i}
33
35
  flex: none
34
- width: ($i / 12) * 100%
36
+ width: (divide($i, 12)) * 100%
@@ -0,0 +1,12 @@
1
+ /* Bulma Helpers */
2
+ @charset "utf-8"
3
+
4
+ @import "color"
5
+ @import "flexbox"
6
+ @import "float"
7
+ @import "other"
8
+ @import "overflow"
9
+ @import "position"
10
+ @import "spacing"
11
+ @import "typography"
12
+ @import "visibility"
@@ -0,0 +1,39 @@
1
+ @import "../utilities/derived-variables"
2
+
3
+ @each $name, $pair in $colors
4
+ $color: nth($pair, 1)
5
+ .has-text-#{$name}
6
+ color: $color !important
7
+ a.has-text-#{$name}
8
+ &:hover,
9
+ &:focus
10
+ color: bulmaDarken($color, 10%) !important
11
+ .has-background-#{$name}
12
+ background-color: $color !important
13
+ @if length($pair) >= 4
14
+ $color-light: nth($pair, 3)
15
+ $color-dark: nth($pair, 4)
16
+ // Light
17
+ .has-text-#{$name}-light
18
+ color: $color-light !important
19
+ a.has-text-#{$name}-light
20
+ &:hover,
21
+ &:focus
22
+ color: bulmaDarken($color-light, 10%) !important
23
+ .has-background-#{$name}-light
24
+ background-color: $color-light !important
25
+ // Dark
26
+ .has-text-#{$name}-dark
27
+ color: $color-dark !important
28
+ a.has-text-#{$name}-dark
29
+ &:hover,
30
+ &:focus
31
+ color: bulmaLighten($color-dark, 10%) !important
32
+ .has-background-#{$name}-dark
33
+ background-color: $color-dark !important
34
+
35
+ @each $name, $shade in $shades
36
+ .has-text-#{$name}
37
+ color: $shade !important
38
+ .has-background-#{$name}
39
+ background-color: $shade !important
@@ -0,0 +1,35 @@
1
+ $flex-direction-values: row, row-reverse, column, column-reverse
2
+ @each $value in $flex-direction-values
3
+ .is-flex-direction-#{$value}
4
+ flex-direction: $value !important
5
+
6
+ $flex-wrap-values: nowrap, wrap, wrap-reverse
7
+ @each $value in $flex-wrap-values
8
+ .is-flex-wrap-#{$value}
9
+ flex-wrap: $value !important
10
+
11
+ $justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
12
+ @each $value in $justify-content-values
13
+ .is-justify-content-#{$value}
14
+ justify-content: $value !important
15
+
16
+ $align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
17
+ @each $value in $align-content-values
18
+ .is-align-content-#{$value}
19
+ align-content: $value !important
20
+
21
+ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
22
+ @each $value in $align-items-values
23
+ .is-align-items-#{$value}
24
+ align-items: $value !important
25
+
26
+ $align-self-values: auto, flex-start, flex-end, center, baseline, stretch
27
+ @each $value in $align-self-values
28
+ .is-align-self-#{$value}
29
+ align-self: $value !important
30
+
31
+ $flex-operators: grow, shrink
32
+ @each $operator in $flex-operators
33
+ @for $i from 0 through 5
34
+ .is-flex-#{$operator}-#{$i}
35
+ flex-#{$operator}: $i !important
@@ -0,0 +1,10 @@
1
+ @import "../utilities/mixins"
2
+
3
+ .is-clearfix
4
+ +clearfix
5
+
6
+ .is-pulled-left
7
+ float: left !important
8
+
9
+ .is-pulled-right
10
+ float: right !important
@@ -0,0 +1,14 @@
1
+ @import "../utilities/mixins"
2
+
3
+ .is-radiusless
4
+ border-radius: 0 !important
5
+
6
+ .is-shadowless
7
+ box-shadow: none !important
8
+
9
+ .is-clickable
10
+ cursor: pointer !important
11
+ pointer-events: all !important
12
+
13
+ .is-unselectable
14
+ @extend %unselectable
@@ -0,0 +1,2 @@
1
+ .is-clipped
2
+ overflow: hidden !important
@@ -0,0 +1,7 @@
1
+ @import "../utilities/mixins"
2
+
3
+ .is-overlay
4
+ @extend %overlay
5
+
6
+ .is-relative
7
+ position: relative !important
@@ -0,0 +1,31 @@
1
+ .is-marginless
2
+ margin: 0 !important
3
+
4
+ .is-paddingless
5
+ padding: 0 !important
6
+
7
+ $spacing-shortcuts: ("margin": "m", "padding": "p") !default
8
+ $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
9
+ $spacing-horizontal: "x" !default
10
+ $spacing-vertical: "y" !default
11
+ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
12
+
13
+ @each $property, $shortcut in $spacing-shortcuts
14
+ @each $name, $value in $spacing-values
15
+ // All directions
16
+ .#{$shortcut}-#{$name}
17
+ #{$property}: $value !important
18
+ // Cardinal directions
19
+ @each $direction, $suffix in $spacing-directions
20
+ .#{$shortcut}#{$suffix}-#{$name}
21
+ #{$property}-#{$direction}: $value !important
22
+ // Horizontal axis
23
+ @if $spacing-horizontal != null
24
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}
25
+ #{$property}-left: $value !important
26
+ #{$property}-right: $value !important
27
+ // Vertical axis
28
+ @if $spacing-vertical != null
29
+ .#{$shortcut}#{$spacing-vertical}-#{$name}
30
+ #{$property}-top: $value !important
31
+ #{$property}-bottom: $value !important
@@ -0,0 +1,103 @@
1
+ @import "../utilities/mixins"
2
+
3
+ =typography-size($target:'')
4
+ @each $size in $sizes
5
+ $i: index($sizes, $size)
6
+ .is-size-#{$i}#{if($target == '', '', '-' + $target)}
7
+ font-size: $size !important
8
+
9
+ +typography-size()
10
+
11
+ +mobile
12
+ +typography-size('mobile')
13
+
14
+ +tablet
15
+ +typography-size('tablet')
16
+
17
+ +touch
18
+ +typography-size('touch')
19
+
20
+ +desktop
21
+ +typography-size('desktop')
22
+
23
+ +widescreen
24
+ +typography-size('widescreen')
25
+
26
+ +fullhd
27
+ +typography-size('fullhd')
28
+
29
+ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
30
+
31
+ @each $alignment, $text-align in $alignments
32
+ .has-text-#{$alignment}
33
+ text-align: #{$text-align} !important
34
+
35
+ @each $alignment, $text-align in $alignments
36
+ +mobile
37
+ .has-text-#{$alignment}-mobile
38
+ text-align: #{$text-align} !important
39
+ +tablet
40
+ .has-text-#{$alignment}-tablet
41
+ text-align: #{$text-align} !important
42
+ +tablet-only
43
+ .has-text-#{$alignment}-tablet-only
44
+ text-align: #{$text-align} !important
45
+ +touch
46
+ .has-text-#{$alignment}-touch
47
+ text-align: #{$text-align} !important
48
+ +desktop
49
+ .has-text-#{$alignment}-desktop
50
+ text-align: #{$text-align} !important
51
+ +desktop-only
52
+ .has-text-#{$alignment}-desktop-only
53
+ text-align: #{$text-align} !important
54
+ +widescreen
55
+ .has-text-#{$alignment}-widescreen
56
+ text-align: #{$text-align} !important
57
+ +widescreen-only
58
+ .has-text-#{$alignment}-widescreen-only
59
+ text-align: #{$text-align} !important
60
+ +fullhd
61
+ .has-text-#{$alignment}-fullhd
62
+ text-align: #{$text-align} !important
63
+
64
+ .is-capitalized
65
+ text-transform: capitalize !important
66
+
67
+ .is-lowercase
68
+ text-transform: lowercase !important
69
+
70
+ .is-uppercase
71
+ text-transform: uppercase !important
72
+
73
+ .is-italic
74
+ font-style: italic !important
75
+
76
+ .is-underlined
77
+ text-decoration: underline !important
78
+
79
+ .has-text-weight-light
80
+ font-weight: $weight-light !important
81
+ .has-text-weight-normal
82
+ font-weight: $weight-normal !important
83
+ .has-text-weight-medium
84
+ font-weight: $weight-medium !important
85
+ .has-text-weight-semibold
86
+ font-weight: $weight-semibold !important
87
+ .has-text-weight-bold
88
+ font-weight: $weight-bold !important
89
+
90
+ .is-family-primary
91
+ font-family: $family-primary !important
92
+
93
+ .is-family-secondary
94
+ font-family: $family-secondary !important
95
+
96
+ .is-family-sans-serif
97
+ font-family: $family-sans-serif !important
98
+
99
+ .is-family-monospace
100
+ font-family: $family-monospace !important
101
+
102
+ .is-family-code
103
+ font-family: $family-code !important