Your IP : 216.73.216.193
//
// BASIC STYLE FOR MEGAMENU
// -------------------------
.t4-megamenu {
// THE MEGAMENU
//--------------------------------------------
// Global Menu Inner padding
// -------------------------
.mega-inner {
padding-bottom: calc($grid-gutter-width / 2);
padding-top: calc($grid-gutter-width / 2);
@include clearfix();
}
// Menu Grids
// ----------
.row {
}
.row + .row {
}
// Dropdown Sub Menus
// ------------------
.dropdown-submenu {
}
// Nav in Megamenu
// ---------------
.mega-col-nav {
}
// Inner padding
.mega-col-nav .mega-inner {
}
.mega-col-nav .mega-col-title {
}
// Inner padding for nav in 1 column
.col-lg.mega-col-nav .mega-inner,
.col-md.mega-col-nav .mega-inner,
.col-sm.mega-col-nav .mega-inner,
.col-xs.mega-col-nav .mega-inner {
}
// The Nav
.mega-nav,
.dropdown-menu .mega-nav {
list-style: none;
margin: 0;
padding: 0;
}
.mega-nav > li,
.dropdown-menu .mega-nav > li {
}
.mega-nav > li a,
.dropdown-menu > li a {
padding: $nav-link-padding-y $nav-link-padding-x;
}
.dropdown-menu .mega-nav > li .separator {
}
// The caret
.nav-link > .dropdown-toggle {
}
.mega-nav .dropdown-submenu > a::after {
margin-right: 0;
}
// Modules in Megamenu
// -------------------
.mega-col-module {
}
// Inner padding
.mega-col-module .mega-inner {
}
// The module
.t4-module {
}
.t4-module .module-inner {
padding: 0;
}
// Module Title
// Navigation title
.t4-module .module-title,
.mega-col-nav .mega-col-title,
.mega-col-module .mega-col-title {
background: $t4-module-title-bg;
border-bottom: 1px solid $border-color;
font-size: $font-size-lg;
font-weight: $font-weight-semibold;
line-height: normal;
margin: 0 0 $spacer;
padding: 0;
text-transform: none;
span {
border: 0;
color: $t4-module-title-color;
display: inline-block;
padding: 0 0 calc($spacer/2) 0;
}
}
// Module Content
.t4-module .module-ct {
}
// Navigation in Module
.t4-module .nav,
.mega-col-module .nav {
list-style: none;
margin: 0;
padding: 0;
li.nav-item {
list-style: none;
flex-basis: 100%;
a {
display: block;
padding: calc($spacer / 2) 0;
&:hover, &:focus, &:active {
background-color: $gray-100;
}
}
}
}
// Login form Module
.t4-module {
#login-form {
ul.unstyled {
padding-left: 0;
li {
padding-top: 0;
}
}
}
}
// List in Module
// Reset List Style in Module
.t4-module ul {
}
.t4-module ul li {
}
.t4-module ul li a {
// Link states
&:hover, &:focus, &:active {
}
}
// Nav in Module
.dropdown-menu .t4-module .nav {
}
.dropdown-menu .t4-module .nav li {
}
.dropdown-menu .t4-module .t4-module li a {
// Link states
&:hover, &:focus, &:active {
}
}
// The caption
// -----------
.mega-caption {
display: block;
font-weight: normal;
opacity: 0.8;
}
// The caret
// ---------
.nav .caret,
.dropdown-submenu .caret,
.mega-menu .caret {
display: none;
}
// Show the caret on level 0 only
.dropdown-toggle:after {
display: none;
}
.dropdown-toggle .item-caret {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
width: 22px;
&::before {
border-top: 4px solid $body-color;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: "";
display: block;
}
}
// The icon
// --------
.nav [class^="icon-"],
.nav [class*=" icon-"],
.nav .fa {
margin-right: calc($spacer / 4);
}
// 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%;
transform: 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;
right: 0;
margin-left: 0;
top: auto;
}
} // End
// The Dropdown
// ------------
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix}:not(.navbar-expand-sm) {
.t4-megamenu .dropdown-menu {
@include media-breakpoint-down($breakpoint) {
left: 0 !important;
margin-top: 0 !important;
margin-left: 0 !important;
-webkit-transform: none !important;
-ms-transform: none !important;
opacity: 1 !important;
transform: none !important;
width: auto !important;
}
}
}
}
}
// T4 MEGAMENU TYPOGRAPHY
// ----------------------
.t4-megamenu {
.nav-link {
display: flex;
justify-content: space-between;
align-items: center;
@include media-breakpoint-up(md) {
display: inline-flex;
justify-content: flex-start;
}
}
.badge-hot,
.badge-new,
.badge-popular {
// Has sub-nav
&.dropdown {
> .nav-link {
.item-caret {
position: relative;
}
}
}
// Don't have sub-nav
> .nav-link {
position: relative;
&:after {
background-color: $red;
border-radius: 3px;
border: 0;
color: $white;
content: "Hot";
display: inline-block!important;
font-size: 9px;
line-height: 1;
letter-spacing: 0.5px;
margin: 0 0 0 calc($spacer / 4);
padding: 3px 4px;
top: -8px;
position: relative;
float: none;
text-transform: uppercase;
}
}
}
// Badge new
.badge-new {
> .nav-link {
&:after {
background-color: $green;
content: "New";
}
}
}
// Badge Popular
.badge-popular {
> .nav-link {
// padding-right: 62px;
&:after {
background-color: $blue;
content: "Popular";
}
}
&.dropdown {
> .nav-link {
}
}
}
}
//
// T4 MEGAMENU Animation
// ---------------------
.t4-megamenu.animate {
.dropdown {
> .dropdown-menu {
backface-visibility: hidden;
opacity: 0;
}
&.animating > .dropdown-menu {
//@include transition(all 400ms);
display: block;
}
&.show.animating > .dropdown-menu,
&.animating.open > .dropdown-menu {
opacity: 1;
}
}
&.zoom {
.dropdown {
> .dropdown-menu {
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
transform-origin: 20% 20%;
}
&.show.animating > .dropdown-menu {
transform: scale(1, 1);
}
}
//special case for level 0
.level0 > .mega-align-center {
> .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%;
}
&.show.animating > .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 {
.dropdown {
& > .dropdown-menu {
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
transform-origin: 10% 0;
}
&.show.animating > .dropdown-menu {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.level0 {
> .dropdown > .dropdown-menu {
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
}
.show.animating > .dropdown-menu {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
> .mega-align-center {
> .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);
}
&.show.animating > .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);
}
}
}
}
&.slide {
.dropdown {
/* Level 0 */
&.animating > .dropdown-menu {
//overflow: hidden;
}
> .dropdown-menu {
backface-visibility: hidden;
margin-top: -30%;
}
&.show.animating > .dropdown-menu {
margin-top: 0%;
}
/* Level > 0 */
.dropdown-menu {
min-width: 0;
margin-top: -$spacer;
transition-property: margin-top, opacity;
transition-timing-function: ease;
> div {
min-width: 200px;
margin-top: 0;
margin-left: -500px;
width: 100%;
}
}
&.animating > .dropdown-menu > div {
margin-left: 0;
}
}
}
&.flipping {
.dropdown {
/* Level 0 */
> .dropdown-menu {
transform-origin: 50% 0%;
transform: perspective(600px) rotateX(-90deg);
transition-property: transform;
transition-timing-function: ease;
}
&.show.animating > .dropdown-menu {
transform: perspective(600px) rotateX(0deg);
}
/* Level > 0 */
.dropdown > .dropdown-menu {
}
}
}
&.fading {
.dropdown {
&.show.animating > .dropdown-menu {
transition-property: opacity;
transition-timing-function: ease;
}
}
}
&.zoom {
.dropdown {
&.show.animating > .dropdown-menu {
transition-property: transform;
transition-timing-function: ease;
}
}
}
&.elastic {
.dropdown {
&.show.animating > .dropdown-menu {
transition-property: transform;
transition-timing-function: ease;
}
}
}
.animating.show {
z-index: 2000;
}
}