1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-12 08:05:18 +01:00
blog/_src/_assets/styl/navigation.styl

102 lines
1.7 KiB
Stylus

//
// kremalicious3
// --------------
// Navigation
//
.menu-btn,
.search-btn
@extend .textcenter
line-height: 1em
vertical-align: middle
display: inline-block
margin: 0
position: absolute
right: 0
top: 0
&:focus
outline: 0
.icon
&.icon-entypo-menu
width: 24px
height: 24px
&:hover .icon,
&:focus .icon
fill: $link-color
&:active .icon
fill: #fff
// Main Navigation
/////////////////////////////////////
.nav-main
.menu-btn
margin-right: -.5em
padding: .5em .7em
// icon
&:before
font-size: 26px
li
display: inline-block
.nav-popover
@extend .clearfix
padding: ($line-height-computed*1.5) 0
width: 100%
background: $body-bg
.nav-link
@extend .h6, .alignleft, .textcenter
text-shadow: 0 1px 0 rgba(#fff, .5)
padding: .5em 1em
margin-bottom: 0
width: 50%
color: $text-color-dimmed
text-transform: uppercase
@media $breakpoint2
width: 33.3%
&:hover,
&:focus
color: $link-color
border-bottom-color: $link-color
background: rgba(255,255,255,.5)
&:active
background: $link-color
top: 0
color: #fff
// Paginator
/////////////////////////////////////
.paginator
@extend .clearfix
.icon
margin-bottom: -3px
.paginator-next
@extend .alignright
text-align: right
.paginator-previous
@extend .alignleft
.paginator-number
font-size: $font-size-small
color: $brand-grey-light
.paginator-title
@extend .h3, .heading-band
color: $brand-grey-light
margin-bottom: 0