bulma-sass 0.8.2 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) 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 +0 -1
  4. data/app/assets/stylesheets/sass/base/generic.sass +1 -1
  5. data/app/assets/stylesheets/sass/base/helpers.sass +1 -281
  6. data/app/assets/stylesheets/sass/base/minireset.sass +1 -1
  7. data/app/assets/stylesheets/sass/components/_all.sass +0 -1
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +3 -3
  9. data/app/assets/stylesheets/sass/components/card.sass +1 -1
  10. data/app/assets/stylesheets/sass/components/dropdown.sass +3 -3
  11. data/app/assets/stylesheets/sass/components/level.sass +2 -2
  12. data/app/assets/stylesheets/sass/components/media.sass +10 -8
  13. data/app/assets/stylesheets/sass/components/menu.sass +2 -2
  14. data/app/assets/stylesheets/sass/components/message.sass +1 -1
  15. data/app/assets/stylesheets/sass/components/modal.sass +2 -2
  16. data/app/assets/stylesheets/sass/components/navbar.sass +9 -9
  17. data/app/assets/stylesheets/sass/components/panel.sass +2 -2
  18. data/app/assets/stylesheets/sass/components/tabs.sass +35 -12
  19. data/app/assets/stylesheets/sass/elements/button.sass +7 -7
  20. data/app/assets/stylesheets/sass/elements/content.sass +5 -5
  21. data/app/assets/stylesheets/sass/elements/notification.sass +7 -2
  22. data/app/assets/stylesheets/sass/elements/table.sass +3 -1
  23. data/app/assets/stylesheets/sass/elements/tag.sass +24 -16
  24. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +1 -1
  25. data/app/assets/stylesheets/sass/form/file.sass +2 -2
  26. data/app/assets/stylesheets/sass/form/select.sass +4 -4
  27. data/app/assets/stylesheets/sass/form/tools.sass +18 -10
  28. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -0
  29. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  30. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  31. data/app/assets/stylesheets/sass/helpers/other.sass +8 -0
  32. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  33. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  34. data/app/assets/stylesheets/sass/helpers/spacing.sass +28 -0
  35. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  36. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  37. data/app/assets/stylesheets/sass/layout/hero.sass +1 -1
  38. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -1
  39. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +132 -0
  40. data/app/assets/stylesheets/sass/utilities/functions.sass +5 -0
  41. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +1 -0
  42. data/app/assets/stylesheets/sass/utilities/mixins.sass +24 -0
  43. data/lib/bulma/sass/version.rb +1 -1
  44. data/release.sh +2 -2
  45. metadata +12 -4
  46. data/app/assets/stylesheets/sass/components/list.sass +0 -39
  47. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -106
@@ -42,9 +42,9 @@ $menu-label-spacing: 1em !default
42
42
  color: $menu-item-active-color
43
43
  li
44
44
  ul
45
- border-left: $menu-list-border-left
45
+ +ltr-property("border", $menu-list-border-left, false)
46
46
  margin: $menu-nested-list-margin
47
- padding-left: $menu-nested-list-padding-left
47
+ +ltr-property("padding", $menu-nested-list-padding-left, false)
48
48
 
49
49
  .menu-label
50
50
  color: $menu-label-color
@@ -79,7 +79,7 @@ $message-colors: $colors !default
79
79
  .delete
80
80
  flex-grow: 0
81
81
  flex-shrink: 0
82
- margin-left: 0.75em
82
+ +ltr-property("margin", 0.75em, false)
83
83
  & + .message-body
84
84
  border-width: $message-header-body-border-width
85
85
  border-top-left-radius: 0
@@ -63,7 +63,7 @@ $modal-card-body-padding: 20px !default
63
63
  background: none
64
64
  height: $modal-close-dimensions
65
65
  position: fixed
66
- right: $modal-close-right
66
+ +ltr-position($modal-close-right)
67
67
  top: $modal-close-top
68
68
  width: $modal-close-dimensions
69
69
 
@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
102
102
  border-top: $modal-card-foot-border-top
103
103
  .button
104
104
  &:not(:last-child)
105
- margin-right: 0.5em
105
+ +ltr-property("margin", 0.5em)
106
106
 
107
107
  .modal-card-body
108
108
  +overflow-touch
@@ -151,7 +151,7 @@ body
151
151
  .navbar-burger
152
152
  color: $navbar-burger-color
153
153
  +hamburger($navbar-height)
154
- margin-left: auto
154
+ +ltr-property("margin", auto, false)
155
155
 
156
156
  .navbar-menu
157
157
  display: none
@@ -209,12 +209,12 @@ a.navbar-item,
209
209
  flex-shrink: 1
210
210
 
211
211
  .navbar-link:not(.is-arrowless)
212
- padding-right: 2.5em
212
+ +ltr-property("padding", 2.5em)
213
213
  &::after
214
214
  @extend %arrow
215
215
  border-color: $navbar-dropdown-arrow
216
216
  margin-top: -0.375em
217
- right: 1.125em
217
+ +ltr-position(1.125em)
218
218
 
219
219
  .navbar-dropdown
220
220
  font-size: 0.875rem
@@ -347,10 +347,10 @@ a.navbar-item,
347
347
  flex-shrink: 0
348
348
  .navbar-start
349
349
  justify-content: flex-start
350
- margin-right: auto
350
+ +ltr-property("margin", auto)
351
351
  .navbar-end
352
352
  justify-content: flex-end
353
- margin-left: auto
353
+ +ltr-property("margin", auto, false)
354
354
  .navbar-dropdown
355
355
  background-color: $navbar-dropdown-background-color
356
356
  border-bottom-left-radius: $navbar-dropdown-radius
@@ -359,7 +359,7 @@ a.navbar-item,
359
359
  box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
360
360
  display: none
361
361
  font-size: 0.875rem
362
- left: 0
362
+ +ltr-position(0, false)
363
363
  min-width: 100%
364
364
  position: absolute
365
365
  top: 100%
@@ -368,7 +368,7 @@ a.navbar-item,
368
368
  padding: 0.375rem 1rem
369
369
  white-space: nowrap
370
370
  a.navbar-item
371
- padding-right: 3rem
371
+ +ltr-property("padding", 3rem)
372
372
  &:focus,
373
373
  &:hover
374
374
  background-color: $navbar-dropdown-item-hover-background-color
@@ -396,9 +396,9 @@ a.navbar-item,
396
396
  .navbar > .container,
397
397
  .container > .navbar
398
398
  .navbar-brand
399
- margin-left: -.75rem
399
+ +ltr-property("margin", -.75rem, false)
400
400
  .navbar-menu
401
- margin-right: -.75rem
401
+ +ltr-property("margin", -.75rem)
402
402
  // Fixed navbar
403
403
  .navbar
404
404
  &.is-fixed-bottom-desktop,
@@ -88,7 +88,7 @@ $panel-colors: $colors !default
88
88
  justify-content: flex-start
89
89
  padding: 0.5em 0.75em
90
90
  input[type="checkbox"]
91
- margin-right: 0.75em
91
+ +ltr-property("margin", 0.75em)
92
92
  & > .control
93
93
  flex-grow: 1
94
94
  flex-shrink: 1
@@ -113,7 +113,7 @@ label.panel-block
113
113
  .panel-icon
114
114
  +fa(14px, 1em)
115
115
  color: $panel-icon-color
116
- margin-right: 0.75em
116
+ +ltr-property("margin", 0.75em)
117
117
  .fa
118
118
  font-size: inherit
119
119
  line-height: inherit
@@ -78,9 +78,9 @@ $tabs-toggle-link-active-color: $link-invert !default
78
78
  padding-left: 0.75em
79
79
  .icon
80
80
  &:first-child
81
- margin-right: 0.5em
81
+ +ltr-property("margin", 0.5em)
82
82
  &:last-child
83
- margin-left: 0.5em
83
+ +ltr-property("margin", 0.5em, false)
84
84
  // Alignment
85
85
  &.is-centered
86
86
  ul
@@ -92,7 +92,10 @@ $tabs-toggle-link-active-color: $link-invert !default
92
92
  &.is-boxed
93
93
  a
94
94
  border: 1px solid transparent
95
- border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
95
+ +ltr
96
+ border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
97
+ +rtl
98
+ border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
96
99
  &:hover
97
100
  background-color: $tabs-boxed-link-hover-background-color
98
101
  border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -119,11 +122,21 @@ $tabs-toggle-link-active-color: $link-invert !default
119
122
  z-index: 2
120
123
  li
121
124
  & + li
122
- margin-left: -#{$tabs-toggle-link-border-width}
125
+ +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
123
126
  &:first-child a
124
- border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
127
+ +ltr
128
+ border-top-left-radius: $tabs-toggle-link-radius
129
+ border-bottom-left-radius: $tabs-toggle-link-radius
130
+ +rtl
131
+ border-top-right-radius: $tabs-toggle-link-radius
132
+ border-bottom-right-radius: $tabs-toggle-link-radius
125
133
  &:last-child a
126
- border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
134
+ +ltr
135
+ border-top-right-radius: $tabs-toggle-link-radius
136
+ border-bottom-right-radius: $tabs-toggle-link-radius
137
+ +rtl
138
+ border-top-left-radius: $tabs-toggle-link-radius
139
+ border-bottom-left-radius: $tabs-toggle-link-radius
127
140
  &.is-active
128
141
  a
129
142
  background-color: $tabs-toggle-link-active-background-color
@@ -135,13 +148,23 @@ $tabs-toggle-link-active-color: $link-invert !default
135
148
  &.is-toggle-rounded
136
149
  li
137
150
  &:first-child a
138
- border-bottom-left-radius: $radius-rounded
139
- border-top-left-radius: $radius-rounded
140
- padding-left: 1.25em
151
+ +ltr
152
+ border-bottom-left-radius: $radius-rounded
153
+ border-top-left-radius: $radius-rounded
154
+ padding-left: 1.25em
155
+ +rtl
156
+ border-bottom-right-radius: $radius-rounded
157
+ border-top-right-radius: $radius-rounded
158
+ padding-right: 1.25em
141
159
  &:last-child a
142
- border-bottom-right-radius: $radius-rounded
143
- border-top-right-radius: $radius-rounded
144
- padding-right: 1.25em
160
+ +ltr
161
+ border-bottom-right-radius: $radius-rounded
162
+ border-top-right-radius: $radius-rounded
163
+ padding-right: 1.25em
164
+ +rtl
165
+ border-bottom-left-radius: $radius-rounded
166
+ border-top-left-radius: $radius-rounded
167
+ padding-left: 1.25em
145
168
  // Sizes
146
169
  &.is-small
147
170
  font-size: $size-small
@@ -71,11 +71,11 @@ $button-static-border-color: $border !default
71
71
  height: 1.5em
72
72
  width: 1.5em
73
73
  &:first-child:not(:last-child)
74
- margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
75
- margin-right: $button-padding-horizontal / 4
74
+ +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
75
+ +ltr-property("margin", $button-padding-horizontal / 4)
76
76
  &:last-child:not(:first-child)
77
- margin-left: $button-padding-horizontal / 4
78
- margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
77
+ +ltr-property("margin", $button-padding-horizontal / 4, false)
78
+ +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
79
79
  &:first-child:last-child
80
80
  margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
81
81
  margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
@@ -269,7 +269,7 @@ $button-static-border-color: $border !default
269
269
  .button
270
270
  margin-bottom: 0.5rem
271
271
  &:not(:last-child):not(.is-fullwidth)
272
- margin-right: 0.5rem
272
+ +ltr-property("margin", 0.5rem)
273
273
  &:last-child
274
274
  margin-bottom: -0.5rem
275
275
  &:not(:last-child)
@@ -292,9 +292,9 @@ $button-static-border-color: $border !default
292
292
  &:not(:last-child)
293
293
  border-bottom-right-radius: 0
294
294
  border-top-right-radius: 0
295
- margin-right: -1px
295
+ +ltr-property("margin", -1px)
296
296
  &:last-child
297
- margin-right: 0
297
+ +ltr-property("margin", 0)
298
298
  &:hover,
299
299
  &.is-hovered
300
300
  z-index: 2
@@ -67,11 +67,11 @@ $content-table-foot-cell-color: $text-strong !default
67
67
  margin-bottom: 1em
68
68
  blockquote
69
69
  background-color: $content-blockquote-background-color
70
- border-left: $content-blockquote-border-left
70
+ +ltr-property("border", $content-blockquote-border-left, false)
71
71
  padding: $content-blockquote-padding
72
72
  ol
73
73
  list-style-position: outside
74
- margin-left: 2em
74
+ +ltr-property("margin", 2em, false)
75
75
  margin-top: 1em
76
76
  &:not([type])
77
77
  list-style-type: decimal
@@ -85,7 +85,7 @@ $content-table-foot-cell-color: $text-strong !default
85
85
  list-style-type: upper-roman
86
86
  ul
87
87
  list-style: disc outside
88
- margin-left: 2em
88
+ +ltr-property("margin", 2em, false)
89
89
  margin-top: 1em
90
90
  ul
91
91
  list-style-type: circle
@@ -93,7 +93,7 @@ $content-table-foot-cell-color: $text-strong !default
93
93
  ul
94
94
  list-style-type: square
95
95
  dd
96
- margin-left: 2em
96
+ +ltr-property("margin", 2em, false)
97
97
  figure
98
98
  margin-left: 2em
99
99
  margin-right: 2em
@@ -126,7 +126,7 @@ $content-table-foot-cell-color: $text-strong !default
126
126
  th
127
127
  color: $content-table-cell-heading-color
128
128
  &:not([align])
129
- text-align: left
129
+ text-align: inherit
130
130
  thead
131
131
  td,
132
132
  th
@@ -2,13 +2,18 @@ $notification-background-color: $background !default
2
2
  $notification-code-background-color: $scheme-main !default
3
3
  $notification-radius: $radius !default
4
4
  $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
5
+ $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
6
+ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
5
7
 
6
8
  .notification
7
9
  @extend %block
8
10
  background-color: $notification-background-color
9
11
  border-radius: $notification-radius
10
- padding: $notification-padding
11
12
  position: relative
13
+ +ltr
14
+ padding: $notification-padding-ltr
15
+ +rtl
16
+ padding: $notification-padding-rtl
12
17
  a:not(.button):not(.dropdown-item)
13
18
  color: currentColor
14
19
  text-decoration: underline
@@ -20,8 +25,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
20
25
  pre code
21
26
  background: transparent
22
27
  & > .delete
28
+ +ltr-position(0.5rem)
23
29
  position: absolute
24
- right: 0.5rem
25
30
  top: 0.5rem
26
31
  .title,
27
32
  .subtitle,
@@ -51,10 +51,12 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
51
51
  a,
52
52
  strong
53
53
  color: currentColor
54
+ &.is-vcentered
55
+ vertical-align: middle
54
56
  th
55
57
  color: $table-cell-heading-color
56
58
  &:not([align])
57
- text-align: left
59
+ text-align: inherit
58
60
  tr
59
61
  &.is-selected
60
62
  background-color: $table-row-active-background-color
@@ -11,7 +11,7 @@ $tag-delete-margin: 1px !default
11
11
  .tag
12
12
  margin-bottom: 0.5rem
13
13
  &:not(:last-child)
14
- margin-right: 0.5rem
14
+ +ltr-property("margin", 0.5rem)
15
15
  &:last-child
16
16
  margin-bottom: -0.5rem
17
17
  &:not(:last-child)
@@ -37,14 +37,22 @@ $tag-delete-margin: 1px !default
37
37
  margin-right: 0
38
38
  &.has-addons
39
39
  .tag
40
- margin-right: 0
40
+ +ltr-property("margin", 0)
41
41
  &:not(:first-child)
42
- margin-left: 0
43
- border-bottom-left-radius: 0
44
- border-top-left-radius: 0
42
+ +ltr-property("margin", 0, false)
43
+ +ltr
44
+ border-top-left-radius: 0
45
+ border-bottom-left-radius: 0
46
+ +rtl
47
+ border-top-right-radius: 0
48
+ border-bottom-right-radius: 0
45
49
  &:not(:last-child)
46
- border-bottom-right-radius: 0
47
- border-top-right-radius: 0
50
+ +ltr
51
+ border-top-right-radius: 0
52
+ border-bottom-right-radius: 0
53
+ +rtl
54
+ border-top-left-radius: 0
55
+ border-bottom-left-radius: 0
48
56
 
49
57
  .tag:not(body)
50
58
  align-items: center
@@ -60,8 +68,8 @@ $tag-delete-margin: 1px !default
60
68
  padding-right: 0.75em
61
69
  white-space: nowrap
62
70
  .delete
63
- margin-left: 0.25rem
64
- margin-right: -0.375rem
71
+ +ltr-property("margin", 0.25rem, false)
72
+ +ltr-property("margin", -0.375rem)
65
73
  // Colors
66
74
  @each $name, $pair in $colors
67
75
  $color: nth($pair, 1)
@@ -85,17 +93,17 @@ $tag-delete-margin: 1px !default
85
93
  font-size: $size-medium
86
94
  .icon
87
95
  &:first-child:not(:last-child)
88
- margin-left: -0.375em
89
- margin-right: 0.1875em
96
+ +ltr-property("margin", -0.375em, false)
97
+ +ltr-property("margin", 0.1875em)
90
98
  &:last-child:not(:first-child)
91
- margin-left: 0.1875em
92
- margin-right: -0.375em
99
+ +ltr-property("margin", 0.1875em, false)
100
+ +ltr-property("margin", -0.375em)
93
101
  &:first-child:last-child
94
- margin-left: -0.375em
95
- margin-right: -0.375em
102
+ +ltr-property("margin", -0.375em, false)
103
+ +ltr-property("margin", -0.375em)
96
104
  // Modifiers
97
105
  &.is-delete
98
- margin-left: $tag-delete-margin
106
+ +ltr-property("margin", $tag-delete-margin, false)
99
107
  padding: 0
100
108
  position: relative
101
109
  width: 2em
@@ -18,4 +18,4 @@
18
18
  .radio
19
19
  @extend %checkbox-radio
20
20
  & + .radio
21
- margin-left: 0.5em
21
+ +ltr-property("margin", 0.5em, false)
@@ -166,7 +166,7 @@ $file-name-max-width: 16em !default
166
166
  display: block
167
167
  max-width: $file-name-max-width
168
168
  overflow: hidden
169
- text-align: left
169
+ text-align: inherit
170
170
  text-overflow: ellipsis
171
171
 
172
172
  .file-icon
@@ -174,7 +174,7 @@ $file-name-max-width: 16em !default
174
174
  display: flex
175
175
  height: 1em
176
176
  justify-content: center
177
- margin-right: 0.5em
177
+ +ltr-property("margin", 0.5em)
178
178
  width: 1em
179
179
  .fa
180
180
  font-size: 14px
@@ -9,12 +9,12 @@
9
9
  &::after
10
10
  @extend %arrow
11
11
  border-color: $input-arrow
12
- right: 1.125em
12
+ +ltr-position(1.125em)
13
13
  z-index: 4
14
14
  &.is-rounded
15
15
  select
16
16
  border-radius: $radius-rounded
17
- padding-left: 1em
17
+ +ltr-property("padding", 1em, false)
18
18
  select
19
19
  @extend %input
20
20
  cursor: pointer
@@ -28,7 +28,7 @@
28
28
  fieldset[disabled] &:hover
29
29
  border-color: $input-disabled-border-color
30
30
  &:not([multiple])
31
- padding-right: 2.5em
31
+ +ltr-property("padding", 2.5em)
32
32
  &[multiple]
33
33
  height: auto
34
34
  padding: 0
@@ -74,7 +74,7 @@
74
74
  @extend %loader
75
75
  margin-top: 0
76
76
  position: absolute
77
- right: 0.625em
77
+ +ltr-position(0.625em)
78
78
  top: 0.625em
79
79
  transform: none
80
80
  &.is-small:after