AnonymousFox

//home/develito/www/templates/jsn_epic2_pro/scss/joomla/_offcanvas.scss

// ======================================
// --------------- Offcanvas ------------
// ======================================

.off-canvas-base {
  position: absolute;
  background-color: #f5f5f5;
  z-index: 999;
  .close-offcanvas {
    z-index: 999;
    color: #000;
  }
  .padding-20 a.close-offcanvas{
    display: none;
  }
}

.offcanvas-bottom {
  a {
    color: #8A91A4;
  }
}

#close-offcanvas {
  color: #000;
}
body.offcanvas-open .sunfw-content::before{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  -webkit-transition: opacity 0.2s, -webkit-transform 0s 0.2s;
  transition: opacity 0.2s, transform 0s 0.2s;

}
body[class*='-open'].offcanvas-open .sunfw-content::before {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.off-canvas-base{
    z-index: 10000;
}

@media (max-width: 767px) {
  body.sunfw-offCanvas > .off-canvas-base{
    width: 250px !important;
  }
  body.sunfw-offCanvas > .off-canvas-right {
    transform: translate3d(250px, 0, 0) !important;
    -webkit-transform: translate3d(250px, 0, 0) !important;
  }
  body.sunfw-offCanvas > .off-canvas-left {
    transform: translate3d(-250px, 0, 0) !important;
    -webkit-transform: translate3d(-250px, 0, 0) !important;
  }  
  body.sunfw-offCanvas.is-right-open > .off-canvas-right {
    transform: translate3d(0px, 0px, 0px) !important;
  }
  body.sunfw-offCanvas.is-left-open > .off-canvas-left {
    transform: translate3d(0px, 0px, 0px) !important;
  }  
}
@mixin off-canvas-position(
  $position: left,
  $width: 300px,
  $height: 100%,
  $fixed: false,
  $movecontent: false
) {
  @if $position == left {

@if ($movecontent == true) {
        &.is-#{$position}-open .sunfw-content {
          @include translate3d($width, 0, 0);
        }
        &.is-#{$position}-open.sunfw-direction-rtl .sunfw-content {
          @include translate3d(-$width, 0, 0);
        }
    }

.off-canvas-#{$position} {
      @include transition(all .3s);
      //@include translate3d(-$width, 0, 0);
      //width: $offcanvas-left-width;
      height: $offcanvas-left-height;
    }
    &.sunfw-direction-rtl .off-canvas-#{$position} {
      //@include translate3d($width, 0, 0);
    }
  } @else if $position == right {

@if ($movecontent == true) {
        &.is-#{$position}-open .sunfw-content {
          @include translate3d(-$width, 0, 0);
        }
        &.is-#{$position}-open.sunfw-direction-rtl .sunfw-content {
          @include translate3d($width, 0, 0);
        }
    }

.off-canvas-#{$position} {
      @include transition(all .3s);
      //@include translate3d($width, 0, 0);
      //width: $width;
      height: $height;
    }
    &.sunfw-direction-rtl .off-canvas-#{$position} {
      //@include translate3d(-$width, 0, 0);
    }
  } @else if $position == top {

@if ($movecontent == true) {
          &.is-#{$position}-open .sunfw-content {
            @include translate3d(0, $height, 0);
          }
      }

.off-canvas-#{$position} {
        @include transition(all .3s);
        @include translate3d(0, -$height , 0);
        width: $width;
        height: $height;
      }
  } @else if $position == bottom {

@if ($movecontent == true) {
          &.is-#{$position}-open .sunfw-content {
            @include translate3d(0, -$height, 0);
          }
      }

.off-canvas-#{$position} {
        @include transition(all .3s);
        @include translate3d(0, $height , 0);
        width: $width;
        height: $height;
        // visibility: hidden;
      }
  }

&.is-#{$position}-open {
    .off-canvas-#{$position} {
      @include translate3d(0, 0, 0);
      @if $fixed == true {
        visibility: visible;
      }
    }
  }

@if $fixed == true {
    .off-canvas-#{$position} {
      position: fixed;
    }
  }
}

.effect-left-push { @include off-canvas-position( left, $offcanvas-left-width, $offcanvas-left-height, false, true) };
.effect-right-push { @include off-canvas-position( right, $offcanvas-right-width, $offcanvas-right-height, false, true ) };
.effect-top-push { @include off-canvas-position( top, $offcanvas-top-width, $offcanvas-top-height, false, true ) }
.effect-bottom-push { @include off-canvas-position( bottom, $offcanvas-bottom-width, $offcanvas-bottom-height, true, true ) }

.effect-left-slide { @include off-canvas-position( left, $offcanvas-left-width, $offcanvas-left-height, false, false) };
.effect-right-slide { @include off-canvas-position( right, $offcanvas-right-width, $offcanvas-right-height, false, false ) };
.effect-top-slide { @include off-canvas-position( top, $offcanvas-top-width, $offcanvas-top-height, false, false ) }
.effect-bottom-slide { @include off-canvas-position( bottom, $offcanvas-bottom-width, $offcanvas-bottom-height, true, false ) }

@mixin toggle-offcanvas ($position: left) {
  .toggle-offcanvas {
    @if $position == left {
      @include rtl-right(0);
      @include rtl-translate(100%,0);
      &.middle {
        @include rtl-translate(100%,-50%);
      }
    }
    @if $position == right {
      @include rtl-left(0);
      @include rtl-translate(-100%,0);
      &.middle {
        @include rtl-translate(-100%,-50%);
      }
    }
    @if $position == top {
      transform: translate(0,100%);
      bottom: 0;
      &.center {
        transform: translate(-50%,100%);
      }
    }
    @if $position == bottom {
      top: 0;
      transform: translate(0,-100%);
      &.center {
        transform: translate(-50%,-100%);
      }
    }
  }
}

.off-canvas-left { @include toggle-offcanvas(left) }
.off-canvas-right { @include toggle-offcanvas(right) }
.off-canvas-top { @include toggle-offcanvas(top) }
.off-canvas-bottom { @include toggle-offcanvas(bottom) }

.toggle-offcanvas {
  background: #FFF;
  padding: 5px 15px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  border: 1px solid rgba(221, 221, 221, 0.5);
  .fa-bars {
    color: #000;
  }
  &:focus {
    outline: none;
  }
}

// Blank
.offcanvas-content {
  > .row {
    margin: 0;
  }
  .container {
    width: 100%;
  }
  h3.module-title {
    @include rtl-padding-left(20px);
  }
  .col-xs-12 {
    padding: 0;
  }
  ul.nav.menu {
    li {
      border-bottom: 1px solid rgba(204, 204, 204, 0.3);
      a {
        font-size: 14px;
        color: #333;
        display: block;
        @include rtl-padding(13px, 10px, 13px, 20px);
      }
    }
    .nav-child {
      border-top: 1px solid rgba(204, 204, 204, 0.3);
      > li:last-child {
        border: medium none;
      }
    }
    ul {
      padding: 0;
      list-style: none;
    }
  }
  #login-form {
   padding: 10px 15px 0;
    ul {
      padding: 0;
      list-style: none;
    }
  }

}

.off-canvas-base {
  position: fixed;
}
.off-canvas-base .offcanvas-content {
  position: fixed;
  top: 0;
  bottom: 0;
  width: inherit;
  overflow: auto;
}
.toggle-offcanvas.top {
  top: 0;
}
.toggle-offcanvas.bottom {
  bottom: 0;
}
.toggle-offcanvas.middle {
  top: 50%;
}
.toggle-offcanvas.right {
  right: 0;
}
.toggle-offcanvas.left {
  left: 0;
}
.toggle-offcanvas.center {
  left: 50%;
}
// responsive mobile
.sunfw-offCanvas .only-mobile {
  display: none;
}
@media (max-width: 767px) {
  .sunfw-offCanvas .only-mobile {
    display: block;
  }
  .sunfw-offCanvas .only-mobile .close-offcanvas.toggle-offcanvas {
    display: block;
  }
}