node_modules/bulma/sass/components/navbar.sass

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