File: /var/www/html/wpprm_err/wp-content/themes/ronneby/assets/less.lib/header/style-7-14.less
/*
Created on : 21.03.2016, 13:31:19
Author : DFD
Styles for : Header style 7
*/
@media only screen and (min-width : @header-responsive-breakpoint) {
@shift: 10px;
#header-container.header-style-7,
#header-container.header-style-14 {
@buttons-height: 30px;
background: transparent;
&.fade-out {
#header {
.scale(1);
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
}
}
}
&.scale-slide-up {
#header {
.transform(scale(.95) translateY(180px));
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
.transform(scale(1) translateY(0));
}
}
}
&.scale-slide-down {
#header {
.transform(scale(.95) translateY(-180px));
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
.transform(scale(1) translateY(0));
}
}
}
&.scale-slide-left {
#header {
.transform(scale(.95) translateX(180px));
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
.transform(scale(1) translateX(0));
}
}
}
&.scale-slide-right {
#header {
.transform(scale(.95) translateX(-180px));
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
.transform(scale(1) translateX(0));
}
}
}
&.scale-rotate {
#header {
.transform(scale(.7) rotate(-5deg));
}
&.opened,
&.opened.animated--header.headroom--top {
#header {
.transform(scale(1) rotate(0));
}
}
}
&.opened,
&.opened.animated--header.headroom--top {
z-index: 1001;
.dfd-top-row {
z-index: inherit;
.columns {
.logo-for-panel {
visibility: hidden;
.opacity(0);
.transition(~"visibility 0s ease, opacity 0s ease");
}
.dfd-menu-button {
border-width: 0;
.icon-wrap {
&:before,
&:after {
background: transparent;
}
&.dfd-top-line {
margin-top: 0;
.transform(rotate(45deg) scaleX(.8) scaleY(1.5));
}
&.dfd-bottom-line {
margin-top: 0;
.transform(rotate(-45deg) scaleX(.8) scaleY(1.5));
}
}
&:hover {
.icon-wrap {
&.dfd-top-line {
margin-top: 0;
.transform(rotate(45deg) scaleX(.8) scaleY(1.5));
}
&.dfd-bottom-line {
margin-top: 0;
.transform(rotate(-45deg) scaleX(.8) scaleY(1.5));
}
}
}
}
}
}
#header {
.opacity(1);
visibility: visible;
.scale(1);
//.transition(~"-webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, transform .3s ease, opacity .5s ease, visibility .5s ease");
.header-wrap {
.row.decorated {
.header-main-panel {
.header-col-left {
.logo-for-panel,
.header-info-panel {
.opacity(1);
visibility: visible;
.transform(translateY(0));
}
}
.header-col-fluid {
nav.mega-menu {
ul.nav-menu {
> li {
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6),
&:nth-child(7),
&:nth-child(8) {
> a.item-title {
.opacity(1);
.transform(translateY(0));
-webkit-transition: opacity .3s ease 1.8s, color .3s ease 0s, transform .3s ease 1.8s, transform .3s ease 1.8s;
-moz-transition: opacity .3s ease 1.8s, color .3s ease 0s, -moz-transform .3s ease 1.8s;
-o-transition: opacity .3s ease 1.8s, color .3s ease 0s, -o-transform .3s ease 1.8s;
transition: opacity .3s ease 1.8s, color .3s ease 0s, transform .3s ease 1.8s, transform .3s ease 1.8s;
&:hover {
color: @third-site-light-color;
}
}
}
> a.item-title {
-webkit-transition: opacity .3s ease 1.9s, color .3s ease 0s, transform .3s ease 1.9s, transform .3s ease 1.9s;
-moz-transition: opacity .3s ease 1.9s, color .3s ease 0s, -moz-transform .3s ease 1.9s;
-o-transition: opacity .3s ease 1.9s, color .3s ease 0s, -o-transform .3s ease 1.9s;
transition: opacity .3s ease 1.9s, color .3s ease 0s, transform .3s ease 1.9s, transform .3s ease 1.9s;
}
&:nth-child(1) > a.item-title {
-webkit-transition: opacity .3s ease 1s, color .3s ease 0s, transform .3s ease 1s, transform .3s ease 1s;
-moz-transition: opacity .3s ease 1s, color .3s ease 0s, -moz-transform .3s ease 1s;
-o-transition: opacity .3s ease 1s, color .3s ease 0s, -o-transform .3s ease 1s;
transition: opacity .3s ease 1s, color .3s ease 0s, transform .3s ease 1s, transform .3s ease 1s;
//.transition(all .3s ease 1s);
}
&:nth-child(2) > a.item-title {
-webkit-transition: opacity .3s ease 1.1s, color .3s ease 0s, transform .3s ease 1.1s, transform .3s ease 1.1s;
-moz-transition: opacity .3s ease 1.1s, color .3s ease 0s, -moz-transform .3s ease 1.1s;
-o-transition: opacity .3s ease 1.1s, color .3s ease 0s, -o-transform .3s ease 1.1s;
transition: opacity .3s ease 1.1s, color .3s ease 0s, transform .3s ease 1.1s, transform .3s ease 1.1s;
//.transition(all .3s ease 1.1s);
}
&:nth-child(3) > a.item-title {
-webkit-transition: opacity .3s ease 1.2s, color .3s ease 0s, transform .3s ease 1.2s, transform .3s ease 1.2s;
-moz-transition: opacity .3s ease 1.2s, color .3s ease 0s, -moz-transform .3s ease 1.2s;
-o-transition: opacity .3s ease 1.2s, color .3s ease 0s, -o-transform .3s ease 1.2s;
transition: opacity .3s ease 1.2s, color .3s ease 0s, transform .3s ease 1.2s, transform .3s ease 1.2s;
//.transition(all .3s ease 1.2s);
}
&:nth-child(4) > a.item-title {
-webkit-transition: opacity .3s ease 1.3s, color .3s ease 0s, transform .3s ease 1.3s, transform .3s ease 1.3s;
-moz-transition: opacity .3s ease 1.3s, color .3s ease 0s, -moz-transform .3s ease 1.3s;
-o-transition: opacity .3s ease 1.3s, color .3s ease 0s, -o-transform .3s ease 1.3s;
transition: opacity .3s ease 1.3s, color .3s ease 0s, transform .3s ease 1.3s, transform .3s ease 1.3s;
//.transition(all .3s ease 1.3s);
}
&:nth-child(5) > a.item-title {
-webkit-transition: opacity .3s ease 1.4s, color .3s ease 0s, transform .3s ease 1.4s, transform .3s ease 1.4s;
-moz-transition: opacity .3s ease 1.4s, color .3s ease 0s, -moz-transform .3s ease 1.4s;
-o-transition: opacity .3s ease 1.4s, color .3s ease 0s, -o-transform .3s ease 1.4s;
transition: opacity .3s ease 1.4s, color .3s ease 0s, transform .3s ease 1.4s, transform .3s ease 1.4s;
//.transition(all .3s ease 1.4s);
}
&:nth-child(6) > a.item-title {
-webkit-transition: opacity .3s ease 1.5s, color .3s ease 0s, transform .3s ease 1.5s, transform .3s ease 1.5s;
-moz-transition: opacity .3s ease 1.5s, color .3s ease 0s, -moz-transform .3s ease 1.5s;
-o-transition: opacity .3s ease 1.5s, color .3s ease 0s, -o-transform .3s ease 1.5s;
transition: opacity .3s ease 1.5s, color .3s ease 0s, transform .3s ease 1.5s, transform .3s ease 1.5s;
//.transition(all .3s ease 1.5s);
}
&:nth-child(7) > a.item-title {
-webkit-transition: opacity .3s ease 1.6s, color .3s ease 0s, transform .3s ease 1.6s, transform .3s ease 1.6s;
-moz-transition: opacity .3s ease 1.6s, color .3s ease 0s, -moz-transform .3s ease 1.6s;
-o-transition: opacity .3s ease 1.6s, color .3s ease 0s, -o-transform .3s ease 1.6s;
transition: opacity .3s ease 1.6s, color .3s ease 0s, transform .3s ease 1.6s, transform .3s ease 1.6s;
//.transition(all .3s ease 1.7s);
}
&:nth-child(8) > a.item-title {
-webkit-transition: opacity .3s ease 1.7s, color .3s ease 0s, transform .3s ease 1.7s, transform .3s ease 1.7s;
-moz-transition: opacity .3s ease 1.7s, color .3s ease 0s, -moz-transform .3s ease 1.7s;
-o-transition: opacity .3s ease 1.7s, color .3s ease 0s, -o-transform .3s ease 1.7s;
transition: opacity .3s ease 1.7s, color .3s ease 0s, transform .3s ease 1.7s, transform .3s ease 1.7s;
//.transition(all .3s ease 1.9s);
}
}
}
}
}
.dfd-header-bottom {
.login-button-wrap,
.inline-block,
.copyright-soc-icons-wrap {
.opacity(1);
.transform(translateY(0));
}
}
}
}
}
/*
*/
}
}
.top-inner-page {
right: 0;
}
.dfd-top-row {
position: fixed;
padding-top: @top-menu-padding;
padding-bottom: @top-menu-padding;
background: transparent;
.transition(~"padding .3s ease, background .3s ease");
.columns {
.rel();
height: @header-logo-height;
text-align: left;
.transition(height .3s ease);
.logo-for-panel {
height: inherit;
visibility: visible;
.opacity(1);
.transition(~"visibility .5s ease, opacity .5s ease");
* {
height: inherit;
}
img {
.vertical-align();
max-height: 100%;
visibility: visible;
}
}
.fixed-header-logo {
max-height: 100%;
height: inherit;
.abs();
top: 50%;
left: 10px;
.transform(translateY(-50%));
visibility: hidden;
img {
max-height: 100%;
}
}
.dfd-menu-button {
@w: 50px;
@h: 2px;
.block();
width: @w;
height: @w;
.abs();
top: 50%;
right: 20px;
margin-top: -@w/2;
overflow: hidden;
z-index: 3;
//.box-shadow(0 2px 3px 1px transparent);
//.transform(translate3d(0,0,0));
.transition(all .3s ease-in-out);
.icon-wrap {
.block();
width: @w/2;
height: @h;
.abs();
left: 8px;
top: 50%;
.transition(backgrouns .3s ease);
&:before,
&:after {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
}
&:before {
left: 0;
}
&:after {
left: -200px;
}
&.dfd-top-line {
margin-top: -4px;
.transition(~"-webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, transform .3s ease, margin-top .3s ease");
&:before {
.transition(left .3s ease-in-out);
}
&:after {
.transition(left .3s ease-in-out);
}
}
&.dfd-middle-line {
&:before {
.transition(left .3s ease-in-out .2s);
}
&:after {
.transition(left .3s ease-in-out .2s);
}
}
&.dfd-bottom-line {
margin-top: 4px;
.transition(~"-webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, transform .3s ease, margin-top .3s ease");
&:before {
.transition(left .3s ease-in-out .4s);
}
&:after {
.transition(left .3s ease-in-out .4s);
}
}
}
&:hover {
//.box-shadow(0 2px 6px 1px fade(@header-seventh-text-color, 10%));
//.transform(perspective(400px));
.icon-wrap {
&:before {
left: 200%;
}
&:after {
left: 0;
}
}
}
}
}
}
&.text-left,
&.text-center {
.shopping-cart-box {
right: auto;
}
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 70px;
.opacity(0);
visibility: hidden;
.scale(.7);
.transition(~"-webkit-transform .8s ease, -moz-transform .8s ease, -o-transform .8s ease, transform .8s ease, opacity .5s ease, visibility .5s ease, margin .8s ease");
//.transition(~"opacity .5s ease 1s, visibility .5s ease 1s");
.nav-menu .mega-menu-item .item-title {
&:before {
.hide();
}
}
.header-wrap {
width: 100%;
height: 100%;
//padding: 50px;
.box-shadow(none);
.row.decorated {
height: 100%;
.header-main-panel {
height: 100% !important;
.header-col-left {
width: 100%;
height: auto;
.abs();
//top: -50px;
top: 50px;
left: 0;
.logo-for-panel {
text-align: inherit;
display: block !important;
.opacity(0);
.transform(translateY(-@shift));
.transition(all .3s ease .4s);
.inline-block {
width: auto;
height: auto;
img {
.rel();
top: 0;
.transform(translateY(0));
}
}
}
.header-info-panel {
margin-top: 55px;
.opacity(0);
.transform(translateY(-@shift));
.transition(all .3s ease .6s);
* {
color: inherit;
}
.top-info {
font-size: @link-font-size - 1;
font-family: @link-font-family;
font-weight: @link-font-weight;
font-style: @link-font-style;
text-transform: @link-text-transform;
letter-spacing: @link-letter-spacing;
i {
.rel();
top: 1px;
margin-right: 10px;
}
.dfd-top-info-delim {
.block();
margin-bottom: 10px;
}
}
}
}
.header-col-right {
.hide();
}
.header-col-fluid {
width: 100%;
height: auto;
.abs();
//top: -25%;
top: 50%;
left: 0;
margin: 0;
padding: 0;
text-align: inherit;
z-index: 2;
.transform(translateY(-50%));
nav.mega-menu {
ul.nav-menu {
> li {
> a.item-title {
font-size: @menu_titles-font-size + 19;
text-transform: none;
text-align: inherit;
height: 1.2em;
line-height: 1.2em;
&:before,
&:after {
.hide();
}
i {
font-size: inherit;
}
}
&:nth-child(1) > a.item-title {
border-top-width: 0;
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1s);
}
&:nth-child(2) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.1s);
}
&:nth-child(3) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.2s);
}
&:nth-child(4) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.3s);
}
&:nth-child(5) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.4s);
}
&:nth-child(6) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.5s);
}
&:nth-child(7) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 2.1s);
}
&:nth-child(8) > a.item-title {
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 2.3s);
}
}
}
}
}
.dfd-header-bottom {
@buttons-height: 30px;
width: 100%;
height: auto;
.abs();
//bottom: 110%;
bottom: 0;
left: 0;
text-align: inherit;
overflow: hidden;
z-index: 1;
.login-button-wrap {
height: 42px;
margin-bottom: 10px;
color: inherit;
.opacity(0);
.transform(translateY(-@shift));
.transition(all .3s ease .6s);
.login-header {
.block();
float: none;
padding-bottom: 25px;
z-index: 1000;
color: inherit;
&:before {
.hide();
}
.links {
height: auto;
line-height: 1;
color: inherit;
a {
padding: 0;
color: inherit;
}
}
}
}
.inline-block {
height: @buttons-height + 30;
line-height: @buttons-height;
margin: 0 -15px;
padding: 15px 0;
color: inherit;
.opacity(0);
.transform(translateY(-@shift));
.transition(all .3s ease .8s);
> * {
float: left;
height: @buttons-height;
line-height: inherit;
padding: 0 15px;
color: inherit;
}
.form-search-wrap {
text-align: center;
margin-right: 10px;
color: inherit;
a {
color: inherit;
}
}
.total_cart_header {
.woo-cart-contents {
color: inherit;
* {
color: inherit;
}
&:before {
.hide();
}
}
.shopping-cart-box {
top: auto;
bottom: 50px;
.hide();
}
}
.lang-sel {
color: inherit;
> a,
> .active {
color: inherit;
}
}
}
.copyright-soc-icons-wrap {
height: 55px;
line-height: 45px;
padding-top: 10px;
z-index: 1000;
.opacity(0);
.transform(translateY(-@shift));
.transition(all .3s ease .9s);
> * {
.transform(translate3d(0,0,0));
}
.dfd-copyright {
float: left;
font-size: @default-text-font-size - 1;
.rel();
text-align: left;
height: inherit;
line-height: inherit;
overflow: hidden;
padding: 0;
* {
font-size: inherit;
line-height: inherit;
color: inherit;
}
a {
color: inherit;
}
}
.widget.soc-icons {
float: right;
text-align: right;
overflow: hidden;
height: inherit;
line-height: inherit;
margin: 0 0 10px;
padding: 0;
z-index: 1000;
.transform(translateZ(0));
a {
text-align: center;
}
&.dfd-soc-icons-hover-style-11 {
a {
background: transparent;
}
}
&.dfd-soc-icons-hover-style-10,
&.dfd-soc-icons-hover-style-11,
&.dfd-soc-icons-hover-style-18,
&.dfd-soc-icons-hover-style-19,
&.dfd-soc-icons-hover-style-20,
&.dfd-soc-icons-hover-style-26 {
a:before {
background: transparent;
}
}
}
}
}
}
}
}
}
&.small {
margin-top: 0;
}
&.dfd-new-headers {
.lang-sel {
width: 90px;
> a:before,
> .active:before {
border-color: fade(@header-seventh-active-text-color, 10%);
}
ul {
left: 10px;
li {
height: @buttons-height;
}
}
}
}
}
#header-container.header-style-7 {
&.text-right {
.nav-menu div.sub-nav a {
text-align: right !important;
padding: 5px 20px 5px 60px;
&:before {
right: auto;
left: 20px;
border-left-width: 0;
border-right: 3px solid @menu-dropdown-items-color;
}
}
.nav-menu div.sub-nav.open {
left: auto;
right: 100%;
margin-right: 20px;
margin-left: 0 !important;
.sub-sub-menu {
left: auto;
right: 100%;
margin-left: 0;
}
}
}
&.text-left,
&.text-center {
.nav-menu div.sub-nav.open {
left: 100%;
margin-left: 20px !important;
}
}
&.opened,
&.opened.animated--header.headroom--top {
.dfd-top-row {
.columns {
.dfd-menu-button {
.icon-wrap {
&.dfd-top-line {
background: @header-seventh-active-text-color;
}
&.dfd-bottom-line {
background: @header-seventh-active-text-color;
}
}
}
}
}
}
.dfd-top-row {
.columns {
.dfd-menu-button {
.icon-wrap {
&:before,
&:after {
background: @header-seventh-text-color;
}
}
}
}
}
#header {
background: @header-seventh-background;
.header-wrap {
.row.decorated {
.header-main-panel {
.header-col-left {
.header-info-panel {
color: @header-seventh-active-text-color;
}
}
.header-col-fluid {
nav.mega-menu {
.inline-block();
width: auto;
min-width: 0;
height: 100%;
text-align: inherit;
ul.nav-menu {
.block();
width: 100%;
height: 100%;
text-align: inherit;
padding: 0;
div.sub-nav.open {
.sub-sub-menu {
top: 50%;
.transform(translateY(-50%));
margin-left: 0;
}
}
.mega-menu-item.menu-item-depth-0.current-menu-ancestor:before {
.hide();
}
li {
position: static;
&:hover a {
background: transparent;
}
}
> li {
width: 100%;
float: none;
padding: 14px 0;
.item-title {
padding: 0;
color: @header-seventh-active-text-color;
border-bottom-width: 0;
.opacity(0);
.transform(translateY(-@shift));
//.transition(all .3s ease 1.6s);
&:after {
background: fade(@header-seventh-active-text-color, 50%);
}
i {
font-size: 18px;
line-height: inherit;
}
}
&:hover {
background: transparent;
}
ul {
background: transparent;
&:before {
background: transparent;
}
}
div.sub-nav.open {
min-width: 0;
}
}
}
}
}
.dfd-header-bottom {
color: @header-seventh-active-text-color;
.copyright-soc-icons-wrap {
.dfd-copyright {
color: fade(@header-seventh-active-text-color, 30%);
}
.widget.soc-icons {
a {
&:before {
color: @header-seventh-active-text-color;
}
&:after {
background: @header-seventh-active-text-color;
}
}
&.dfd-soc-icons-hover-style-18 {
a {
&:after {
background: fade(@header-seventh-background, 20%) !important;
}
}
}
&.dfd-soc-icons-hover-style-24,
&.dfd-soc-icons-hover-style-25 {
a {
border-color: fade(@header-seventh-background, 20%);
&:after {
background: fade(@header-seventh-background, 20%);
}
}
}
}
}
}
}
}
}
}
&.dfd-new-headers {
.lang-sel {
> a:before,
> .active:before {
border-color: fade(@header-seventh-active-text-color, 10%);
}
}
}
}
#header-container.header-style-14 {
&.opened,
&.opened.animated--header.headroom--top {
.dfd-top-row {
.columns {
.dfd-menu-button {
.icon-wrap {
&.dfd-top-line {
background: @header-fourteenth-active-text-color;
}
&.dfd-bottom-line {
background: @header-fourteenth-active-text-color;
}
}
}
}
}
}
.dfd-top-row {
.columns {
.dfd-menu-button {
.icon-wrap {
&:before,
&:after {
background: @header-fourteenth-text-color;
}
}
}
}
}
#header {
background: @header-fourteenth-background;
.header-wrap {
.row.decorated {
.header-main-panel {
.header-col-left {
.header-info-panel {
color: @header-fourteenth-active-text-color;
}
}
.header-col-fluid {
nav.mega-menu {
text-align: inherit;
ul.nav-menu {
> li {
.item-title {
color: @header-fourteenth-active-text-color;
&:after {
background: fade(@header-fourteenth-active-text-color, 50%);
}
}
}
}
}
}
.dfd-header-bottom {
color: @header-fourteenth-active-text-color;
.copyright-soc-icons-wrap {
.dfd-copyright {
color: fade(@header-fourteenth-active-text-color, 30%);
}
.widget.soc-icons {
a {
&:before {
color: @header-fourteenth-active-text-color;
}
&:after {
background: @header-fourteenth-active-text-color;
}
}
&.dfd-soc-icons-hover-style-11 {
a {
background: transparent;
}
}
&.dfd-soc-icons-hover-style-18 {
a {
&:after {
background: fade(@header-fourteenth-background, 20%) !important;
}
}
}
&.dfd-soc-icons-hover-style-24,
&.dfd-soc-icons-hover-style-25 {
a {
border-color: fade(@header-fourteenth-background, 20%);
&:after {
background: fade(@header-fourteenth-background, 20%);
}
}
}
}
}
}
}
}
}
}
&.dfd-new-headers {
.lang-sel {
> a:before,
> .active:before {
border-color: fade(@header-fourteenth-active-text-color, 10%);
}
}
}
}
body.dfd-custom-padding-html {
#header-container.header-style-7,
#header-container.header-style-14 {
left: @layout-white-space-size;
right: @layout-white-space-size;
}
}
}