1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-23 10:27:20 +01:00
blog/_src/_assets/styl/_kremalicious/navigation.styl

106 lines
1.8 KiB
Stylus

//
// kremalicious3
// --------------
// Navigation
//
.menu-btn,
.search-btn
@extend .textcenter
line-height: 1em
vertical-align: middle
display: inline-block
margin: 0
position: absolute
right: $spacer
top: -($spacer/4)
@media $screen-md
right: 0
&:focus
outline: 0
&:hover,
&:focus
.icon
fill: $link-color
.hamburger span
background: $link-color
&:active
background: transparent
transition: none
.icon
fill: darken($link-color, 30%)
.hamburger span
background: darken($link-color, 30%)
.menu-btn
margin-right: -.5em
padding: .5em .7em
// Main Navigation
/////////////////////////////////////
.nav-popover
@extend .divider-top, .list-unstyled
padding: $spacer 0
margin-top: $spacer
margin-bottom: 0
background: $body-bg
display: flex // .nav-popver overwrite
margin-left: 0 // .grid overwrite
.grid__col
padding-top: 0
opacity: 0
.has-menu-open &
opacity: 1
.nav-link
@extend .category
font-size: $font-size-small
text-shadow: 0 1px 0 rgba(#fff, .5)
padding: $padding-base-horizontal
margin-bottom: 0
margin-top: 0
display: block
border: none
// Paginator
/////////////////////////////////////
.paginator
@extend .textcenter
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
.icon
margin-bottom: -5px
.paginator__link
width: 2rem
height: 2rem
line-height: 1.7
display: inline-block
border-radius: 50%
&:hover,
&:focus
background: rgba(255,255,255,.3)
&.active
@extend .text-dimmed
cursor: default
pointer-events: none
background: rgba(255,255,255,.3)
.paginator-title
@extend .page-title