jekyll-bulma 0.9.2 → 0.9.4

Sign up to get free protection for your applications and to get access to all the features.
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