File: /var/www/html/wpprm_err/wp-content/themes/ronneby/assets/less.lib/header/header.less
/*------------------------------------------------------------------
[Header styles]
1. Header container
1.1. Stye 1
1.2. Stye 2
1.3. Stye 3
1.4. Stye 4
1.5. Stye 5
1.6. Stye 6
1.7. Stye 7
1.8. Stye 8
2. Header animation
3. Stunning header styles
-------------------------------------------------------------------*/
/* -----------------------------------------
Header
----------------------------------------- */
.spacer {
padding-right: 30px;
}
/* -----------------------------------------
Top menu
----------------------------------------- */
//@top-menu-height: 137px;
body {
&.dfd-custom-padding-html {
#header-container {
top: @layout-white-space-size;
}
&.admin-bar {
#header-container {
top: @layout-white-space-size + 32px;
}
}
}
&.admin-bar {
#header-container {
top: 32px;
}
}
}
#header-container {
@transition-function: ease-in;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
min-width: 799px;
.transition(left .3s ease-in-out);
&.dfd-new-headers {
.header-top-panel {
border-bottom-style: solid;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid {
padding: 0 10px;
}
}
&.sticky-header-disabled.small {
.opacity(0);
visibility: hidden;
}
/*@media only screen and (min-width : @header-responsive-breakpoint) {*/
/*
&.animated--header {
&.headroom--top:not(.headet-style-7) {
#header {
.transition(background 0s ease 0s);
}
}
/* &:not(.headroom--top) {
#header {
.transition(background 0s ease .3s);
}
}*//*
&.small.headroom--pinned {
.transition(~"margin-top .2s @{transition-function} 0s, background .2s @{transition-function} 0s");
}
#header .header-wrap > .row:last-child {
.transition(padding-bottom .2s @transition-function 0s);
}
.header-wrap {
.transition(box-shadow .2s 0s ease-out);
.box-shadow(0px 4px 0px 0px fade(@forth-site-dark-color, 0%));
}
.logo-for-panel img {
.transition(~"max-height .2s @{transition-function}, opacity .2s @{transition-function}");
}
.header-top-logo-panel {
.transition(~"height .2s @{transition-function}, opacity .2s @{transition-function}, padding-bottom .2s @{transition-function}");
}
}*/
&.small.with-top-panel:not(.header-style-7):not(.header-style-14) #header {
.transform(translateY(-(@top-menu-padding + @top-panel-height + @top-menu-margin)));
}
&.small.without-top-panel:not(.header-style-7):not(.header-style-14) #header {
.transform(translateY(-(@top-menu-padding + @top-menu-margin)));
}
&.small:not(.header-style-7):not(.header-style-14) {
//background-color: transparent;
//.transition(margin-top .2s ease .1s);
height: @header-logo-min-height;
#header {
.header-top-panel {
//.opacity(0);
//.transition(~"color 0s ease .5s, background 0s ease .5s");
}
.header-wrap {
//.transition(background 0s ease .5s);
> .row:last-child {
padding-bottom: 0;
background: transparent;
> .columns.header-main-panel {
height: @header-logo-min-height;
}
}
}
}
&.logo-position-right .header-col-left {
border-right-color: transparent;
//border-right-color: fade(@fixed-header-text-color, 20%);
}
&:not(.logo-position-right) .header-col-right {
border-left-color: transparent;
//border-left-color: fade(@fixed-header-text-color, 20%);
}
.top-inner-page {
.hide();
}
.header-top-logo-panel {
overflow: hidden;
height: 0px;
padding-bottom: 0px !important;
.opacity(0);
display: none !important;
}
#header .header-wrap > .row:last-child .header-main-panel .logo-for-panel {
//.hide();
visibility: hidden;
//.transition(visibility .3s ease);
}
&.header-style-6 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid .onclick-menu-wrap .dfd-click-menu-activation-button {
margin-top: -5px;
> a {
//border-color: fade(@fixed-header-text-color, 20%);
.icon-wrap:before,
.icon-wrap:after {
background: @fixed-header-text-color;
}
}
}
#header {
background: @fixed-header-background;
-webkit-transition: -webkit-transform .3s ease, background .3s ease;
transition: -webkit-transform .3s ease, transform .3s ease, background .3s ease;
//.transition(~"background .3s ease, margin-top .3s ease");
/*border-bottom: 1px solid fade(#909090, 30%);*/
.header-wrap > .row:last-child .header-main-panel .header-col-fluid {
margin-left: 120px;
.fixed-header-logo {
//.block();
visibility: visible;
.transition(visibility .3s ease);
}
}
nav.mega-menu {
@top-menu-height: @fixed-menu-height;
div.sub-nav {
margin-top: 0;
&.open {
top: @top-menu-height + @top-menu-padding - 6;
}
}
.mega-menu-item.nav-item.menu-item-depth-0.current-menu-ancestor {
&:before {
top: 15px;
bottom: 15px;
height: auto;
margin-top: 0;
}
}
.main-menu-link {
height: @header-logo-min-height;
line-height: @header-logo-min-height;
i {
display: none;
}
}
}
.nav-menu .mega-menu-item.menu-item-depth-0.current-menu-item,
.nav-menu .mega-menu-item.menu-item-depth-0.current-menu-ancestor {
&:before {
background: transparent;
border-color: fade(@fixed-header-text-color, 10%);
.transition(border-color .3s ease);
}
}
.nav-menu .mega-menu-item:before,
.nav-menu .mega-menu-item .item-title:after {
background: fade(@fixed-header-text-color, 20%);
.transition(background .3s ease);
}
.header-button-section,
.pop-up-soc-icons,
.form-search-container .form-search .searchsubmit-icon,
.form-search-wrap,
.lang-sel,
.total_cart_header,
.side-area-controller-wrap {
height: @header-logo-min-height;
line-height: @header-logo-min-height;
}
.header-wrap > .row:last-child .header-main-panel .side-area-controller-wrap {
a {
span {
&:before,
&:after {
background: @fixed-header-text-color;
}
}
}
}
.form-search-wrap a,
.lang-sel > a,
.lang-sel > .active,
.total_cart_header.simple .woo-cart-contents .woo-cart-details,
.total_cart_header .woo-cart-contents .woo-cart-items {
color: @fixed-header-text-color;
//.transition(color .3s ease);
}
.total_cart_header .woo-cart-contents .woo-cart-items i {
//.transition(~"color .3s ease, opacity .3s ease");
}
.login-header {
padding-left: 10px;
}
.total_cart_header {
.woo-cart-contents:before {
top: 0;
bottom: 0;
}
.shopping-cart-box {
top: @header-logo-min-height - 2;
margin-top: 0;
}
}
.nav-menu .mega-menu-item .item-title {
color: @fixed-header-text-color;
.transition(color .3s ease);
&:before,
&:after {
.opacity(0);
}
&.open {
box-shadow: none;
}
}
.icon-mobile-menu:before {
background-color: @fixed-header-text-color;
.box-shadow(~"0 4px 0 @{fixed-header-text-color}, 0 8px 0 @{fixed-header-text-color}");
.transition(~"background .3s ease, box-shadow .3s ease");
&.active {
background-color: @menu_dropdowns-color;
.box-shadow(~"0 4px 0 @{menu_dropdowns-color}, 0 8px 0 @{menu_dropdowns-color}");
}
}
}
&.dfd-new-headers {
&.dfd-highlight-has-submenu {
@shadow: @menu_dropdowns-color;
#header .header-wrap nav.mega-menu ul.nav-menu .mega-menu-item.menu-item-depth-0.has-submenu .item-title {
&:after {
.opacity(1);
background: @shadow;
.box-shadow(~"4px 0 0 0 @{shadow}, 8px 0 0 0 @{shadow}");
}
}
}
}
}
&.small {
&.header-style-7,
&.header-style-14 {
&:not(.opened) {
.dfd-top-row {
padding: 10px 0;
background: @fixed-header-background;
.columns {
height: @header-logo-min-height - 20;
.logo-for-panel {
> div.inline-block {
.rel();
&:before {
content: "";
.block();
.abs();
left: -30px;
right: -30px;
top: -10px;
bottom: -10px;
background: @fixed-header-logo-background-color;
z-index: -1;
}
img {
visibility: hidden;
}
}
}
.fixed-header-logo {
visibility: visible;
}
.dfd-menu-button {
.icon-wrap {
&:before,
&:after {
background: @fixed-header-text-color;
}
}
}
}
}
}
}
&.header-style-3,
&.header-style-4 {
&.dfd-header-buttons-disabled {
#header {
.header-wrap > .row:last-child .header-main-panel {
.header-col-fluid {
margin-left: 0;
}
}
}
}
}
}
/*}*/
&:not(.small) {
//.rel();
#header {
.transition-transform(.3s ease);
//.rel();
//.transition(~"color 0s ease .5s, background 0s ease .5s");
&.logo-position-top {
.header-main-panel .logo-for-panel {
a {
display: none !important;
img {
height: 82% !important;
.opacity(0);
}
}
}
}
}
&.logo-position-middle {
border-bottom-width: 0;
border-top-width: 0;
.logo-wrap.header-top-logo-panel {
position: fixed;
top: 50%;
left: 50%;
.inline-block();
width: @header-logo-width;
height: @header-logo-height;
margin-left: -(@header-logo-width / 2);
margin-top: -(@header-logo-height / 2);
background: transparent !important;
.row {
width: auto;
min-width: 0;
padding: 0;
> .columns {
padding: 0;
}
}
}
#header {
.header-wrap > .row:last-child .header-main-panel .header-col-fluid {
padding-left: 0;
}
}
}
}
&.logo-position-top-left .header-top-logo-panel,
&.logo-position-bottom-left .header-top-logo-panel {
text-align: left;
}
&.logo-position-top-center .header-top-logo-panel,
&.logo-position-bottom-center .header-top-logo-panel {
text-align: center;
}
&.logo-position-top-right .header-top-logo-panel,
&.logo-position-bottom-right .header-top-logo-panel {
text-align: right;
}
&.logo-position-top-left,
&.logo-position-top-center,
&.logo-position-top-right {
.header-top-logo-panel {
border-bottom-width: 0;
border-bottom: 1px dotted transparent;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid {
padding: 0;
margin-left: 0;
}
}
&.logo-position-bottom-left,
&.logo-position-bottom-center,
&.logo-position-bottom-right {
.header-top-logo-panel {
border-bottom-width: 0;
border-top: 1px dotted transparent;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid {
padding: 0;
margin-left: 0;
}
}
#header {
.rel();
left: 0;
overflow: visible;
width: 100%;
.transform(translateY(0));
z-index: 2;
//.transition(margin-top .3s ease);
.logo-for-panel {
visibility: visible;
.inline-block {
height: inherit;
}
}
.header-top-logo-panel {
display: block;
width: 100%;
height: @header-logo-height + 40;
padding-bottom: 20px;
padding-top: 20px;
z-index: 1;
* {
height: 100%;
}
.logo-for-panel {
.inline-block {
.rel();
}
img {
.vertical-align();
vertical-align: middle;
}
}
}
.header-wrap {
.rel();
z-index: 999;
width: 100%;
> .row:last-child {
margin-top: @top-menu-margin;
padding-top: @top-menu-padding;
padding-bottom: @top-menu-padding;
> .columns.header-main-panel {
height: @menu-inner-height;
}
.header-main-panel {
.rel();
.header-col-left,
.header-col-right,
.header-col-fluid {
height: inherit;
}
.header-col-left {
float: left;
.rel();
.mobile-logo {
height: @header-logo-height;
.hide();
img {
max-height: 100%;
}
}
}
.header-col-right {
float: right;
.header-icons-wrapper > * {
float: right;
margin-left: 15px;
&.form-search-wrap {
margin-left: 10px;
}
&.side-area-controller-wrap {
margin-left: 20px;
}
}
}
.header-col-fluid {
padding: 0 25px;
text-align: left;
.fixed-header-logo {
//.hide();
visibility: hidden;
.abs();
top: 0;
left: 10px;
width: 120px;
height: @header-logo-min-height * .65;
line-height: @header-logo-min-height * .65;
margin: @header-logo-min-height * .175 0;
&:before {
content: "";
.block();
.abs();
left: -30px;
right: -30px;
top: -@header-logo-min-height * .175;
bottom: -@header-logo-min-height * .175;
background: @fixed-header-logo-background-color;
}
img {
.vertical-align();
max-width: 100%;
max-height: 100%;
}
}
}
/* -- Header Logo -- *///TODO: Left or right from menu logo will be here
.logo-for-panel {
height: inherit;
a {
.block();
height: inherit;
text-align: left;
}
img {
.vertical-align();
max-width: 100%;
vertical-align: top;
}
}
.side-area-controller-wrap {
a {
border: none;
//.box-shadow(0 2px 3px 1px transparent);
//.transform(perspective(0));
//.transition(all .3s ease-in-out);
&:hover {
//.box-shadow(0 2px 6px 1px fade(@forth-site-dark-color, 20%));
//.transform(perspective(400px));
//.transition(~"background 0s ease .5s, border-color 0s ease .5s");
.icon-wrap:before,
.icon-wrap:after {
//background: @main-site-dark-color !important;
//.transition(background 0s ease .5s);
}
}
}
}
}
}
}
&.logo-position-top-right {
.logo-for-panel {
right: 0;
}
}
.header-additional-menu {
.block();
.clearfix();
> ul {
float: right;
list-style: none;
margin-bottom: 0;
.clearfix();
li {
.rel();
.subtitle();
float: left;
height: @header-logo-height;
line-height: @header-logo-height;
padding: 0 15px;
&:before {
content: "";
.block();
width: 1px;
height: 20px;
.abs();
right: 0;
top: 50%;
margin-top: -10px;
background: @border-color;
}
&:first-child {
padding-left: 0;
&:before {
.hide();
}
}
&:last-child {
padding-right: 0;
&:before {
.hide();
}
}
a {
color: inherit;
}
&:hover {
color: @title-color;
}
}
}
}
}
}
.logo-position-right {
.dl-menuwrapper {
margin-left: 0;
margin-right: 20px;
}
}
/*
@media only screen and (min-width: @screen-large){
.header-col-settings(@header-logo-width, 280px);
}
@media only screen and (min-width: @header-responsive-breakpoint) {
.header-col-settings(@header-logo-width, 280px);
#header-container.small,
#header-container:not(.small) {
&.dfd-header-buttons-disabled,
&.dfd-header-buttons-disabled.logo-position-left {
.header-col-settings(@header-logo-width, 0);
#header .header-wrap > .row:last-child .header-main-panel {
.header-col-right {
border-left: none;
> * {
.hide();
}
}
.header-col-fluid {
padding-right: 0;
nav.mega-menu {
&:not(#top_left_mega_menu) {
padding-right: 0 !important;;
ul.nav-menu {
padding-right: 0;
}
}
}
}
}
}
}
#header-container.logo-position-right {
&.dfd-header-buttons-disabled {
.header-col-settings(0, @header-logo-width);
#header .header-wrap > .row:last-child .header-main-panel {
.header-col-right > * {
.block();
}
.header-col-left {
border-right: none;
> * {
.hide();
}
}
}
}
#header .header-wrap > .row:last-child .header-main-panel {
.header-col-left {
.header-icons-wrapper > * {
float: left;
margin-right: 15px;
&.form-search-wrap {
margin-right: 10px;
}
&.side-area-controller-wrap {
margin-right: 20px;
}
}
.side-area-controller-wrap {
margin-left: 0;
margin-right: 15px;
}
}
.header-col-right {
.rel();
z-index: 9999;
.header-icons-wrapper > * {
float: none;
clear: both;
}
}
}
&:not(.small) {
&.dfd-header-buttons-disabled {
.header-col-settings(0, @header-logo-width);
#header .header-wrap > .row:last-child .header-main-panel {
.header-col-left > * {
.hide();
}
.header-col-fluid {
padding-left: 0;
nav.mega-menu ul.nav-menu {
padding-left: 0;
}
}
}
}
.header-col-settings(280px, @header-logo-width);
#header .header-wrap > .row:last-child .header-main-panel {
.logo-for-panel {
.rel();
//height: @top-menu-height * .65;
//margin: @top-menu-height * .175 0;
.inline-block {
width: 100%;
height: 100%;
img {
//.abs();
}
}
}
}
}
&.small {
&.dfd-header-buttons-disabled {
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid {
margin-left: 0;
margin-right: @header-logo-width;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-left {
width: 0;
}
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid {
margin-left: 280px;
margin-right: @header-logo-width;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-left {
width: 280px;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-right {
width: @header-logo-width;
}
#header .header-wrap > .row:last-child .header-main-panel .logo-for-panel img {
//.hide();
visibility: hidden;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-fluid .fixed-header-logo {
left: auto;
right: 0;
z-index: 9999;
}
}
}
#header-container.logo-position-left {
&:not(.small) {
.header-col-settings(@header-logo-width, 280px);
#header .header-wrap > .row:last-child .header-main-panel {
.logo-for-panel {
.rel();
//height: @top-menu-height * .65;
//margin: @top-menu-height * .175 0;
.inline-block {
width: 100%;
height: 100%;
img {
.abs();
}
}
}
}
}
&.small {
#header .header-wrap > .row:last-child .header-main-panel .logo-for-panel {
//.hide();
visibility: hidden;
}
}
}
#header-container {
&.dfd-new-headers {
&.header-style-1,
&.header-style-2 {
&.logo-position-right {
.header-col-left {
border-right-width: 0px;
border-right-style: solid;
}
}
&:not(.logo-position-right) {
.header-col-right {
border-left-width: 0px;
border-left-style: solid;
}
}
}
&.small {
.lang-sel > a:before {
border-color: fade(@fixed-header-text-color, 10%);
}
#header .nav-menu .mega-menu-item.menu-item-depth-0 {
.item-title {
&:hover,
&.hover,
&.open {
color: @menu_dropdowns-color;
.transition(none);
&:before {
bottom: 0;
.opacity(1);
}
}
}
}
}
}
}
}
*/
/*
.disable-hover nav.mega-menu {
overflow: hidden;
}*/
.disable-hover, .disable-hover * {
pointer-events: none !important;
#header-container.small #header .side-area-controller-wrap a {
.transition(border-color 0s ease .5s);
.icon-wrap:before,
.icon-wrap:after {
.transition(background 0s ease .5s);
}
}
}
.dfd-disable-transition, .dfd-disable-transition * {
.transition(none !important);
}
/* -----------------------------------------
Boxed layout
----------------------------------------- */
/*
@media only screen and (min-width : @screen-x-large) {
.boxed_layout {
#header-container {
left: auto;
max-width: 1280px;
width: 1280px;
&.header-style-1,
&.header-style-2,
&.header-style-3,
&.header-style-4,
&.header-style-6,
&.header-style-7 {
#header > * {
max-width: 1280px;
width: 1280px;
margin: 0 auto;
padding: 0 10px;
}
#header .header-wrap > .row:last-child {
width: 100%;
}
}
}
.header-layout-fullwidth > #header .header-top-panel .row,
.header-layout-fullwidth > #header > .logo-wrap > .row, .header-layout-fullwidth > #header > .header-wrap > .row {
padding-left: 0;
padding-right: 0;
> .columns {
padding: 0;
}
}
}
}
*/
/* -----------------------------------------
Header Styles
----------------------------------------- */
// == Header Layout FullWidth
.header-layout-boxed {
.top-inner-page {
right: -20px;
}
}
.header-layout-fullwidth {
> #header .header-top-panel .row,
> .dfd-top-row.row,
> #header > .header-wrap > .row {
width: 100%;
}
/* logo position "right" */
&.logo-position-right {
.total_cart_header .shopping-cart-box {
right: auto;
left: -40px;
}
}
}
/*
@media only screen
and (min-width : @header-responsive-breakpoint) {
#header-container.header-layout-fullwidth.header-style-3 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid #top_left_mega_menu,
#header-container.header-layout-fullwidth.header-style-4 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid #top_left_mega_menu {
text-align: left;
}
#header-container.header-layout-fullwidth.header-style-3 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid #top_right_mega_menu,
#header-container.header-layout-fullwidth.header-style-4 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid #top_right_mega_menu {
text-align: right;
}
.header-layout-fullwidth + #stuning-header {
.row {
width: 100%;
padding: 0 20px;
}
}
}
@media only screen
and (min-width : @screen-x-large) {
.header-layout-fullwidth > .dfd-top-row .row,
.header-layout-fullwidth > #header .header-top-panel .row,
.header-layout-fullwidth > #header > .logo-wrap > .row,
.header-layout-fullwidth > #header > .header-wrap > .row {
width: 100%;
padding: 0 20px;
}
.header-layout-fullwidth + #stuning-header {
.row {
width: 100%;
padding: 0 20px;
}
}
}
@media only screen and (min-width : @header-responsive-breakpoint) {
body {
&.dfd-custom-padding-html {
#header-container.menu-position-bottom:not(.small) {
#header {
padding-top: 0;
bottom: @layout-white-space-size
}
}
}
}
#header-container.menu-position-bottom:not(.small) {
&.dfd-new-headers {
&.header-style-1,
&.header-style-2,
&.header-style-3,
&.header-style-4,
&.header-style-9,
&.header-style-10 {
nav.mega-menu {
ul.nav-menu {
.mega-menu-item {
&.menu-item-depth-0 {
&:after {
top: auto;
bottom: -@top-menu-padding;
}
.item-title {
&:before {
top: -@top-menu-padding;
bottom: -(@top-menu-padding - 14);
.rounded-top(0);
.rounded-bottom(2px);
}
}
}
}
}
}
#header {
.lang-sel ul {
top: auto;
bottom: 0;
}
}
}
}
}
#header-container.logo-position-right {
.total_cart_header .shopping-cart-box {
left: 0;
right: auto;
}
.mobile-logo {
display: none !important;
}
}
#header-container.menu-position-bottom {
&:not(.small) {
&.logo-position-bottom-left,
&.logo-position-bottom-center,
&.logo-position-bottom-right {
#header .header-top-logo-panel {
.rel();
top: auto;
}
}
#header {
position: fixed;
top: auto;
bottom: 0;
border-top: 1px solid transparent;
.transition(~"bottom .2s ease-in, top .2s ease-in");
.nav-menu {
.carousel-nav {
&.prev {
border-right-color: @forth-site-dark-color;
}
&.next {
border-left-color: @forth-site-dark-color;
}
}
.mega-menu-item .top-line {
top: auto;
bottom: -@top-menu-padding;
}
div.sub-nav {
top: auto;
bottom: 100%;
margin-bottom: 20px;
&.open {
top: auto;
bottom: 100%;
.transition(~"opacity 500ms linear 500ms, max-height 700ms ease, visibility 200ms linear 0s, top 200ms linear 0s");
}
&:after {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -5px;
border-left-width: 0;
border-top-width: 0;
border-right: 1px solid @border-color;
border-bottom: 1px solid @border-color;
}
.sub-sub-menu {
top: auto;
bottom: 0;
margin-bottom: -20px;
}
}
}
.total_cart_header {
.woo-cart-contents {
&:before {
top: -@top-menu-padding;
bottom: -@top-menu-padding / 2;
.rounded-top(0);
.rounded-bottom(2px);
}
}
.shopping-cart-box {
top: auto;
bottom: 100%;
margin-bottom: @top-menu-padding;
}
}
.lang-sel ul {
top: auto;
bottom: -14px;
}
}
.form-search-section {
bottom: 100%;
}
}
&.small {
#header {
top: auto;
bottom: auto;
}
}
}
}
@media only screen and (max-width : @screen-x-large - 1) {
.top-inner-page {
.hide();
}
.nav-menu .mega-menu-item .item-title {
padding: 0 15px;
}
}
@media only screen and (max-width : @header-responsive-breakpoint + 40) {
.nav-menu .mega-menu-item.menu-item-depth-0 {
&:before {
.hide();
}
}
}
*/
/*
Responsive
*/
/*
@media only screen and (max-width : @header-responsive-breakpoint - 1) {
body {
&.dfd-custom-padding-html {
#header-container {
top: 0;
}
&.admin-bar {
#header-container {
top: 0;
}
}
}
&.admin-bar {
#header-container {
top: 0;
}
}
}
.dfd-search-mobile-show {
display: block !important;
}
.dfd-header-responsive-hide {
.hide();
}
.header-top-panel {
border-color: fade(@mobile-header-color, 10%);
}
.header-top-panel .header-info-panel .top-info .dfd-top-info-delim:before {
background: fade(@mobile-header-color, 10%);
}
#header-container {
#header {
margin-top: 0;
}
&.small,
&.slide-up {
&.with-top-panel,
&.without-top-panel {
#header {
margin-top: 0;
}
}
}
}
#header-container:not(.small) {
top: 0;
&.header-style-4 #header .header-wrap > .row:last-child .header-main-panel .header-col-fluid .logo-for-panel {
.hide();
}
&.header-style-3 #header .header-wrap > .row:last-child .header-main-panel,
&.header-style-4 #header .header-wrap > .row:last-child .header-main-panel .header-col-left {
.block();
.mobile-logo {
.block();
}
}
.dfd-side-bar-logo {
.hide();
}
&.header-style-7 .dfd-top-row,
&.header-style-7 .header-soc-icons {
.hide();
}
#header .header-wrap > .row:last-child .header-main-panel .logo-for-panel {
.hide();
}
#header {
.rel();
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-left .mobile-logo,
#header .header-wrap > .row:last-child .header-main-panel .header-col-right .mobile-logo {
.block();
.logo-for-panel {
.block();
}
}
#header .header-wrap > .row:last-child {
padding-top: 0;
padding-bottom: 0;
.columns.header-main-panel {
height: auto;
.header-col-left {
height: @header-logo-height + 40;
line-height: @header-logo-height;
padding: 20px 0;
.mobile-logo {
max-height: 100%;
* {
max-height: 100% !important;
}
}
}
.header-col-right {
width: 215px;
height: @header-logo-height + 40;
line-height: @header-logo-height;
text-align: right;
padding: 20px 0;
.header-icons-wrapper {
.inline-block();
height: @header-logo-height;
> * {
float: left;
.vertical-align();
}
}
}
.header-col-fluid {
.hide();
}
}
.form-search-wrap,
.lang-sel {
&:before {
@s: 40px;
content: "";
.block();
width: @s;
height: @s;
.abs();
top: 50%;
left: 50%;
margin-top: -@s/2;
margin-left: -@s/2;
//border: 1px solid @border-color;
z-index: -1;
visibility: visible;
.transition(visibility 0s ease .4s);
}
}
.form-search-wrap {
padding: 0 20px;
a {
&:before {
font-size: 14px;
color: @mobile-header-background;
}
&:after {
content: "";
.block();
width: 42px;
height: 42px;
.abs();
top: 50%;
left: 50%;
margin-top: -21px;
margin-left: -21px;
background: @mobile-header-color;
z-index: -1;
.rounded(50%);
}
&:hover {
.opacity(.8);
}
}
}
.lang-sel {
font-size: @menu_titles-font-size + 1;
letter-spacing: 0;
&:hover {
&:before {
visibility: hidden;
.transition(visibility 0s ease);
}
}
}
.total_cart_header {
margin-right: 0;
.woo-cart-contents {
width: 45px;
margin-top: 5px;
}
}
}
&:not(.logo-position-right) {
.form-search-wrap {
margin-left: 20px;
}
.total_cart_header {
margin-left: 20px;
}
.lang-sel {
margin-left: 20px;
}
}
&.logo-position-right {
.form-search-wrap {
margin-right: 20px;
}
.total_cart_header {
margin-right: 20px;
}
.lang-sel {
margin-right: 20px;
}
#header .header-wrap {
> .row:last-child {
.columns.header-main-panel {
.header-col-right {
height: @header-logo-height + 40;
line-height: @header-logo-height;
padding: 20px 0;
.mobile-logo {
height: @header-logo-height;
//.vertical-align();
}
}
.header-col-left {
width: 215px;
height: @header-logo-height + 40;
line-height: @header-logo-height;
text-align: left;
padding: 20px 0;
.header-icons-wrapper {
.inline-block();
height: @header-logo-height;
> * {
float: right;
.vertical-align();
}
}
.dl-menuwrapper {
margin-right: 0;
}
}
}
}
}
}
&.dfd-new-headers {
&.logo-position-right {
}
#header .header-wrap > .row:last-child .form-search-wrap a {
&:before {
color: @mobile-header-color;
}
&:after {
.hide();
}
}
&:not(.small) #header .header-wrap > .row:last-child .total_cart_header {
margin-left: 0;
}
#header .header-wrap > .row:last-child .header-main-panel .header-col-right .header-icons-wrapper > *.side-area-controller-wrap {
.hide();
}
}
}
#header-container,
#header-container #header {
.rel();
}
.header-top-panel .row {
min-width: 0;
width: 100%;
}
body.dfd-custom-padding-html #header-container #header {
padding: 0;
}
#header-container #header .header-top-logo-panel {
display: none !important;
}
}
@media only screen
and (max-width : @header-responsive-breakpoint - 1) {
.header-style-news #header .header-wrap > .row .header-wrap-shadow {
left: 0;
right: 0;
}
}
*/