Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/header/blocks/
?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/header
/* ==========================================================================
#Main Menu styles - start
========================================================================== */
.edgtf-main-menu {
position: relative;
display: inline-block;
vertical-align: middle;
height: 100%;
ul {
list-style: none outside none;
margin: 0px;
padding: 0px;
text-align: left;
li {
position: relative;
display: inline-block;
float: left;
padding: 0px;
margin: 0px;
background-repeat: no-repeat;
background-position: right;
a {
font-size: 13px;
line-height: 16px;
font-weight: 700;
color: $second-main-color;
body:not(.edgtf-menu-with-large-icons) & span.item_inner i:before{
margin: 0 7px 0 0;
}
}
&:hover a, &.edgtf-active-item a {
color: $first-main-color;
}
}
}
> ul {
display: inline-block;
vertical-align: middle;
position: relative;
height: 100%;
> li {
height: 100%;
&:first-child > a span.plus{
display: none!important;
}
body:not(.edgtf-menu-item-first-level-bg-color) &:hover > a,
&.edgtf-active-item > a {
color: $first-main-color;
}
&.has_sub {
> a i.edgtf-menu-arrow {
display: inline-block;
margin-left: 6px;
}
> a .item_inner > i.edgtf-menu-arrow{
position: relative;
left:4px;
}
}
&:hover .item_title:before {
-webkit-transition: -webkit-transform .3s ease-in-out, left 0s ease-in-out .6s;
transition: transform .3s ease-in-out, left 0s ease-in-out .6s;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
left: calc(100% + 2px);
}
&:hover .item_title:after {
-webkit-transition: -webkit-transform .3s ease-in-out .3s, left .2s ease .6s;
transition: transform .3s ease-in-out .3s, left .2s ease .6s;
opacity: 1;
@include edgtfTransform(scale(1,1));
left: calc(100% + 2px);
}
> a {
height: 100%;
position: relative;
padding: 0;
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
border-style: solid;
border-width: 0px;
position: relative;
border-color: transparent;
height: 100%;
background-color: transparent;
-webkit-transition: color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
letter-spacing: 2px;
&:before {
height: 2px;
bottom: 0px;
}
&:after {
height: 1px;
bottom: 4px;
}
body.edgtf-menu-with-large-icons &{
text-align: center;
vertical-align:middle;
}
> span.item_outer{
display: block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
span.item_inner {
display: inline-block;
padding: 0 20px;
border-width: 0px;
position: relative;
border-color: transparent;
background-color: transparent;
-webkit-transition: text-decoration 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
transition: text-decoration 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
body.edgtf-menu-with-large-icons &{
text-align: center;
vertical-align:middle;
}
}
span.item_inner:before,
span.item_inner:after,
&:before,
&:after {
content: "";
display: none;
position: absolute;
left: 0px;
background-color: transparent;
-webkit-transition: background-color 0.15s ease-out;
transition: background-color 0.15s ease-out;
width: 100%;
}
span.item_inner:before {
bottom: 0px;
height: 2px;
}
span.item_inner:after {
height: 1px;
bottom: 4px;
}
body.edgtf-menu-with-large-icons & span.item_inner i{
display: inline-block;
width:100%;
vertical-align:middle;
}
.item_title {
display: inline-block;
position: relative;
overflow: hidden;
top:2px;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
top: calc(50% - 1px);
height: 1px;
width: 100%;
background-color: #fff;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
display: inline-block;
}
&:before {
background-color: rgba(255,255,255,.6);
z-index: 11;
}
&:after {
@include edgtfBackgroundColorOpacity($first-main-color,.7);
z-index: 22;
}
}
span.plus{
display:none;
width:4px;
height:4px;
background-color:$first-main-color;
position: absolute;
top: 50%;
@include edgtfTransform(translateY(-50%));
}
> i.blank{
display: none;
}
}
}
}
body:not(.edgtf-menu-with-large-icons) & .edgtf-drop-down .wide.icons .second i:before {
margin: 0;
}
}
.edgtf-light-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-main-menu > ul > li,
.edgtf-light-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-main-menu > ul > li {
> a {
color: $header-light-color;
}
}
.edgtf-dark-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-main-menu > ul > li,
.edgtf-dark-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-main-menu > ul > li {
> a {
color: $header-dark-color;
}
}
/* Drop Down Menu Hover Animation Effects
========================================================================== */
.edgtf-drop-down {
.second {
%line {
content: '';
position: absolute;
left: 0;
top: calc(50% - 2px);
height: 1px;
width: 100%;
background-color: #fff;
@include edgtfTransform(scale(0,0));
opacity: 0;
@include edgtfTransformOrigin(0 50%);
}
a:not(.no_link) .item_inner {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle;
&:before {
@extend %line;
background-color: rgba(255,255,255,.6);
z-index: 11;
}
&:after {
@extend %line;
@include edgtfBackgroundColorOpacity($first-main-color,.7);
z-index: 22;
}
.item_text {
position: relative;
z-index: 33;
}
}
li > a:hover {
.item_inner:before {
-webkit-transition: -webkit-transform .3s ease-in-out, left 0s ease-in-out .6s;
transition: transform .3s ease-in-out, left 0s ease-in-out .6s;
opacity: 1;
@include edgtfTransform(scale(1,1));
left: calc(100% + 1px);
}
.item_inner:after {
-webkit-transition: -webkit-transform .3s ease-in-out .3s, left .2s ease .6s;
transition: transform .3s ease-in-out .3s, left .2s ease .6s;
opacity: 1;
@include edgtfTransform(scale(1,1));
left: calc(100% + 1px);
}
}
}
}
/* Narrow drop down styles
========================================================================== */
.edgtf-drop-down ul{
list-style: none;
}
.edgtf-drop-down ul li{
position: relative;
}
header.transparent.fixed.scrolled .edgtf-drop-down .second,
header.transparent.fixed_hiding.scrolled .edgtf-drop-down .second{
top: 100%;
}
.edgtf-drop-down .second {
left: 0;
margin: 0;
top: calc(100% + 1px);
position: absolute;
display: block;
visibility: hidden;
overflow: hidden;
opacity: 0;
z-index: 10;
border-top: 5px solid #{$first-main-color};
-webkit-transition: top 0.15s ease-out;
-moz-transition: top 0.15s ease-out;
-ms-transition: top 0.15s ease-out;
-o-transition: top 0.15s ease-out;
transition: top 0.15s ease-out;
}
header.transparent:not(.sticky) .edgtf-drop-down .second {
top: 75%;
}
header.transparent.with_border:not(.sticky) .edgtf-drop-down .second,
header.transparent.edgtf-menu-item-first-level-bg-color:not(.sticky) .edgtf-drop-down .second {
top: 100%;
}
.edgtf-drop-down li.left_position .second{
left: 0px;
}
/*
header.transparent .edgtf-drop-down li:not(.right_position):not(.left_position) .second:not(.right) {
left: 16px;
}
*/
header.transparent.edgtf-menu-item-first-level-bg-color .edgtf-drop-down .second:not(.right) {
left: 0;
}
.edgtf-drop-down li.right_position .second {
left: auto;
right: 0;
}
.edgtf-drop-down .second.edgtf-drop-down-start{
visibility: visible;
overflow: visible;
opacity: 1;
transition:opacity 0.2s ease-out;
-webkit-transition:opacity 0.2s ease-out;
}
.edgtf-drop-down > ul > li:hover > .second{
z-index: 20;
}
.edgtf-drop-down .second .inner{
position: relative;
padding: 0px;
display: block;
z-index: 997;
}
.edgtf-drop-down .second .inner > ul,
li.narrow .second .inner ul {
display:inline-block;
position: relative;
background-color: rgba(5, 11, 14, 0.9);
}
.edgtf-drop-down .second .inner>ul,
li.narrow .second .inner ul,
.edgtf-drop-down .narrow .second .inner ul li ul{
border-style: solid;
}
li.narrow .second .inner ul{
padding: 10px 0 8px;
}
.edgtf-drop-down .second .inner ul li {
display: block;
padding: 0 15px;
position: relative;
float: none;
height: auto;
background: 0;
width: 190px;
transition: background-color .15s ease-out;
-webkit-transition: background-color 0.15s ease-out;
-ms-transition: background-color 0.15s ease-out;
}
li.narrow .second .inner ul li:last-child {
border-bottom: none;
}
.edgtf-drop-down .wide.left_position .second ul li,
.edgtf-drop-down .wide.right_position .second ul li {
width: 180px;
}
.edgtf-drop-down .narrow .second .inner ul li {
padding: 0 8px 0 18px;
width: 230px;
-webkit-transition: background-color 0.15s ease-out;
-ms-transition: background-color 0.15s ease-out;
transition: background-color 0.15s ease-out;
}
.edgtf-drop-down .second .inner ul li a,
.edgtf-drop-down .second .inner ul li h4{
display: block;
color: #9c9c9c;
height: auto;
font-size: 12px;
line-height: 21px;
font-weight: 600;
letter-spacing: 2px;
margin: 0 15px;
padding: 6px 7px;
-webkit-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
border-bottom: 1px solid transparent;
float:none;
}
.edgtf-drop-down .second .inner > ul > li:last-child > a,
.edgtf-drop-down .second .inner > ul > li > ul > li:last-child > a,
.edgtf-drop-down .second .inner > ul > li > ul > li > ul > li:last-child > a {
border-bottom: 0;
}
.edgtf-drop-down .second .inner > ul > li:hover > a,
.edgtf-drop-down .second .inner ul li.sub ul li:hover > a{
color: #fff;
}
.edgtf-drop-down .wide .second ul li a,
.edgtf-drop-down .wide .second .inner ul li.sub a,
.edgtf-drop-down .wide .second .inner ul li h4{
background: 0;
}
.edgtf-drop-down .wide .second ul ul li a:not(.edgtf-item-with-icon) .item_outer:before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
background-color: $first-main-color;
position: absolute;
left: 20px;
top: 14px;
}
.edgtf-drop-down .wide .second ul ul li a:not(.edgtf-item-with-icon) {
padding-left: 25px;
}
.edgtf-drop-down .wide .second .menu_icon_wrapper .null{
display:none;
}
.edgtf-drop-down .narrow .second .inner ul li ul{
position: absolute;
left: 100%;
top: -11px; /* same as padding in father ul */
height: auto;
opacity:0;
@include edgtfTransition(opacity .25s ease-out);
overflow: hidden;
z-index: 10;
-webkit-transform: translateZ(0);
}
.edgtf-drop-down .second .inner ul.right li ul{
margin-left: -2px;
}
.edgtf-drop-down .second .inner ul li:hover ul{
z-index: 20;
opacity:1;
}
.edgtf-drop-down .second .inner ul li ul li:hover ul{
z-index: 20;
opacity:1 !important;
display:block !important;
visibility: visible !important;
}
/* slide_from_bottom start */
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .second {
overflow: visible;
-webkit-transition: top 0.15s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.5s;
transition: top 0.15s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.5s;
}
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .wide .second .inner > ul,
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .narrow .second .inner > ul {
top:30px;
-webkit-transition:all 0.3s cubic-bezier(.39,.575,.565,1);
transition:all 0.3s cubic-bezier(.39,.575,.565,1);
}
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .narrow .second .inner ul li ul{
top: 22px;
-webkit-transition:all 0.3s cubic-bezier(.39,.575,.565,1);
transition: all 0.3s cubic-bezier(.39,.575,.565,1);
}
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .wide .second.edgtf-drop-down-start .inner > ul,
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .narrow .second.edgtf-drop-down-start .inner > ul {
top:0;
}
body.edgtf-dropdown-slide-from-bottom .edgtf-drop-down .narrow .second .inner ul li:hover ul{
top: -1px; /* same as padding in father ul */
}
/* slide_from_bottom end */
/* slide_from_top start */
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .second {
overflow: visible;
-webkit-transition: top 0.15s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.5s;
transition: top 0.15s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.5s;
}
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .wide .second .inner > ul,
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .narrow .second .inner > ul {
top:-30px;
-webkit-transition:all 0.3s cubic-bezier(.39,.575,.565,1);
transition:all 0.3s cubic-bezier(.39,.575,.565,1);
}
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .narrow .second .inner ul li ul{
top: -22px;
-webkit-transition:all 0.3s cubic-bezier(.39,.575,.565,1);
transition: all 0.3s cubic-bezier(.39,.575,.565,1);
}
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .wide .second.edgtf-drop-down-start .inner > ul,
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .narrow .second.edgtf-drop-down-start .inner > ul {
top:0;
}
body.edgtf-dropdown-slide-from-top .edgtf-drop-down .narrow .second .inner ul li:hover ul{
top: -1px; /* same as padding in father ul */
}
/* slide_from_top end */
/* slide_from_left start */
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .second {
overflow: visible;
-webkit-transition: top 0.2s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.4s;
transition: top 0.2s ease-out, opacity 0.2s ease-out, height 0s ease-out 0.4s;
}
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .wide .second .inner > ul,
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .narrow .second .inner > ul {
left:-30px;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .narrow .second .inner ul li ul{
left: calc(100% - 30px);
-webkit-transition:all 0.2s ease-out;
transition: all 0.2s ease-out;
}
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .wide .second.edgtf-drop-down-start .inner > ul,
body.edgtf-dropdown-slide-from-left .edgtf-drop-down .narrow .second.edgtf-drop-down-start .inner > ul {
left:0;
}
body.edgtf-dropdown-slide-from-left.edgtf-drop-down .narrow .second .inner ul li:hover ul{
left: 100%;
}
/* slide_from_left end */
.edgtf-drop-down .second.right {
right: 0px;
left: auto;
}
.edgtf-drop-down .second .inner ul.right li a,
.edgtf-drop-down .second .inner ul.right li h4{
text-align: right;
}
.edgtf-drop-down .second .inner ul.right li ul{
left: -100%;
}
.edgtf-drop-down .second .inner ul li.sub ul li a,
.edgtf-drop-down .second .inner ul.right li.sub ul li a{
background: none;
}
.edgtf-drop-down .second .inner .widget{
padding: 20px 22px 0;
}
.edgtf-drop-down .second .inner .widget.widget_edgt_latest_posts_menu_widget{
padding: 0px 20px;
}
/* Wide drop down styles
========================================================================== */
.edgtf-drop-down .wide .second ul{
padding: 11px 0 9px;
}
.edgtf-drop-down .wide .second ul li{
float: left;
width: 234px;
padding: 0px;
border-bottom: 0;
box-sizing: border-box;
width: 100%;
.edgtf-featured-icon.icon-fire {
position: relative;
top: 2px;
left: 6px;
font-size: 12px;
color: $first-main-color;
}
}
.edgtf-drop-down .wide .second > .inner > ul{
width: 1100px;
}
.edgtf-grid-1300 .edgtf-drop-down .wide .second > .inner > ul{
width: $grid-width-1300;
}
.edgtf-grid-1200 .edgtf-drop-down .wide .second > .inner > ul{
width: $grid-width-1200;
}
.edgtf-grid-1000 .edgtf-drop-down .wide .second > .inner > ul{
width: $grid-width-1000;
}
.edgtf-grid-800 .edgtf-drop-down .wide .second> .inner > ul{
width: $grid-width-800;
}
.edgtf-drop-down .wide .second > .inner > ul > li{
width: 25%;
}
.edgtf-drop-down .wide .second ul li:last-child {
margin-right: 0;
}
.edgtf-drop-down .wide.right_position .second ul li{
float: right;
}
.edgtf-drop-down .wide .second ul li:hover{
background-color: transparent;
}
.edgtf-drop-down .wide .second ul li:nth-child(4n+1){
clear: both;
}
.edgtf-drop-down {
.wide.right_position.wide_columns_3 .second > .inner > ul,
.wide.left_position.wide_columns_3 .second > .inner > ul {
width: 825px; /* default value for 3 columns */
}
.wide.right_position.wide_columns_2 .second > .inner > ul,
.wide.left_position.wide_columns_2 .second > .inner > ul {
width: 550px; /* default value for 2 columns */
}
.wide.right_position.wide_columns_1 .second > .inner > ul,
.wide.left_position.wide_columns_1 .second > .inner > ul {
width: 275px; /* default value for 1 column */
}
.wide.wide_columns_3 .second > .inner > ul > li{
width: 33.3333333%;
}
.wide.wide_columns_2 .second > .inner > ul > li{
width: 50%;
}
.wide.wide_columns_1 .second > .inner > ul > li{
width: 100%;
}
}
.edgtf-drop-down .second .inner ul li.sub a i.edgtf-menu-arrow{
position: relative;
top: 50%;
right: 0px;
display: inline-block;
vertical-align: middle;
color: inherit;
font-size: inherit;
margin: -3px 0 0 10px;
color: $first-main-color;
font-size: 15px;
}
.edgtf-drop-down .second .inner ul li.sub ul li a i.edgtf-menu-arrow,
.edgtf-drop-down .wide .second .inner ul li.sub a i.edgtf-menu-arrow {
display: none;
}
.edgtf-drop-down .second .inner ul.right li.sub a i.edgtf-menu-arrow{
right: auto;
left: 0px;
@include edgtfTransform(rotate(180deg));
}
.edgtf-drop-down .wide .second .inner > ul > li > a{
line-height: 18px;
color: #fff;
font-weight: 600;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
@include edgtfTransition(color .3s ease-out);
}
.edgtf-drop-down .wide .second .inner > ul > li > a:hover{
color: #fff;
}
.edgtf-drop-down .wide .second .inner ul li.sub h4 a,
.edgtf-drop-down .wide .second .inner ul li h4 a{
padding: 0px !important;
}
.edgtf-drop-down .wide .second ul li ul{
display: block;
left: 0;
padding: 10px 0 0;
position: relative;
top: 0;
visibility: visible;
background-color: transparent !important;
}
.edgtf-drop-down .wide .second ul li ul .widget{
padding: 0px 18px;
}
.edgtf-drop-down .wide .second ul li ul li{
padding: 0;
margin: 0;
border: 0;
}
.edgtf-main-menu .second{
text-transform:uppercase;
font-weight:600;
font-size:12px;
color:#888;
@include edgtfTransition(color .3s ease-out);
}
.edgtf-main-menu .second ul li a .menu_icon{
padding-left: 5px;
font-size: 13px;
color: $first-main-color;
}
.edgtf-main-menu .second a:hover > .item_outer .item_text{
.menu_icon{
color:$first-main-color;
}
}
/* Wide drop down with full width background styles
========================================================================== */
.edgtf-drop-down .wide.wide_background .second{
background-color: rgba(6, 9, 10, 0.9);
}
.edgtf-drop-down .wide.wide_background .second .inner{
text-align:center;
}
.edgtf-drop-down .wide.wide_background .second .inner ul{
text-align:left;
}
/* Wide with icons drop down styles
========================================================================== */
.edgtf-drop-down .wide.icons .second ul li a span{
position: relative;
}
.edgtf-drop-down .wide.icons .second i{
display: inline-block;
}
.edgtf-drop-down .second i.blank,
.edgtf-drop-down .second i.null{
background: none;
border: 0px;
display:none;
}
.edgtf-drop-down .wide .second > .inner > ul > li > a,
.edgtf-drop-down .wide .second > .inner > ul > li:last-child > a{
padding-bottom:15px;
border-bottom:2px solid rgba(85, 85, 85, .54);
position:relative;
}
.edgtf-main-menu .item_description{
font-size:12px;
text-transform:none;
font-weight:300;
letter-spacing:0;
padding-left:5px;
}
.edgtf-drop-down .wide .second > .inner > ul > li > a:after{
content:'';
display:block;
position:absolute;
width:3px;
height:2px;
background-color:$first-main-color;
bottom: -2px;
left:0px;
}
.edgtf-drop-down .narrow ul li a .item_outer:before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
background-color: #fb3644;
position: absolute;
left: 20px;
top: 14px;
}
/* ==========================================================================
#Main Menu styles - end
========================================================================== */