mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Add CSS vars to navbar
This commit is contained in:
Jeremy Thomas
parent
166fcdb32c
commit
591915e0e1
@ -1,6 +1,6 @@
|
||||
$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-margin-mobile: 20px !default
|
||||
@ -13,22 +13,46 @@ $modal-close-top: 20px !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-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-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-body-background-color: $scheme-main !default
|
||||
$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
|
||||
$modal-card-body-padding: 20px !default
|
||||
|
||||
.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
|
||||
align-items: center
|
||||
display: none
|
||||
@ -36,78 +60,78 @@ $modal-card-body-padding: 20px !default
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
z-index: $modal-z
|
||||
z-index: var(--modal-z)
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: flex
|
||||
|
||||
.modal-background
|
||||
@extend %overlay
|
||||
background-color: $modal-background-background-color
|
||||
background-color: var(--modal-background-background-color)
|
||||
|
||||
.modal-content,
|
||||
.modal-card
|
||||
margin: 0 $modal-content-margin-mobile
|
||||
max-height: calc(100vh - #{$modal-content-spacing-mobile})
|
||||
margin: 0 var(--modal-content-margin-mobile)
|
||||
max-height: calc(100vh - #{var(--modal-content-spacing-mobile)})
|
||||
overflow: auto
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+tablet
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - #{$modal-content-spacing-tablet})
|
||||
width: $modal-content-width
|
||||
max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
|
||||
width: var(--modal-content-width)
|
||||
|
||||
.modal-close
|
||||
@extend %delete
|
||||
background: none
|
||||
height: $modal-close-dimensions
|
||||
height: var(--modal-close-dimensions)
|
||||
position: fixed
|
||||
+ltr-position($modal-close-right)
|
||||
top: $modal-close-top
|
||||
width: $modal-close-dimensions
|
||||
+ltr-position(var(--modal-close-right))
|
||||
top: var(--modal-close-top)
|
||||
width: var(--modal-close-dimensions)
|
||||
|
||||
.modal-card
|
||||
display: flex
|
||||
flex-direction: column
|
||||
max-height: calc(100vh - #{$modal-card-spacing})
|
||||
max-height: calc(100vh - #{var(--modal-card-spacing)})
|
||||
overflow: hidden
|
||||
-ms-overflow-y: visible
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot
|
||||
align-items: center
|
||||
background-color: $modal-card-head-background-color
|
||||
background-color: var(--modal-card-head-background-color)
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
padding: $modal-card-head-padding
|
||||
padding: var(--modal-card-head-padding)
|
||||
position: relative
|
||||
|
||||
.modal-card-head
|
||||
border-bottom: $modal-card-head-border-bottom
|
||||
border-top-left-radius: $modal-card-head-radius
|
||||
border-top-right-radius: $modal-card-head-radius
|
||||
border-bottom: var(--modal-card-head-border-bottom)
|
||||
border-top-left-radius: var(--modal-card-head-radius)
|
||||
border-top-right-radius: var(--modal-card-head-radius)
|
||||
|
||||
.modal-card-title
|
||||
color: $modal-card-title-color
|
||||
color: var(--modal-card-title-color)
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
font-size: $modal-card-title-size
|
||||
line-height: $modal-card-title-line-height
|
||||
font-size: var(--modal-card-title-size)
|
||||
line-height: var(--modal-card-title-line-height)
|
||||
|
||||
.modal-card-foot
|
||||
border-bottom-left-radius: $modal-card-foot-radius
|
||||
border-bottom-right-radius: $modal-card-foot-radius
|
||||
border-top: $modal-card-foot-border-top
|
||||
border-bottom-left-radius: var(--modal-card-foot-radius)
|
||||
border-bottom-right-radius: var(--modal-card-foot-radius)
|
||||
border-top: var(--modal-card-foot-border-top)
|
||||
.button
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.5em)
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
background-color: $modal-card-body-background-color
|
||||
background-color: var(--modal-card-body-background-color)
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
overflow: auto
|
||||
padding: $modal-card-body-padding
|
||||
padding: var(--modal-card-body-padding)
|
||||
|
||||
@ -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-color: $background !default
|
||||
$navbar-box-shadow-color: var(--background, #{$background}) !default
|
||||
$navbar-height: 3.25rem !default
|
||||
$navbar-padding-vertical: 1rem !default
|
||||
$navbar-padding-horizontal: 2rem !default
|
||||
@ -8,41 +8,41 @@ $navbar-z: 30 !default
|
||||
$navbar-fixed-z: 30 !default
|
||||
$navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
|
||||
|
||||
$navbar-item-color: $text !default
|
||||
$navbar-item-hover-color: $link !default
|
||||
$navbar-item-hover-background-color: $scheme-main-bis !default
|
||||
$navbar-item-active-color: $scheme-invert !default
|
||||
$navbar-item-color: var(--text, #{$text}) !default
|
||||
$navbar-item-hover-color: var(--link, #{$link}) !default
|
||||
$navbar-item-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
|
||||
$navbar-item-active-color: var(--scheme-invert, #{$scheme-invert}) !default
|
||||
$navbar-item-active-background-color: transparent !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-border-bottom-color: $link !default
|
||||
$navbar-tab-active-color: $link !default
|
||||
$navbar-tab-hover-border-bottom-color: var(--link, #{$link}) !default
|
||||
$navbar-tab-active-color: var(--link, #{$link}) !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-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-offset: -4px !default
|
||||
$navbar-dropdown-arrow: $link !default
|
||||
$navbar-dropdown-radius: $radius-large !default
|
||||
$navbar-dropdown-arrow: var(--link, #{$link}) !default
|
||||
$navbar-dropdown-radius: var(--radius-large, #{$radius-large}) !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-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-item-hover-color: $scheme-invert !default
|
||||
$navbar-dropdown-item-hover-background-color: $background !default
|
||||
$navbar-dropdown-item-active-color: $link !default
|
||||
$navbar-dropdown-item-active-background-color: $background !default
|
||||
$navbar-dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
|
||||
$navbar-dropdown-item-hover-background-color: var(--background, #{$background}) !default
|
||||
$navbar-dropdown-item-active-color: var(--link, #{$link}) !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-bottom-box-shadow-size: 0 -2px 0 0 !default
|
||||
@ -53,13 +53,51 @@ $navbar-breakpoint: $desktop !default
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
z-index: $navbar-fixed-z
|
||||
z-index: var(--navbar-fixed-z)
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color
|
||||
min-height: $navbar-height
|
||||
--navbar-fixed-z: #{$navbar-fixed-z}
|
||||
--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
|
||||
z-index: $navbar-z
|
||||
z-index: var(--navbar-z)
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
@ -111,33 +149,33 @@ $navbar-breakpoint: $desktop !default
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
min-height: $navbar-height
|
||||
min-height: var(--navbar-height)
|
||||
width: 100%
|
||||
&.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-top
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom
|
||||
bottom: 0
|
||||
&.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
|
||||
top: 0
|
||||
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top
|
||||
padding-top: $navbar-height
|
||||
padding-top: var(--navbar-height)
|
||||
&.has-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height
|
||||
padding-bottom: var(--navbar-height)
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
min-height: $navbar-height
|
||||
min-height: var(--navbar-height)
|
||||
|
||||
.navbar-brand
|
||||
a.navbar-item
|
||||
@ -152,7 +190,7 @@ body
|
||||
overflow-y: hidden
|
||||
|
||||
.navbar-burger
|
||||
color: $navbar-burger-color
|
||||
color: var(--navbar-burger-color)
|
||||
+hamburger($navbar-height)
|
||||
+ltr-property("margin", auto, false)
|
||||
|
||||
@ -161,7 +199,7 @@ body
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: $navbar-item-color
|
||||
color: var(--navbar-item-color)
|
||||
display: block
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 0.75rem
|
||||
@ -178,14 +216,14 @@ a.navbar-item,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $navbar-item-hover-background-color
|
||||
color: $navbar-item-hover-color
|
||||
background-color: var(--navbar-item-hover-background-color)
|
||||
color: var(--navbar-item-hover-color)
|
||||
|
||||
.navbar-item
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
img
|
||||
max-height: $navbar-item-img-max-height
|
||||
max-height: var(--navbar-item-img-max-height)
|
||||
&.has-dropdown
|
||||
padding: 0
|
||||
&.is-expanded
|
||||
@ -193,19 +231,19 @@ a.navbar-item,
|
||||
flex-shrink: 1
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
min-height: $navbar-height
|
||||
min-height: var(--navbar-height)
|
||||
padding-bottom: calc(0.5rem - 1px)
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-tab-hover-background-color
|
||||
border-bottom-color: $navbar-tab-hover-border-bottom-color
|
||||
background-color: var(--navbar-tab-hover-background-color)
|
||||
border-bottom-color: var(--navbar-tab-hover-border-bottom-color)
|
||||
&.is-active
|
||||
background-color: $navbar-tab-active-background-color
|
||||
border-bottom-color: $navbar-tab-active-border-bottom-color
|
||||
border-bottom-style: $navbar-tab-active-border-bottom-style
|
||||
border-bottom-width: $navbar-tab-active-border-bottom-width
|
||||
color: $navbar-tab-active-color
|
||||
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
|
||||
background-color: var(--navbar-tab-active-background-color)
|
||||
border-bottom-color: var(--navbar-tab-active-border-bottom-color)
|
||||
border-bottom-style: var(--navbar-tab-active-border-bottom-style)
|
||||
border-bottom-width: var(--navbar-tab-active-border-bottom-width)
|
||||
color: var(--navbar-tab-active-color)
|
||||
padding-bottom: calc(0.5rem - #{var(--navbar-tab-active-border-bottom-width)})
|
||||
|
||||
.navbar-content
|
||||
flex-grow: 1
|
||||
@ -215,7 +253,7 @@ a.navbar-item,
|
||||
+ltr-property("padding", 2.5em)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $navbar-dropdown-arrow
|
||||
border-color: var(--navbar-dropdown-arrow)
|
||||
margin-top: -0.375em
|
||||
+ltr-position(1.125em)
|
||||
|
||||
@ -228,10 +266,10 @@ a.navbar-item,
|
||||
padding-right: 1.5rem
|
||||
|
||||
.navbar-divider
|
||||
background-color: $navbar-divider-background-color
|
||||
background-color: var(--navbar-divider-background-color)
|
||||
border: none
|
||||
display: none
|
||||
height: $navbar-divider-height
|
||||
height: var(--navbar-divider-height)
|
||||
margin: 0.5rem 0
|
||||
|
||||
+until($navbar-breakpoint)
|
||||
@ -246,8 +284,8 @@ a.navbar-item,
|
||||
&::after
|
||||
display: none
|
||||
.navbar-menu
|
||||
background-color: $navbar-background-color
|
||||
box-shadow: 0 8px 16px $navbar-shadow-color
|
||||
background-color: var(--navbar-background-color)
|
||||
box-shadow: 0 8px 16px var(--navbar-shadow-color)
|
||||
padding: 0.5rem 0
|
||||
&.is-active
|
||||
display: block
|
||||
@ -259,21 +297,21 @@ a.navbar-item,
|
||||
&.is-fixed-bottom-touch
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px $navbar-shadow-color
|
||||
box-shadow: 0 -2px 3px var(--navbar-shadow-color)
|
||||
&.is-fixed-top-touch
|
||||
top: 0
|
||||
&.is-fixed-top,
|
||||
&.is-fixed-top-touch
|
||||
.navbar-menu
|
||||
+overflow-touch
|
||||
max-height: calc(100vh - #{$navbar-height})
|
||||
max-height: calc(100vh - #{var(--navbar-height)})
|
||||
overflow: auto
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-touch
|
||||
padding-top: $navbar-height
|
||||
padding-top: var(--navbar-height)
|
||||
&.has-navbar-fixed-bottom-touch
|
||||
padding-bottom: $navbar-height
|
||||
padding-bottom: var(--navbar-height)
|
||||
|
||||
+from($navbar-breakpoint)
|
||||
.navbar,
|
||||
@ -283,15 +321,15 @@ a.navbar-item,
|
||||
align-items: stretch
|
||||
display: flex
|
||||
.navbar
|
||||
min-height: $navbar-height
|
||||
min-height: var(--navbar-height)
|
||||
&.is-spaced
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal
|
||||
padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal)
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: center
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
border-radius: $radius
|
||||
border-radius: var(--radius, #{$radius})
|
||||
&.is-transparent
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
@ -310,11 +348,11 @@ a.navbar-item,
|
||||
a.navbar-item
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
background-color: var(--navbar-dropdown-item-hover-background-color)
|
||||
color: var(--navbar-dropdown-item-hover-color)
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
background-color: var(--navbar-dropdown-item-active-background-color)
|
||||
color: var(--navbar-dropdown-item-active-color)
|
||||
.navbar-burger
|
||||
display: none
|
||||
.navbar-item,
|
||||
@ -328,11 +366,11 @@ a.navbar-item,
|
||||
.navbar-link::after
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em)
|
||||
.navbar-dropdown
|
||||
border-bottom: $navbar-dropdown-border-top
|
||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
||||
border-bottom: var(--navbar-dropdown-border-top)
|
||||
border-radius: var(--navbar-dropdown-radius) var(--navbar-dropdown-radius) 0 0
|
||||
border-top: none
|
||||
bottom: 100%
|
||||
box-shadow: 0 -8px 8px $navbar-shadow-color
|
||||
box-shadow: 0 -8px 8px var(--navbar-shadow-color)
|
||||
top: auto
|
||||
&.is-active,
|
||||
&.is-hoverable:focus,
|
||||
@ -355,18 +393,18 @@ a.navbar-item,
|
||||
justify-content: flex-end
|
||||
+ltr-property("margin", auto, false)
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background-color
|
||||
border-bottom-left-radius: $navbar-dropdown-radius
|
||||
border-bottom-right-radius: $navbar-dropdown-radius
|
||||
border-top: $navbar-dropdown-border-top
|
||||
box-shadow: 0 8px 8px $navbar-shadow-color
|
||||
background-color: var(--navbar-dropdown-background-color)
|
||||
border-bottom-left-radius: var(--navbar-dropdown-radius)
|
||||
border-bottom-right-radius: var(--navbar-dropdown-radius)
|
||||
border-top: var(--navbar-dropdown-border-top)
|
||||
box-shadow: 0 8px 8px var(--navbar-shadow-color)
|
||||
display: none
|
||||
font-size: 0.875rem
|
||||
+ltr-position(0, false)
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $navbar-dropdown-z
|
||||
z-index: var(--navbar-dropdown-z)
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
@ -374,22 +412,22 @@ a.navbar-item,
|
||||
+ltr-property("padding", 3rem)
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
background-color: var(--navbar-dropdown-item-hover-background-color)
|
||||
color: var(--navbar-dropdown-item-hover-color)
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
background-color: var(--navbar-dropdown-item-active-background-color)
|
||||
color: var(--navbar-dropdown-item-active-color)
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
border-radius: $navbar-dropdown-boxed-radius
|
||||
border-radius: var(--navbar-dropdown-boxed-radius)
|
||||
border-top: none
|
||||
box-shadow: $navbar-dropdown-boxed-shadow
|
||||
box-shadow: var(--navbar-dropdown-boxed-shadow)
|
||||
display: block
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
top: calc(100% + (#{$navbar-dropdown-offset}))
|
||||
transform: translateY(-5px)
|
||||
transition-duration: $speed
|
||||
transition-duration: var(--speed, #{$speed})
|
||||
transition-property: opacity, transform
|
||||
&.is-right
|
||||
left: auto
|
||||
@ -410,35 +448,35 @@ a.navbar-item,
|
||||
&.is-fixed-bottom-desktop
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px $navbar-shadow-color
|
||||
box-shadow: 0 -2px 3px var(--navbar-shadow-color)
|
||||
&.is-fixed-top-desktop
|
||||
top: 0
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-desktop
|
||||
padding-top: $navbar-height
|
||||
padding-top: var(--navbar-height)
|
||||
&.has-navbar-fixed-bottom-desktop
|
||||
padding-bottom: $navbar-height
|
||||
padding-bottom: var(--navbar-height)
|
||||
&.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
|
||||
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
|
||||
padding-bottom: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&.is-active
|
||||
color: $navbar-item-active-color
|
||||
color: var(--navbar-item-active-color)
|
||||
&.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
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active
|
||||
.navbar-link
|
||||
background-color: $navbar-item-hover-background-color
|
||||
background-color: var(--navbar-item-hover-background-color)
|
||||
|
||||
// Combination
|
||||
|
||||
.hero
|
||||
&.is-fullheight-with-navbar
|
||||
min-height: calc(100vh - #{$navbar-height})
|
||||
min-height: calc(100vh - #{var(--navbar-height)})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user