This repository has been archived on 2020-05-08. You can view files and clone it, but cannot push or open issues or pull requests.
_s/sass/shop/_components.scss

275 lines
3.6 KiB
SCSS
Raw Normal View History

2017-08-01 13:21:13 +00:00
/**
* Header cart
*/
.site-header-cart {
position: relative;
margin: 0;
padding: 0;
@include clearfix;
.cart-contents {
text-decoration: none;
.icon {
display: none;
}
}
.widget_shopping_cart {
display: none;
}
.product_list_widget {
margin: 0;
padding: 0;
}
}
/**
* Star rating
*/
.star-rating {
overflow: hidden;
position: relative;
height: 1.618em;
line-height: 1.618;
font-size: 1em;
width: 5.3em;
font-family: 'star';
font-weight: 400;
&:before {
content: "\53\53\53\53\53";
opacity: .25;
float: left;
top: 0;
left: 0;
position: absolute;
}
span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
span:before {
content: "\53\53\53\53\53";
top: 0;
position: absolute;
left: 0;
color: $color__link;
}
}
p.stars {
a {
position: relative;
height: 1em;
width: 1em;
text-indent: -999em;
display: inline-block;
text-decoration: none;
margin-right: 1px;
font-weight: 400;
&:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
line-height: 1;
font-family: "star";
content: "\53";
color: $color__text-main;
text-indent: 0;
opacity: .25;
}
&:hover {
~ a:before {
content: "\53";
color: $color__text-main;
opacity: .25;
}
}
}
&:hover {
a {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
}
}
&.selected {
a.active {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
~ a:before {
content: "\53";
color: $color__text-main;
opacity: .25;
}
}
a:not(.active) {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
}
}
}
/**
* Tabs
*/
.woocommerce-tabs {
ul.tabs {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
li {
display: block;
margin: 0;
position: relative;
a {
padding: 1em 0;
display: block;
}
}
}
.panel {
h2:first-of-type {
margin-bottom: 1em;
}
}
}
/**
* Password strength meter
*/
.woocommerce-password-strength {
text-align: right;
&.strong {
color: $woocommerce__color-success;
}
&.short {
color: $woocommerce__color-error;
}
&.bad {
color: $woocommerce__color-error;
}
&.good {
color: $woocommerce__color-info;
}
}
/**
* Forms
*/
.form-row {
&.woocommerce-validated {
input.input-text {
box-shadow: inset 2px 0 0 $woocommerce__color-success;
}
}
&.woocommerce-invalid {
input.input-text {
box-shadow: inset 2px 0 0 $woocommerce__color-error;
}
}
}
.required {
color: red;
}
/**
* Notices
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
@include clearfix;
background-color: $woocommerce__color-success;
clear: both;
}
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
background-color: $woocommerce__color-info;
}
.woocommerce-error {
background-color: $woocommerce__color-error;
}
.demo_store {
position: fixed;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
background-color: $woocommerce__color-info;
z-index: 9999;
}
@media screen and (min-width: 48em) {
/**
* Header cart
*/
.site-header-cart {
.widget_shopping_cart {
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: ms(-1);
left: -999em;
display: block;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.cart-contents {
.icon {
display: inline;
}
}
&:hover,
&.focus {
.widget_shopping_cart {
left: 0;
display: block;
}
}
}
}