<commit_before>/*

Off-Canvas

There's available a nice off-canvas sidebar functionality adapted from [Codrops](http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations).

Script required: **rapido.js**.

    <div id="offcanvas__container" class="offcanvas__container">
      <nav class="offcanvas__menu">
        [...nav content...]
      </nav>
      <div class="offcanvas__pusher">
        <div class="offcanvas__content">
          [...main content...]
        </div>
      </div>
    </div>

Styleguide 15

*/

/*

Off-Canvas JS

Include this js after including rapido.js.

    $('.offcanvas__menu--toggle').rapido_Offcanvas();

**Options** (with default values):

    toggleClass:     offcanvas__menu--open
    containerClass:  .offcanvas__container
    menuClass:       .offcanvas__menu

For opening and closing the sidebar add the class `offcanvas__menu--toggle` to a link or button.

Styleguide 15.2

*/


@if $offcanvas {

  $if-left: null;
  $if-right: null;
  $if-3d: null;
  $if-width: null;

  @if $offcanvas-direction == 'left' {
    $if-left: 0px;
    $if-right: 0;
    $if-3d: -100%;
    $if-width: $offcanvas-width;
  } @else {
    $if-left: 0;
    $if-right: 0px;
    $if-3d: 100%;
    $if-width: neg($offcanvas-width);
  }

  html,
  body,
  .offcanvas__container,
  .offcanvas__pusher,
  .offcanvas__content {
    height: 100%;

  }

  .offcanvas__container {
    overflow: hidden;
    position: relative;
  }

  // ----------------------------------------------------------------------------

  .offcanvas__pusher {
    @include position(relative, 0 $if-right 0 $if-left);
    @include transition(transform $offcanvas-animations-duration);
    z-index: $zindex-offcanvas;


    &::after {
      @include opacity(0);
      @include position(absolute, 0px $if-left 0 $if-right);
      @include square(0);
      @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
      content: '';

      @if $offcanvas-dim {
        @extend %nav--offcanvas__dim !optional;
      }
    }
  }

  .offcanvas__content {
    overflow-y: auto;
    position: relative;
    background: $body-color;
  }

  // .offcanvas__content-inner {
  //   position: relative;
  // }

  // ----------------------------------------------------------------------------

  .offcanvas__menu--toggle {
      @extend %nav--offcanvas__toggle !optional;
  }

  .offcanvas__menu--open {

    .offcanvas__pusher::after {
      @include opacity(1);
      @include square(100%);
      @include transition(opacity $offcanvas-animations-duration);
    }<commit_msg>Fix zindex offcanvas<commit_after>/*

Off-Canvas

There's available a nice off-canvas sidebar functionality adapted from [Codrops](http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations).

Script required: **rapido.js**.

    <div id="offcanvas__container" class="offcanvas__container">
      <nav class="offcanvas__menu">
        [...nav content...]
      </nav>
      <div class="offcanvas__pusher">
        <div class="offcanvas__content">
          [...main content...]
        </div>
      </div>
    </div>

Styleguide 15

*/

/*

Off-Canvas JS

Include this js after including rapido.js.

    $('.offcanvas__menu--toggle').rapido_Offcanvas();

**Options** (with default values):

    toggleClass:     offcanvas__menu--open
    containerClass:  .offcanvas__container
    menuClass:       .offcanvas__menu

For opening and closing the sidebar add the class `offcanvas__menu--toggle` to a link or button.

Styleguide 15.2

*/


@if $offcanvas {

  $if-left: null;
  $if-right: null;
  $if-3d: null;
  $if-width: null;

  @if $offcanvas-direction == 'left' {
    $if-left: 0px;
    $if-right: 0;
    $if-3d: -100%;
    $if-width: $offcanvas-width;
  } @else {
    $if-left: 0;
    $if-right: 0px;
    $if-3d: 100%;
    $if-width: neg($offcanvas-width);
  }

  html,
  body,
  .offcanvas__container,
  .offcanvas__pusher,
  .offcanvas__content {
    height: 100%;

  }

  .offcanvas__container {
    overflow: hidden;
    position: relative;
  }

  // ----------------------------------------------------------------------------

  .offcanvas__pusher {
    @include position(relative, 0 $if-right 0 $if-left);
    @include transition(transform $offcanvas-animations-duration);
    z-index: $zindex-offcanvas;


    &::after {
      @include opacity(0);
      @include position(absolute, 0px $if-left 0 $if-right);
      @include square(0);
      @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
      content: '';
      z-index: ($zindex-offcanvas + 1);

      @if $offcanvas-dim {
        @extend %nav--offcanvas__dim !optional;
      }
    }
  }

  .offcanvas__content {
    overflow-y: auto;
    position: relative;
    background: $body-color;
  }

  // .offcanvas__content-inner {
  //   position: relative;
  // }

  // ----------------------------------------------------------------------------

  .offcanvas__menu--toggle {
      @extend %nav--offcanvas__toggle !optional;
  }

  .offcanvas__menu--open {

    .offcanvas__pusher::after {
      @include opacity(1);
      @include square(100%);
      @include transition(opacity $offcanvas-animations-duration);
    }
{'fraction_non_alphanumeric': 0.19251739048693364, 'fraction_numerical': 0.015228426395939087, 'mean_word_length': 2.2379793061472917, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1774160', 'n_tokens_mistral': 1783, 'n_tokens_neox': 1684, 'n_words': 345}