bulma-rails 0.9.0 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/bulma.sass +1 -1
  4. data/app/assets/stylesheets/sass/base/_all.sass +4 -2
  5. data/app/assets/stylesheets/sass/base/animations.sass +5 -0
  6. data/app/assets/stylesheets/sass/base/generic.sass +3 -0
  7. data/app/assets/stylesheets/sass/components/_all.sass +13 -12
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +2 -0
  9. data/app/assets/stylesheets/sass/components/card.sass +25 -1
  10. data/app/assets/stylesheets/sass/components/dropdown.sass +3 -1
  11. data/app/assets/stylesheets/sass/components/level.sass +3 -1
  12. data/app/assets/stylesheets/sass/components/media.sass +16 -9
  13. data/app/assets/stylesheets/sass/components/menu.sass +2 -0
  14. data/app/assets/stylesheets/sass/components/message.sass +2 -0
  15. data/app/assets/stylesheets/sass/components/modal.sass +5 -1
  16. data/app/assets/stylesheets/sass/components/navbar.sass +6 -1
  17. data/app/assets/stylesheets/sass/components/pagination.sass +19 -3
  18. data/app/assets/stylesheets/sass/components/panel.sass +3 -1
  19. data/app/assets/stylesheets/sass/components/tabs.sass +2 -0
  20. data/app/assets/stylesheets/sass/elements/_all.sass +13 -12
  21. data/app/assets/stylesheets/sass/elements/box.sass +3 -1
  22. data/app/assets/stylesheets/sass/elements/button.sass +30 -8
  23. data/app/assets/stylesheets/sass/elements/container.sass +12 -7
  24. data/app/assets/stylesheets/sass/elements/content.sass +4 -0
  25. data/app/assets/stylesheets/sass/elements/icon.sass +25 -0
  26. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  27. data/app/assets/stylesheets/sass/elements/notification.sass +5 -1
  28. data/app/assets/stylesheets/sass/elements/other.sass +2 -10
  29. data/app/assets/stylesheets/sass/elements/progress.sass +7 -1
  30. data/app/assets/stylesheets/sass/elements/table.sass +5 -1
  31. data/app/assets/stylesheets/sass/elements/tag.sass +5 -1
  32. data/app/assets/stylesheets/sass/elements/title.sass +2 -2
  33. data/app/assets/stylesheets/sass/form/_all.sass +7 -6
  34. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +2 -1
  35. data/app/assets/stylesheets/sass/form/file.sass +5 -1
  36. data/app/assets/stylesheets/sass/form/input-textarea.sass +3 -1
  37. data/app/assets/stylesheets/sass/form/select.sass +3 -1
  38. data/app/assets/stylesheets/sass/form/shared.sass +5 -0
  39. data/app/assets/stylesheets/sass/form/tools.sass +3 -1
  40. data/app/assets/stylesheets/sass/grid/_all.sass +3 -2
  41. data/app/assets/stylesheets/sass/grid/columns.sass +93 -84
  42. data/app/assets/stylesheets/sass/grid/tiles.sass +3 -1
  43. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -8
  44. data/app/assets/stylesheets/sass/helpers/color.sass +2 -0
  45. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  46. data/app/assets/stylesheets/sass/helpers/float.sass +2 -0
  47. data/app/assets/stylesheets/sass/helpers/other.sass +6 -0
  48. data/app/assets/stylesheets/sass/helpers/position.sass +2 -0
  49. data/app/assets/stylesheets/sass/helpers/spacing.sass +4 -1
  50. data/app/assets/stylesheets/sass/helpers/typography.sass +5 -0
  51. data/app/assets/stylesheets/sass/helpers/visibility.sass +1 -1
  52. data/app/assets/stylesheets/sass/layout/_all.sass +4 -3
  53. data/app/assets/stylesheets/sass/layout/footer.sass +2 -0
  54. data/app/assets/stylesheets/sass/layout/hero.sass +11 -3
  55. data/app/assets/stylesheets/sass/layout/section.sass +6 -2
  56. data/app/assets/stylesheets/sass/utilities/_all.sass +7 -6
  57. data/app/assets/stylesheets/sass/utilities/animations.sass +1 -5
  58. data/app/assets/stylesheets/sass/utilities/controls.sass +2 -3
  59. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +114 -0
  60. data/app/assets/stylesheets/sass/utilities/extends.sass +25 -0
  61. data/app/assets/stylesheets/sass/utilities/functions.sass +25 -4
  62. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -5
  63. data/app/assets/stylesheets/sass/utilities/mixins.sass +18 -23
  64. data/bulma-rails.gemspec +1 -1
  65. metadata +10 -7
  66. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +0 -132
data/app/assets/stylesheets/sass/elements/progress.sass CHANGED
@@ -1,9 +1,13 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $progress-bar-background-color: $border-light !default
2
4
  $progress-value-background-color: $text !default
3
5
  $progress-border-radius: $radius-rounded !default
4
6
 
5
7
  $progress-indeterminate-duration: 1.5s !default
6
8
 
9
+ $progress-colors: $colors !default
10
+
7
11
  .progress
8
12
  @extend %block
9
13
  -moz-appearance: none
@@ -25,7 +29,7 @@ $progress-indeterminate-duration: 1.5s !default
25
29
  background-color: $progress-value-background-color
26
30
  border: none
27
31
  // Colors
28
- @each $name, $pair in $colors
32
+ @each $name, $pair in $progress-colors
29
33
  $color: nth($pair, 1)
30
34
  &.is-#{$name}
31
35
  &::-webkit-progress-value
@@ -51,6 +55,8 @@ $progress-indeterminate-duration: 1.5s !default
51
55
  background-color: transparent
52
56
  &::-moz-progress-bar
53
57
  background-color: transparent
58
+ &::-ms-fill
59
+ animation-name: none
54
60
 
55
61
  // Sizes
56
62
  &.is-small
data/app/assets/stylesheets/sass/elements/table.sass CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $table-color: $text-strong !default
2
4
  $table-background-color: $scheme-main !default
3
5
 
@@ -23,6 +25,8 @@ $table-row-active-color: $primary-invert !default
23
25
  $table-striped-row-even-background-color: $scheme-main-bis !default
24
26
  $table-striped-row-even-hover-background-color: $scheme-main-ter !default
25
27
 
28
+ $table-colors: $colors !default
29
+
26
30
  .table
27
31
  @extend %block
28
32
  background-color: $table-background-color
@@ -34,7 +38,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
34
38
  padding: $table-cell-padding
35
39
  vertical-align: top
36
40
  // Colors
37
- @each $name, $pair in $colors
41
+ @each $name, $pair in $table-colors
38
42
  $color: nth($pair, 1)
39
43
  $color-invert: nth($pair, 2)
40
44
  &.is-#{$name}
data/app/assets/stylesheets/sass/elements/tag.sass CHANGED
@@ -1,8 +1,12 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $tag-background-color: $background !default
2
4
  $tag-color: $text !default
3
5
  $tag-radius: $radius !default
4
6
  $tag-delete-margin: 1px !default
5
7
 
8
+ $tag-colors: $colors !default
9
+
6
10
  .tags
7
11
  align-items: center
8
12
  display: flex
@@ -71,7 +75,7 @@ $tag-delete-margin: 1px !default
71
75
  +ltr-property("margin", 0.25rem, false)
72
76
  +ltr-property("margin", -0.375rem)
73
77
  // Colors
74
- @each $name, $pair in $colors
78
+ @each $name, $pair in $tag-colors
75
79
  $color: nth($pair, 1)
76
80
  $color-invert: nth($pair, 2)
77
81
  &.is-#{$name}
data/app/assets/stylesheets/sass/elements/title.sass CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $title-color: $text-strong !default
2
4
  $title-family: false !default
3
5
  $title-size: $size-3 !default
@@ -41,8 +43,6 @@ $subtitle-negative-margin: -1.25rem !default
41
43
  strong
42
44
  color: $title-strong-color
43
45
  font-weight: $title-strong-weight
44
- & + .highlight
45
- margin-top: -0.75rem
46
46
  &:not(.is-spaced) + .subtitle
47
47
  margin-top: $subtitle-negative-margin
48
48
  // Sizes
data/app/assets/stylesheets/sass/form/_all.sass CHANGED
@@ -1,8 +1,9 @@
1
+ /* Bulma Form */
1
2
  @charset "utf-8"
2
3
 
3
- @import "shared.sass"
4
- @import "input-textarea.sass"
5
- @import "checkbox-radio.sass"
6
- @import "select.sass"
7
- @import "file.sass"
8
- @import "tools.sass"
4
+ @import "shared"
5
+ @import "input-textarea"
6
+ @import "checkbox-radio"
7
+ @import "select"
8
+ @import "file"
9
+ @import "tools"
data/app/assets/stylesheets/sass/form/checkbox-radio.sass CHANGED
@@ -8,7 +8,8 @@
8
8
  &:hover
9
9
  color: $input-hover-color
10
10
  &[disabled],
11
- fieldset[disabled] &
11
+ fieldset[disabled] &,
12
+ input[disabled]
12
13
  color: $input-disabled-color
13
14
  cursor: not-allowed
14
15
 
data/app/assets/stylesheets/sass/form/file.sass CHANGED
@@ -11,6 +11,8 @@ $file-name-border-style: solid !default
11
11
  $file-name-border-width: 1px 1px 1px 0 !default
12
12
  $file-name-max-width: 16em !default
13
13
 
14
+ $file-colors: $form-colors !default
15
+
14
16
  .file
15
17
  @extend %unselectable
16
18
  align-items: stretch
@@ -18,7 +20,7 @@ $file-name-max-width: 16em !default
18
20
  justify-content: flex-start
19
21
  position: relative
20
22
  // Colors
21
- @each $name, $pair in $colors
23
+ @each $name, $pair in $file-colors
22
24
  $color: nth($pair, 1)
23
25
  $color-invert: nth($pair, 2)
24
26
  &.is-#{$name}
@@ -47,6 +49,8 @@ $file-name-max-width: 16em !default
47
49
  // Sizes
48
50
  &.is-small
49
51
  font-size: $size-small
52
+ &.is-normal
53
+ font-size: $size-normal
50
54
  &.is-medium
51
55
  font-size: $size-medium
52
56
  .file-icon
data/app/assets/stylesheets/sass/form/input-textarea.sass CHANGED
@@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default
2
2
  $textarea-max-height: 40em !default
3
3
  $textarea-min-height: 8em !default
4
4
 
5
+ $textarea-colors: $form-colors !default
6
+
5
7
  %input-textarea
6
8
  @extend %input
7
9
  box-shadow: $input-shadow
@@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
10
12
  &[readonly]
11
13
  box-shadow: none
12
14
  // Colors
13
- @each $name, $pair in $colors
15
+ @each $name, $pair in $textarea-colors
14
16
  $color: nth($pair, 1)
15
17
  &.is-#{$name}
16
18
  border-color: $color
data/app/assets/stylesheets/sass/form/select.sass CHANGED
@@ -1,3 +1,5 @@
1
+ $select-colors: $form-colors !default
2
+
1
3
  .select
2
4
  display: inline-block
3
5
  max-width: 100%
@@ -39,7 +41,7 @@
39
41
  &::after
40
42
  border-color: $input-hover-color
41
43
  // Colors
42
- @each $name, $pair in $colors
44
+ @each $name, $pair in $select-colors
43
45
  $color: nth($pair, 1)
44
46
  &.is-#{$name}
45
47
  &:not(:hover)::after
data/app/assets/stylesheets/sass/form/shared.sass CHANGED
@@ -1,3 +1,8 @@
1
+ @import "../utilities/controls"
2
+ @import "../utilities/mixins"
3
+
4
+ $form-colors: $colors !default
5
+
1
6
  $input-color: $text-strong !default
2
7
  $input-background-color: $scheme-main !default
3
8
  $input-border-color: $border !default
data/app/assets/stylesheets/sass/form/tools.sass CHANGED
@@ -3,6 +3,8 @@ $label-weight: $weight-bold !default
3
3
 
4
4
  $help-size: $size-small !default
5
5
 
6
+ $label-colors: $form-colors !default
7
+
6
8
  .label
7
9
  color: $label-color
8
10
  display: block
@@ -22,7 +24,7 @@ $help-size: $size-small !default
22
24
  display: block
23
25
  font-size: $help-size
24
26
  margin-top: 0.25rem
25
- @each $name, $pair in $colors
27
+ @each $name, $pair in $label-colors
26
28
  $color: nth($pair, 1)
27
29
  &.is-#{$name}
28
30
  color: $color
data/app/assets/stylesheets/sass/grid/_all.sass CHANGED
@@ -1,4 +1,5 @@
1
+ /* Bulma Grid */
1
2
  @charset "utf-8"
2
3
 
3
- @import "columns.sass"
4
- @import "tiles.sass"
4
+ @import "columns"
5
+ @import "tiles"
data/app/assets/stylesheets/sass/grid/columns.sass CHANGED
@@ -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
data/app/assets/stylesheets/sass/grid/tiles.sass CHANGED
@@ -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%
data/app/assets/stylesheets/sass/helpers/_all.sass CHANGED
@@ -1,10 +1,12 @@
1
+ /* Bulma Helpers */
1
2
  @charset "utf-8"
2
3
 
3
- @import "color.sass"
4
- @import "float.sass"
5
- @import "other.sass"
6
- @import "overflow.sass"
7
- @import "position.sass"
8
- @import "spacing.sass"
9
- @import "typography.sass"
10
- @import "visibility.sass"
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"
data/app/assets/stylesheets/sass/helpers/color.sass CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../utilities/derived-variables"
2
+
1
3
  @each $name, $pair in $colors
2
4
  $color: nth($pair, 1)
3
5
  .has-text-#{$name}
data/app/assets/stylesheets/sass/helpers/flexbox.sass ADDED
@@ -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
data/app/assets/stylesheets/sass/helpers/float.sass CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  .is-clearfix
2
4
  +clearfix
3
5