mirror of
https://github.com/explosion/spaCy.git
synced 2024-12-29 11:26:28 +03:00
109 lines
3.0 KiB
Sass
109 lines
3.0 KiB
Sass
|
// Top Navigation Bar - Variables
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
$nav-animation : slideInDown 0.5s ease-in-out
|
||
|
|
$nav-background : color(white)
|
||
|
|
$nav-color : color($theme)
|
||
|
|
$nav-height : $height-navbar
|
||
|
|
$nav-height-small : $nav-height * 0.8
|
||
|
|
$nav-icon-size : 3.5rem
|
||
|
|
$nav-item-spacing : 1em
|
||
|
|
$nav-mobile-border : 1px solid
|
||
|
|
$nav-mobile-font-size : 1.25em
|
||
|
|
$nav-mobile-padding : 1rem
|
||
|
|
$nav-mobile-width : 20vw
|
||
|
|
$nav-padding : 0 0 0 2rem
|
||
|
|
$nav-triangle-size : 8px
|
||
|
|
|
||
|
|
|
||
|
|
// Top Navigation Bar - Style
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// .nav - top and primary navigation bar
|
||
|
|
// .fixed - sticky version
|
||
|
|
// .logo - special styling for logo
|
||
|
|
// .nav-menu - menu bar containing menu items
|
||
|
|
// .nav-item - menu list item
|
||
|
|
// .nav-button - button to toggle mobile navigation
|
||
|
|
// .nav-checkbox - checkbox for checkbox hack
|
||
|
|
// .active - active menu item
|
||
|
|
|
||
|
|
.nav
|
||
|
|
@extend .text-label
|
||
|
|
@include position(absolute, top, left, 0, 0)
|
||
|
|
@include size(100%, $nav-height)
|
||
|
|
align-items: center
|
||
|
|
background: $nav-background
|
||
|
|
border-color: $nav-background
|
||
|
|
color: $nav-color
|
||
|
|
display: flex
|
||
|
|
justify-content: space-between
|
||
|
|
padding: $nav-padding
|
||
|
|
z-index: 10
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
&.fixed
|
||
|
|
animation: $nav-animation
|
||
|
|
background: $nav-color
|
||
|
|
border-color: $nav-color
|
||
|
|
color: $nav-background
|
||
|
|
position: fixed
|
||
|
|
|
||
|
|
@media (min-width: #{$screen-size-small})
|
||
|
|
height: $nav-height-small
|
||
|
|
|
||
|
|
.nav-menu
|
||
|
|
@include size(100%)
|
||
|
|
justify-content: flex-end
|
||
|
|
border-color: inherit
|
||
|
|
display: flex
|
||
|
|
margin: 0
|
||
|
|
|
||
|
|
@media (max-width: #{$screen-size-small})
|
||
|
|
@include position(absolute, top, left, $nav-height, 0)
|
||
|
|
flex-flow: row wrap
|
||
|
|
|
||
|
|
.nav-checkbox:checked + &
|
||
|
|
background: inherit
|
||
|
|
|
||
|
|
.nav-item
|
||
|
|
@include visibility(visible)
|
||
|
|
|
||
|
|
& + .nav-button:before
|
||
|
|
color: color(grey)
|
||
|
|
|
||
|
|
.nav-item
|
||
|
|
align-items: center
|
||
|
|
border-color: inherit
|
||
|
|
display: flex
|
||
|
|
height: 100%
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
&--active
|
||
|
|
font-weight: bold
|
||
|
|
|
||
|
|
@media (min-width: #{$screen-size-small})
|
||
|
|
margin-right: $nav-item-spacing
|
||
|
|
|
||
|
|
&--active:after
|
||
|
|
@include triangle-down($nav-triangle-size)
|
||
|
|
@include position(absolute, bottom, left, -$nav-triangle-size, calc(50% - #{$nav-triangle-size}))
|
||
|
|
|
||
|
|
@media (max-width: #{$screen-size-small})
|
||
|
|
@include size(100%, auto)
|
||
|
|
@include visibility(hidden)
|
||
|
|
background: inherit
|
||
|
|
border-top: $nav-mobile-border
|
||
|
|
font-size: $nav-mobile-font-size
|
||
|
|
justify-content: center
|
||
|
|
padding: $nav-mobile-padding
|
||
|
|
|
||
|
|
.nav-button
|
||
|
|
@media (max-width: #{$screen-size-small})
|
||
|
|
@include icon(menu, none, $nav-mobile-padding 0 0 0, $nav-icon-size)
|
||
|
|
cursor: pointer
|
||
|
|
padding: 0 1em 1em 0
|
||
|
|
|
||
|
|
.nav-checkbox
|
||
|
|
display: none
|