| Current File : /pages/54/47/d0016649/home/htdocs/cd24/wp-content/themes/digital-download/sass/layouts/_header.scss |
.site-header{
padding: 22px 0;
border-bottom: 4px solid #f4f4f4;
// margin: 0 0 60px;
&:after{
content: '';
display: block;
clear: both;
} /*after*/
.site-branding{
float: left;
.custom-logo{
display: inline-block;
vertical-align: middle;
margin-right: 15px;
img{vertical-align: top;} /*img*/
} /*custom-logo*/
.text-logo{
display: inline-block;
vertical-align: middle;
} /*text-logo*/
.site-title{
margin: 0;
font-size: 2em;
font-weight: 700;
a{
color: $secondary_color;
@include transition(ease, 0.2s);
&:hover,
&:focus{
text-decoration: none;
color: $primary_color;
} /*hover*/
} /*a*/
} /*site-title*/
.site-description{
font-size: 0.899em;
margin: 0;
} //site-description
} /*site-branding*/
.right{
float: right;
display: flex;
flex-wrap: wrap;
margin-top: 6px;
.tools{
float: right;
border-left: 1px solid #d3d4d5;
padding-left: 25px;
margin-left: 25px;
display: flex;
flex-wrap: wrap;
.btn-login{
float: right;
font-size: 0.722em;
text-transform: uppercase;
padding: 5px 27px;
margin-left: 25px;
} /*btn-login*/
.search-btn {
float: right;
color: #21272c;
cursor: pointer;
position: relative;
border: 0;
border-radius: 0;
background: none;
padding: 0;
margin-top: 10px;
&:hover, &:focus {
background: transparent;
} //search button hover and focus
} //search button
.btn-form-close{
position: absolute;
top: 9px;
right: 15px;
color: #86919d;
background: none;
border: 0;
border-radius: 0;
padding: 0;
opacity: 0;
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:hover {
color: #86919d;
} //form close button hover
&:focus {
color: #86919d;
outline: 1px dotted #86919d;
opacity: 1;
} //form close button hover
.close.close-main-nav-toggle {
width: 16px;
height: 16px;
position: absolute;
top: 25px;
right: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background: transparent;
padding: 0;
transform: rotate(45deg);
cursor: pointer;
}
} //form-button-close
.cart{
color: $secondary_color;
float: right;
margin-top: 5px;
margin-left: 20px;
position: relative;
.count{
font-size: 0.666em;
font-weight: 700;
color: $white_color;
background: #c2c8ce;
@include border-radius(50%);
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
vertical-align: top;
} /*count*/
@media only screen and (min-width: 1025px){
&:hover .product-holder,
&:focus .product-holder,
&:focus-within .product-holder{display: block;}
}
.product-holder{
font-weight: 400;
position: absolute;
top: 100%;
right: -15px;
width: 280px;
display: none;
color: #fff;
padding-top: 10px;
z-index: 1;
&:before{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(33, 39, 44, 0.95);
position: absolute;
content: '';
top: 2px;
right: 37px;
} /*before*/
.edd-cart-number-of-items{
line-height: 1.857em;
font-size: 0.7em;
color: #fff;
border-bottom: 1px solid #393e42;
background: rgba(33, 39, 44, 0.95);
padding: 10px 17px;
margin: 0;
} //edd-cart-number-of-items
ul{
margin: 0;
padding: 0;
list-style: none;
line-height: 1.857em;
font-size: 0.7em;
font-weight: 700;
li{
border-bottom: 1px solid #393e42;
background: rgba(33, 39, 44, 0.95);
padding: 10px 17px;
position: relative;
.edd-cart-item-title{
display: block;
width: 90%;
}
.edd-cart-item-price{
display: inline-block;
font-weight: 400;
margin-left: -3px;
width: 90%;
} /*price*/
.edd-remove-from-cart{
position: absolute;
top: 17px;
right: 20px;
fill: #a2adb8;
cursor: pointer;
width: 12px;
height: 15px;
font-size: 0;
&:after{
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a2adb8' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E") center center no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
} //after
} /*svg close button*/
.edd-cart-item-separator{
display: none;
}
&.edd_checkout{
padding: 0;
background: none;
border-bottom: 0;
a{
display: block;
font-size: 1.08em;
font-weight: 500;
@include border-radius(0 0 5px 5px);
text-align: center;
padding: 8px 25px;
background: $primary_color;
border: 1px solid $primary_color;
color: #fff;
@include transition(ease, 0.2s);
&:hover,
&:focus{
background: #fff;
color: $primary_color;
text-decoration: none;
} //hover
} //a
} //edd_checkout
} /*li*/
} /*product-list*/
.btn-checkout{
display: block;
font-size: 1.08em;
font-weight: 500;
@include border-radius(0 0 5px 5px);
text-align: center;
padding: 5px 25px;
background: $primary_color;
&:hover,
&:focus{
background: $white_color;
} /*hover*/
} /*btn-checkout*/
} /*product-holder*/
svg{
cursor: pointer;
} /*svg*/
} /*cart*/
.form-section{
float: right;
color: $secondary_color;
cursor: pointer;
position: relative;
border: 0;
border-radius: 0;
background: none;
padding: 0;
&:focus{
outline: thin dotted;
}
.form-holder{
position: absolute;
top: -2px;
right: -10px;
width: 530px;
height: 50px;
z-index: 10;
display: none;
.search-form{
width: 100%;
background: $white_color;
@include border-radius(4px);
padding: 6px 35px 11px 15px;
label{
width: 100%;
display: inline-block;
} /*label*/
input[type="search"]{
display: inline-block;
width: 90%;
padding: 0;
margin: 0;
border: 0;
@include border-radius(0);
font-size: 0.8em;
color: #86919d;
} /*input*/
input[type="submit"]{display: none;}
} /*search-form*/
.btn-close-form{
position: absolute;
top: 9px;
right: 15px;
color: #86919d;
background: none;
border: 0;
border-radius: 0;
padding: 0;
svg{width: 12px;}
}
} /*form-holder*/
} /*form-section*/
} /*tools*/
} /*right*/
} /*site-header*/
.overlay{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
display: none;
z-index: 5;
}
/* header with banner*/
.logged-in.hasbanner .header-holder{
top: 32px;
}
.hasbanner{
.site-header {
.right {
.tools {
.search-btn {
color: #fff;
}
}
}
} //end of site-header
.header-holder{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.site-header{
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
.site-branding{
.site-title{
a{
color: $white_color;
} /*a*/
} /*site-title*/
.site-description{
color: #fff;
} //site-description
} /*site-branding*/
.right{
.tools{
border-left: 1px solid rgba(255, 255, 255, 0.2);
.cart{
color: $white_color;
.count{
background: #676a6e;
} /**/
} /*cart*/
.form-section{color: $white_color;} /*form-section*/
} /*tools*/
} /*right*/
} /*site-header*/
.main-navigation > div > ul > li > a{
color: rgba(255, 255, 255, 0.8);
&:hover,
&:focus{
color: $white_color;
}
}
.main-navigation > div > ul > .current-menu-item > a,
.main-navigation > div > ul > .current-menu-ancestor > a,
.main-navigation > div > ul > .current_page_item > a,
.main-navigation > div > ul > .current_page_ancestor > a{
color: $white_color;
}
} /*hasbaner*/
@media only screen and (max-width: 1024px){
.site-header{
.site-branding{
.site-title{font-size: 1.667em;} //site-title
} //site-branding
.right{
.tools{
border-left: 0;
border-right: 1px solid #d3d4d5;
padding-left: 0;
padding-right: 25px;
margin-left: 0;
margin-right: 25px;
.form-section{
.form-holder{
width: 280px;
} //form-holder
} //form-section
} //tools
} //right
} //site-header
.hasbanner{
.site-header{
.right{
.tools{
border-left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.2);
} //tools
} //right
} //site-header
} //hasbanner
} //media
@media only screen and (max-width: 767px){
.site-header{
.site-branding{
float: none;
display: block;
width: 100%;
text-align: center;
} //site-branding
.right{
float: none;
display: block;
width: 100%;
margin-top: 20px;
&:after{
content: '';
display: block;
clear: both;
} //haslayout
.tools{
width: calc(100% - 41px);
.cart{
float: left;
margin-left: 0;
margin-right: 20px;
.product-holder{
right: auto;
&:before{
right: auto;
left: 5px;
} //before
} //product-holder
} //cart
.form-section{
float: left;
.form-holder{
right: auto;
width: 210px;
} //form-holder
} //form-section
.btn-login{
text-transform: none;
padding: 0 17px;
margin-top: 4px;
} //btn-login
} //tools
} //right
} //site-header
#toggle-button{
margin-top: 12px;
}
} //media
//submit button for accessibility
.site-header .right .tools .form-section .form-holder .search-form input[type="submit"] {
opacity: 0;
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
border: none;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 512 512'%3E%3Cpath d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E") center center no-repeat;
width: 17px;
height: 17px;
padding: 0;
top: 13px;
position: absolute;
right: 36px;
font-size: 0;
&:focus {
opacity: 0.5;
}
} //search button in search form