File: /home/oscasa/public_html/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
}