bulma-rails 0.7.3 → 0.9.0

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 (63) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/README.md +1 -1
  4. data/app/assets/stylesheets/bulma.sass +3 -1
  5. data/app/assets/stylesheets/sass/base/_all.sass +0 -1
  6. data/app/assets/stylesheets/sass/base/generic.sass +22 -10
  7. data/app/assets/stylesheets/sass/base/helpers.sass +1 -276
  8. data/app/assets/stylesheets/sass/base/minireset.sass +3 -3
  9. data/app/assets/stylesheets/sass/components/_all.sass +0 -1
  10. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  11. data/app/assets/stylesheets/sass/components/card.sass +15 -10
  12. data/app/assets/stylesheets/sass/components/dropdown.sass +15 -11
  13. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  14. data/app/assets/stylesheets/sass/components/media.sass +14 -10
  15. data/app/assets/stylesheets/sass/components/menu.sass +16 -9
  16. data/app/assets/stylesheets/sass/components/message.sass +24 -11
  17. data/app/assets/stylesheets/sass/components/modal.sass +4 -4
  18. data/app/assets/stylesheets/sass/components/navbar.sass +40 -27
  19. data/app/assets/stylesheets/sass/components/pagination.sass +16 -10
  20. data/app/assets/stylesheets/sass/components/panel.sass +33 -15
  21. data/app/assets/stylesheets/sass/components/tabs.sass +36 -13
  22. data/app/assets/stylesheets/sass/elements/_all.sass +0 -1
  23. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  24. data/app/assets/stylesheets/sass/elements/button.sass +79 -31
  25. data/app/assets/stylesheets/sass/elements/container.sass +14 -15
  26. data/app/assets/stylesheets/sass/elements/content.sass +9 -5
  27. data/app/assets/stylesheets/sass/elements/form.sass +1 -602
  28. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  29. data/app/assets/stylesheets/sass/elements/notification.sass +16 -3
  30. data/app/assets/stylesheets/sass/elements/progress.sass +16 -14
  31. data/app/assets/stylesheets/sass/elements/table.sass +10 -7
  32. data/app/assets/stylesheets/sass/elements/tag.sass +31 -25
  33. data/app/assets/stylesheets/sass/elements/title.sass +9 -3
  34. data/app/assets/stylesheets/sass/form/_all.sass +8 -0
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +21 -0
  36. data/app/assets/stylesheets/sass/form/file.sass +180 -0
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +64 -0
  38. data/app/assets/stylesheets/sass/form/select.sass +85 -0
  39. data/app/assets/stylesheets/sass/form/shared.sass +55 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +213 -0
  41. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  42. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  43. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -0
  44. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  45. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  46. data/app/assets/stylesheets/sass/helpers/other.sass +8 -0
  47. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  48. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  49. data/app/assets/stylesheets/sass/helpers/spacing.sass +28 -0
  50. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  51. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  52. data/app/assets/stylesheets/sass/layout/footer.sass +4 -1
  53. data/app/assets/stylesheets/sass/layout/hero.sass +23 -34
  54. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -1
  55. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  56. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +132 -0
  57. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  58. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +10 -4
  59. data/app/assets/stylesheets/sass/utilities/mixins.sass +31 -7
  60. data/bulma-rails.gemspec +2 -2
  61. metadata +23 -8
  62. data/app/assets/stylesheets/sass/components/list.sass +0 -39
  63. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -85
@@ -1,16 +1,21 @@
1
1
  $card-color: $text !default
2
- $card-background-color: $white !default
3
- $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
2
+ $card-background-color: $scheme-main !default
3
+ $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
4
4
 
5
5
  $card-header-background-color: transparent !default
6
6
  $card-header-color: $text-strong !default
7
- $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
7
+ $card-header-padding: 0.75rem 1rem !default
8
+ $card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
8
9
  $card-header-weight: $weight-bold !default
9
10
 
10
11
  $card-content-background-color: transparent !default
12
+ $card-content-padding: 1.5rem !default
11
13
 
12
14
  $card-footer-background-color: transparent !default
13
- $card-footer-border-top: 1px solid $border !default
15
+ $card-footer-border-top: 1px solid $border-light !default
16
+ $card-footer-padding: 0.75rem !default
17
+
18
+ $card-media-margin: $block-spacing !default
14
19
 
15
20
  .card
16
21
  background-color: $card-background-color
@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
31
36
  display: flex
32
37
  flex-grow: 1
33
38
  font-weight: $card-header-weight
34
- padding: 0.75rem
39
+ padding: $card-header-padding
35
40
  &.is-centered
36
41
  justify-content: center
37
42
 
@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
40
45
  cursor: pointer
41
46
  display: flex
42
47
  justify-content: center
43
- padding: 0.75rem
48
+ padding: $card-header-padding
44
49
 
45
50
  .card-image
46
51
  display: block
@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
48
53
 
49
54
  .card-content
50
55
  background-color: $card-content-background-color
51
- padding: 1.5rem
56
+ padding: $card-content-padding
52
57
 
53
58
  .card-footer
54
59
  background-color: $card-footer-background-color
@@ -63,12 +68,12 @@ $card-footer-border-top: 1px solid $border !default
63
68
  flex-grow: 1
64
69
  flex-shrink: 0
65
70
  justify-content: center
66
- padding: 0.75rem
71
+ padding: $card-footer-padding
67
72
  &:not(:last-child)
68
- border-right: $card-footer-border-top
73
+ +ltr-property("border", $card-footer-border-top)
69
74
 
70
75
  // Combinations
71
76
 
72
77
  .card
73
78
  .media:not(:last-child)
74
- margin-bottom: 0.75rem
79
+ margin-bottom: $card-media-margin
@@ -1,17 +1,21 @@
1
- $dropdown-content-background-color: $white !default
1
+ $dropdown-menu-min-width: 12rem !default
2
+
3
+ $dropdown-content-background-color: $scheme-main !default
2
4
  $dropdown-content-arrow: $link !default
3
5
  $dropdown-content-offset: 4px !default
6
+ $dropdown-content-padding-bottom: 0.5rem !default
7
+ $dropdown-content-padding-top: 0.5rem !default
4
8
  $dropdown-content-radius: $radius !default
5
- $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
9
+ $dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
6
10
  $dropdown-content-z: 20 !default
7
11
 
8
- $dropdown-item-color: $grey-dark !default
9
- $dropdown-item-hover-color: $black !default
12
+ $dropdown-item-color: $text !default
13
+ $dropdown-item-hover-color: $scheme-invert !default
10
14
  $dropdown-item-hover-background-color: $background !default
11
15
  $dropdown-item-active-color: $link-invert !default
12
16
  $dropdown-item-active-background-color: $link !default
13
17
 
14
- $dropdown-divider-background-color: $border !default
18
+ $dropdown-divider-background-color: $border-light !default
15
19
 
16
20
  .dropdown
17
21
  display: inline-flex
@@ -34,8 +38,8 @@ $dropdown-divider-background-color: $border !default
34
38
 
35
39
  .dropdown-menu
36
40
  display: none
37
- left: 0
38
- min-width: 12rem
41
+ +ltr-position(0, false)
42
+ min-width: $dropdown-menu-min-width
39
43
  padding-top: $dropdown-content-offset
40
44
  position: absolute
41
45
  top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
45
49
  background-color: $dropdown-content-background-color
46
50
  border-radius: $dropdown-content-radius
47
51
  box-shadow: $dropdown-content-shadow
48
- padding-bottom: 0.5rem
49
- padding-top: 0.5rem
52
+ padding-bottom: $dropdown-content-padding-bottom
53
+ padding-top: $dropdown-content-padding-top
50
54
 
51
55
  .dropdown-item
52
56
  color: $dropdown-item-color
@@ -58,8 +62,8 @@ $dropdown-divider-background-color: $border !default
58
62
 
59
63
  a.dropdown-item,
60
64
  button.dropdown-item
61
- padding-right: 3rem
62
- text-align: left
65
+ +ltr-property("padding", 3rem)
66
+ text-align: inherit
63
67
  white-space: nowrap
64
68
  width: 100%
65
69
  &:hover
@@ -1,3 +1,5 @@
1
+ $level-item-spacing: ($block-spacing / 2) !default
2
+
1
3
  .level
2
4
  @extend %block
3
5
  align-items: center
@@ -18,7 +20,7 @@
18
20
  .level-item
19
21
  &:not(:last-child)
20
22
  margin-bottom: 0
21
- margin-right: 0.75rem
23
+ +ltr-property("margin", $level-item-spacing)
22
24
  &:not(.is-narrow)
23
25
  flex-grow: 1
24
26
  // Responsiveness
@@ -41,7 +43,7 @@
41
43
  // Responsiveness
42
44
  +mobile
43
45
  &:not(:last-child)
44
- margin-bottom: 0.75rem
46
+ margin-bottom: $level-item-spacing
45
47
 
46
48
  .level-left,
47
49
  .level-right
@@ -55,7 +57,7 @@
55
57
  // Responsiveness
56
58
  +tablet
57
59
  &:not(:last-child)
58
- margin-right: 0.75rem
60
+ +ltr-property("margin", $level-item-spacing)
59
61
 
60
62
  .level-left
61
63
  align-items: center
@@ -1,11 +1,15 @@
1
+ $media-border-color: bulmaRgba($border, 0.5) !default
2
+ $media-spacing: 1rem
3
+ $media-spacing-large: 1.5rem
4
+
1
5
  .media
2
6
  align-items: flex-start
3
7
  display: flex
4
- text-align: left
8
+ text-align: inherit
5
9
  .content:not(:last-child)
6
10
  margin-bottom: 0.75rem
7
11
  .media
8
- border-top: 1px solid rgba($border, 0.5)
12
+ border-top: 1px solid $media-border-color
9
13
  display: flex
10
14
  padding-top: 0.75rem
11
15
  .content:not(:last-child),
@@ -16,14 +20,14 @@
16
20
  & + .media
17
21
  margin-top: 0.5rem
18
22
  & + .media
19
- border-top: 1px solid rgba($border, 0.5)
20
- margin-top: 1rem
21
- padding-top: 1rem
23
+ border-top: 1px solid $media-border-color
24
+ margin-top: $media-spacing
25
+ padding-top: $media-spacing
22
26
  // Sizes
23
27
  &.is-large
24
28
  & + .media
25
- margin-top: 1.5rem
26
- padding-top: 1.5rem
29
+ margin-top: $media-spacing-large
30
+ padding-top: $media-spacing-large
27
31
 
28
32
  .media-left,
29
33
  .media-right
@@ -32,16 +36,16 @@
32
36
  flex-shrink: 0
33
37
 
34
38
  .media-left
35
- margin-right: 1rem
39
+ +ltr-property("margin", $media-spacing)
36
40
 
37
41
  .media-right
38
- margin-left: 1rem
42
+ +ltr-property("margin", $media-spacing, false)
39
43
 
40
44
  .media-content
41
45
  flex-basis: auto
42
46
  flex-grow: 1
43
47
  flex-shrink: 1
44
- text-align: left
48
+ text-align: inherit
45
49
 
46
50
  +mobile
47
51
  .media-content
@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
6
6
  $menu-item-active-background-color: $link !default
7
7
 
8
8
  $menu-list-border-left: 1px solid $border !default
9
+ $menu-list-line-height: 1.25 !default
10
+ $menu-list-link-padding: 0.5em 0.75em !default
11
+ $menu-nested-list-margin: 0.75em !default
12
+ $menu-nested-list-padding-left: 0.75em !default
9
13
 
10
14
  $menu-label-color: $text-light !default
15
+ $menu-label-font-size: 0.75em !default
16
+ $menu-label-letter-spacing: 0.1em !default
17
+ $menu-label-spacing: 1em !default
11
18
 
12
19
  .menu
13
20
  font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
20
27
  font-size: $size-large
21
28
 
22
29
  .menu-list
23
- line-height: 1.25
30
+ line-height: $menu-list-line-height
24
31
  a
25
32
  border-radius: $menu-item-radius
26
33
  color: $menu-item-color
27
34
  display: block
28
- padding: 0.5em 0.75em
35
+ padding: $menu-list-link-padding
29
36
  &:hover
30
37
  background-color: $menu-item-hover-background-color
31
38
  color: $menu-item-hover-color
@@ -35,16 +42,16 @@ $menu-label-color: $text-light !default
35
42
  color: $menu-item-active-color
36
43
  li
37
44
  ul
38
- border-left: $menu-list-border-left
39
- margin: 0.75em
40
- padding-left: 0.75em
45
+ +ltr-property("border", $menu-list-border-left, false)
46
+ margin: $menu-nested-list-margin
47
+ +ltr-property("padding", $menu-nested-list-padding-left, false)
41
48
 
42
49
  .menu-label
43
50
  color: $menu-label-color
44
- font-size: 0.75em
45
- letter-spacing: 0.1em
51
+ font-size: $menu-label-font-size
52
+ letter-spacing: $menu-label-letter-spacing
46
53
  text-transform: uppercase
47
54
  &:not(:first-child)
48
- margin-top: 1em
55
+ margin-top: $menu-label-spacing
49
56
  &:not(:last-child)
50
- margin-bottom: 1em
57
+ margin-bottom: $menu-label-spacing
@@ -13,10 +13,11 @@ $message-body-color: $text !default
13
13
  $message-body-padding: 1.25em 1.5em !default
14
14
  $message-body-radius: $radius !default
15
15
 
16
- $message-body-pre-background-color: $white !default
16
+ $message-body-pre-background-color: $scheme-main !default
17
17
  $message-body-pre-code-background-color: transparent !default
18
18
 
19
19
  $message-header-body-border-width: 0 !default
20
+ $message-colors: $colors !default
20
21
 
21
22
  .message
22
23
  @extend %block
@@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default
36
37
  &.is-large
37
38
  font-size: $size-large
38
39
  // Colors
39
- @each $name, $pair in $colors
40
- $color: nth($pair, 1)
41
- $color-invert: nth($pair, 2)
42
- $color-lightning: max((100% - lightness($color)) - 2%, 0%)
43
- $color-luminance: colorLuminance($color)
44
- $darken-percentage: $color-luminance * 70%
45
- $desaturate-percentage: $color-luminance * 30%
40
+ @each $name, $components in $message-colors
41
+ $color: nth($components, 1)
42
+ $color-invert: nth($components, 2)
43
+ $color-light: null
44
+ $color-dark: null
45
+
46
+ @if length($components) >= 3
47
+ $color-light: nth($components, 3)
48
+ @if length($components) >= 4
49
+ $color-dark: nth($components, 4)
50
+ @else
51
+ $color-luminance: colorLuminance($color)
52
+ $darken-percentage: $color-luminance * 70%
53
+ $desaturate-percentage: $color-luminance * 30%
54
+ $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
55
+ @else
56
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
57
+ $color-light: lighten($color, $color-lightning)
58
+
46
59
  &.is-#{$name}
47
- background-color: lighten($color, $color-lightning)
60
+ background-color: $color-light
48
61
  .message-header
49
62
  background-color: $color
50
63
  color: $color-invert
51
64
  .message-body
52
65
  border-color: $color
53
- color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
66
+ color: $color-dark
54
67
 
55
68
  .message-header
56
69
  align-items: center
@@ -66,7 +79,7 @@ $message-header-body-border-width: 0 !default
66
79
  .delete
67
80
  flex-grow: 0
68
81
  flex-shrink: 0
69
- margin-left: 0.75em
82
+ +ltr-property("margin", 0.75em, false)
70
83
  & + .message-body
71
84
  border-width: $message-header-body-border-width
72
85
  border-top-left-radius: 0
@@ -1,6 +1,6 @@
1
1
  $modal-z: 40 !default
2
2
 
3
- $modal-background-background-color: rgba($black, 0.86) !default
3
+ $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
4
4
 
5
5
  $modal-content-width: 640px !default
6
6
  $modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
25
25
  $modal-card-foot-radius: $radius-large !default
26
26
  $modal-card-foot-border-top: 1px solid $border !default
27
27
 
28
- $modal-card-body-background-color: $white !default
28
+ $modal-card-body-background-color: $scheme-main !default
29
29
  $modal-card-body-padding: 20px !default
30
30
 
31
31
  .modal
@@ -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: 10px
105
+ +ltr-property("margin", 0.5em)
106
106
 
107
107
  .modal-card-body
108
108
  +overflow-touch
@@ -1,4 +1,4 @@
1
- $navbar-background-color: $white !default
1
+ $navbar-background-color: $scheme-main !default
2
2
  $navbar-box-shadow-size: 0 2px 0 0 !default
3
3
  $navbar-box-shadow-color: $background !default
4
4
  $navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
7
7
  $navbar-z: 30 !default
8
8
  $navbar-fixed-z: 30 !default
9
9
 
10
- $navbar-item-color: $grey-dark !default
10
+ $navbar-item-color: $text !default
11
11
  $navbar-item-hover-color: $link !default
12
- $navbar-item-hover-background-color: $white-bis !default
13
- $navbar-item-active-color: $black !default
12
+ $navbar-item-hover-background-color: $scheme-main-bis !default
13
+ $navbar-item-active-color: $scheme-invert !default
14
14
  $navbar-item-active-background-color: transparent !default
15
15
  $navbar-item-img-max-height: 1.75rem !default
16
16
 
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
24
24
  $navbar-tab-active-border-bottom-style: solid !default
25
25
  $navbar-tab-active-border-bottom-width: 3px !default
26
26
 
27
- $navbar-dropdown-background-color: $white !default
27
+ $navbar-dropdown-background-color: $scheme-main !default
28
28
  $navbar-dropdown-border-top: 2px solid $border !default
29
29
  $navbar-dropdown-offset: -4px !default
30
30
  $navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
32
32
  $navbar-dropdown-z: 20 !default
33
33
 
34
34
  $navbar-dropdown-boxed-radius: $radius-large !default
35
- $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
35
+ $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
36
36
 
37
- $navbar-dropdown-item-hover-color: $black !default
37
+ $navbar-dropdown-item-hover-color: $scheme-invert !default
38
38
  $navbar-dropdown-item-hover-background-color: $background !default
39
39
  $navbar-dropdown-item-active-color: $link !default
40
40
  $navbar-dropdown-item-active-background-color: $background !default
@@ -69,9 +69,10 @@ $navbar-breakpoint: $desktop !default
69
69
  color: $color-invert
70
70
  & > a.navbar-item,
71
71
  .navbar-link
72
+ &:focus,
72
73
  &:hover,
73
74
  &.is-active
74
- background-color: darken($color, 5%)
75
+ background-color: bulmaDarken($color, 5%)
75
76
  color: $color-invert
76
77
  .navbar-link
77
78
  &::after
@@ -86,16 +87,18 @@ $navbar-breakpoint: $desktop !default
86
87
  color: $color-invert
87
88
  & > a.navbar-item,
88
89
  .navbar-link
90
+ &:focus,
89
91
  &:hover,
90
92
  &.is-active
91
- background-color: darken($color, 5%)
93
+ background-color: bulmaDarken($color, 5%)
92
94
  color: $color-invert
93
95
  .navbar-link
94
96
  &::after
95
97
  border-color: $color-invert
98
+ .navbar-item.has-dropdown:focus .navbar-link,
96
99
  .navbar-item.has-dropdown:hover .navbar-link,
97
100
  .navbar-item.has-dropdown.is-active .navbar-link
98
- background-color: darken($color, 5%)
101
+ background-color: bulmaDarken($color, 5%)
99
102
  color: $color-invert
100
103
  .navbar-dropdown
101
104
  a.navbar-item
@@ -135,6 +138,7 @@ body
135
138
 
136
139
  .navbar-brand
137
140
  a.navbar-item
141
+ &:focus,
138
142
  &:hover
139
143
  background-color: transparent
140
144
 
@@ -147,7 +151,7 @@ body
147
151
  .navbar-burger
148
152
  color: $navbar-burger-color
149
153
  +hamburger($navbar-height)
150
- margin-left: auto
154
+ +ltr-property("margin", auto, false)
151
155
 
152
156
  .navbar-menu
153
157
  display: none
@@ -167,13 +171,14 @@ body
167
171
  a.navbar-item,
168
172
  .navbar-link
169
173
  cursor: pointer
174
+ &:focus,
175
+ &:focus-within,
170
176
  &:hover,
171
177
  &.is-active
172
178
  background-color: $navbar-item-hover-background-color
173
179
  color: $navbar-item-hover-color
174
180
 
175
181
  .navbar-item
176
- display: block
177
182
  flex-grow: 0
178
183
  flex-shrink: 0
179
184
  img
@@ -187,6 +192,7 @@ a.navbar-item,
187
192
  border-bottom: 1px solid transparent
188
193
  min-height: $navbar-height
189
194
  padding-bottom: calc(0.5rem - 1px)
195
+ &:focus,
190
196
  &:hover
191
197
  background-color: $navbar-tab-hover-background-color
192
198
  border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -203,12 +209,12 @@ a.navbar-item,
203
209
  flex-shrink: 1
204
210
 
205
211
  .navbar-link:not(.is-arrowless)
206
- padding-right: 2.5em
212
+ +ltr-property("padding", 2.5em)
207
213
  &::after
208
214
  @extend %arrow
209
215
  border-color: $navbar-dropdown-arrow
210
216
  margin-top: -0.375em
211
- right: 1.125em
217
+ +ltr-position(1.125em)
212
218
 
213
219
  .navbar-dropdown
214
220
  font-size: 0.875rem
@@ -238,7 +244,7 @@ a.navbar-item,
238
244
  display: none
239
245
  .navbar-menu
240
246
  background-color: $navbar-background-color
241
- box-shadow: 0 8px 16px rgba($black, 0.1)
247
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
242
248
  padding: 0.5rem 0
243
249
  &.is-active
244
250
  display: block
@@ -250,7 +256,7 @@ a.navbar-item,
250
256
  &.is-fixed-bottom-touch
251
257
  bottom: 0
252
258
  &.has-shadow
253
- box-shadow: 0 -2px 3px rgba($black, 0.1)
259
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
254
260
  &.is-fixed-top-touch
255
261
  top: 0
256
262
  &.is-fixed-top,
@@ -286,16 +292,20 @@ a.navbar-item,
286
292
  &.is-transparent
287
293
  a.navbar-item,
288
294
  .navbar-link
295
+ &:focus,
289
296
  &:hover,
290
297
  &.is-active
291
298
  background-color: transparent !important
292
299
  .navbar-item.has-dropdown
293
300
  &.is-active,
301
+ &.is-hoverable:focus,
302
+ &.is-hoverable:focus-within,
294
303
  &.is-hoverable:hover
295
304
  .navbar-link
296
305
  background-color: transparent !important
297
306
  .navbar-dropdown
298
307
  a.navbar-item
308
+ &:focus,
299
309
  &:hover
300
310
  background-color: $navbar-dropdown-item-hover-background-color
301
311
  color: $navbar-dropdown-item-hover-color
@@ -309,7 +319,6 @@ a.navbar-item,
309
319
  align-items: center
310
320
  display: flex
311
321
  .navbar-item
312
- display: flex
313
322
  &.has-dropdown
314
323
  align-items: stretch
315
324
  &.has-dropdown-up
@@ -320,9 +329,11 @@ a.navbar-item,
320
329
  border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
321
330
  border-top: none
322
331
  bottom: 100%
323
- box-shadow: 0 -8px 8px rgba($black, 0.1)
332
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
324
333
  top: auto
325
334
  &.is-active,
335
+ &.is-hoverable:focus,
336
+ &.is-hoverable:focus-within,
326
337
  &.is-hoverable:hover
327
338
  .navbar-dropdown
328
339
  display: block
@@ -336,19 +347,19 @@ a.navbar-item,
336
347
  flex-shrink: 0
337
348
  .navbar-start
338
349
  justify-content: flex-start
339
- margin-right: auto
350
+ +ltr-property("margin", auto)
340
351
  .navbar-end
341
352
  justify-content: flex-end
342
- margin-left: auto
353
+ +ltr-property("margin", auto, false)
343
354
  .navbar-dropdown
344
355
  background-color: $navbar-dropdown-background-color
345
356
  border-bottom-left-radius: $navbar-dropdown-radius
346
357
  border-bottom-right-radius: $navbar-dropdown-radius
347
358
  border-top: $navbar-dropdown-border-top
348
- box-shadow: 0 8px 8px rgba($black, 0.1)
359
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
349
360
  display: none
350
361
  font-size: 0.875rem
351
- left: 0
362
+ +ltr-position(0, false)
352
363
  min-width: 100%
353
364
  position: absolute
354
365
  top: 100%
@@ -357,7 +368,8 @@ a.navbar-item,
357
368
  padding: 0.375rem 1rem
358
369
  white-space: nowrap
359
370
  a.navbar-item
360
- padding-right: 3rem
371
+ +ltr-property("padding", 3rem)
372
+ &:focus,
361
373
  &:hover
362
374
  background-color: $navbar-dropdown-item-hover-background-color
363
375
  color: $navbar-dropdown-item-hover-color
@@ -384,9 +396,9 @@ a.navbar-item,
384
396
  .navbar > .container,
385
397
  .container > .navbar
386
398
  .navbar-brand
387
- margin-left: -.75rem
399
+ +ltr-property("margin", -.75rem, false)
388
400
  .navbar-menu
389
- margin-right: -.75rem
401
+ +ltr-property("margin", -.75rem)
390
402
  // Fixed navbar
391
403
  .navbar
392
404
  &.is-fixed-bottom-desktop,
@@ -395,7 +407,7 @@ a.navbar-item,
395
407
  &.is-fixed-bottom-desktop
396
408
  bottom: 0
397
409
  &.has-shadow
398
- box-shadow: 0 -2px 3px rgba($black, 0.1)
410
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
399
411
  &.is-fixed-top-desktop
400
412
  top: 0
401
413
  html,
@@ -413,9 +425,10 @@ a.navbar-item,
413
425
  .navbar-link
414
426
  &.is-active
415
427
  color: $navbar-item-active-color
416
- &.is-active:not(:hover)
428
+ &.is-active:not(:focus):not(:hover)
417
429
  background-color: $navbar-item-active-background-color
418
430
  .navbar-item.has-dropdown
431
+ &:focus,
419
432
  &:hover,
420
433
  &.is-active
421
434
  .navbar-link