jekyll-bulma-feather 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. checksums.yaml +7 -0
  2. data/COPYING.md +88 -0
  3. data/README.md +125 -0
  4. data/_includes/feather.html +3 -0
  5. data/_includes/footer.html +14 -0
  6. data/_includes/head.html +12 -0
  7. data/_includes/header.html +8 -0
  8. data/_includes/nav.html +38 -0
  9. data/_layouts/default.html +7 -0
  10. data/_layouts/empty.html +9 -0
  11. data/_layouts/page.html +5 -0
  12. data/_layouts/post.html +5 -0
  13. data/_sass/bulma.scss +1 -0
  14. data/_sass/bulma/bulma-rtl.sass +3 -0
  15. data/_sass/bulma/bulma.sass +10 -0
  16. data/_sass/bulma/sass/base/_all.sass +6 -0
  17. data/_sass/bulma/sass/base/animations.sass +5 -0
  18. data/_sass/bulma/sass/base/generic.sass +145 -0
  19. data/_sass/bulma/sass/base/helpers.sass +1 -0
  20. data/_sass/bulma/sass/base/minireset.sass +79 -0
  21. data/_sass/bulma/sass/components/_all.sass +15 -0
  22. data/_sass/bulma/sass/components/breadcrumb.sass +77 -0
  23. data/_sass/bulma/sass/components/card.sass +102 -0
  24. data/_sass/bulma/sass/components/dropdown.sass +83 -0
  25. data/_sass/bulma/sass/components/level.sass +79 -0
  26. data/_sass/bulma/sass/components/media.sass +59 -0
  27. data/_sass/bulma/sass/components/menu.sass +59 -0
  28. data/_sass/bulma/sass/components/message.sass +101 -0
  29. data/_sass/bulma/sass/components/modal.sass +117 -0
  30. data/_sass/bulma/sass/components/navbar.sass +445 -0
  31. data/_sass/bulma/sass/components/pagination.sass +153 -0
  32. data/_sass/bulma/sass/components/panel.sass +121 -0
  33. data/_sass/bulma/sass/components/tabs.sass +176 -0
  34. data/_sass/bulma/sass/elements/_all.sass +16 -0
  35. data/_sass/bulma/sass/elements/box.sass +26 -0
  36. data/_sass/bulma/sass/elements/button.sass +344 -0
  37. data/_sass/bulma/sass/elements/container.sass +29 -0
  38. data/_sass/bulma/sass/elements/content.sass +157 -0
  39. data/_sass/bulma/sass/elements/form.sass +1 -0
  40. data/_sass/bulma/sass/elements/icon.sass +21 -0
  41. data/_sass/bulma/sass/elements/image.sass +73 -0
  42. data/_sass/bulma/sass/elements/notification.sass +52 -0
  43. data/_sass/bulma/sass/elements/other.sass +41 -0
  44. data/_sass/bulma/sass/elements/progress.sass +73 -0
  45. data/_sass/bulma/sass/elements/table.sass +133 -0
  46. data/_sass/bulma/sass/elements/tag.sass +140 -0
  47. data/_sass/bulma/sass/elements/title.sass +72 -0
  48. data/_sass/bulma/sass/form/_all.sass +9 -0
  49. data/_sass/bulma/sass/form/checkbox-radio.sass +24 -0
  50. data/_sass/bulma/sass/form/file.sass +184 -0
  51. data/_sass/bulma/sass/form/input-textarea.sass +68 -0
  52. data/_sass/bulma/sass/form/select.sass +89 -0
  53. data/_sass/bulma/sass/form/shared.sass +60 -0
  54. data/_sass/bulma/sass/form/tools.sass +217 -0
  55. data/_sass/bulma/sass/grid/_all.sass +5 -0
  56. data/_sass/bulma/sass/grid/columns.sass +513 -0
  57. data/_sass/bulma/sass/grid/tiles.sass +36 -0
  58. data/_sass/bulma/sass/helpers/_all.sass +12 -0
  59. data/_sass/bulma/sass/helpers/color.sass +39 -0
  60. data/_sass/bulma/sass/helpers/flexbox.sass +35 -0
  61. data/_sass/bulma/sass/helpers/float.sass +10 -0
  62. data/_sass/bulma/sass/helpers/other.sass +14 -0
  63. data/_sass/bulma/sass/helpers/overflow.sass +2 -0
  64. data/_sass/bulma/sass/helpers/position.sass +7 -0
  65. data/_sass/bulma/sass/helpers/spacing.sass +31 -0
  66. data/_sass/bulma/sass/helpers/typography.sass +100 -0
  67. data/_sass/bulma/sass/helpers/visibility.sass +122 -0
  68. data/_sass/bulma/sass/layout/_all.sass +6 -0
  69. data/_sass/bulma/sass/layout/footer.sass +11 -0
  70. data/_sass/bulma/sass/layout/hero.sass +149 -0
  71. data/_sass/bulma/sass/layout/section.sass +15 -0
  72. data/_sass/bulma/sass/utilities/_all.sass +8 -0
  73. data/_sass/bulma/sass/utilities/animations.sass +1 -0
  74. data/_sass/bulma/sass/utilities/controls.sass +52 -0
  75. data/_sass/bulma/sass/utilities/derived-variables.sass +110 -0
  76. data/_sass/bulma/sass/utilities/functions.sass +115 -0
  77. data/_sass/bulma/sass/utilities/initial-variables.sass +78 -0
  78. data/_sass/bulma/sass/utilities/mixins.sass +285 -0
  79. data/_sass/jekyll-bulma-feather.scss +213 -0
  80. data/assets/feather-sprite.svg +1 -0
  81. data/assets/jekyll-bulma-feather.svg +125 -0
  82. data/assets/style.scss +5 -0
  83. metadata +166 -0
@@ -0,0 +1,59 @@
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
@@ -0,0 +1,101 @@
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
@@ -0,0 +1,117 @@
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
@@ -0,0 +1,445 @@
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
+ color: $navbar-burger-color
157
+ +hamburger($navbar-height)
158
+ +ltr-property("margin", auto, false)
159
+
160
+ .navbar-menu
161
+ display: none
162
+
163
+ .navbar-item,
164
+ .navbar-link
165
+ color: $navbar-item-color
166
+ display: block
167
+ line-height: 1.5
168
+ padding: 0.5rem 0.75rem
169
+ position: relative
170
+ .icon
171
+ &:only-child
172
+ margin-left: -0.25rem
173
+ margin-right: -0.25rem
174
+
175
+ a.navbar-item,
176
+ .navbar-link
177
+ cursor: pointer
178
+ &:focus,
179
+ &:focus-within,
180
+ &:hover,
181
+ &.is-active
182
+ background-color: $navbar-item-hover-background-color
183
+ color: $navbar-item-hover-color
184
+
185
+ .navbar-item
186
+ flex-grow: 0
187
+ flex-shrink: 0
188
+ img
189
+ max-height: $navbar-item-img-max-height
190
+ &.has-dropdown
191
+ padding: 0
192
+ &.is-expanded
193
+ flex-grow: 1
194
+ flex-shrink: 1
195
+ &.is-tab
196
+ border-bottom: 1px solid transparent
197
+ min-height: $navbar-height
198
+ padding-bottom: calc(0.5rem - 1px)
199
+ &:focus,
200
+ &:hover
201
+ background-color: $navbar-tab-hover-background-color
202
+ border-bottom-color: $navbar-tab-hover-border-bottom-color
203
+ &.is-active
204
+ background-color: $navbar-tab-active-background-color
205
+ border-bottom-color: $navbar-tab-active-border-bottom-color
206
+ border-bottom-style: $navbar-tab-active-border-bottom-style
207
+ border-bottom-width: $navbar-tab-active-border-bottom-width
208
+ color: $navbar-tab-active-color
209
+ padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
210
+
211
+ .navbar-content
212
+ flex-grow: 1
213
+ flex-shrink: 1
214
+
215
+ .navbar-link:not(.is-arrowless)
216
+ +ltr-property("padding", 2.5em)
217
+ &::after
218
+ @extend %arrow
219
+ border-color: $navbar-dropdown-arrow
220
+ margin-top: -0.375em
221
+ +ltr-position(1.125em)
222
+
223
+ .navbar-dropdown
224
+ font-size: 0.875rem
225
+ padding-bottom: 0.5rem
226
+ padding-top: 0.5rem
227
+ .navbar-item
228
+ padding-left: 1.5rem
229
+ padding-right: 1.5rem
230
+
231
+ .navbar-divider
232
+ background-color: $navbar-divider-background-color
233
+ border: none
234
+ display: none
235
+ height: $navbar-divider-height
236
+ margin: 0.5rem 0
237
+
238
+ +until($navbar-breakpoint)
239
+ .navbar > .container
240
+ display: block
241
+ .navbar-brand,
242
+ .navbar-tabs
243
+ .navbar-item
244
+ align-items: center
245
+ display: flex
246
+ .navbar-link
247
+ &::after
248
+ display: none
249
+ .navbar-menu
250
+ background-color: $navbar-background-color
251
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
252
+ padding: 0.5rem 0
253
+ &.is-active
254
+ display: block
255
+ // Fixed navbar
256
+ .navbar
257
+ &.is-fixed-bottom-touch,
258
+ &.is-fixed-top-touch
259
+ +navbar-fixed
260
+ &.is-fixed-bottom-touch
261
+ bottom: 0
262
+ &.has-shadow
263
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
264
+ &.is-fixed-top-touch
265
+ top: 0
266
+ &.is-fixed-top,
267
+ &.is-fixed-top-touch
268
+ .navbar-menu
269
+ +overflow-touch
270
+ max-height: calc(100vh - #{$navbar-height})
271
+ overflow: auto
272
+ html,
273
+ body
274
+ &.has-navbar-fixed-top-touch
275
+ padding-top: $navbar-height
276
+ &.has-navbar-fixed-bottom-touch
277
+ padding-bottom: $navbar-height
278
+
279
+ +from($navbar-breakpoint)
280
+ .navbar,
281
+ .navbar-menu,
282
+ .navbar-start,
283
+ .navbar-end
284
+ align-items: stretch
285
+ display: flex
286
+ .navbar
287
+ min-height: $navbar-height
288
+ &.is-spaced
289
+ padding: $navbar-padding-vertical $navbar-padding-horizontal
290
+ .navbar-start,
291
+ .navbar-end
292
+ align-items: center
293
+ a.navbar-item,
294
+ .navbar-link
295
+ border-radius: $radius
296
+ &.is-transparent
297
+ a.navbar-item,
298
+ .navbar-link
299
+ &:focus,
300
+ &:hover,
301
+ &.is-active
302
+ background-color: transparent !important
303
+ .navbar-item.has-dropdown
304
+ &.is-active,
305
+ &.is-hoverable:focus,
306
+ &.is-hoverable:focus-within,
307
+ &.is-hoverable:hover
308
+ .navbar-link
309
+ background-color: transparent !important
310
+ .navbar-dropdown
311
+ a.navbar-item
312
+ &:focus,
313
+ &:hover
314
+ background-color: $navbar-dropdown-item-hover-background-color
315
+ color: $navbar-dropdown-item-hover-color
316
+ &.is-active
317
+ background-color: $navbar-dropdown-item-active-background-color
318
+ color: $navbar-dropdown-item-active-color
319
+ .navbar-burger
320
+ display: none
321
+ .navbar-item,
322
+ .navbar-link
323
+ align-items: center
324
+ display: flex
325
+ .navbar-item
326
+ &.has-dropdown
327
+ align-items: stretch
328
+ &.has-dropdown-up
329
+ .navbar-link::after
330
+ transform: rotate(135deg) translate(0.25em, -0.25em)
331
+ .navbar-dropdown
332
+ border-bottom: $navbar-dropdown-border-top
333
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
334
+ border-top: none
335
+ bottom: 100%
336
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
337
+ top: auto
338
+ &.is-active,
339
+ &.is-hoverable:focus,
340
+ &.is-hoverable:focus-within,
341
+ &.is-hoverable:hover
342
+ .navbar-dropdown
343
+ display: block
344
+ .navbar.is-spaced &,
345
+ &.is-boxed
346
+ opacity: 1
347
+ pointer-events: auto
348
+ transform: translateY(0)
349
+ .navbar-menu
350
+ flex-grow: 1
351
+ flex-shrink: 0
352
+ .navbar-start
353
+ justify-content: flex-start
354
+ +ltr-property("margin", auto)
355
+ .navbar-end
356
+ justify-content: flex-end
357
+ +ltr-property("margin", auto, false)
358
+ .navbar-dropdown
359
+ background-color: $navbar-dropdown-background-color
360
+ border-bottom-left-radius: $navbar-dropdown-radius
361
+ border-bottom-right-radius: $navbar-dropdown-radius
362
+ border-top: $navbar-dropdown-border-top
363
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
364
+ display: none
365
+ font-size: 0.875rem
366
+ +ltr-position(0, false)
367
+ min-width: 100%
368
+ position: absolute
369
+ top: 100%
370
+ z-index: $navbar-dropdown-z
371
+ .navbar-item
372
+ padding: 0.375rem 1rem
373
+ white-space: nowrap
374
+ a.navbar-item
375
+ +ltr-property("padding", 3rem)
376
+ &:focus,
377
+ &:hover
378
+ background-color: $navbar-dropdown-item-hover-background-color
379
+ color: $navbar-dropdown-item-hover-color
380
+ &.is-active
381
+ background-color: $navbar-dropdown-item-active-background-color
382
+ color: $navbar-dropdown-item-active-color
383
+ .navbar.is-spaced &,
384
+ &.is-boxed
385
+ border-radius: $navbar-dropdown-boxed-radius
386
+ border-top: none
387
+ box-shadow: $navbar-dropdown-boxed-shadow
388
+ display: block
389
+ opacity: 0
390
+ pointer-events: none
391
+ top: calc(100% + (#{$navbar-dropdown-offset}))
392
+ transform: translateY(-5px)
393
+ transition-duration: $speed
394
+ transition-property: opacity, transform
395
+ &.is-right
396
+ left: auto
397
+ right: 0
398
+ .navbar-divider
399
+ display: block
400
+ .navbar > .container,
401
+ .container > .navbar
402
+ .navbar-brand
403
+ +ltr-property("margin", -.75rem, false)
404
+ .navbar-menu
405
+ +ltr-property("margin", -.75rem)
406
+ // Fixed navbar
407
+ .navbar
408
+ &.is-fixed-bottom-desktop,
409
+ &.is-fixed-top-desktop
410
+ +navbar-fixed
411
+ &.is-fixed-bottom-desktop
412
+ bottom: 0
413
+ &.has-shadow
414
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
415
+ &.is-fixed-top-desktop
416
+ top: 0
417
+ html,
418
+ body
419
+ &.has-navbar-fixed-top-desktop
420
+ padding-top: $navbar-height
421
+ &.has-navbar-fixed-bottom-desktop
422
+ padding-bottom: $navbar-height
423
+ &.has-spaced-navbar-fixed-top
424
+ padding-top: $navbar-height + ($navbar-padding-vertical * 2)
425
+ &.has-spaced-navbar-fixed-bottom
426
+ padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
427
+ // Hover/Active states
428
+ a.navbar-item,
429
+ .navbar-link
430
+ &.is-active
431
+ color: $navbar-item-active-color
432
+ &.is-active:not(:focus):not(:hover)
433
+ background-color: $navbar-item-active-background-color
434
+ .navbar-item.has-dropdown
435
+ &:focus,
436
+ &:hover,
437
+ &.is-active
438
+ .navbar-link
439
+ background-color: $navbar-item-hover-background-color
440
+
441
+ // Combination
442
+
443
+ .hero
444
+ &.is-fullheight-with-navbar
445
+ min-height: calc(100vh - #{$navbar-height})