/**
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 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;
  padding: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  top: 0;
  right: 0;
  float: right;
  margin-top: 25px;

  span {
    color: @white;
  }
  
  &:focus {
    outline: none;
  }
}


//
// 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: 10px 0 10px @t3-global-padding;
    height: 52px;

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

  }

  // Close Button
  .close {
    margin: 0;
    height: 52px;
    line-height: 50px;
    width: 52px;
    background: darken(@t3-off-canvas-header-background, 20%);
    position: absolute;
    top: 0;
    right: 0;
    text-shadow: none;
    font-weight: @font-weight-light;
    color: @t3-off-canvas-header-text-color;
  }

  // Head Search
// -----------
.head-search {
  .clearfix();
  margin-right: @t3-global-margin*2;

  form {
    margin: 0;
  }
  
  label {
    display: none;
  }
  
  .search,
  > .custom {
    position: relative;
    padding-top: 0;

    // Place a search icon
    &:before {
      font-family: "FontAwesome";
      content: "\f002";
      display: block;
      position: absolute;
      left: 0;
      top: 2px;
      color: @t3-off-canvas-header-text-color;
      z-index: 0;
    }
  }
  
  .form-control {
    background: none;
    border: 0;
    color: @t3-off-canvas-header-text-color;
    font-size: @t3-font-size-smaller;
    margin: 0;
    padding-left: @t3-global-padding;
    height: 32px;
    width: 100%;
    .placeholder(@t3-off-canvas-header-text-color);
    

    // focus state
    &:focus {
      box-shadow: none;
    }

  }

  .finder .btn {
    display: none;
  }

}


  // Body
  // -----------------------------------
  .t3-off-canvas-body {
    padding: @t3-global-padding;

    // 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 {
      font-size: @t3-font-size-small;

      li {
        border: 0;
        padding: 0;
        margin: 7px 0 0;

        a {
          padding: 5px 0;
          color: @t3-off-canvas-link-color;

          &:hover, &:active, &:focus {
            background: none;
            color: @white;
          }

          .caret {
            display: none;
          }

          &:before {
            display: none;
          }
        }

        &.active > a,
        &.active.open > a {
          background: none;
          color: @brand-primary;
        }

        &.open > a {
          background: none;
          color: @white;

          .caret {
            border-top-color: @white;
          }
        }
      }
    }

    // Dropdown Menu
    .dropdown-menu {
      background: none;
      font-size: @t3-font-size-smaller;
      text-transform: none;
      padding: 5px 0;
      padding-left: @t3-global-padding/2;


      a {
        img {
          display: none;
        }
      }

      .active a {
        background: transparent;
        color: @brand-primary;
      }

      .divider {
        height: auto;
        background: none;
      }

      .dropdown-submenu {
        bottom: 1px solid @gray-dark;

        > a {
          font-weight: bold;
          margin-bottom: 5px;

          &:after {
            border: 4px solid transparent;
            border-top: 4px solid @gray-light;
            position: absolute;
            top: 17px;
            right: 0;
            margin: 0;
          }


        }

        &.open > a:after {
          border-top-color: @white;
        }
      }


    }


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

    .module-title  {
      margin-bottom: @line-height-computed / 2;
      color: @gray;
      font-size: @t3-font-size-smaller;
    }

    .main-menu {
      .nav {
        font-weight: bold;
        text-transform: uppercase;
      }
    }

  // End Off-Canvas Body
  }

// End Off-Canvas Content Styles
}