/**
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2017 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org
 * @credits       Mary Lou - http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
 *------------------------------------------------------------------------------
 */


// VARIABLES & MIXINS
// ------------------
@import "vars.less"; // Include Variables and Mixins


// EXTEND STYLE IN BASE
// --------------------
@import "../../../plugins/system/t3/base-bs3/less/off-canvas.less";



//
// OFF-CANVAS
// -------------------------------------

// Toggle Button
// -------------------
.off-canvas-toggle {
  border-radius: 0;
  border: 0;
  background: transparent;
  color: @navbar-default-color;
  padding: 0;
  width: @navbar-height;
  height: @navbar-height;
  line-height: @navbar-height;
  position: absolute;
  top: 0;
  left: 0;
  // States
  &:hover, &:active, &:focus {
    outline: none;
    .box-shadow(none);
    background: @navbar-default-border;
    color: @navbar-default-link-hover-color;
  }
}

// Fix button offcanvas no responsive
@media screen and (max-width: 1024px) {
  .no-responsive #t3-mainnav .container {
    padding-left: 53px;
  }
}

//
// OFF-CANVAS CONTENT STYLES
// -------------------------------------
.t3-off-canvas {

  // Generic
  // -----------------------------------
  background: @t3-off-canvas-background;
  color: @t3-off-canvas-text-color;


  // Header
  // -----------------------------------
  .t3-off-canvas-header {
    background: @t3-off-canvas-header-background;
    color: @t3-off-canvas-header-text-color;
    padding: 0 0 0 @padding-base-horizontal;
    height: @navbar-height;

    // Title
    h2 {
      margin: 0;
      line-height: @navbar-height;
      font-size: @font-size-base;
      font-weight: bold;
      text-transform: uppercase;
    }

  }

  // Close Button
  .close {
    margin: 0;
    height: @navbar-height;
    line-height: @navbar-height;
    width: @navbar-height;
    background: transparent;
    position: absolute;
    top: 0;
    right: 0;
  }


  // Body
  // -----------------------------------
  .t3-off-canvas-body {

    padding: (@padding-base-vertical * 4)  @padding-base-horizontal;

    // Links
    // ------------
    a {
      color: @t3-off-canvas-link-color;
      text-decoration: none;

      &:hover,
      &:focus {
        color: @t3-off-canvas-link-hover-color;
        text-decoration: none;
      }

      &:focus {
        .tab-focus();
      }
    }


    // Navigations
    // ------------
    .nav {
    }

    // Dropdown Menu
    .dropdown-menu {
    }


    // Modules
    // ------------
    .t3-module {
      margin-bottom: @line-height-computed;
    }

    .module-title  {
      margin-bottom: @line-height-computed / 2;
    }

  // End Off-Canvas Body
  }

// End Off-Canvas Content Styles
}