blog/_src/_assets/styl/_kremalicious/navigation.styl

//
// kremalicious3
// --------------
// Navigation
//

.menu-btn,
.search-btn
    @extend .textcenter
    line-height: 1em
    vertical-align: middle
    display: inline-block
    margin: 0
    position: absolute
    right: 0
    top: -($spacer/4)

    &: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
    width: 100%
    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-vertical $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
        color: $text-color-dimmed
        cursor: default
        pointer-events: none
        background: rgba(255,255,255,.3)

.paginator-title
    @extend .page-title
    margin-top: -($spacer*2)