jekyll-bulma 0.9.2 → 0.9.4

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 (68) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/base/_all.sass +4 -3
  3. data/_sass/base/animations.sass +5 -0
  4. data/_sass/base/generic.sass +4 -1
  5. data/_sass/base/helpers.sass +1 -281
  6. data/_sass/base/minireset.sass +1 -1
  7. data/_sass/bulma.sass +2 -1
  8. data/_sass/components/_all.sass +13 -13
  9. data/_sass/components/breadcrumb.sass +5 -3
  10. data/_sass/components/card.sass +26 -2
  11. data/_sass/components/dropdown.sass +6 -4
  12. data/_sass/components/level.sass +5 -3
  13. data/_sass/components/media.sass +25 -16
  14. data/_sass/components/menu.sass +4 -2
  15. data/_sass/components/message.sass +3 -1
  16. data/_sass/components/modal.sass +8 -4
  17. data/_sass/components/navbar.sass +24 -21
  18. data/_sass/components/pagination.sass +19 -3
  19. data/_sass/components/panel.sass +7 -4
  20. data/_sass/components/tabs.sass +37 -12
  21. data/_sass/elements/_all.sass +13 -12
  22. data/_sass/elements/box.sass +3 -1
  23. data/_sass/elements/button.sass +43 -20
  24. data/_sass/elements/container.sass +12 -7
  25. data/_sass/elements/content.sass +9 -5
  26. data/_sass/elements/icon.sass +25 -0
  27. data/_sass/elements/image.sass +2 -0
  28. data/_sass/elements/notification.sass +19 -3
  29. data/_sass/elements/other.sass +2 -10
  30. data/_sass/elements/progress.sass +7 -1
  31. data/_sass/elements/table.sass +8 -2
  32. data/_sass/elements/tag.sass +29 -17
  33. data/_sass/elements/title.sass +2 -2
  34. data/_sass/form/_all.sass +7 -6
  35. data/_sass/form/checkbox-radio.sass +3 -2
  36. data/_sass/form/file.sass +14 -10
  37. data/_sass/form/input-textarea.sass +4 -2
  38. data/_sass/form/select.sass +9 -7
  39. data/_sass/form/shared.sass +8 -3
  40. data/_sass/form/tools.sass +21 -11
  41. data/_sass/grid/_all.sass +3 -2
  42. data/_sass/grid/columns.sass +93 -84
  43. data/_sass/grid/tiles.sass +3 -1
  44. data/_sass/helpers/_all.sass +12 -0
  45. data/_sass/helpers/color.sass +39 -0
  46. data/_sass/helpers/flexbox.sass +35 -0
  47. data/_sass/helpers/float.sass +10 -0
  48. data/_sass/helpers/other.sass +14 -0
  49. data/_sass/helpers/overflow.sass +2 -0
  50. data/_sass/helpers/position.sass +7 -0
  51. data/_sass/helpers/spacing.sass +31 -0
  52. data/_sass/helpers/typography.sass +103 -0
  53. data/_sass/helpers/visibility.sass +122 -0
  54. data/_sass/jekyll-bulma.code-workspace +8 -0
  55. data/_sass/layout/_all.sass +4 -3
  56. data/_sass/layout/footer.sass +2 -0
  57. data/_sass/layout/hero.sass +31 -21
  58. data/_sass/layout/section.sass +6 -2
  59. data/_sass/utilities/_all.sass +7 -6
  60. data/_sass/utilities/animations.sass +1 -5
  61. data/_sass/utilities/controls.sass +2 -3
  62. data/_sass/utilities/derived-variables.sass +9 -1
  63. data/_sass/utilities/extends.sass +25 -0
  64. data/_sass/utilities/functions.sass +42 -4
  65. data/_sass/utilities/initial-variables.sass +6 -5
  66. data/_sass/utilities/mixins.sass +46 -27
  67. metadata +16 -4
  68. data/_sass/components/list.sass +0 -39
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $navbar-background-color: $scheme-main !default
2
4
  $navbar-box-shadow-size: 0 2px 0 0 !default
3
5
  $navbar-box-shadow-color: $background !default
@@ -32,7 +34,7 @@ $navbar-dropdown-radius: $radius-large !default
32
34
  $navbar-dropdown-z: 20 !default
33
35
 
34
36
  $navbar-dropdown-boxed-radius: $radius-large !default
35
- $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
37
+ $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
36
38
 
37
39
  $navbar-dropdown-item-hover-color: $scheme-invert !default
38
40
  $navbar-dropdown-item-hover-background-color: $background !default
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
46
48
 
47
49
  $navbar-breakpoint: $desktop !default
48
50
 
51
+ $navbar-colors: $colors !default
52
+
49
53
  =navbar-fixed
50
54
  left: 0
51
55
  position: fixed
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
57
61
  min-height: $navbar-height
58
62
  position: relative
59
63
  z-index: $navbar-z
60
- @each $name, $pair in $colors
64
+ @each $name, $pair in $navbar-colors
61
65
  $color: nth($pair, 1)
62
66
  $color-invert: nth($pair, 2)
63
67
  &.is-#{$name}
@@ -72,7 +76,7 @@ $navbar-breakpoint: $desktop !default
72
76
  &:focus,
73
77
  &:hover,
74
78
  &.is-active
75
- background-color: darken($color, 5%)
79
+ background-color: bulmaDarken($color, 5%)
76
80
  color: $color-invert
77
81
  .navbar-link
78
82
  &::after
@@ -90,7 +94,7 @@ $navbar-breakpoint: $desktop !default
90
94
  &:focus,
91
95
  &:hover,
92
96
  &.is-active
93
- background-color: darken($color, 5%)
97
+ background-color: bulmaDarken($color, 5%)
94
98
  color: $color-invert
95
99
  .navbar-link
96
100
  &::after
@@ -98,7 +102,7 @@ $navbar-breakpoint: $desktop !default
98
102
  .navbar-item.has-dropdown:focus .navbar-link,
99
103
  .navbar-item.has-dropdown:hover .navbar-link,
100
104
  .navbar-item.has-dropdown.is-active .navbar-link
101
- background-color: darken($color, 5%)
105
+ background-color: bulmaDarken($color, 5%)
102
106
  color: $color-invert
103
107
  .navbar-dropdown
104
108
  a.navbar-item
@@ -149,9 +153,10 @@ body
149
153
  overflow-y: hidden
150
154
 
151
155
  .navbar-burger
156
+ @extend %reset
152
157
  color: $navbar-burger-color
153
158
  +hamburger($navbar-height)
154
- margin-left: auto
159
+ +ltr-property("margin", auto, false)
155
160
 
156
161
  .navbar-menu
157
162
  display: none
@@ -179,7 +184,6 @@ a.navbar-item,
179
184
  color: $navbar-item-hover-color
180
185
 
181
186
  .navbar-item
182
- display: block
183
187
  flex-grow: 0
184
188
  flex-shrink: 0
185
189
  img
@@ -210,12 +214,12 @@ a.navbar-item,
210
214
  flex-shrink: 1
211
215
 
212
216
  .navbar-link:not(.is-arrowless)
213
- padding-right: 2.5em
217
+ +ltr-property("padding", 2.5em)
214
218
  &::after
215
219
  @extend %arrow
216
220
  border-color: $navbar-dropdown-arrow
217
221
  margin-top: -0.375em
218
- right: 1.125em
222
+ +ltr-position(1.125em)
219
223
 
220
224
  .navbar-dropdown
221
225
  font-size: 0.875rem
@@ -245,7 +249,7 @@ a.navbar-item,
245
249
  display: none
246
250
  .navbar-menu
247
251
  background-color: $navbar-background-color
248
- box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
252
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
249
253
  padding: 0.5rem 0
250
254
  &.is-active
251
255
  display: block
@@ -257,7 +261,7 @@ a.navbar-item,
257
261
  &.is-fixed-bottom-touch
258
262
  bottom: 0
259
263
  &.has-shadow
260
- box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
264
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
261
265
  &.is-fixed-top-touch
262
266
  top: 0
263
267
  &.is-fixed-top,
@@ -320,7 +324,6 @@ a.navbar-item,
320
324
  align-items: center
321
325
  display: flex
322
326
  .navbar-item
323
- display: flex
324
327
  &.has-dropdown
325
328
  align-items: stretch
326
329
  &.has-dropdown-up
@@ -331,7 +334,7 @@ a.navbar-item,
331
334
  border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
332
335
  border-top: none
333
336
  bottom: 100%
334
- box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
337
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
335
338
  top: auto
336
339
  &.is-active,
337
340
  &.is-hoverable:focus,
@@ -349,19 +352,19 @@ a.navbar-item,
349
352
  flex-shrink: 0
350
353
  .navbar-start
351
354
  justify-content: flex-start
352
- margin-right: auto
355
+ +ltr-property("margin", auto)
353
356
  .navbar-end
354
357
  justify-content: flex-end
355
- margin-left: auto
358
+ +ltr-property("margin", auto, false)
356
359
  .navbar-dropdown
357
360
  background-color: $navbar-dropdown-background-color
358
361
  border-bottom-left-radius: $navbar-dropdown-radius
359
362
  border-bottom-right-radius: $navbar-dropdown-radius
360
363
  border-top: $navbar-dropdown-border-top
361
- box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
364
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
362
365
  display: none
363
366
  font-size: 0.875rem
364
- left: 0
367
+ +ltr-position(0, false)
365
368
  min-width: 100%
366
369
  position: absolute
367
370
  top: 100%
@@ -370,7 +373,7 @@ a.navbar-item,
370
373
  padding: 0.375rem 1rem
371
374
  white-space: nowrap
372
375
  a.navbar-item
373
- padding-right: 3rem
376
+ +ltr-property("padding", 3rem)
374
377
  &:focus,
375
378
  &:hover
376
379
  background-color: $navbar-dropdown-item-hover-background-color
@@ -398,9 +401,9 @@ a.navbar-item,
398
401
  .navbar > .container,
399
402
  .container > .navbar
400
403
  .navbar-brand
401
- margin-left: -.75rem
404
+ +ltr-property("margin", -.75rem, false)
402
405
  .navbar-menu
403
- margin-right: -.75rem
406
+ +ltr-property("margin", -.75rem)
404
407
  // Fixed navbar
405
408
  .navbar
406
409
  &.is-fixed-bottom-desktop,
@@ -409,7 +412,7 @@ a.navbar-item,
409
412
  &.is-fixed-bottom-desktop
410
413
  bottom: 0
411
414
  &.has-shadow
412
- box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
415
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
413
416
  &.is-fixed-top-desktop
414
417
  top: 0
415
418
  html,
@@ -1,3 +1,6 @@
1
+ @import "../utilities/controls"
2
+ @import "../utilities/mixins"
3
+
1
4
  $pagination-color: $text-strong !default
2
5
  $pagination-border-color: $border !default
3
6
  $pagination-margin: -0.25rem !default
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
8
11
  $pagination-item-padding-left: 0.5em !default
9
12
  $pagination-item-padding-right: 0.5em !default
10
13
 
14
+ $pagination-nav-padding-left: 0.75em !default
15
+ $pagination-nav-padding-right: 0.75em !default
16
+
11
17
  $pagination-hover-color: $link-hover !default
12
18
  $pagination-hover-border-color: $link-hover-border !default
13
19
 
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default
27
33
 
28
34
  $pagination-ellipsis-color: $grey-light !default
29
35
 
30
- $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
36
+ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
31
37
 
32
38
  .pagination
33
39
  @extend %block
@@ -91,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
91
97
 
92
98
  .pagination-previous,
93
99
  .pagination-next
94
- padding-left: 0.75em
95
- padding-right: 0.75em
100
+ padding-left: $pagination-nav-padding-left
101
+ padding-right: $pagination-nav-padding-right
96
102
  white-space: nowrap
97
103
 
98
104
  .pagination-link
@@ -107,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
107
113
 
108
114
  .pagination-list
109
115
  flex-wrap: wrap
116
+ li
117
+ list-style: none
110
118
 
111
119
  +mobile
112
120
  .pagination
@@ -126,12 +134,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
126
134
  flex-shrink: 1
127
135
  justify-content: flex-start
128
136
  order: 1
137
+ .pagination-previous,
138
+ .pagination-next,
139
+ .pagination-link,
140
+ .pagination-ellipsis
141
+ margin-bottom: 0
142
+ margin-top: 0
129
143
  .pagination-previous
130
144
  order: 2
131
145
  .pagination-next
132
146
  order: 3
133
147
  .pagination
134
148
  justify-content: space-between
149
+ margin-bottom: 0
150
+ margin-top: 0
135
151
  &.is-centered
136
152
  .pagination-previous
137
153
  order: 1
@@ -1,7 +1,9 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $panel-margin: $block-spacing !default
2
4
  $panel-item-border: 1px solid $border-light !default
3
5
  $panel-radius: $radius-large !default
4
- $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
6
+ $panel-shadow: $shadow !default
5
7
 
6
8
  $panel-heading-background-color: $border-light !default
7
9
  $panel-heading-color: $text-strong !default
@@ -26,6 +28,7 @@ $panel-block-active-color: $link-active !default
26
28
  $panel-block-active-icon-color: $link !default
27
29
 
28
30
  $panel-icon-color: $text-light !default
31
+ $panel-colors: $colors !default
29
32
 
30
33
  .panel
31
34
  border-radius: $panel-radius
@@ -34,7 +37,7 @@ $panel-icon-color: $text-light !default
34
37
  &:not(:last-child)
35
38
  margin-bottom: $panel-margin
36
39
  // Colors
37
- @each $name, $components in $message-colors
40
+ @each $name, $components in $panel-colors
38
41
  $color: nth($components, 1)
39
42
  $color-invert: nth($components, 2)
40
43
  &.is-#{$name}
@@ -87,7 +90,7 @@ $panel-icon-color: $text-light !default
87
90
  justify-content: flex-start
88
91
  padding: 0.5em 0.75em
89
92
  input[type="checkbox"]
90
- margin-right: 0.75em
93
+ +ltr-property("margin", 0.75em)
91
94
  & > .control
92
95
  flex-grow: 1
93
96
  flex-shrink: 1
@@ -112,7 +115,7 @@ label.panel-block
112
115
  .panel-icon
113
116
  +fa(14px, 1em)
114
117
  color: $panel-icon-color
115
- margin-right: 0.75em
118
+ +ltr-property("margin", 0.75em)
116
119
  .fa
117
120
  font-size: inherit
118
121
  line-height: inherit
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $tabs-border-bottom-color: $border !default
2
4
  $tabs-border-bottom-style: solid !default
3
5
  $tabs-border-bottom-width: 1px !default
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
78
80
  padding-left: 0.75em
79
81
  .icon
80
82
  &:first-child
81
- margin-right: 0.5em
83
+ +ltr-property("margin", 0.5em)
82
84
  &:last-child
83
- margin-left: 0.5em
85
+ +ltr-property("margin", 0.5em, false)
84
86
  // Alignment
85
87
  &.is-centered
86
88
  ul
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
92
94
  &.is-boxed
93
95
  a
94
96
  border: 1px solid transparent
95
- border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
97
+ +ltr
98
+ border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
99
+ +rtl
100
+ border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
96
101
  &:hover
97
102
  background-color: $tabs-boxed-link-hover-background-color
98
103
  border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default
119
124
  z-index: 2
120
125
  li
121
126
  & + li
122
- margin-left: -#{$tabs-toggle-link-border-width}
127
+ +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
123
128
  &:first-child a
124
- border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
129
+ +ltr
130
+ border-top-left-radius: $tabs-toggle-link-radius
131
+ border-bottom-left-radius: $tabs-toggle-link-radius
132
+ +rtl
133
+ border-top-right-radius: $tabs-toggle-link-radius
134
+ border-bottom-right-radius: $tabs-toggle-link-radius
125
135
  &:last-child a
126
- border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
136
+ +ltr
137
+ border-top-right-radius: $tabs-toggle-link-radius
138
+ border-bottom-right-radius: $tabs-toggle-link-radius
139
+ +rtl
140
+ border-top-left-radius: $tabs-toggle-link-radius
141
+ border-bottom-left-radius: $tabs-toggle-link-radius
127
142
  &.is-active
128
143
  a
129
144
  background-color: $tabs-toggle-link-active-background-color
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
135
150
  &.is-toggle-rounded
136
151
  li
137
152
  &:first-child a
138
- border-bottom-left-radius: $radius-rounded
139
- border-top-left-radius: $radius-rounded
140
- padding-left: 1.25em
153
+ +ltr
154
+ border-bottom-left-radius: $radius-rounded
155
+ border-top-left-radius: $radius-rounded
156
+ padding-left: 1.25em
157
+ +rtl
158
+ border-bottom-right-radius: $radius-rounded
159
+ border-top-right-radius: $radius-rounded
160
+ padding-right: 1.25em
141
161
  &:last-child a
142
- border-bottom-right-radius: $radius-rounded
143
- border-top-right-radius: $radius-rounded
144
- padding-right: 1.25em
162
+ +ltr
163
+ border-bottom-right-radius: $radius-rounded
164
+ border-top-right-radius: $radius-rounded
165
+ padding-right: 1.25em
166
+ +rtl
167
+ border-bottom-left-radius: $radius-rounded
168
+ border-top-left-radius: $radius-rounded
169
+ padding-left: 1.25em
145
170
  // Sizes
146
171
  &.is-small
147
172
  font-size: $size-small
@@ -1,15 +1,16 @@
1
+ /* Bulma Elements */
1
2
  @charset "utf-8"
2
3
 
3
- @import "box.sass"
4
- @import "button.sass"
5
- @import "container.sass"
6
- @import "content.sass"
7
- @import "icon.sass"
8
- @import "image.sass"
9
- @import "notification.sass"
10
- @import "progress.sass"
11
- @import "table.sass"
12
- @import "tag.sass"
13
- @import "title.sass"
4
+ @import "box"
5
+ @import "button"
6
+ @import "container"
7
+ @import "content"
8
+ @import "icon"
9
+ @import "image"
10
+ @import "notification"
11
+ @import "progress"
12
+ @import "table"
13
+ @import "tag"
14
+ @import "title"
14
15
 
15
- @import "other.sass"
16
+ @import "other"
@@ -1,7 +1,9 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $box-color: $text !default
2
4
  $box-background-color: $scheme-main !default
3
5
  $box-radius: $radius-large !default
4
- $box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
6
+ $box-shadow: $shadow !default
5
7
  $box-padding: 1.25rem !default
6
8
 
7
9
  $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
@@ -1,3 +1,6 @@
1
+ @import "../utilities/controls"
2
+ @import "../utilities/mixins"
3
+
1
4
  $button-color: $text-strong !default
2
5
  $button-background-color: $scheme-main !default
3
6
  $button-family: false !default
@@ -14,15 +17,23 @@ $button-hover-border-color: $link-hover-border !default
14
17
  $button-focus-color: $link-focus !default
15
18
  $button-focus-border-color: $link-focus-border !default
16
19
  $button-focus-box-shadow-size: 0 0 0 0.125em !default
17
- $button-focus-box-shadow-color: rgba($link, 0.25) !default
20
+ $button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
18
21
 
19
22
  $button-active-color: $link-active !default
20
23
  $button-active-border-color: $link-active-border !default
21
24
 
22
25
  $button-text-color: $text !default
26
+ $button-text-decoration: underline !default
23
27
  $button-text-hover-background-color: $background !default
24
28
  $button-text-hover-color: $text-strong !default
25
29
 
30
+ $button-ghost-background: none !default
31
+ $button-ghost-border-color: transparent !default
32
+ $button-ghost-color: $link !default
33
+ $button-ghost-decoration: none !default
34
+ $button-ghost-hover-color: $link !default
35
+ $button-ghost-hover-decoration: underline !default
36
+
26
37
  $button-disabled-background-color: $scheme-main !default
27
38
  $button-disabled-border-color: $border !default
28
39
  $button-disabled-shadow: none !default
@@ -32,9 +43,12 @@ $button-static-color: $text-light !default
32
43
  $button-static-background-color: $scheme-main-ter !default
33
44
  $button-static-border-color: $border !default
34
45
 
46
+ $button-colors: $colors !default
47
+
35
48
  // The button sizes use mixins so they can be used at different breakpoints
36
49
  =button-small
37
- border-radius: $radius-small
50
+ &:not(.is-rounded)
51
+ border-radius: $radius-small
38
52
  font-size: $size-small
39
53
  =button-normal
40
54
  font-size: $size-normal
@@ -70,14 +84,14 @@ $button-static-border-color: $border !default
70
84
  height: 1.5em
71
85
  width: 1.5em
72
86
  &:first-child:not(:last-child)
73
- margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
74
- margin-right: $button-padding-horizontal / 4
87
+ +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
88
+ +ltr-property("margin", $button-padding-horizontal * 0.25)
75
89
  &:last-child:not(:first-child)
76
- margin-left: $button-padding-horizontal / 4
77
- margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
90
+ +ltr-property("margin", $button-padding-horizontal * 0.25, false)
91
+ +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
78
92
  &:first-child:last-child
79
- margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
80
- margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
93
+ margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
94
+ margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
81
95
  // States
82
96
  &:hover,
83
97
  &.is-hovered
@@ -98,7 +112,7 @@ $button-static-border-color: $border !default
98
112
  background-color: transparent
99
113
  border-color: transparent
100
114
  color: $button-text-color
101
- text-decoration: underline
115
+ text-decoration: $button-text-decoration
102
116
  &:hover,
103
117
  &.is-hovered,
104
118
  &:focus,
@@ -107,14 +121,23 @@ $button-static-border-color: $border !default
107
121
  color: $button-text-hover-color
108
122
  &:active,
109
123
  &.is-active
110
- background-color: darken($button-text-hover-background-color, 5%)
124
+ background-color: bulmaDarken($button-text-hover-background-color, 5%)
111
125
  color: $button-text-hover-color
112
126
  &[disabled],
113
127
  fieldset[disabled] &
114
128
  background-color: transparent
115
129
  border-color: transparent
116
130
  box-shadow: none
117
- @each $name, $pair in $colors
131
+ &.is-ghost
132
+ background: $button-ghost-background
133
+ border-color: $button-ghost-border-color
134
+ color: $button-ghost-color
135
+ text-decoration: $button-ghost-decoration
136
+ &:hover,
137
+ &.is-hovered
138
+ color: $button-ghost-hover-color
139
+ text-decoration: $button-ghost-hover-decoration
140
+ @each $name, $pair in $button-colors
118
141
  $color: nth($pair, 1)
119
142
  $color-invert: nth($pair, 2)
120
143
  &.is-#{$name}
@@ -123,7 +146,7 @@ $button-static-border-color: $border !default
123
146
  color: $color-invert
124
147
  &:hover,
125
148
  &.is-hovered
126
- background-color: darken($color, 2.5%)
149
+ background-color: bulmaDarken($color, 2.5%)
127
150
  border-color: transparent
128
151
  color: $color-invert
129
152
  &:focus,
@@ -131,10 +154,10 @@ $button-static-border-color: $border !default
131
154
  border-color: transparent
132
155
  color: $color-invert
133
156
  &:not(:active)
134
- box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
157
+ box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
135
158
  &:active,
136
159
  &.is-active
137
- background-color: darken($color, 5%)
160
+ background-color: bulmaDarken($color, 5%)
138
161
  border-color: transparent
139
162
  color: $color-invert
140
163
  &[disabled],
@@ -147,7 +170,7 @@ $button-static-border-color: $border !default
147
170
  color: $color
148
171
  &:hover,
149
172
  &.is-hovered
150
- background-color: darken($color-invert, 5%)
173
+ background-color: bulmaDarken($color-invert, 5%)
151
174
  &[disabled],
152
175
  fieldset[disabled] &
153
176
  background-color: $color-invert
@@ -215,12 +238,12 @@ $button-static-border-color: $border !default
215
238
  color: $color-dark
216
239
  &:hover,
217
240
  &.is-hovered
218
- background-color: darken($color-light, 2.5%)
241
+ background-color: bulmaDarken($color-light, 2.5%)
219
242
  border-color: transparent
220
243
  color: $color-dark
221
244
  &:active,
222
245
  &.is-active
223
- background-color: darken($color-light, 5%)
246
+ background-color: bulmaDarken($color-light, 5%)
224
247
  border-color: transparent
225
248
  color: $color-dark
226
249
  // Sizes
@@ -268,7 +291,7 @@ $button-static-border-color: $border !default
268
291
  .button
269
292
  margin-bottom: 0.5rem
270
293
  &:not(:last-child):not(.is-fullwidth)
271
- margin-right: 0.5rem
294
+ +ltr-property("margin", 0.5rem)
272
295
  &:last-child
273
296
  margin-bottom: -0.5rem
274
297
  &:not(:last-child)
@@ -291,9 +314,9 @@ $button-static-border-color: $border !default
291
314
  &:not(:last-child)
292
315
  border-bottom-right-radius: 0
293
316
  border-top-right-radius: 0
294
- margin-right: -1px
317
+ +ltr-property("margin", -1px)
295
318
  &:last-child
296
- margin-right: 0
319
+ +ltr-property("margin", 0)
297
320
  &:hover,
298
321
  &.is-hovered
299
322
  z-index: 2
@@ -1,4 +1,7 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $container-offset: (2 * $gap) !default
4
+ $container-max-width: $fullhd !default
2
5
 
3
6
  .container
4
7
  flex-grow: 1
@@ -6,19 +9,21 @@ $container-offset: (2 * $gap) !default
6
9
  position: relative
7
10
  width: auto
8
11
  &.is-fluid
9
- max-width: none
12
+ max-width: none !important
10
13
  padding-left: $gap
11
14
  padding-right: $gap
12
15
  width: 100%
13
16
  +desktop
14
17
  max-width: $desktop - $container-offset
15
18
  +until-widescreen
16
- &.is-widescreen
17
- max-width: $widescreen - $container-offset
19
+ &.is-widescreen:not(.is-max-desktop)
20
+ max-width: min($widescreen, $container-max-width) - $container-offset
18
21
  +until-fullhd
19
- &.is-fullhd
20
- max-width: $fullhd - $container-offset
22
+ &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
23
+ max-width: min($fullhd, $container-max-width) - $container-offset
21
24
  +widescreen
22
- max-width: $widescreen - $container-offset
25
+ &:not(.is-max-desktop)
26
+ max-width: min($widescreen, $container-max-width) - $container-offset
23
27
  +fullhd
24
- max-width: $fullhd - $container-offset
28
+ &:not(.is-max-desktop):not(.is-max-widescreen)
29
+ max-width: min($fullhd, $container-max-width) - $container-offset
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $content-heading-color: $text-strong !default
2
4
  $content-heading-weight: $weight-semibold !default
3
5
  $content-heading-line-height: 1.125 !default
@@ -67,11 +69,11 @@ $content-table-foot-cell-color: $text-strong !default
67
69
  margin-bottom: 1em
68
70
  blockquote
69
71
  background-color: $content-blockquote-background-color
70
- border-left: $content-blockquote-border-left
72
+ +ltr-property("border", $content-blockquote-border-left, false)
71
73
  padding: $content-blockquote-padding
72
74
  ol
73
75
  list-style-position: outside
74
- margin-left: 2em
76
+ +ltr-property("margin", 2em, false)
75
77
  margin-top: 1em
76
78
  &:not([type])
77
79
  list-style-type: decimal
@@ -85,7 +87,7 @@ $content-table-foot-cell-color: $text-strong !default
85
87
  list-style-type: upper-roman
86
88
  ul
87
89
  list-style: disc outside
88
- margin-left: 2em
90
+ +ltr-property("margin", 2em, false)
89
91
  margin-top: 1em
90
92
  ul
91
93
  list-style-type: circle
@@ -93,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default
93
95
  ul
94
96
  list-style-type: square
95
97
  dd
96
- margin-left: 2em
98
+ +ltr-property("margin", 2em, false)
97
99
  figure
98
100
  margin-left: 2em
99
101
  margin-right: 2em
@@ -126,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
126
128
  th
127
129
  color: $content-table-cell-heading-color
128
130
  &:not([align])
129
- text-align: left
131
+ text-align: inherit
130
132
  thead
131
133
  td,
132
134
  th
@@ -149,6 +151,8 @@ $content-table-foot-cell-color: $text-strong !default
149
151
  // Sizes
150
152
  &.is-small
151
153
  font-size: $size-small
154
+ &.is-normal
155
+ font-size: $size-normal
152
156
  &.is-medium
153
157
  font-size: $size-medium
154
158
  &.is-large