/* ====================================================================================================================

Responsive Navs

The main nav can be made fully responsive (with two layouts available) with js and some extra elements for better styling.

Styleguide 15

==================================================================================================================== */

@if $navs-responsive {

	.nav--responsive.active     { @extend %nav--responsive !optional;  }
	.nav--responsive.close       { max-height: none;  }

	#nav-toggle {
		@extend %nav__toggle !optional;
		display: none;
		float: $navs-responsive-dropdown-pos;
	}

	@include media($navs-responsive-breakpoint) {

		#nav-toggle { display: block; }


		// Reset styling of normal nav
		.nav.nav--responsive {

			display: block;
			margin: 0;
			overflow: hidden;
			zoom: 1;

			* {
				@include border-radius(0);
				background: transparent;
				border: 0;
				display: block;
				float: none;
				margin: 0;
				padding: 0;
				position: static;
				text-align: left;
				width: 100%;
				max-height: $dropdowns-height;
				opacity: 1;
			}
		}

/* --------------------------------------------------------------------------------------------------------------------

SlideIn Layout

Start by adding `.nav--responsive` to the nav and a container with `#nav-origin`.

Example: a simple inline nav with 3 dropdowns:

    <div id="nav-origin">
      <nav class="nav nav--inline nav--btn nav--responsive" id="nav">
        <ul>
          <li class="dropdown">
            <a href="#" class="dropdown__toggle " data-toggle="dropdown">
              Dropdown 1
            </a>
            <ul class="dropdown__menu ">
              <li><a href="#">Dropdown 1 - Sub 1</a></li>
              <li><a href="#">Dropdown 1 - Sub 2</a></li>
              <li><a href="#">Dropdown 1 - Sub 2</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown__toggle" data-toggle="dropdown">
              Dropdown 2
            </a>
            <ul class="dropdown__menu">
              <li><a href="#">Dropdown 2 - Sub 1</a></li>
              <li><a href="#">Dropdown 2 - Sub 2</a></li>
              <li class="divider"></li>
              <li><a href="#">Dropdown 2 - Sub 4</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown__toggle " data-toggle="dropdown">
              Dropdown 3
            </a>
            <ul class="dropdown__menu ">
              <li><a href="#">Dropdown 3 - Sub 1</a></li>
              <li><a href="#">Dropdown 3 - Sub 2</a></li>
              <li><a href="#">Dropdown 3 - Sub 3</a></li>
              <li><a href="#">Dropdown 3 - Sub 4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>

Then add and empty div with `#nav-destination` for where the nav html will be moved when the media query kick in.

    <div id="nav-destination"></div>

At the bottom of the page add `responsive-nav.js`. This is a modified version of
[Responsive Nav](http://responsive-nav.com/) with extra options.

    <script src="//rawgithub.com/raffone/responsive-nav.js/master/responsive-nav.js"></script>

And finally in your js file add:

    // Enable responsive nav
    var navigation = responsiveNav("#nav");

    // Move html on breakpoint
    function moveNavbar() {
      if ( $(".nav--responsive").css("overflow") == 'hidden' ) {
        $("#nav-destination").append($("#nav-origin .nav"));
      } else {
        $("#nav-origin").append($("#nav-destination .nav"));
      }
    }

    moveNavbar();
    $(window).resize(function() { moveNavbar(); });


That's it, when the with of the page reace the breakpoint for the nav defined with
`$navs-responsive-breakpoint` the html will be moved to the destination.

Styleguide 15.1

-------------------------------------------------------------------------------------------------------------------- */


		@if $navs-responsive-type == 'slide' {

			.nav--responsive {
				clip: rect(0 0 0 0);
				max-height: 0;
				width: 100%;

				&.opened {
					max-height: 9999px;
				}

			}

		}

/* --------------------------------------------------------------------------------------------------------------------

Offset Layout

First enable the layout:

    $navs-responsive-type: 'off-canvas';

The offset layout require two more wrappers `.external-wrapper` and `.internal-wrapper`, example below:

    <div class="external-wrapper">
      <div id="nav-destination"></div>
      <div class="internal-wrapper">
        <div id="nav-origin">
          …
        </div>
        [rest of the page…]
      </div>
    </div>

Add this js instead of `var navigation = responsiveNav("#nav");`:

    var navigation = responsiveNav("#nav", {
      animate: false,
      offcanvas: true,
      open: function(){
        $("body").addClass("nav-open");
      },
      close: function(){
          $("body").removeClass("nav-open");
      }
    });

Styleguide 15.2

-------------------------------------------------------------------------------------------------------------------- */


		@if $navs-responsive-type == 'off-canvas' {

			// Wrappers
			#{$navs-responsive-outside-wrapper},
			#{$navs-responsive-inside-wrapper} {
				position: relative;
				width: 100%;
			}

			#{$navs-responsive-outside-wrapper} {
				overflow-x: hidden;
			}

			// Transitions
			#{$navs-responsive-inside-wrapper},
			.nav--responsive {
				@include transition();
				@include backface-visibility(hidden);
			}


			// Animations
			#{$navs-responsive-inside-wrapper} {
				@include transform(translate3d(0,0,0));
				left: 0;
			}

			.nav--responsive {
				@include position(absolute, 0px 0px 0px 0);
				@include transform(translate3d(100%,0,0));
				height: 100%;
				width: $navs-responsive-offset;
			}

			.nav-open {
				#{$navs-responsive-inside-wrapper} {
					@include transform(translate3d((0 - $navs-responsive-offset),0,0));
					position: relative;
				}

				.nav--responsive {
					@include transform(translate3d(0,0,0));
				}
			}

		}
	}
}