bulma-rails 0.9.4 → 1.0.2

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 (143) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +74 -13
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +114 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +799 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +647 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +289 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +36 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +113 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +144 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +176 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +352 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns.scss +961 -0
  44. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  45. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  46. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  47. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  48. data/app/assets/stylesheets/sass/helpers/color.scss +344 -0
  49. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  50. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  51. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  52. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  53. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  54. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  55. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  56. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  57. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  58. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  59. data/app/assets/stylesheets/sass/layout/container.scss +59 -0
  60. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  61. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  62. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  63. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  64. data/app/assets/stylesheets/sass/layout/section.scss +38 -0
  65. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  66. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  67. data/app/assets/stylesheets/sass/themes/light.scss +146 -0
  68. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  69. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  70. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  71. data/app/assets/stylesheets/sass/utilities/css-variables.scss +426 -0
  72. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  73. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  74. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  75. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  76. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  77. data/bulma-rails.gemspec +4 -6
  78. metadata +83 -74
  79. data/app/assets/stylesheets/bulma.sass +0 -10
  80. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  81. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  82. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  83. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  84. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  85. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  86. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  87. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  88. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  89. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  90. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  91. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  93. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  94. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  95. data/app/assets/stylesheets/sass/components/pagination.sass +0 -167
  96. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  97. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  98. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  99. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  100. data/app/assets/stylesheets/sass/elements/button.sass +0 -357
  101. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  102. data/app/assets/stylesheets/sass/elements/content.sass +0 -162
  103. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  104. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  105. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  106. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  107. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  108. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  109. data/app/assets/stylesheets/sass/elements/table.sass +0 -134
  110. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  111. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  112. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  113. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  114. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  115. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  116. data/app/assets/stylesheets/sass/form/select.sass +0 -88
  117. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  118. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  119. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  120. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  121. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  122. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  123. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  124. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  125. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  126. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  127. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  128. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  129. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  130. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  131. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  132. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  133. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  134. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  135. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  136. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  137. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  138. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  139. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  140. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  141. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -135
  142. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -79
  143. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -303
@@ -1,59 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $menu-item-color: $text !default
4
- $menu-item-radius: $radius-small !default
5
- $menu-item-hover-color: $text-strong !default
6
- $menu-item-hover-background-color: $background !default
7
- $menu-item-active-color: $link-invert !default
8
- $menu-item-active-background-color: $link !default
9
-
10
- $menu-list-border-left: 1px solid $border !default
11
- $menu-list-line-height: 1.25 !default
12
- $menu-list-link-padding: 0.5em 0.75em !default
13
- $menu-nested-list-margin: 0.75em !default
14
- $menu-nested-list-padding-left: 0.75em !default
15
-
16
- $menu-label-color: $text-light !default
17
- $menu-label-font-size: 0.75em !default
18
- $menu-label-letter-spacing: 0.1em !default
19
- $menu-label-spacing: 1em !default
20
-
21
- .menu
22
- font-size: $size-normal
23
- // Sizes
24
- &.is-small
25
- font-size: $size-small
26
- &.is-medium
27
- font-size: $size-medium
28
- &.is-large
29
- font-size: $size-large
30
-
31
- .menu-list
32
- line-height: $menu-list-line-height
33
- a
34
- border-radius: $menu-item-radius
35
- color: $menu-item-color
36
- display: block
37
- padding: $menu-list-link-padding
38
- &:hover
39
- background-color: $menu-item-hover-background-color
40
- color: $menu-item-hover-color
41
- // Modifiers
42
- &.is-active
43
- background-color: $menu-item-active-background-color
44
- color: $menu-item-active-color
45
- li
46
- ul
47
- +ltr-property("border", $menu-list-border-left, false)
48
- margin: $menu-nested-list-margin
49
- +ltr-property("padding", $menu-nested-list-padding-left, false)
50
-
51
- .menu-label
52
- color: $menu-label-color
53
- font-size: $menu-label-font-size
54
- letter-spacing: $menu-label-letter-spacing
55
- text-transform: uppercase
56
- &:not(:first-child)
57
- margin-top: $menu-label-spacing
58
- &:not(:last-child)
59
- margin-bottom: $menu-label-spacing
@@ -1,101 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $message-background-color: $background !default
4
- $message-radius: $radius !default
5
-
6
- $message-header-background-color: $text !default
7
- $message-header-color: $text-invert !default
8
- $message-header-weight: $weight-bold !default
9
- $message-header-padding: 0.75em 1em !default
10
- $message-header-radius: $radius !default
11
-
12
- $message-body-border-color: $border !default
13
- $message-body-border-width: 0 0 0 4px !default
14
- $message-body-color: $text !default
15
- $message-body-padding: 1.25em 1.5em !default
16
- $message-body-radius: $radius !default
17
-
18
- $message-body-pre-background-color: $scheme-main !default
19
- $message-body-pre-code-background-color: transparent !default
20
-
21
- $message-header-body-border-width: 0 !default
22
- $message-colors: $colors !default
23
-
24
- .message
25
- @extend %block
26
- background-color: $message-background-color
27
- border-radius: $message-radius
28
- font-size: $size-normal
29
- strong
30
- color: currentColor
31
- a:not(.button):not(.tag):not(.dropdown-item)
32
- color: currentColor
33
- text-decoration: underline
34
- // Sizes
35
- &.is-small
36
- font-size: $size-small
37
- &.is-medium
38
- font-size: $size-medium
39
- &.is-large
40
- font-size: $size-large
41
- // Colors
42
- @each $name, $components in $message-colors
43
- $color: nth($components, 1)
44
- $color-invert: nth($components, 2)
45
- $color-light: null
46
- $color-dark: null
47
-
48
- @if length($components) >= 3
49
- $color-light: nth($components, 3)
50
- @if length($components) >= 4
51
- $color-dark: nth($components, 4)
52
- @else
53
- $color-luminance: colorLuminance($color)
54
- $darken-percentage: $color-luminance * 70%
55
- $desaturate-percentage: $color-luminance * 30%
56
- $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
57
- @else
58
- $color-lightning: max((100% - lightness($color)) - 2%, 0%)
59
- $color-light: lighten($color, $color-lightning)
60
-
61
- &.is-#{$name}
62
- background-color: $color-light
63
- .message-header
64
- background-color: $color
65
- color: $color-invert
66
- .message-body
67
- border-color: $color
68
- color: $color-dark
69
-
70
- .message-header
71
- align-items: center
72
- background-color: $message-header-background-color
73
- border-radius: $message-header-radius $message-header-radius 0 0
74
- color: $message-header-color
75
- display: flex
76
- font-weight: $message-header-weight
77
- justify-content: space-between
78
- line-height: 1.25
79
- padding: $message-header-padding
80
- position: relative
81
- .delete
82
- flex-grow: 0
83
- flex-shrink: 0
84
- +ltr-property("margin", 0.75em, false)
85
- & + .message-body
86
- border-width: $message-header-body-border-width
87
- border-top-left-radius: 0
88
- border-top-right-radius: 0
89
-
90
- .message-body
91
- border-color: $message-body-border-color
92
- border-radius: $message-body-radius
93
- border-style: solid
94
- border-width: $message-body-border-width
95
- color: $message-body-color
96
- padding: $message-body-padding
97
- code,
98
- pre
99
- background-color: $message-body-pre-background-color
100
- pre code
101
- background-color: $message-body-pre-code-background-color
@@ -1,117 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $modal-z: 40 !default
4
-
5
- $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
6
-
7
- $modal-content-width: 640px !default
8
- $modal-content-margin-mobile: 20px !default
9
- $modal-content-spacing-mobile: 160px !default
10
- $modal-content-spacing-tablet: 40px !default
11
-
12
- $modal-close-dimensions: 40px !default
13
- $modal-close-right: 20px !default
14
- $modal-close-top: 20px !default
15
-
16
- $modal-card-spacing: 40px !default
17
-
18
- $modal-card-head-background-color: $background !default
19
- $modal-card-head-border-bottom: 1px solid $border !default
20
- $modal-card-head-padding: 20px !default
21
- $modal-card-head-radius: $radius-large !default
22
-
23
- $modal-card-title-color: $text-strong !default
24
- $modal-card-title-line-height: 1 !default
25
- $modal-card-title-size: $size-4 !default
26
-
27
- $modal-card-foot-radius: $radius-large !default
28
- $modal-card-foot-border-top: 1px solid $border !default
29
-
30
- $modal-card-body-background-color: $scheme-main !default
31
- $modal-card-body-padding: 20px !default
32
-
33
- $modal-breakpoint: $tablet !default
34
-
35
- .modal
36
- @extend %overlay
37
- align-items: center
38
- display: none
39
- flex-direction: column
40
- justify-content: center
41
- overflow: hidden
42
- position: fixed
43
- z-index: $modal-z
44
- // Modifiers
45
- &.is-active
46
- display: flex
47
-
48
- .modal-background
49
- @extend %overlay
50
- background-color: $modal-background-background-color
51
-
52
- .modal-content,
53
- .modal-card
54
- margin: 0 $modal-content-margin-mobile
55
- max-height: calc(100vh - #{$modal-content-spacing-mobile})
56
- overflow: auto
57
- position: relative
58
- width: 100%
59
- // Responsiveness
60
- +from($modal-breakpoint)
61
- margin: 0 auto
62
- max-height: calc(100vh - #{$modal-content-spacing-tablet})
63
- width: $modal-content-width
64
-
65
- .modal-close
66
- @extend %delete
67
- background: none
68
- height: $modal-close-dimensions
69
- position: fixed
70
- +ltr-position($modal-close-right)
71
- top: $modal-close-top
72
- width: $modal-close-dimensions
73
-
74
- .modal-card
75
- display: flex
76
- flex-direction: column
77
- max-height: calc(100vh - #{$modal-card-spacing})
78
- overflow: hidden
79
- -ms-overflow-y: visible
80
-
81
- .modal-card-head,
82
- .modal-card-foot
83
- align-items: center
84
- background-color: $modal-card-head-background-color
85
- display: flex
86
- flex-shrink: 0
87
- justify-content: flex-start
88
- padding: $modal-card-head-padding
89
- position: relative
90
-
91
- .modal-card-head
92
- border-bottom: $modal-card-head-border-bottom
93
- border-top-left-radius: $modal-card-head-radius
94
- border-top-right-radius: $modal-card-head-radius
95
-
96
- .modal-card-title
97
- color: $modal-card-title-color
98
- flex-grow: 1
99
- flex-shrink: 0
100
- font-size: $modal-card-title-size
101
- line-height: $modal-card-title-line-height
102
-
103
- .modal-card-foot
104
- border-bottom-left-radius: $modal-card-foot-radius
105
- border-bottom-right-radius: $modal-card-foot-radius
106
- border-top: $modal-card-foot-border-top
107
- .button
108
- &:not(:last-child)
109
- +ltr-property("margin", 0.5em)
110
-
111
- .modal-card-body
112
- +overflow-touch
113
- background-color: $modal-card-body-background-color
114
- flex-grow: 1
115
- flex-shrink: 1
116
- overflow: auto
117
- padding: $modal-card-body-padding
@@ -1,446 +0,0 @@
1
- @import "../utilities/mixins"
2
-
3
- $navbar-background-color: $scheme-main !default
4
- $navbar-box-shadow-size: 0 2px 0 0 !default
5
- $navbar-box-shadow-color: $background !default
6
- $navbar-height: 3.25rem !default
7
- $navbar-padding-vertical: 1rem !default
8
- $navbar-padding-horizontal: 2rem !default
9
- $navbar-z: 30 !default
10
- $navbar-fixed-z: 30 !default
11
-
12
- $navbar-item-color: $text !default
13
- $navbar-item-hover-color: $link !default
14
- $navbar-item-hover-background-color: $scheme-main-bis !default
15
- $navbar-item-active-color: $scheme-invert !default
16
- $navbar-item-active-background-color: transparent !default
17
- $navbar-item-img-max-height: 1.75rem !default
18
-
19
- $navbar-burger-color: $navbar-item-color !default
20
-
21
- $navbar-tab-hover-background-color: transparent !default
22
- $navbar-tab-hover-border-bottom-color: $link !default
23
- $navbar-tab-active-color: $link !default
24
- $navbar-tab-active-background-color: transparent !default
25
- $navbar-tab-active-border-bottom-color: $link !default
26
- $navbar-tab-active-border-bottom-style: solid !default
27
- $navbar-tab-active-border-bottom-width: 3px !default
28
-
29
- $navbar-dropdown-background-color: $scheme-main !default
30
- $navbar-dropdown-border-top: 2px solid $border !default
31
- $navbar-dropdown-offset: -4px !default
32
- $navbar-dropdown-arrow: $link !default
33
- $navbar-dropdown-radius: $radius-large !default
34
- $navbar-dropdown-z: 20 !default
35
-
36
- $navbar-dropdown-boxed-radius: $radius-large !default
37
- $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
38
-
39
- $navbar-dropdown-item-hover-color: $scheme-invert !default
40
- $navbar-dropdown-item-hover-background-color: $background !default
41
- $navbar-dropdown-item-active-color: $link !default
42
- $navbar-dropdown-item-active-background-color: $background !default
43
-
44
- $navbar-divider-background-color: $background !default
45
- $navbar-divider-height: 2px !default
46
-
47
- $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
48
-
49
- $navbar-breakpoint: $desktop !default
50
-
51
- $navbar-colors: $colors !default
52
-
53
- =navbar-fixed
54
- left: 0
55
- position: fixed
56
- right: 0
57
- z-index: $navbar-fixed-z
58
-
59
- .navbar
60
- background-color: $navbar-background-color
61
- min-height: $navbar-height
62
- position: relative
63
- z-index: $navbar-z
64
- @each $name, $pair in $navbar-colors
65
- $color: nth($pair, 1)
66
- $color-invert: nth($pair, 2)
67
- &.is-#{$name}
68
- background-color: $color
69
- color: $color-invert
70
- .navbar-brand
71
- & > .navbar-item,
72
- .navbar-link
73
- color: $color-invert
74
- & > a.navbar-item,
75
- .navbar-link
76
- &:focus,
77
- &:hover,
78
- &.is-active
79
- background-color: bulmaDarken($color, 5%)
80
- color: $color-invert
81
- .navbar-link
82
- &::after
83
- border-color: $color-invert
84
- .navbar-burger
85
- color: $color-invert
86
- +from($navbar-breakpoint)
87
- .navbar-start,
88
- .navbar-end
89
- & > .navbar-item,
90
- .navbar-link
91
- color: $color-invert
92
- & > a.navbar-item,
93
- .navbar-link
94
- &:focus,
95
- &:hover,
96
- &.is-active
97
- background-color: bulmaDarken($color, 5%)
98
- color: $color-invert
99
- .navbar-link
100
- &::after
101
- border-color: $color-invert
102
- .navbar-item.has-dropdown:focus .navbar-link,
103
- .navbar-item.has-dropdown:hover .navbar-link,
104
- .navbar-item.has-dropdown.is-active .navbar-link
105
- background-color: bulmaDarken($color, 5%)
106
- color: $color-invert
107
- .navbar-dropdown
108
- a.navbar-item
109
- &.is-active
110
- background-color: $color
111
- color: $color-invert
112
- & > .container
113
- align-items: stretch
114
- display: flex
115
- min-height: $navbar-height
116
- width: 100%
117
- &.has-shadow
118
- box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
119
- &.is-fixed-bottom,
120
- &.is-fixed-top
121
- +navbar-fixed
122
- &.is-fixed-bottom
123
- bottom: 0
124
- &.has-shadow
125
- box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
126
- &.is-fixed-top
127
- top: 0
128
-
129
- html,
130
- body
131
- &.has-navbar-fixed-top
132
- padding-top: $navbar-height
133
- &.has-navbar-fixed-bottom
134
- padding-bottom: $navbar-height
135
-
136
- .navbar-brand,
137
- .navbar-tabs
138
- align-items: stretch
139
- display: flex
140
- flex-shrink: 0
141
- min-height: $navbar-height
142
-
143
- .navbar-brand
144
- a.navbar-item
145
- &:focus,
146
- &:hover
147
- background-color: transparent
148
-
149
- .navbar-tabs
150
- +overflow-touch
151
- max-width: 100vw
152
- overflow-x: auto
153
- overflow-y: hidden
154
-
155
- .navbar-burger
156
- @extend %reset
157
- color: $navbar-burger-color
158
- +hamburger($navbar-height)
159
- +ltr-property("margin", auto, false)
160
-
161
- .navbar-menu
162
- display: none
163
-
164
- .navbar-item,
165
- .navbar-link
166
- color: $navbar-item-color
167
- display: block
168
- line-height: 1.5
169
- padding: 0.5rem 0.75rem
170
- position: relative
171
- .icon
172
- &:only-child
173
- margin-left: -0.25rem
174
- margin-right: -0.25rem
175
-
176
- a.navbar-item,
177
- .navbar-link
178
- cursor: pointer
179
- &:focus,
180
- &:focus-within,
181
- &:hover,
182
- &.is-active
183
- background-color: $navbar-item-hover-background-color
184
- color: $navbar-item-hover-color
185
-
186
- .navbar-item
187
- flex-grow: 0
188
- flex-shrink: 0
189
- img
190
- max-height: $navbar-item-img-max-height
191
- &.has-dropdown
192
- padding: 0
193
- &.is-expanded
194
- flex-grow: 1
195
- flex-shrink: 1
196
- &.is-tab
197
- border-bottom: 1px solid transparent
198
- min-height: $navbar-height
199
- padding-bottom: calc(0.5rem - 1px)
200
- &:focus,
201
- &:hover
202
- background-color: $navbar-tab-hover-background-color
203
- border-bottom-color: $navbar-tab-hover-border-bottom-color
204
- &.is-active
205
- background-color: $navbar-tab-active-background-color
206
- border-bottom-color: $navbar-tab-active-border-bottom-color
207
- border-bottom-style: $navbar-tab-active-border-bottom-style
208
- border-bottom-width: $navbar-tab-active-border-bottom-width
209
- color: $navbar-tab-active-color
210
- padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
211
-
212
- .navbar-content
213
- flex-grow: 1
214
- flex-shrink: 1
215
-
216
- .navbar-link:not(.is-arrowless)
217
- +ltr-property("padding", 2.5em)
218
- &::after
219
- @extend %arrow
220
- border-color: $navbar-dropdown-arrow
221
- margin-top: -0.375em
222
- +ltr-position(1.125em)
223
-
224
- .navbar-dropdown
225
- font-size: 0.875rem
226
- padding-bottom: 0.5rem
227
- padding-top: 0.5rem
228
- .navbar-item
229
- padding-left: 1.5rem
230
- padding-right: 1.5rem
231
-
232
- .navbar-divider
233
- background-color: $navbar-divider-background-color
234
- border: none
235
- display: none
236
- height: $navbar-divider-height
237
- margin: 0.5rem 0
238
-
239
- +until($navbar-breakpoint)
240
- .navbar > .container
241
- display: block
242
- .navbar-brand,
243
- .navbar-tabs
244
- .navbar-item
245
- align-items: center
246
- display: flex
247
- .navbar-link
248
- &::after
249
- display: none
250
- .navbar-menu
251
- background-color: $navbar-background-color
252
- box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
253
- padding: 0.5rem 0
254
- &.is-active
255
- display: block
256
- // Fixed navbar
257
- .navbar
258
- &.is-fixed-bottom-touch,
259
- &.is-fixed-top-touch
260
- +navbar-fixed
261
- &.is-fixed-bottom-touch
262
- bottom: 0
263
- &.has-shadow
264
- box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
265
- &.is-fixed-top-touch
266
- top: 0
267
- &.is-fixed-top,
268
- &.is-fixed-top-touch
269
- .navbar-menu
270
- +overflow-touch
271
- max-height: calc(100vh - #{$navbar-height})
272
- overflow: auto
273
- html,
274
- body
275
- &.has-navbar-fixed-top-touch
276
- padding-top: $navbar-height
277
- &.has-navbar-fixed-bottom-touch
278
- padding-bottom: $navbar-height
279
-
280
- +from($navbar-breakpoint)
281
- .navbar,
282
- .navbar-menu,
283
- .navbar-start,
284
- .navbar-end
285
- align-items: stretch
286
- display: flex
287
- .navbar
288
- min-height: $navbar-height
289
- &.is-spaced
290
- padding: $navbar-padding-vertical $navbar-padding-horizontal
291
- .navbar-start,
292
- .navbar-end
293
- align-items: center
294
- a.navbar-item,
295
- .navbar-link
296
- border-radius: $radius
297
- &.is-transparent
298
- a.navbar-item,
299
- .navbar-link
300
- &:focus,
301
- &:hover,
302
- &.is-active
303
- background-color: transparent !important
304
- .navbar-item.has-dropdown
305
- &.is-active,
306
- &.is-hoverable:focus,
307
- &.is-hoverable:focus-within,
308
- &.is-hoverable:hover
309
- .navbar-link
310
- background-color: transparent !important
311
- .navbar-dropdown
312
- a.navbar-item
313
- &:focus,
314
- &:hover
315
- background-color: $navbar-dropdown-item-hover-background-color
316
- color: $navbar-dropdown-item-hover-color
317
- &.is-active
318
- background-color: $navbar-dropdown-item-active-background-color
319
- color: $navbar-dropdown-item-active-color
320
- .navbar-burger
321
- display: none
322
- .navbar-item,
323
- .navbar-link
324
- align-items: center
325
- display: flex
326
- .navbar-item
327
- &.has-dropdown
328
- align-items: stretch
329
- &.has-dropdown-up
330
- .navbar-link::after
331
- transform: rotate(135deg) translate(0.25em, -0.25em)
332
- .navbar-dropdown
333
- border-bottom: $navbar-dropdown-border-top
334
- border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
335
- border-top: none
336
- bottom: 100%
337
- box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
338
- top: auto
339
- &.is-active,
340
- &.is-hoverable:focus,
341
- &.is-hoverable:focus-within,
342
- &.is-hoverable:hover
343
- .navbar-dropdown
344
- display: block
345
- .navbar.is-spaced &,
346
- &.is-boxed
347
- opacity: 1
348
- pointer-events: auto
349
- transform: translateY(0)
350
- .navbar-menu
351
- flex-grow: 1
352
- flex-shrink: 0
353
- .navbar-start
354
- justify-content: flex-start
355
- +ltr-property("margin", auto)
356
- .navbar-end
357
- justify-content: flex-end
358
- +ltr-property("margin", auto, false)
359
- .navbar-dropdown
360
- background-color: $navbar-dropdown-background-color
361
- border-bottom-left-radius: $navbar-dropdown-radius
362
- border-bottom-right-radius: $navbar-dropdown-radius
363
- border-top: $navbar-dropdown-border-top
364
- box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
365
- display: none
366
- font-size: 0.875rem
367
- +ltr-position(0, false)
368
- min-width: 100%
369
- position: absolute
370
- top: 100%
371
- z-index: $navbar-dropdown-z
372
- .navbar-item
373
- padding: 0.375rem 1rem
374
- white-space: nowrap
375
- a.navbar-item
376
- +ltr-property("padding", 3rem)
377
- &:focus,
378
- &:hover
379
- background-color: $navbar-dropdown-item-hover-background-color
380
- color: $navbar-dropdown-item-hover-color
381
- &.is-active
382
- background-color: $navbar-dropdown-item-active-background-color
383
- color: $navbar-dropdown-item-active-color
384
- .navbar.is-spaced &,
385
- &.is-boxed
386
- border-radius: $navbar-dropdown-boxed-radius
387
- border-top: none
388
- box-shadow: $navbar-dropdown-boxed-shadow
389
- display: block
390
- opacity: 0
391
- pointer-events: none
392
- top: calc(100% + (#{$navbar-dropdown-offset}))
393
- transform: translateY(-5px)
394
- transition-duration: $speed
395
- transition-property: opacity, transform
396
- &.is-right
397
- left: auto
398
- right: 0
399
- .navbar-divider
400
- display: block
401
- .navbar > .container,
402
- .container > .navbar
403
- .navbar-brand
404
- +ltr-property("margin", -.75rem, false)
405
- .navbar-menu
406
- +ltr-property("margin", -.75rem)
407
- // Fixed navbar
408
- .navbar
409
- &.is-fixed-bottom-desktop,
410
- &.is-fixed-top-desktop
411
- +navbar-fixed
412
- &.is-fixed-bottom-desktop
413
- bottom: 0
414
- &.has-shadow
415
- box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
416
- &.is-fixed-top-desktop
417
- top: 0
418
- html,
419
- body
420
- &.has-navbar-fixed-top-desktop
421
- padding-top: $navbar-height
422
- &.has-navbar-fixed-bottom-desktop
423
- padding-bottom: $navbar-height
424
- &.has-spaced-navbar-fixed-top
425
- padding-top: $navbar-height + ($navbar-padding-vertical * 2)
426
- &.has-spaced-navbar-fixed-bottom
427
- padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
428
- // Hover/Active states
429
- a.navbar-item,
430
- .navbar-link
431
- &.is-active
432
- color: $navbar-item-active-color
433
- &.is-active:not(:focus):not(:hover)
434
- background-color: $navbar-item-active-background-color
435
- .navbar-item.has-dropdown
436
- &:focus,
437
- &:hover,
438
- &.is-active
439
- .navbar-link
440
- background-color: $navbar-item-hover-background-color
441
-
442
- // Combination
443
-
444
- .hero
445
- &.is-fullheight-with-navbar
446
- min-height: calc(100vh - #{$navbar-height})