library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add CSS vars to navbar

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-22 11:32:55 +02:00
parent 166fcdb32c
commit 591915e0e1
2 changed files with 176 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
sass/components/modal.sass
View File

@ -1,6 +1,6 @@
$modal-z: 40 !default $modal-z: 40 !default
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default $modal-background-background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.86) !default
$modal-content-width: 640px !default $modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default $modal-content-margin-mobile: 20px !default
@ -13,22 +13,46 @@ $modal-close-top: 20px !default
$modal-card-spacing: 40px !default $modal-card-spacing: 40px !default
$modal-card-head-background-color: $background !default $modal-card-head-background-color: var(--background, #{$background}) !default
$modal-card-head-border-bottom: 1px solid $border !default $modal-card-head-border-bottom: 1px solid $border !default
$modal-card-head-padding: 20px !default $modal-card-head-padding: 20px !default
$modal-card-head-radius: $radius-large !default $modal-card-head-radius: var(--radius-large, #{$radius-large}) !default
$modal-card-title-color: $text-strong !default $modal-card-title-color: var(--text-strong, #{$text-strong}) !default
$modal-card-title-line-height: 1 !default $modal-card-title-line-height: 1 !default
$modal-card-title-size: $size-4 !default $modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default $modal-card-foot-radius: var(--radius-large, #{$radius-large}) !default
$modal-card-foot-border-top: 1px solid $border !default $modal-card-foot-border-top: 1px solid $border !default
$modal-card-body-background-color: $scheme-main !default $modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
$modal-card-body-padding: 20px !default $modal-card-body-padding: 20px !default
.modal .modal
--modal-z: #{$modal-z}
--modal-background-background-color: #{$modal-background-background-color}
--modal-content-width: #{$modal-content-width}
--modal-content-margin-mobile: #{$modal-content-margin-mobile}
--modal-content-spacing-mobile: #{$modal-content-spacing-mobile}
--modal-content-spacing-tablet: #{$modal-content-spacing-tablet}
--modal-close-dimensions: #{$modal-close-dimensions}
--modal-close-right: #{$modal-close-right}
--modal-close-top: #{$modal-close-top}
--modal-card-spacing: #{$modal-card-spacing}
--modal-card-head-background-color: #{$modal-card-head-background-color}
--modal-card-head-padding: #{$modal-card-head-padding}
--modal-card-head-border-bottom: #{$modal-card-head-border-bottom}
--modal-card-head-radius: #{$modal-card-head-radius}
--modal-card-head-radius: #{$modal-card-head-radius}
--modal-card-title-color: #{$modal-card-title-color}
--modal-card-title-size: #{$modal-card-title-size}
--modal-card-title-line-height: #{$modal-card-title-line-height}
--modal-card-foot-radius: #{$modal-card-foot-radius}
--modal-card-foot-radius: #{$modal-card-foot-radius}
--modal-card-foot-border-top: #{$modal-card-foot-border-top}
--modal-card-body-background-color: #{$modal-card-body-background-color}
--modal-card-body-padding: #{$modal-card-body-padding}
@extend %overlay @extend %overlay
align-items: center align-items: center
display: none display: none
@ -36,78 +60,78 @@ $modal-card-body-padding: 20px !default
justify-content: center justify-content: center
overflow: hidden overflow: hidden
position: fixed position: fixed
z-index: $modal-z z-index: var(--modal-z)
// Modifiers // Modifiers
&.is-active &.is-active
display: flex display: flex
.modal-background .modal-background
@extend %overlay @extend %overlay
background-color: $modal-background-background-color background-color: var(--modal-background-background-color)
.modal-content, .modal-content,
.modal-card .modal-card
margin: 0 $modal-content-margin-mobile margin: 0 var(--modal-content-margin-mobile)
max-height: calc(100vh - #{$modal-content-spacing-mobile}) max-height: calc(100vh - #{var(--modal-content-spacing-mobile)})
overflow: auto overflow: auto
position: relative position: relative
width: 100% width: 100%
// Responsiveness // Responsiveness
+tablet +tablet
margin: 0 auto margin: 0 auto
max-height: calc(100vh - #{$modal-content-spacing-tablet}) max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
width: $modal-content-width width: var(--modal-content-width)
.modal-close .modal-close
@extend %delete @extend %delete
background: none background: none
height: $modal-close-dimensions height: var(--modal-close-dimensions)
position: fixed position: fixed
+ltr-position($modal-close-right) +ltr-position(var(--modal-close-right))
top: $modal-close-top top: var(--modal-close-top)
width: $modal-close-dimensions width: var(--modal-close-dimensions)
.modal-card .modal-card
display: flex display: flex
flex-direction: column flex-direction: column
max-height: calc(100vh - #{$modal-card-spacing}) max-height: calc(100vh - #{var(--modal-card-spacing)})
overflow: hidden overflow: hidden
-ms-overflow-y: visible -ms-overflow-y: visible
.modal-card-head, .modal-card-head,
.modal-card-foot .modal-card-foot
align-items: center align-items: center
background-color: $modal-card-head-background-color background-color: var(--modal-card-head-background-color)
display: flex display: flex
flex-shrink: 0 flex-shrink: 0
justify-content: flex-start justify-content: flex-start
padding: $modal-card-head-padding padding: var(--modal-card-head-padding)
position: relative position: relative
.modal-card-head .modal-card-head
border-bottom: $modal-card-head-border-bottom border-bottom: var(--modal-card-head-border-bottom)
border-top-left-radius: $modal-card-head-radius border-top-left-radius: var(--modal-card-head-radius)
border-top-right-radius: $modal-card-head-radius border-top-right-radius: var(--modal-card-head-radius)
.modal-card-title .modal-card-title
color: $modal-card-title-color color: var(--modal-card-title-color)
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
font-size: $modal-card-title-size font-size: var(--modal-card-title-size)
line-height: $modal-card-title-line-height line-height: var(--modal-card-title-line-height)
.modal-card-foot .modal-card-foot
border-bottom-left-radius: $modal-card-foot-radius border-bottom-left-radius: var(--modal-card-foot-radius)
border-bottom-right-radius: $modal-card-foot-radius border-bottom-right-radius: var(--modal-card-foot-radius)
border-top: $modal-card-foot-border-top border-top: var(--modal-card-foot-border-top)
.button .button
&:not(:last-child) &:not(:last-child)
+ltr-property("margin", 0.5em) +ltr-property("margin", 0.5em)
.modal-card-body .modal-card-body
+overflow-touch +overflow-touch
background-color: $modal-card-body-background-color background-color: var(--modal-card-body-background-color)
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
overflow: auto overflow: auto
padding: $modal-card-body-padding padding: var(--modal-card-body-padding)

206
sass/components/navbar.sass
View File

@ -1,6 +1,6 @@
$navbar-background-color: $scheme-main !default $navbar-background-color: var(--scheme-main, #{$scheme-main}) !default
$navbar-box-shadow-size: 0 2px 0 0 !default $navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default $navbar-box-shadow-color: var(--background, #{$background}) !default
$navbar-height: 3.25rem !default $navbar-height: 3.25rem !default
$navbar-padding-vertical: 1rem !default $navbar-padding-vertical: 1rem !default
$navbar-padding-horizontal: 2rem !default $navbar-padding-horizontal: 2rem !default
@ -8,41 +8,41 @@ $navbar-z: 30 !default
$navbar-fixed-z: 30 !default $navbar-fixed-z: 30 !default
$navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default $navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$navbar-item-color: $text !default $navbar-item-color: var(--text, #{$text}) !default
$navbar-item-hover-color: $link !default $navbar-item-hover-color: var(--link, #{$link}) !default
$navbar-item-hover-background-color: $scheme-main-bis !default $navbar-item-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$navbar-item-active-color: $scheme-invert !default $navbar-item-active-color: var(--scheme-invert, #{$scheme-invert}) !default
$navbar-item-active-background-color: transparent !default $navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default $navbar-item-img-max-height: 1.75rem !default
$navbar-burger-color: $navbar-item-color !default $navbar-burger-color: var(--navbar-item-color, #{$navbar-item-color}) !default
$navbar-tab-hover-background-color: transparent !default $navbar-tab-hover-background-color: transparent !default
$navbar-tab-hover-border-bottom-color: $link !default $navbar-tab-hover-border-bottom-color: var(--link, #{$link}) !default
$navbar-tab-active-color: $link !default $navbar-tab-active-color: var(--link, #{$link}) !default
$navbar-tab-active-background-color: transparent !default $navbar-tab-active-background-color: transparent !default
$navbar-tab-active-border-bottom-color: $link !default $navbar-tab-active-border-bottom-color: var(--link, #{$link}) !default
$navbar-tab-active-border-bottom-style: solid !default $navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default $navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $scheme-main !default $navbar-dropdown-background-color: var(--scheme-main, #{$scheme-main}) !default
$navbar-dropdown-border-top: 2px solid $border !default $navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default $navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default $navbar-dropdown-arrow: var(--link, #{$link}) !default
$navbar-dropdown-radius: $radius-large !default $navbar-dropdown-radius: var(--radius-large, #{$radius-large}) !default
$navbar-dropdown-z: 20 !default $navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default $navbar-dropdown-boxed-radius: var(--radius-large, #{$radius-large}) !default
$navbar-dropdown-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default $navbar-dropdown-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default $navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default $navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default
$navbar-dropdown-item-hover-color: $scheme-invert !default $navbar-dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
$navbar-dropdown-item-hover-background-color: $background !default $navbar-dropdown-item-hover-background-color: var(--background, #{$background}) !default
$navbar-dropdown-item-active-color: $link !default $navbar-dropdown-item-active-color: var(--link, #{$link}) !default
$navbar-dropdown-item-active-background-color: $background !default $navbar-dropdown-item-active-background-color: var(--background, #{$background}) !default
$navbar-divider-background-color: $background !default $navbar-divider-background-color: var(--background, #{$background}) !default
$navbar-divider-height: 2px !default $navbar-divider-height: 2px !default
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
@ -53,13 +53,51 @@ $navbar-breakpoint: $desktop !default
left: 0 left: 0
position: fixed position: fixed
right: 0 right: 0
z-index: $navbar-fixed-z z-index: var(--navbar-fixed-z)
.navbar .navbar
background-color: $navbar-background-color --navbar-fixed-z: #{$navbar-fixed-z}
min-height: $navbar-height --navbar-shadow-color: #{$navbar-shadow-color}
--navbar-background-color: #{$navbar-background-color}
--navbar-box-shadow-size: #{$navbar-box-shadow-size}
--navbar-box-shadow-color: #{$navbar-box-shadow-color}
--navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size}
--navbar-height: #{$navbar-height}
--navbar-padding-vertical: #{$navbar-padding-vertical}
--navbar-padding-horizontal: #{$navbar-padding-horizontal}
--navbar-z: #{$navbar-z}
--navbar-burger-color: #{$navbar-burger-color}
--navbar-item-color: #{$navbar-item-color}
--navbar-item-hover-background-color: #{$navbar-item-hover-background-color}
--navbar-item-hover-color: #{$navbar-item-hover-color}
--navbar-item-img-max-height: #{$navbar-item-img-max-height}
--navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color}
--navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color}
--navbar-tab-active-background-color: #{$navbar-tab-active-background-color}
--navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color}
--navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style}
--navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width}
--navbar-tab-active-color: #{$navbar-tab-active-color}
--navbar-dropdown-arrow: #{$navbar-dropdown-arrow}
--navbar-divider-background-color: #{$navbar-divider-background-color}
--navbar-divider-height: #{$navbar-divider-height}
--navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color}
--navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color}
--navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color}
--navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color}
--navbar-dropdown-border-top: #{$navbar-dropdown-border-top}
--navbar-dropdown-background-color: #{$navbar-dropdown-background-color}
--navbar-dropdown-radius: #{$navbar-dropdown-radius}
--navbar-dropdown-z: #{$navbar-dropdown-z}
--navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
--navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
--navbar-item-active-color: #{$navbar-item-active-color}
--navbar-item-active-background-color: #{$navbar-item-active-background-color}
background-color: var(--navbar-background-color)
min-height: var(--navbar-height)
position: relative position: relative
z-index: $navbar-z z-index: var(--navbar-z)
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
@ -111,33 +149,33 @@ $navbar-breakpoint: $desktop !default
& > .container & > .container
align-items: stretch align-items: stretch
display: flex display: flex
min-height: $navbar-height min-height: var(--navbar-height)
width: 100% width: 100%
&.has-shadow &.has-shadow
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color box-shadow: var(--navbar-box-shadow-size) var(--navbar-box-shadow-color)
&.is-fixed-bottom, &.is-fixed-bottom,
&.is-fixed-top &.is-fixed-top
+navbar-fixed +navbar-fixed
&.is-fixed-bottom &.is-fixed-bottom
bottom: 0 bottom: 0
&.has-shadow &.has-shadow
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color box-shadow: var(--navbar-bottom-box-shadow-size) var(--navbar-box-shadow-color)
&.is-fixed-top &.is-fixed-top
top: 0 top: 0
html, html,
body body
&.has-navbar-fixed-top &.has-navbar-fixed-top
padding-top: $navbar-height padding-top: var(--navbar-height)
&.has-navbar-fixed-bottom &.has-navbar-fixed-bottom
padding-bottom: $navbar-height padding-bottom: var(--navbar-height)
.navbar-brand, .navbar-brand,
.navbar-tabs .navbar-tabs
align-items: stretch align-items: stretch
display: flex display: flex
flex-shrink: 0 flex-shrink: 0
min-height: $navbar-height min-height: var(--navbar-height)
.navbar-brand .navbar-brand
a.navbar-item a.navbar-item
@ -152,7 +190,7 @@ body
overflow-y: hidden overflow-y: hidden
.navbar-burger .navbar-burger
color: $navbar-burger-color color: var(--navbar-burger-color)
+hamburger($navbar-height) +hamburger($navbar-height)
+ltr-property("margin", auto, false) +ltr-property("margin", auto, false)
@ -161,7 +199,7 @@ body
.navbar-item, .navbar-item,
.navbar-link .navbar-link
color: $navbar-item-color color: var(--navbar-item-color)
display: block display: block
line-height: 1.5 line-height: 1.5
padding: 0.5rem 0.75rem padding: 0.5rem 0.75rem
@ -178,14 +216,14 @@ a.navbar-item,
&:focus-within, &:focus-within,
&:hover, &:hover,
&.is-active &.is-active
background-color: $navbar-item-hover-background-color background-color: var(--navbar-item-hover-background-color)
color: $navbar-item-hover-color color: var(--navbar-item-hover-color)
.navbar-item .navbar-item
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
img img
max-height: $navbar-item-img-max-height max-height: var(--navbar-item-img-max-height)
&.has-dropdown &.has-dropdown
padding: 0 padding: 0
&.is-expanded &.is-expanded
@ -193,19 +231,19 @@ a.navbar-item,
flex-shrink: 1 flex-shrink: 1
&.is-tab &.is-tab
border-bottom: 1px solid transparent border-bottom: 1px solid transparent
min-height: $navbar-height min-height: var(--navbar-height)
padding-bottom: calc(0.5rem - 1px) padding-bottom: calc(0.5rem - 1px)
&:focus, &:focus,
&:hover &:hover
background-color: $navbar-tab-hover-background-color background-color: var(--navbar-tab-hover-background-color)
border-bottom-color: $navbar-tab-hover-border-bottom-color border-bottom-color: var(--navbar-tab-hover-border-bottom-color)
&.is-active &.is-active
background-color: $navbar-tab-active-background-color background-color: var(--navbar-tab-active-background-color)
border-bottom-color: $navbar-tab-active-border-bottom-color border-bottom-color: var(--navbar-tab-active-border-bottom-color)
border-bottom-style: $navbar-tab-active-border-bottom-style border-bottom-style: var(--navbar-tab-active-border-bottom-style)
border-bottom-width: $navbar-tab-active-border-bottom-width border-bottom-width: var(--navbar-tab-active-border-bottom-width)
color: $navbar-tab-active-color color: var(--navbar-tab-active-color)
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) padding-bottom: calc(0.5rem - #{var(--navbar-tab-active-border-bottom-width)})
.navbar-content .navbar-content
flex-grow: 1 flex-grow: 1
@ -215,7 +253,7 @@ a.navbar-item,
+ltr-property("padding", 2.5em) +ltr-property("padding", 2.5em)
&::after &::after
@extend %arrow @extend %arrow
border-color: $navbar-dropdown-arrow border-color: var(--navbar-dropdown-arrow)
margin-top: -0.375em margin-top: -0.375em
+ltr-position(1.125em) +ltr-position(1.125em)
@ -228,10 +266,10 @@ a.navbar-item,
padding-right: 1.5rem padding-right: 1.5rem
.navbar-divider .navbar-divider
background-color: $navbar-divider-background-color background-color: var(--navbar-divider-background-color)
border: none border: none
display: none display: none
height: $navbar-divider-height height: var(--navbar-divider-height)
margin: 0.5rem 0 margin: 0.5rem 0
+until($navbar-breakpoint) +until($navbar-breakpoint)
@ -246,8 +284,8 @@ a.navbar-item,
&::after &::after
display: none display: none
.navbar-menu .navbar-menu
background-color: $navbar-background-color background-color: var(--navbar-background-color)
box-shadow: 0 8px 16px $navbar-shadow-color box-shadow: 0 8px 16px var(--navbar-shadow-color)
padding: 0.5rem 0 padding: 0.5rem 0
&.is-active &.is-active
display: block display: block
@ -259,21 +297,21 @@ a.navbar-item,
&.is-fixed-bottom-touch &.is-fixed-bottom-touch
bottom: 0 bottom: 0
&.has-shadow &.has-shadow
box-shadow: 0 -2px 3px $navbar-shadow-color box-shadow: 0 -2px 3px var(--navbar-shadow-color)
&.is-fixed-top-touch &.is-fixed-top-touch
top: 0 top: 0
&.is-fixed-top, &.is-fixed-top,
&.is-fixed-top-touch &.is-fixed-top-touch
.navbar-menu .navbar-menu
+overflow-touch +overflow-touch
max-height: calc(100vh - #{$navbar-height}) max-height: calc(100vh - #{var(--navbar-height)})
overflow: auto overflow: auto
html, html,
body body
&.has-navbar-fixed-top-touch &.has-navbar-fixed-top-touch
padding-top: $navbar-height padding-top: var(--navbar-height)
&.has-navbar-fixed-bottom-touch &.has-navbar-fixed-bottom-touch
padding-bottom: $navbar-height padding-bottom: var(--navbar-height)
+from($navbar-breakpoint) +from($navbar-breakpoint)
.navbar, .navbar,
@ -283,15 +321,15 @@ a.navbar-item,
align-items: stretch align-items: stretch
display: flex display: flex
.navbar .navbar
min-height: $navbar-height min-height: var(--navbar-height)
&.is-spaced &.is-spaced
padding: $navbar-padding-vertical $navbar-padding-horizontal padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal)
.navbar-start, .navbar-start,
.navbar-end .navbar-end
align-items: center align-items: center
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
border-radius: $radius border-radius: var(--radius, #{$radius})
&.is-transparent &.is-transparent
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
@ -310,11 +348,11 @@ a.navbar-item,
a.navbar-item a.navbar-item
&:focus, &:focus,
&:hover &:hover
background-color: $navbar-dropdown-item-hover-background-color background-color: var(--navbar-dropdown-item-hover-background-color)
color: $navbar-dropdown-item-hover-color color: var(--navbar-dropdown-item-hover-color)
&.is-active &.is-active
background-color: $navbar-dropdown-item-active-background-color background-color: var(--navbar-dropdown-item-active-background-color)
color: $navbar-dropdown-item-active-color color: var(--navbar-dropdown-item-active-color)
.navbar-burger .navbar-burger
display: none display: none
.navbar-item, .navbar-item,
@ -328,11 +366,11 @@ a.navbar-item,
.navbar-link::after .navbar-link::after
transform: rotate(135deg) translate(0.25em, -0.25em) transform: rotate(135deg) translate(0.25em, -0.25em)
.navbar-dropdown .navbar-dropdown
border-bottom: $navbar-dropdown-border-top border-bottom: var(--navbar-dropdown-border-top)
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 border-radius: var(--navbar-dropdown-radius) var(--navbar-dropdown-radius) 0 0
border-top: none border-top: none
bottom: 100% bottom: 100%
box-shadow: 0 -8px 8px $navbar-shadow-color box-shadow: 0 -8px 8px var(--navbar-shadow-color)
top: auto top: auto
&.is-active, &.is-active,
&.is-hoverable:focus, &.is-hoverable:focus,
@ -355,18 +393,18 @@ a.navbar-item,
justify-content: flex-end justify-content: flex-end
+ltr-property("margin", auto, false) +ltr-property("margin", auto, false)
.navbar-dropdown .navbar-dropdown
background-color: $navbar-dropdown-background-color background-color: var(--navbar-dropdown-background-color)
border-bottom-left-radius: $navbar-dropdown-radius border-bottom-left-radius: var(--navbar-dropdown-radius)
border-bottom-right-radius: $navbar-dropdown-radius border-bottom-right-radius: var(--navbar-dropdown-radius)
border-top: $navbar-dropdown-border-top border-top: var(--navbar-dropdown-border-top)
box-shadow: 0 8px 8px $navbar-shadow-color box-shadow: 0 8px 8px var(--navbar-shadow-color)
display: none display: none
font-size: 0.875rem font-size: 0.875rem
+ltr-position(0, false) +ltr-position(0, false)
min-width: 100% min-width: 100%
position: absolute position: absolute
top: 100% top: 100%
z-index: $navbar-dropdown-z z-index: var(--navbar-dropdown-z)
.navbar-item .navbar-item
padding: 0.375rem 1rem padding: 0.375rem 1rem
white-space: nowrap white-space: nowrap
@ -374,22 +412,22 @@ a.navbar-item,
+ltr-property("padding", 3rem) +ltr-property("padding", 3rem)
&:focus, &:focus,
&:hover &:hover
background-color: $navbar-dropdown-item-hover-background-color background-color: var(--navbar-dropdown-item-hover-background-color)
color: $navbar-dropdown-item-hover-color color: var(--navbar-dropdown-item-hover-color)
&.is-active &.is-active
background-color: $navbar-dropdown-item-active-background-color background-color: var(--navbar-dropdown-item-active-background-color)
color: $navbar-dropdown-item-active-color color: var(--navbar-dropdown-item-active-color)
.navbar.is-spaced &, .navbar.is-spaced &,
&.is-boxed &.is-boxed
border-radius: $navbar-dropdown-boxed-radius border-radius: var(--navbar-dropdown-boxed-radius)
border-top: none border-top: none
box-shadow: $navbar-dropdown-boxed-shadow box-shadow: var(--navbar-dropdown-boxed-shadow)
display: block display: block
opacity: 0 opacity: 0
pointer-events: none pointer-events: none
top: calc(100% + (#{$navbar-dropdown-offset})) top: calc(100% + (#{$navbar-dropdown-offset}))
transform: translateY(-5px) transform: translateY(-5px)
transition-duration: $speed transition-duration: var(--speed, #{$speed})
transition-property: opacity, transform transition-property: opacity, transform
&.is-right &.is-right
left: auto left: auto
@ -410,35 +448,35 @@ a.navbar-item,
&.is-fixed-bottom-desktop &.is-fixed-bottom-desktop
bottom: 0 bottom: 0
&.has-shadow &.has-shadow
box-shadow: 0 -2px 3px $navbar-shadow-color box-shadow: 0 -2px 3px var(--navbar-shadow-color)
&.is-fixed-top-desktop &.is-fixed-top-desktop
top: 0 top: 0
html, html,
body body
&.has-navbar-fixed-top-desktop &.has-navbar-fixed-top-desktop
padding-top: $navbar-height padding-top: var(--navbar-height)
&.has-navbar-fixed-bottom-desktop &.has-navbar-fixed-bottom-desktop
padding-bottom: $navbar-height padding-bottom: var(--navbar-height)
&.has-spaced-navbar-fixed-top &.has-spaced-navbar-fixed-top
padding-top: $navbar-height + ($navbar-padding-vertical * 2) padding-top: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
&.has-spaced-navbar-fixed-bottom &.has-spaced-navbar-fixed-bottom
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) padding-bottom: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
// Hover/Active states // Hover/Active states
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
&.is-active &.is-active
color: $navbar-item-active-color color: var(--navbar-item-active-color)
&.is-active:not(:focus):not(:hover) &.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color background-color: var(--navbar-item-active-background-color)
.navbar-item.has-dropdown .navbar-item.has-dropdown
&:focus, &:focus,
&:hover, &:hover,
&.is-active &.is-active
.navbar-link .navbar-link
background-color: $navbar-item-hover-background-color background-color: var(--navbar-item-hover-background-color)
// Combination // Combination
.hero .hero
&.is-fullheight-with-navbar &.is-fullheight-with-navbar
min-height: calc(100vh - #{$navbar-height}) min-height: calc(100vh - #{var(--navbar-height)})