File: /var/www/shoetique/wp-content/themes/north-wp/assets/sass/_shop.scss
.no-products {
height: 300px;
width: 100%;
}
.products {
@extend .endcolumn;
&.two-columns .columns{
width: 100%;
@media only screen and (min-width: $break-medium) {
width: 50%;
}
}
&.three-columns .columns{
width: 100%;
@media only screen and (min-width: $break-medium) {
width: 33.33333%;
}
}
&.four-columns .columns{
width: 100%;
@media only screen and (min-width: $break-small) {
width: 50%;
}
@media only screen and (min-width: $break-medium) {
width: 25%;
}
}
&.shortcode {
.product {
min-width: 0;
max-width: 100%;
}
}
.product {
margin-bottom: 30px;
min-width: 290px;
padding-bottom: 0;
text-align: center;
max-width: 360px;
@media only screen and (max-width: $break-small) {
max-width: 100%;
width: 100%;
}
&:after {
display: none !important;
}
&.style2 {
figure {
margin-bottom: 25px;
float: none;
}
.post-title {
margin-bottom: 10px;
padding: 0 15px;
}
}
figure {
position: relative;
display: block;
float: left;
overflow: hidden;
width: 100%;
&>a {
display: block;
float: left;
width: 100%;
z-index: 1;
img {
width: 100%;
line-height: 0;
}
}
}
.post-title {
margin-bottom: 15px;
a {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
}
.star-rating {
display: none;
}
.price {
margin-bottom: 25px;
}
&.loading {
figure:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background: rgba(255,255,255,0.8) url('../img/product-preloader.gif') center center no-repeat;
}
}
}
}
.badge {
position: absolute;
top: 30px;
left: -60px;
display: block;
width: 220px;
z-index: 2;
font-size: 13px;
color: #fff;
font-weight: bold;
height: 40px;
line-height: 40px;
text-transform: uppercase;
text-align: center;
@include rotate(-45deg);
&.onsale {
background: $color3;
}
&.out-of-stock {
background: #cdcdcd;
}
&.new {
background: #e5670a;
}
}
.added_to_cart {
display: none !important;
}
.sizing_guide {
font-size: 12px;
font-weight: 500;
text-decoration: underline;
margin-top: 35px;
display: block;
float: left;
width: 100%;
text-align: center;
}
.product-information {
padding: 100px 0.9375em 90px;
text-align: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 35%;
@extend .admin-style;
.extended_product_page & {
position: static;
float: right;
}
@media only screen and (max-width: $break-large) {
position: relative;
float: left;
width: 90%;
margin: 40px 5% 90px;
padding: 0;
}
&>.custom_scroll {
padding-right: 50px;
@media only screen and (max-width: $break-large) {
padding: 0;
}
}
.single_add_to_cart_button {
margin: 20px 0 0;
padding: 17px 60px;
}
.yith-wcwl-add-to-wishlist {
.text {
display: none;
}
.add_to_wishlist {
display: block;
height: 50px;
color: $color1;
line-height: 50px;
font-weight: 800;
font-size: 14px;
i {
margin: 0 13px 0 0;
vertical-align: middle;
font-size: 16px;
position: relative;
bottom: -1px;
&:before {
font-weight: 900 !important;
}
}
}
.feedback {
display: none !important;
}
.yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-wishlistaddedbrowse a {
color: #e25842;
}
}
.reset_variations {
display: none !important;
}
.back_to_shop {
font-size: 13px;
font-weight: 300;
display: block;
margin: 40px 0 0;
float: left;
width: 100%;
.fa {
font-weight: 300;
font-size: 10px;
margin-right: 5px;
}
span {
color: $color3;
font-weight: 400;
}
}
}
.product-gallery {
position: fixed;
overflow: hidden;
height: 100%;
margin: 0 5%;
top: 0;
left: 0;
bottom: 0;
width: 55%;
img {
width: 100%;
max-width: 100%;
}
&.boxed {
padding-top: 100px;
padding-bottom: 90px;
height: auto;
@extend .admin-style;
.carousel.product-images,
.carousel.product-images .owl-stage-outer{
height: 100%;
}
@media only screen and (max-width: $break-large) {
top: 0 !important;
padding-bottom: 0;
}
@media only screen and (max-width: $break-small) {
padding: 0;
}
}
.extended_product_page & {
position: relative;
height: auto;
float: left;
}
@media only screen and (max-width: $break-large) {
position: relative;
float: left;
width: 90%;
}
}
.product-images {
&.carousel {
.owl-item.active a{
cursor:url('../img/zoom.svg'), url('../img/zoom.cur'), ew-resize;
}
}
}
.product-thumbnails {
position: absolute;
bottom: 100px;
.boxed & {
bottom: 140px;
@media only screen and (max-width: $break-large) {
bottom: 50px;
}
}
@media only screen and (max-width: $break-large) {
bottom: 50px;
}
@media only screen and (max-width: $break-medium) {
position: static;
bottom: 0;
margin-top: 40px;
}
.owl-item {
cursor: pointer;
img {
min-width: 86px;
border: 4px solid #fff;
}
&.active.center {
img {
border-color: $color3;
}
}
}
}
.stock.out-of-stock {
font-weight: 600;
color: #e24f3d;
}
.price {
display: block;
&>span {
vertical-align: middle;
}
.from {
display: none;
}
del {
color: #676767;
font-size: 14px;
font-weight: 300;
& + ins {
margin-left: 10px;
}
}
ins,
&>.amount {
font-weight: 300;
font-size: 16px;
color: $color3;
text-decoration: none;
}
&.single-price {
display: inline-block;
del {
.amount {
font-size: 18px;
}
}
ins {
.amount {
font-size: 22px;
}
}
}
}
.woocommerce-product-rating {
margin-bottom: 20px;
text-align: center;
}
.star-rating {
display: inline-block;
position: relative;
height: 18px;
line-height: 18px;
width: 92px;
background: url('../img/stars.png') no-repeat left top;
background-size: 92px 34px;
text-indent: -9999px;
span {
top: 0;
left: 0;
position: absolute;
height: 18px;
line-height: 18px;
width: 92px;
overflow: hidden;
background: url('../img/stars.png') no-repeat left -18px;
background-size: 92px 34px;
}
& + .write_first {
display: inline-block;
font-size: 13px;
font-weight: 300;
color: $color1;
margin-left: 20px;
line-height: 18px;
vertical-align: text-top;
}
#reviews & {
background-size: 46px 17px;
width: 46px;
height: 9px;
line-height: 9px;
span {
width: 46px;
height: 9px;
line-height: 9px;
background-position: left -9px;
background-size: 46px 17px;
}
}
.fresco & {
display: none;
}
}
.comment-form-rating {
p.stars {
display: block;
float: left;
position: relative;
height: 18px;
line-height: 18px;
width: 92px;
span {
top: 0;
left: 0;
position: absolute;
height: 18px;
line-height: 18px;
overflow: hidden;
width: 92px;
a {
display: block;
width: 18px;
height: 18px;
line-height: 18px;
float: left;
text-indent: -9999px;
position: relative;
background: url('../img/stars.png') no-repeat left top;
background-size: 92px 34px;
text-indent: -9999px;
@include single-transition(none);
&.active{
background-position: left -18px;
}
}
}
}
}
.woocommerce-tabs {
float: left;
margin-bottom: 0;
margin-top: 40px;
width: 100%;
ul.accordion {
margin: 0;
}
}
.woocommerce-count-wrap {
padding: 0;
margin: 0 0 20px;
font-size: 13px;
color: $color1;
font-weight: 400;
p {
display: block;
line-height: 24px;
margin: 6px 0;
&.woocommerce-result-count {
font-size: 14px;
font-weight: 300;
color: #929499;
strong {
font-weight: 400;
}
}
&.woocommerce-show-products {
display: block;
width: 100%;
text-align: center;
a {
display: inline-block;
margin: 0 0 0 10px;
}
}
}
.woocommerce-ordering {
margin: 0;
.select-wrapper {
float: right;
margin-bottom: 0;
}
@media only screen and (max-width: $break-small) {
text-align: center;
.select-wrapper {
float: none;
margin: 0 auto;
}
}
}
}
div.quantity {
display: inline-block;
position: relative;
padding-right: 15px;
@media only screen and (min-width: $break-small) {
padding-right: 19px;
}
.variations_form & {
vertical-align: top;
}
.qty {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
width: 48px;
height: 55px;
border: 1px solid #eaeaea;
text-align: center;
background: #fff;
font-size: 13px;
color: $color1;
margin: 0;
outline: 0;
@media only screen and (min-width: $break-small) {
width: 53px;
}
}
input[type="button"]:hover {
cursor: pointer;
}
.plus,
.minus {
display: block;
padding: 0;
margin: 0;
outline: 0;
border: 1px solid #eaeaea;
position: absolute;
text-align: center;
width: 15px;
height: 50%;
text-decoration: none;
overflow: visible;
text-decoration: none;
font-weight: 400;
cursor: pointer;
text-shadow: none;
line-height: 1;
background: none;
color: $color1;
border-radius: 0;
@include appearance(none);
@media only screen and (min-width: $break-small) {
width: 19px;
}
}
.plus {
top: 0;
right: 0;
border-bottom: 0;
border-left: 0;
}
.minus {
bottom: 0;
right: 0;
border-left: 0;
}
.product-information & {
}
}
.product-page {
margin: 0;
height: 100%;
padding: 0;
&:after {
display: none;
}
@media only screen and (max-width: $break-large) {
float:left;
width: 100%;
}
&.post {
.post-title h1 {
font-size: 26px;
font-weight: 500;
line-height: 34px;
text-transform: uppercase;
}
}
.variations_form {
&.multiple-variations {
text-align: center;
.variations {
display: block;
float: left;
width: 100%;
text-align: center;
margin-bottom: 15px;
.select-wrapper {
min-width: 180px;
width:100%;
display: inline-block;
float: none;
@media only screen and (min-width: $break-small) {
width: 80%;
}
& + .select-wrapper {
margin-left: 0;
margin-top: 15px;
}
}
}
}
.variations {
display: inline-block;
@extend .endcolumn;
.select-wrapper {
margin-bottom: 0;
min-width: 130px;
& + .select-wrapper {
margin-left: 10px;
}
}
}
.single_variation {
display: none !important;
}
.single_variation_wrap {
display: block !important;
height: auto !important;
padding-top: 20px;
}
}
.variations_button {
display: inline-block;
padding-left: 82px;
width: 100%;
position: relative;
max-width: 340px;
.quantity {
position: absolute;
top: 0;
left: 0;
}
.single_add_to_cart_button {
margin: 0;
width: 100%;
}
}
&>.row {
height: 100%;
}
}
.product_meta {
float: left;
width: 100%;
text-transform: uppercase;
margin-top: 35px;
text-align: center;
p {
color: #676767;
font-weight: 300;
font-size: 12px;
text-transform: uppercase;
margin: 0;
a {
color: $color3;
font-weight: 500;
}
}
.wcml_currency_switcher {
display: none;
}
}
#product_share {
float: left;
width: 100%;
font-weight: 900;
font-size: 14px;
color: $color1;
margin-top: 30px;
direction: ltr;
@media only screen and (max-width: $break-small) {
height: auto;
}
a {
display: inline-block;
margin: 0 7px;
color: #a8aaad;
&.boxed-icon {
color: #fff;
}
}
.placeholder {
width: auto;
}
}
.related {
float: left;
width: 100%;
margin: 40px 0;
@extend .endcolumn;
@media only screen and (max-width: $break-small) {
display: none;
}
.styled_header.style2 h6 {
font-size: 24px;
line-height: 24px;
}
}
.header_content {
img {
width: 100%;
height: auto;
}
}
.product-popup {
.mfp-content {
background: #fff;
padding: 30px;
max-width: 1030px;
min-height: 500px;
border: 10px solid $color2;
.product-page {
margin: 0;
padding: 0;
border-bottom: 0;
&>.row {
margin: 0 -15px;
@media only screen and (max-width: $break-small) {
margin: 0 auto;
}
}
}
}
}
/* Tables */
.shop_attributes {
border: 0;
width: 100%;
border-spacing: 0;
text-align: left;
tbody tr th {
vertical-align: middle;
padding: 12px 0;
color: #454545;
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid #f5f5f5;
background: none;
width: 120px;
}
tbody tr td{
vertical-align: middle;
padding: 14px 0 14px 15px;
border-bottom: 1px solid #f5f5f5;
background: none;
font-weight: 300;
font-size: 14px;
color: #454545;
p {
margin: 0;
color: #454545;
font-size: 14px;
font-weight: 300;
}
}
tbody tr:last-child {
td, th {
border-bottom: 0;
background: none;
}
}
tbody tr.alt {
background: none;
th {
background: none;
}
}
}
.shopping_bag {
border: 0;
width: 100%;
border-spacing: 0;
padding: 20px 50px 50px;
@media only screen and (max-width: $break-small) {
padding: 20px;
}
thead {
background: #fff;
padding-bottom: 10px;
tr th {
text-align: center;
font-size: 14px;
font-weight: 600;
padding: 0 20px 15px;
color: $color1;
line-height: 1;
text-transform: uppercase;
border-bottom: 2px solid #e0e0e0;
@media only screen and (max-width: $break-small) {
padding: 0 10px 10px;
}
&.product-name,
&.product-remove,
&.order-number {
text-align: left;
}
&.order-number {
padding-left: 0;
}
&.product-remove {
@media only screen and (max-width: $break-small) {
width: 0;
}
}
&.product-thumbnail {
@media only screen and (max-width: $break-small) {
width: 0;
padding: 0;
}
}
&.product-price {
@media only screen and (max-width: $break-small) {
width: 0;
padding: 0;
visibility: collapse;
display: none;
}
}
}
}
tfoot {
background: #fff;
font-weight: 500;
color: $color1;
tr th,
tr td {
font-size: 16px;
padding: 20px 0;
border-bottom: 1px dotted #bfbfbf;
vertical-align: middle;
font-weight: 500;
@media only screen and (max-width: $break-small) {
padding: 10px 0;
}
}
tr th {
font-weight: 500;
text-align: left;
}
tr.total th,
tr.total td {
border-bottom: 0;
.amount {
font-size: 20px;
font-weight: 900;
}
}
}
tbody {
padding-top: 10px;
tr:nth-child(even) {
background: none;
}
tr:nth-child(odd) {
background: none;
}
tr:last-child td {
border-bottom: 0;
}
tr td {
padding: 20px;
vertical-align: middle;
text-align: center;
font-weight: 300;
font-size: 14px;
border-bottom: 1px solid $color2;
@media only screen and (max-width: $break-small) {
padding: 10px;
}
&.order-number {
text-align: left;
font-size: 18px;
font-weight: 400;
padding-left: 0;
}
&.order-status {
text-transform: uppercase;
font-weight: 600;
&.approved {
color: $color3;
}
&.hold {
color: #676767;
}
&.cancelled {
color: #ec0f38;
}
}
&.product-price,
&.product-quantity {
text-align: center;
.minus,
.plus {
display: none;
}
.quantity .qty {
float: none;
margin: 0 auto;
width: 37px;
color: #737373;
font-size: 14px;
height: 37px;
padding: 0;
}
}
&.product-price,
&.product-subtotal {
font-size: 18px;
color: $color1;
font-weight: 300;
}
&.product-subtotal {
font-weight: 300;
}
&.product-price {
@media only screen and (max-width: $break-small) {
width: 0;
padding: 0;
visibility: collapse;
display: none;
}
}
&.order-actions a + a {
margin-left: 10px;
}
&.product-name {
color: #737373;
font-size: 12px;
text-align: left;
img {
float: left;
margin-right: 25px;
width: 100px;
@media only screen and (max-width: $break-small) {
display: none;
}
}
h6 {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
color: #141414;
text-transform: uppercase;
@media only screen and (max-width: $break-small) {
font-size: 14px;
}
a {
font-size: 18px;
font-weight: bold;
color: $color1;
text-transform: uppercase;
@media only screen and (max-width: $break-small) {
font-size: 14px;
}
}
}
h6:last-child {
margin-bottom:0
}
.posted_in a{
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
color: $color3;
}
dl.variation {
margin: 0;
color: #737373;
dt {
float: left;
clear: left;
margin: 0 5px 0 0;
font-size: 13px;
font-weight: 400;
}
dd {
margin: 0;
p {
margin-bottom: 0;
font-size: 13px;
}
}
}
}
&.product-thumbnail {
vertical-align: top;
width: 210px;
padding: 30px 20px 30px 0;
text-align: left;
.remove {
display: none;
}
@media only screen and (max-width: $break-small) {
width: 0;
padding: 0;
img {
display: none;
}
}
}
&.product-quantity {
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
.wishlist-in-stock {
color: $color3;
}
.wishlist-out-of-stock {
color: #ec0f38;
}
}
&.product-total {
font-weight: 300;
font-size: 14px;
color: #313132;
}
&.product-remove {
min-width: 70px;
position: relative;
height: 100%;
a {
display: block;
width: 10px;
height: 10px;
background: transparent url('../img/close.png') center center no-repeat;
@include background-size(10px 10px);
text-indent: -9999px;
@include opacity(0.65);
&:hover {
@include opacity(1);
}
}
@media only screen and (max-width: $break-small) {
width: 0;
}
}
}
}
#shipping_method label {
font-weight: 400 !important;
}
&.wishlist {
thead tr th.product-name,
tbody tr td.product-name {
padding-left: 0;
}
tbody tr td.product-price {
font-size: 14px;
}
}
&.order_table {
border-bottom: 0;
padding: 0;
margin-bottom: 30px;
thead tr th {
border-bottom: 1px solid $color2;
padding-left: 0;
padding-right: 0;
&.product-subtotal {
text-align: right;
}
}
tbody {
tr {
td {
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #eee;
h6 {
.product-quantity {
font-size: 14px;
font-weight: 600;
}
}
&.product-total {
text-align: right;
}
}
&:nth-child(odd) {
background: #fff;
}
}
}
tfoot tr {
&.order-total {
td {
font-weight: 300;
font-size: 20px;
strong {
font-weight: 300;
}
}
th, td {
border-bottom: 0;
}
}
td {
font-weight: 300;
text-align: right !important;
}
}
}
& + #payment {
margin-top: 50px;
}
}
/* Cart Page */
.my_cart {
padding: 100px 0 0;
@media only screen and (max-width: $break-small) {
padding: 0;
}
}
.cart-collaterals {
background: #f6f6f6;
height: 100%;
padding-bottom: 90px;
.inner {
padding: 30px;
&>a {
font-size: 13px;
}
& + .inner {
border-top: 1px solid #fff;
}
}
}
.update-button {
width: 35%;
@media only screen and (max-width: $break-large) {
width: 100%;
}
& + .checkout-button {
width: 60%;
margin-left: 3%;
@media only screen and (max-width: $break-large) {
width: 100%;
margin: 20px 0 0;
}
}
}
.cart_totals {
clear: left;
padding-top: 40px;
h4 {
@extend .smalltitle;
margin: 0 0 5px;
}
#shipping_method {
float: none;
}
table {
border: 0;
border-spacing: 0;
background: none;
width: 100%;
margin: 0 0 25px;
color: #454545;
tbody tr td,
tbody tr th {
padding: 25px 0;
vertical-align: middle;
border-bottom: 1px solid #ddd;
font-weight: 400;
font-size: 16px;
}
tbody tr {
background: none;
td {
text-align: left;
background: none;
}
th {
text-align: left;
font-weight: 500;
background: none;
}
&.order-total {
td {
font-weight: 600;
font-size: 22px;
}
}
}
& + p {
margin: 0 0 25px;
}
}
small {
font-size: 13px;
color: #676767;
}
}
.my_orders {
border: 0;
width: 100%;
border-spacing: 0;
thead {
background: #fff;
padding-bottom: 10px;
tr th {
text-align: left;
font-size: 12px;
font-weight: 900;
padding: 0 0 10px;
border-bottom: 2px solid $color1;
line-height: 1;
text-transform: uppercase;
}
}
tbody {
padding-top: 10px;
tr td {
padding: 20px 0;
vertical-align: middle;
color: #737373;
border-bottom: 1px dotted $color1;
font-size: 13px;
&.order-actions {
text-align: right;
}
&.order-number a{
font-size: 18px;
color: $color1;
}
}
tr:nth-child(even) {
background: #fff;
}
}
&.order_table {
border-bottom: 0;
thead tr th {
font-weight: 400;
border-bottom-width: 1px;
}
}
}
.group_table {
border: 0;
width: 100%;
border-spacing: 0;
margin-bottom: 20px;
tbody {
tr td {
padding: 0 10px 20px 0;
&:first-child {
max-width: 31px;
}
label a {
font-weight: 300;
color: $color1;
}
}
tr:nth-child(even) {
background: #fff;
}
}
.quantity {
float: none;
}
}
#coupon_code {
width: 60%;
display: inline-block;
border: 0;
position: relative;
top: 1px;
height: 49px;
@media only screen and (max-width: $break-large) {
width: 100%;
}
& + .apply_coupon {
display: inline-block;
width: 35%;
margin-left: 4%;
margin-bottom: 25px;
background: #ededed;
border-color: #ededed;
&:hover {
background: darken(#ededed,3%);
border-color: darken(#ededed,3%);
color: $color1
}
@media only screen and (max-width: $break-large) {
width: 100%;
margin: 0 0 20px 0;
}
}
}
.smalltitle {
color: #141414;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
margin: 0 0 30px;
}
.largetitle {
font-size: 34px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
position: relative;
line-height: 1;
padding-bottom: 30px;
color: $color1;
margin-bottom: 40px;
&:after {
content: '';
display: block;
width: 40px;
height: 1px;
margin-left: -20px;
background: $color1;
position: absolute;
bottom: 0;
left: 50%;
}
}
.coupon-container {
border: 1px dashed #cdcdcd;
padding: 30px;
@media only screen and (max-width: $break-small) {
margin-top: 30px;
}
@extend .cf;
.smalltitle {
font-weight: 300;
}
&.margin {
display: none;
margin-bottom: 55px;
}
.notification-box {
display: none;
}
.checkout_coupon {
float: left;
width: 100%;
display: block !important;
#coupon_code {
width: 100%;
border: 1px solid #eee;
& + .apply_coupon {
width: auto;
margin: 0;
}
}
}
}
.checkout {
margin-top: 30px;
}
#billing_address_1,
#shipping_address_1 {
margin-bottom: 10px;
}
#order_comments {
min-height: 124px;
}
.shipping-calculator-button {
display: block;
color: $color1;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
margin: 20px 0 25px;
}
.shipping-calculator-form {
width: 100%;
@media only screen and (max-width: $break-small) {
width: 100%;
}
.formrow {
display: block;
margin-bottom: 8px;
.select-wrapper,
input {
margin: 0;
float: none;
}
.input-text {
width: 100%;
}
&:last-child {
margin: 0;
}
}
}
/* Checkout */
.section {
padding-bottom: 100px;
}
#billing_shipping.section,
#order_review.section {
display: none;
}
#shippingsteps {
text-align: center;
margin-bottom: 25px;
border-top: 1px solid #ececec;
@media only screen and (min-width: $break-small) {
margin-bottom: 40px;
}
@media only screen and (min-width: $break-medium) {
margin-bottom: 45px;
}
@media only screen and (min-width: $break-large) {
margin-bottom: 50px;
}
@media only screen and (min-width: $break-xlarge) {
margin-bottom: 55px;
}
li {
display: inline-block;
position: relative;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
height: 40px;
line-height: 40px;
text-align: center;
text-transform: uppercase;
background: #f8f8f8;
border-left: 1px solid #ececec;
border-bottom: 1px solid #ececec;
@media only screen and (min-width: $break-small) {
height: 50px;
line-height: 50px;
}
@media only screen and (min-width: $break-medium) {
height: 60px;
line-height: 60px;
}
@media only screen and (min-width: $break-large) {
height: 80px;
line-height: 80px;
}
@media only screen and (min-width: $break-xlarge) {
height: 100px;
line-height: 100px;
}
a {
color: #969696;
}
span {
display: inline-block;
background: #cdcdcd;
width: 32px;
height: 32px;
line-height: 32px;
margin-right: 15px;
color: #fff;
font-weight: 700;
font-size: 12px;
@include border-radius(16px);
@media only screen and (max-width: $break-small) {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 10px;
}
}
&.active {
background: #fff;
border-bottom-color: #fff;
a {
color: $color1;
}
span {
background: $color1;
color: #fff;
}
}
}
}
.login-section {
padding: 0 50px;
@media only screen and (max-width: $break-small) {
padding: 0 30px;
}
.shipping_address {
display: none;
}
}
.button.login_button {
margin: 25px 0
}
#customer_login {
input[name=login] {
margin-top: 30px;
@media only screen and (max-width: $break-small) {
margin-bottom: 40px;
}
}
.login, .register {
padding-top: 20px;
}
h3 {
text-align: center;
font-size: 26px;
font-weight: 500;
color: #686868;
margin: 30px 0;
}
}
.lost_password {
font-size: 14px;
color: $color3;
font-weight: 400;
float: right;
line-height: 22px;
}
.button.button_checkout_login {
margin-top: 40px;
}
#shop-page {
text-align: center;
width: 100%;
padding-left: 0;
padding-right: 0;
&.pull {
@extend .page-padding;
padding-left: 0;
padding-right: 300px;
@media only screen and (max-width: $break-small) {
padding-left: 0;
padding-right: 0;
margin: 0;
}
}
&.push {
@extend .page-padding;
padding-right: 0;
padding-left: 300px;
@media only screen and (max-width: $break-small) {
padding-left: 0;
padding-right: 0;
margin: 0;
}
}
.masonry {
max-width: 100%;
margin: 0 auto;
@media only screen and (max-width: $break-small) {
width: 100% !important;
}
}
}
#createaccount {
margin-left: 5px;
}
#checkout_register {
display: none;
padding-top: 50px;
}
#checkout_login {
.newcustomers {
@media only screen and (max-width: $break-small) {
margin: 55px 0 0 0;
}
}
}
#checkout_thankyou {
h2 {
@extend .smalltitle;
margin-top: 50px;
}
.order_details {
list-style: none;
font-size: 14px;
color: $color1;
}
}
.payment_methods {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
margin-bottom: 20px;
li {
float: left;
width: 100%;
padding: 20px 0;
border-bottom: 1px solid $color2;
&:first-child {
padding-top: 0
}
label {
margin: 0;
float: none;
}
.custom_label {
font-size: 16px;
font-weight: 500;
}
.custom_check:checked + .custom_label {
}
img {
vertical-align: middle;
margin-left: 10px;
max-height: 16px;
}
.payment_box {
margin: 20px 0 0 30px;
background: #fff;
float: left;
font-size: 13px;
line-height: 18px;
p {
margin: 0;
}
}
.about_paypal {
color: $color3;
font-size: 12px;
text-transform: uppercase;
margin-left: 20px;
}
}
& + .place-order {
text-align: right;
}
}
.place-order {
.button {
margin-top: 20px;
}
}
.form-row {
display: block;
float: left;
margin: 0;
width: 100%;
}
/* My Account */
#customer_login {
max-height: 100%;
.remember {
float: left;
text-align: left;
}
}
[role="main"]>.woocommerce {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
@extend .admin-style;
.woocommerce-cart &,
.woocommerce-checkout & {
position: relative;
top: 0 !important;
&>.notification-box {
display: none;
}
}
@media only screen and (max-width: $break-small) {
position: relative;
top: 0 !important;
#my-account-main .account-icon-box {
position: relative;
height: 200px;
}
}
}
.my_woocommerce_page,
#my-account-main,
.tab-pane {
height: 100%;
max-height: 100%;
}
.tab-pane {
display: none;
border-bottom: 1px solid $color2;
border-top: 1px solid $color2;
}
#my-account-main {
.account_wrapper {
max-height: 100%;
height: 100%;
}
.row {
height: 50%;
&:first-child {
border-top: 1px solid $color2;
}
.columns {
padding: 0;
height: 100%;
position: relative;
}
.columns:first-child .account-icon-box {
border-left: 0;
}
}
aside {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid $color2;
}
.account-icon-box {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
border-bottom: 1px solid $color2;
border-left: 1px solid $color2;
color: #676767;
font-size: 18px;
font-weight: bold;
@media only screen and (max-width: $break-medium) {
font-size: 16px;
}
&>div {
text-align: center;
top: 50%;
left: 0;
position: absolute;
width: 100%;
padding: 0 20px;
height: 50%;
z-index: 30;
@include translateY(-50%);
.icon {
display: inline-block;
width: 100px;
height: 100px;
background: transparent url('../img/my-account.png') no-repeat;
@include background-size(600px 100px);
margin-bottom: 20px;
@media only screen and (max-width: $break-medium) {
width: 50px;
height: 50px;
@include background-size(300px 50px);
}
&.my-orders {
background-position: 0 0;
}
&.wishlist {
background-position: -100px 0;
@media only screen and (max-width: $break-medium) {
background-position: -50px 0;
}
}
&.logout {
background-position: -200px 0;
@media only screen and (max-width: $break-medium) {
background-position: -100px 0;
}
}
&.my-account{
background-position: -300px 0;
@media only screen and (max-width: $break-medium) {
background-position: -150px 0;
}
}
&.my-adresses{
background-position: -400px 0;
@media only screen and (max-width: $break-medium) {
background-position: -200px 0;
}
}
&.my-subscriptions{
background-position: -500px 0;
@media only screen and (max-width: $break-medium) {
background-position: -250px 0;
}
}
}
}
&.image {
border: 0;
background: url('../img/my-account-ad.jpg') center center no-repeat;
@include background-size(cover);
}
&:hover {
color: $color3;
}
}
}
.back_to_account {
font-size: 14px;
position: relative;
font-weight: 500;
display: inline-block;
margin: 40px 0 50px;
padding-left: 20px;
&:after {
content: "\f104";
display: block;
position: absolute;
font-family: 'FontAwesome';
top: -1px;
left: 3px;
font-size: 14px;
line-height: 1;
@extend .transition;
}
&:hover:after {
left: 0;
}
small {
font-size: 13px;
font-weight: 300;
}
}
.address {
margin: 20px 0 30px;
address {
line-height: 1.5;
font-weight: 300;
margin-bottom: 20px;
}
& + .address {
@media only screen and (max-width: $break-small) {
margin-top: 30px;
}
}
}
.order-info {
margin-bottom: 25px;
}
.price_slider {
height: 5px;
background: #eaeaea;
position: relative;
margin-bottom: 25px;
margin-right: 15px;
.ui-slider-range {
height: 5px;
background: $color3;
position: absolute;
}
.ui-slider-handle {
display: block;
position: absolute;
top: -5px;
background-size: 14px 19px;
width: 14px;
height: 19px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAmCAYAAADX7PtfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQzY5RjZGOTI5NDcxMUU0OTIzQUU0NzUwRUZCQzVCMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQzY5RjZGQTI5NDcxMUU0OTIzQUU0NzUwRUZCQzVCMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFDNjlGNkY3Mjk0NzExRTQ5MjNBRTQ3NTBFRkJDNUIyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFDNjlGNkY4Mjk0NzExRTQ5MjNBRTQ3NTBFRkJDNUIyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+56RSzgAAAW5JREFUeNrsl00rBVEch8+QUsNCmUlI+QbKy0pRysYSG1mILMjSd7C3UYoNoZQdxUIkhaj7EdhYTEleQnTj+etMjZq5d7gzx+b86un+72lmns45c2bmOJ7nKZ0amIRx6IA6VVmeoQDrsAof0uhoYTPsalEeEfEQ3IpQenYK3SrfXEBvteu6MxTTKv+0QCDCRYpWZSYNMqSPFPWGhE8i/FQGY4X/JwyC4PvX9/1U7UmpUoZjhVZohVZo3xbZCI1+YsgcvhrsYFGEjskRFeG5QeGZzGE/xaGBnsrNOSgfwtcU9/Inx3VZhHnYcCK7pwHYBC9j2R2MwUF09xSmDbahJyPZJYzATdggQxo94AHWoBG6KpStwKju4Y+Fn3TCBCxB7S9FbzCnhbFPmlInywZ1B9pTymTohuHqr2+Lgh7avRSyfegsJYubw7jIo29L130J63UBpuCl3MXSCMNFewQn0KRvqnc4hllY1seUzZcAAwCdbEn9yMLcSAAAAABJRU5ErkJggg==);
@include transition-duration(0s);
}
}
.price_slider_amount {
.button {
float: right;
font-size: 12px;
font-weight: 400;
padding: 8px 11px;
}
.price_label {
float: left;
line-height: 30px;
font-size: 12px;
text-transform: uppercase;
color: #737373;
}
}
.product-category {
#shop-page & {
margin-bottom: 30px;
}
@media only screen and (max-width: $break-small) {
height: 180px;
overflow: hidden;
}
&>a {
display: block;
position: relative;
background: #fff;
max-height: 100%;
@extend .transition;
img {
width: 100%;
will-change: opacity;
@extend .transition;
}
.title {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin: -20px 0 0;
height: 40px;
line-height: 40px;
@include opacity(0);
@extend .transition;
.count {
font-weight: 300;
}
h2 {
display: block;
padding: 0 20px;
font-size: 24px;
font-weight: 600;
color: $color1;
text-transform: uppercase;
}
}
&:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border:0 solid $color3;
@include opacity(0);
@extend .transition;
}
}
&:hover {
&>a:after {
border-width:6px;
@include opacity(1);
}
.title {
@include opacity(1);
}
img {
@include opacity(0.3);
}
}
}
/* Chosen */
.form-row.woocommerce-invalid-required-field {
.select2-container .select2-choice {
border-color: #e76049;
}
}
.select2-container {
margin-bottom: 25px;
clear: left;
.select2-choice {
background: #fff;
border: 1px solid #eee;
height: 40px !important;
line-height: 40px !important;
padding-left: 12px;
@include border-radius(0);
@include box-shadow(none);
span {
height: 37px;
line-height: 37px;
}
div b {
background-position: 0 9px !important;
}
}
&.select2-dropdown-open {
.select2-choice {
background: #fff;
border: 1px solid $color2;
div b {
background-position: -18px 9px !important;
}
}
}
}
.select2-drop {
@include border-radius(0);
@include box-shadow(none);
border-color: $color2;
.rtl & {
left: auto;
right: -9999px;
}
&.select2-drop-active {
border-color: $color2;
&.select2-drop-above {
border-top-color: $color2;
}
}
.select2-search input {
background: #fff !important;
margin-bottom: 5px;
}
.select2-results {
background: #fff;
font-size: 14px;
.select2-highlighted {
background: #fafafa;
@include border-radius(0);
}
li {
margin: 0;
}
}
}
.select2-container-single .select2-search input[type=text] {
background: #fff !important;
}
/* Empty Cart */
.cart-empty {
figure {
display: inline-block;
margin: 0 auto 30px;
width: 134px;
height: 168px;
background: url('../img/cart-empty.png') top left no-repeat;
@include background-size(134px 168px);
}
.message {
font-size: 26px;
font-weight: 500;
line-height: 32px;
}
.return-to-shop {
margin: 20px 0 0;
}
section {
padding: 40px 0;
}
#side-cart & {
margin-top: 50px;
figure {
width: 67px;
height: 84px;
@include background-size(67px 84px);
}
.message {
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
}
}
/* Table Rate */
#shipping_method {
list-style: none;
float: right;
margin: 0;
li {
float: left;
display: block;
clear: left;
width: 100%;
& + li{
margin-top: 20px;
}
}
}
/* Terms & Conditions */
.terms {
text-align: center;
label {
width: auto;
}
.termscontainer {
display: inline-block;
padding-top: 12px;
margin-bottom: 30px;
}
.button {
margin-top: 40px;
}
}
/* Demo Store */
.demo_store {
display: block;
background: $color2;
color: #fff;
text-transform: uppercase;
font-size: 12px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-weight: 400;
margin: 0;
line-height: 30px;
}
/* Shipping & Billing */
#customer_details {
margin-bottom: 50px;
}
.shipping,
.billing {
margin-top: 10px;
#ship-to-different-address {
padding: 0;
float: right;
width: 100%;
.smalltitle {
float: left;
}
.shipping_toggle {
float: right;
position: relative;
}
}
}