OwlCyberSecurity - MANAGER

Edit File: _nav.scss

@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.nav{
    list-style:none;
    margin-left:0;
    @extend .cf;

> li{

&,
        > a{
            display:inline-block;
           *display:inline;
            zoom:1;
        }
    }
}

/**
 * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--stacked{

> li{
        display:list-item;

> a{
            display:block;
        }
    }
}

/**
 * `.nav--banner` extends `.nav` and centres the list, e.g.:
 *
   <ul class="nav  nav--banner">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--banner{
    text-align:center;
}

/**
 * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
 *
   <ul class="nav  nav--block">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--block{
    line-height:1;
    /**
     * Remove whitespace caused by `inline-block`.
     */
    letter-spacing:-0.31em;
    word-spacing:-0.43em;
    white-space:nowrap;

> li{
        letter-spacing:normal;
        word-spacing:normal;

> a{
            @include rem(padding, $half-spacing-unit);
        }
    }
}

/**
 * Force a nav to occupy 100% of the available width of its parent. Extends
 * `.nav`, e.g.:
 *
   <ul class="nav  nav--fit">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Thanks to @pimpl for this idea!
 */
.nav--fit{
    display:table;
    width:100%;

> li{
        display:table-cell;

> a{
            display:block;
        }
    }
}

/**
 * Make a list of keywords. Extends `.nav`, e.g.:
 *
   `<ul class="nav  nav--keywords>`
 *
 */
.nav--keywords{

> li{

&:after{
            content:"\002C" "\00A0";
        }

&:last-child:after{
            display:none;
        }
    }
}

}//endif