bulma-rails 0.9.4 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +48 -14
  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 +788 -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 +283 -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 +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +144 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +146 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -167
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -357
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -162
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -134
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -88
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -135
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -79
  144. 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})