AnonymousFox

/home/develito/www/plugins/system/t3/base-bs3/less/megamenu.less

/** 
 *------------------------------------------------------------------------------
 * @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 
 *------------------------------------------------------------------------------
 */

// VARIABLES & MIXINS
// ------------------

// Prevent Bootstrap Upgrading errors
@import "../bootstrap/less/variables.less";

// Bootstrap mixins
@import "../bootstrap/less/mixins.less";

// T3 Base variables
@import "variables.less";

//
// BASIC STYLE FOR MEGAMENU
// -------------------------

.t3-megamenu {

// THE MEGAMENU
  //--------------------------------------------

// Global Menu Inner padding
  // -------------------------
  .mega-inner {
    .clearfix();
  }

// Inner Padding for 1 column
  .col-lg-12 .mega-inner,
  .col-md-12 .mega-inner,
  .col-sm-12 .mega-inner,
  .col-xs-12 .mega-inner {
  }

// Menu Grids
  // ----------
  .row {
  }

.row + .row  {
  }

// The Dropdown
  // ------------
  .mega > .mega-dropdown-menu {
    min-width: @t3-mega-dropdown-min-width;
    display: none;
  }

.mega.open > .mega-dropdown-menu,
  .mega.dropdown-submenu.open > .mega-dropdown-menu {
    display: block;
  }

// Dropdown Sub Menus
  // ------------------
  .dropdown-submenu {
  }

// The Group
  // ---------
  .mega-group {
    .clearfix();
  }

// Group Title
  // We use BS3 "dropdown-header"
  //.mega-nav .mega-group > .mega-group-title,
  //.dropdown-menu .mega-nav .mega-group > .mega-group-title,
  //.dropdown-menu .active .mega-nav .mega-group > .mega-group-title
  .dropdown-header,
  .mega-nav .mega-group > .dropdown-header,
  .dropdown-menu .mega-nav .mega-group > .dropdown-header,
  .dropdown-menu .active .mega-nav .mega-group > .dropdown-header {
    margin: 0;
    padding: 0;
    background: @t3-module-title-bg;
    color: @t3-module-title-color;
    font-size: @font-size-large;
    line-height: normal;
    // Link states
    &:hover, &:active, &:focus {
      background: inherit;
      color: inherit;
    }
  }

// Group Content
  .mega-group-ct {
    margin: 0;
    padding: 0;
    .clearfix();
  }

// Nav in Megamenu
  // ---------------
  .mega-col-nav {
  }

// Inner padding
  .mega-col-nav .mega-inner {
  }

// Inner padding for nav in 1 column
  .col-lg-12.mega-col-nav .mega-inner,
  .col-md-12.mega-col-nav .mega-inner,
  .col-sm-12.mega-col-nav .mega-inner,
  .col-xs-12.mega-col-nav .mega-inner {
  }

.mega-group .col-lg-12.mega-col-nav .mega-inner,
  .mega-group .col-md-12.mega-col-nav .mega-inner,
  .mega-group .col-sm-12.mega-col-nav .mega-inner,
  .mega-group .col-xs-12.mega-col-nav .mega-inner {
  }

// The Nav
  .mega-nav,
  .dropdown-menu .mega-nav {
    margin: 0;
    padding: 0;
    list-style: none;
  }

.mega-nav > li,
  .dropdown-menu .mega-nav > li {
    list-style: none;
    margin-left: 0;
  }

.mega-nav > li a,
  .dropdown-menu .mega-nav > li a {
    white-space: normal;
    display: block;
    padding: 5px;

&:hover,
    &:focus {
      text-decoration: none;
      color: @dropdown-link-hover-color;
      background-color: @dropdown-link-hover-bg;
    }
  }

.mega-nav > li .separator {
    display: block;
    padding: 5px;
  }

// Nav in Group
  .mega-group > .mega-nav,
  .dropdown-menu .mega-group > .mega-nav {
    margin-left: -5px;
    margin-right: -5px;
  }

.mega-group > .mega-nav > li,
  .dropdown-menu .mega-group > .mega-nav > li {
  }

.mega-group .mega-nav > li a,
  .dropdown-menu .mega-group .mega-nav > li a {
  }

// The caret
  .mega-nav .dropdown-submenu > a::after {
    margin-right: 5px;
  }

// Modules in Megamenu
  // -------------------
  .mega-col-module {
  }

// Inner padding
  .mega-col-module .mega-inner {
  }

// The module
  .t3-module {
    margin-bottom: @t3-global-margin / 2;
  }

// Module Title
  .t3-module .module-title {
    .dropdown-header(); // Make the Module Title look like Dropdown Header
    margin-bottom: 5px;
  }

// Module Content
  .t3-module .module-ct {
    margin: 0;
    padding: 0;
  }

// The caption
  // -----------
  .mega-caption {
    display: block;
    white-space: nowrap;
  }

// The caret
  // ---------
  .nav .caret,
  .dropdown-submenu .caret,
  .mega-menu .caret {
    display: none;
  }

// Show the caret on level 0 only
  .nav > .dropdown > .dropdown-toggle .caret {
    display: inline-block;
  }

// The icon
  // --------
  .nav [class^="icon-"],
  .nav [class*=" icon-"],
  .nav .fa {
    margin-right: 5px;
  }

// Reset the margin on Input Group Addon
  .nav .input-group-addon [class^="icon-"],
  .nav .input-group-addon [class*=" icon-"],
  .nav .input-group-addon .fa {
    margin-right: 0;
  }

// Menu alignment
  // --------------
  .mega-align-left > .dropdown-menu {
    left: 0;
  }

.mega-align-right > .dropdown-menu {
    left: auto;
    right: 0;
  }

.mega-align-center > .dropdown-menu {
    left: 50%;
    .translate(-50%, 0);
  }

.dropdown-submenu.mega-align-left > .dropdown-menu {
    left: 100%;
  }

.dropdown-submenu.mega-align-right > .dropdown-menu {
    left: auto;
    right: 100%;
  }

.mega-align-justify {
    position: static;
  }
  
  .mega-align-justify > .dropdown-menu {
    left: 0;
    margin-left: 0;
    top: auto;
  }

// Menu tab
  // --------------
  	.mega-tab > div {
	  position: relative;
	}
	.mega-tab > div > ul {
	  width: @t3-mega-dropdown-min-width;
	}
	
	.mega-tab > div > ul > li {
	  position: static;
	}
	
	.mega-tab > div > ul > li > .dropdown-menu{
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: @t3-mega-dropdown-min-width;
	}
	
	.mega-tab > div > ul > li > .mega-dropdown-menu {
	  	border: none;
	  	box-shadow: none;
	}

.mega-tab > div > ul > li > .mega-dropdown-menu > div {
	  	opacity: 1!important;
		margin-left: 0!important;
		transition: none!important;
	}
  // End 
}

//
// MEGAMENU Animation
// --------------------------------------------------------------

@media (min-width: @grid-float-breakpoint) {
  .t3-megamenu.animate {
    .mega {
      > .mega-dropdown-menu {
        .backface-visibility(hidden);
        opacity: 0;
      }

&.animating > .mega-dropdown-menu {
        .transition(all 400ms);
        display: block;
      }

&.open > .mega-dropdown-menu,
      &.animating.open > .mega-dropdown-menu {
        opacity: 1;
      }
    }

&.zoom {
      
      .mega {
        > .mega-dropdown-menu {
          .scale(0, 0);
          .transform-origin(20% 20%);
        }
        &.open > .mega-dropdown-menu {
          .scale(1, 1);
        }
      }

//special case for level 0
      .level0 > .mega-align-center {
        > .mega-dropdown-menu {
          -webkit-transform: scale(0, 0) translate(-50%, 0);
              -ms-transform: scale(0, 0) translate(-50%, 0);
                  transform: scale(0, 0) translate(-50%, 0);

.transform-origin(0% 20%);
        }

&.open > .mega-dropdown-menu {
          -webkit-transform: scale(1, 1) translate(-50%, 0);
              -ms-transform: scale(1, 1) translate(-50%, 0);
                  transform: scale(1, 1) translate(-50%, 0);
        }
      }
    }

&.elastic {
      
      .mega {
        & > .mega-dropdown-menu {
          .scale(0, 1);
          .transform-origin(10% 0);
        }      
        &.open > .mega-dropdown-menu {
          .scale(1, 1);
        }
      }

.level0 {

> .mega > .mega-dropdown-menu {
          .scale(1, 0);
        }

.open > .mega-dropdown-menu {
          .scale(1, 1);
        }

> .mega-align-center {
          > .mega-dropdown-menu {
            transform: scale(1,0) translate(-50%, 0);
            -webkit-transform: scale(1,0) translate(-50%, 0);
            -ms-transform: scale(1,0) translate(-50%, 0);
          }

&.open > .mega-dropdown-menu {
            transform: scale(1,1) translate(-50%, 0);
            -webkit-transform: scale(1,1) translate(-50%, 0);
            -ms-transform: scale(1,1) translate(-50%, 0);
          }
        }
      }
    }

&.slide {
      .mega {
        /* Level 0 */
        &.animating > .mega-dropdown-menu {
          overflow: hidden;
        }
        
        > .mega-dropdown-menu {
          > div {
            .transition(all 400ms);
            .backface-visibility(hidden);            
            margin-top: -30%;
          }
        }

&.open > .mega-dropdown-menu {
          > div {
            margin-top: 0%;
          }
        }

/* Level > 0 */
        .mega > .mega-dropdown-menu {
          min-width: 0;
          > div {
            min-width: 200px;
            margin-top: 0;
            margin-left: -500px;
            width: 100%;
          }
        }
        
        .mega.open > .mega-dropdown-menu > div {
          margin-left: 0;
        }
      }    
    }
  }
}

//
// MEGAMENU RESPONSIVE
// --------------------------------------------------------------
@media (max-width: @grid-float-breakpoint-max) {

.t3-megamenu {

// THE MEGAMENU
    //------------------------------------------------------

// Global Menu Inner padding
    // -------------------------
    .mega-inner {
      .clearfix();
    }

// Inner Padding for 1 column
    .col-lg-12 .mega-inner,
    .col-md-12 .mega-inner,
    .col-sm-12 .mega-inner,
    .col-xs-12 .mega-inner {
    }

// Menu Grids
    // ----------
    .row,
    .mega-dropdown-menu,
    .row [class*="col-lg-"],
    .row [class*="col-md-"],
    .row [class*="col-sm-"],
    .row [class*="col-xs-"] {
      width: 100% !important;
      min-width: 100% !important;
      left: 0 !important;
      margin-left: 0 !important;
      
      -webkit-transform: none !important;
          -ms-transform: none !important;
              transform: none !important;
    }

// Hidden when collapse
    .hidden-collapse,
    .always-show .caret,
    .always-show .dropdown-submenu > a:after
    .sub-hidden-collapse > .nav-child,
    .sub-hidden-collapse .caret,
    .sub-hidden-collapse > a:after {
      display: none !important;
    }
  }
	
	// Hide the captions too
	.mega-caption {
		display: none !important;
	}

// MEGAMENU RTL
  //------------------------------------------------------
  //
  html[dir="rtl"] {
    .t3-megamenu {
      // Menu Grids
      // ----------
      .row,
      .mega-dropdown-menu,
      .row [class*="col-lg-"],
      .row [class*="col-md-"],
      .row [class*="col-sm-"],
      .row [class*="col-xs-"] {
        left: auto;
        right: 0 !important;
        margin-right: 0 !important;
      }
    }
  }

// End
}