922 lines
22 KiB
SCSS
922 lines
22 KiB
SCSS
@import 'variables', 'mixin';
|
|
|
|
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - single-prod-content
|
|
* 1.1 - product_title
|
|
* 1.2 - woocommerce-product-rating
|
|
* 1.3 - price
|
|
* 1.4 - description
|
|
* 1.5 - variations
|
|
* 1.6 - cart | variations_button
|
|
* 1.7 - product_meta
|
|
* 1.8 - tabs
|
|
* 1.9 - woocommerce-product-attributes
|
|
* 2.0 - single-prod-gal
|
|
* 3.0 - quantity
|
|
* 4.0 - star-rating
|
|
* 5.0 - woocommerce-Reviews
|
|
* 5.1 - woocommerce-Reviews-title
|
|
* 5.2 - comments
|
|
* 5.3 - review_form
|
|
* 6.0 - related
|
|
*/
|
|
|
|
.selectedoptions {
|
|
@include media-max(1200px){
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.single_variation_wrap{
|
|
width: 100%;
|
|
}
|
|
|
|
.wcpa_type_image-group label, .wcpa_form_item.wcpa_type_text label, .wcpa_form_item.wcpa_type_file label, .wcpa_form_item.wcpa_type_textarea label {
|
|
@include media-max(1200px){
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon {
|
|
@include media-max(1200px){
|
|
margin: 5px 20px 15px 0;
|
|
width: 18px;
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
height: 18px;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.required_ast{
|
|
@include media-max(1200px){
|
|
position: absolute;
|
|
top: 0;
|
|
margin-left: 4px;
|
|
color: #e34848;
|
|
font-size: 18px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.borderRequired{
|
|
border: 2px solid #e34848;
|
|
animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
|
|
box-shadow: 0 0 0 0 rgba(#e34848, 20%);
|
|
}
|
|
|
|
.single-product{
|
|
.absolute-button__redirection{
|
|
position: fixed !important;
|
|
@include absolute(auto, 10px, 20px, auto);
|
|
|
|
.button{
|
|
box-shadow: 0 0 15px rgba(#000, 20%);
|
|
padding: 15px 20px;
|
|
|
|
span{
|
|
color: #fff;
|
|
}
|
|
|
|
&:before{
|
|
width: 100%;
|
|
}
|
|
|
|
&:hover{
|
|
span{
|
|
color: #000;
|
|
}
|
|
|
|
&:before{
|
|
width: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-product-gallery{
|
|
.flex-control-thumbs{
|
|
/*display: none !important;*/
|
|
}
|
|
}
|
|
|
|
#payment{
|
|
@include media-min(1200px){
|
|
padding: 0 100px;
|
|
}
|
|
}
|
|
|
|
.wcpa_form_outer{
|
|
.wcpa_row{
|
|
&:first-of-type{
|
|
padding-top: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wcpa_row {
|
|
.realizacja {
|
|
background: rgba($primary-color, 20%);
|
|
border: 1px solid $primary-color;
|
|
font-size: 15px;
|
|
text-align: left !important;
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
padding: 20px;
|
|
margin-top: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.single-product div.product.wcpa_has_options form.cart {
|
|
display: flex !important;
|
|
margin-bottom: 30px;
|
|
|
|
@include media-max(1200px) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.wcpa_price_summary {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.woocommerce div.product .woocommerce-tabs ul.tabs {
|
|
display: none;
|
|
}
|
|
|
|
.single_add_to_cart_button {
|
|
margin-left: auto;
|
|
animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 15%);
|
|
|
|
@include media-max(1200px) {
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
&:hover {
|
|
-webkit-animation: none;
|
|
-moz-animation: none;
|
|
-ms-animation: none;
|
|
animation: none;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.woocommerce-tabs {
|
|
.accordion {
|
|
background: #fff;
|
|
padding: 10px 30px;
|
|
border: 1px solid #bdbcbc;
|
|
|
|
&-body {
|
|
padding: 1rem 0;
|
|
|
|
em{
|
|
font-style: normal !important;
|
|
}
|
|
}
|
|
|
|
&-collapse {
|
|
transition: $transition;
|
|
border: none;
|
|
}
|
|
|
|
&-button {
|
|
border: none;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
font-weight: 400;
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid #bdbcbc;
|
|
text-align: start;
|
|
text-transform: uppercase;
|
|
|
|
&:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&:after {
|
|
background-image: none;
|
|
transform: none;
|
|
content: "+";
|
|
font-size: 20px;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&:not(.collapsed) {
|
|
color: black;
|
|
background-color: #fff;
|
|
|
|
&:after {
|
|
background-image: none;
|
|
transform: none;
|
|
content: "-";
|
|
font-size: 30px;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
&:last-of-type {
|
|
.accordion-button {
|
|
border-bottom: unset !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub-title {
|
|
z-index: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-Tabs-panel {
|
|
|
|
.accordion-body {
|
|
a {
|
|
color: #000;
|
|
@extend %link-color;
|
|
}
|
|
}
|
|
|
|
h5,
|
|
h4,
|
|
h3,
|
|
h2,
|
|
h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
p,
|
|
h5,
|
|
h4,
|
|
h3,
|
|
h2,
|
|
h1 {
|
|
text-align: start !important;
|
|
}
|
|
}
|
|
|
|
.woocommerce-product-details__short-description{
|
|
display: none !important;
|
|
}
|
|
|
|
.term-description {
|
|
text-align: center;
|
|
|
|
@include media-min(1200px) {
|
|
margin: 30px 150px 0 150px;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.6;
|
|
font-family: 'gilroy-light', sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h1 strong,
|
|
h2 strong,
|
|
h3 strong {
|
|
color: #000000;
|
|
font-family: 'gilroy-regular', sans-serif;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
font-weight: 400;
|
|
margin-bottom: 30px;
|
|
margin-top: 20px;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
gallery .gallery-item .gallery-icon>a,
|
|
.product-col .product-box-img,
|
|
.product-box>a:not(.product-box__link),
|
|
.woocommerce-product-gallery__image>a,
|
|
.blog-post__img__link {
|
|
text-align: center;
|
|
}
|
|
|
|
/* 1.0 - single-prod-content */
|
|
.archive,
|
|
.page,
|
|
.single {
|
|
|
|
|
|
.product-box {
|
|
border: unset;
|
|
box-shadow: unset;
|
|
display: block;
|
|
|
|
&:hover {
|
|
box-shadow: unset;
|
|
}
|
|
|
|
.product-box-desc {
|
|
padding: 20px 0;
|
|
text-align: start
|
|
}
|
|
|
|
.imagewrapper {
|
|
height: 450px;
|
|
border: unset;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
|
|
@include media-max(1600px) {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
.product-box-img__hov,
|
|
.product-box-img {
|
|
height: 450px;
|
|
border: unset;
|
|
|
|
@include media-max(1600px) {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
&-desc__price {
|
|
bdi {
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
color: #333333;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
&-desc__h {
|
|
font-size: 18px;
|
|
line-height: 25px;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stock {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.single-prod-content {
|
|
@include media-min(1200px) {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* 1.1 - product_title */
|
|
.product_title {
|
|
margin: 20px 0 20px;
|
|
text-align: center;
|
|
|
|
@include media-max(sm) {
|
|
margin: $single-prod-title-mobile-margin;
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.2 - woocommerce-product-rating */
|
|
.woocommerce-product-rating {
|
|
margin: $paragraph-margin;
|
|
|
|
.star-rating {
|
|
margin: 4px 10px 0 0;
|
|
float: left;
|
|
}
|
|
|
|
.woocommerce-review-link {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.3 - price */
|
|
.price {
|
|
font-family: 'gilroy-regular', sans-serif;
|
|
color: #000;
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
margin: 40px 0 10px;
|
|
border-top: 1px solid #bdbcbc;
|
|
border-bottom: 1px solid #bdbcbc;
|
|
padding: 20px 0;
|
|
display: block;
|
|
text-align: center;
|
|
|
|
del {
|
|
color: $single-prod-price-del-color;
|
|
font-size: $single-prod-price-del-font-size;
|
|
font-weight: $single-prod-price-del-font-weight;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
ins {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.4 - description */
|
|
.description {
|
|
margin: $paragraph-margin;
|
|
}
|
|
|
|
|
|
/* 1.5 - variations */
|
|
.variations {
|
|
width: 100%;
|
|
margin: $single-prod-variations-margin;
|
|
|
|
td {
|
|
padding: $single-prod-variations-td-padding;
|
|
|
|
&.label {
|
|
font-weight: $woo-bold-font-weight;
|
|
|
|
label {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.value {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
|
|
.reset_variations {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
select {
|
|
@extend .form-select;
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.single_variation_wrap {
|
|
margin: $single-prod-variations-single_variation_wrap-margin;
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.6 - cart | variations_button */
|
|
.cart,
|
|
.variations_button {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
|
.quantity-buttons {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.quantity-buttons {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
|
|
|
|
/* 1.7 - product_meta */
|
|
.product_meta {
|
|
margin: $single-prod-content-product_meta-margin;
|
|
display: none;
|
|
|
|
>span {
|
|
display: block;
|
|
font-weight: $woo-bold-font-weight;
|
|
|
|
>span,
|
|
>a {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.8 - tabs */
|
|
.tabs.wc-tabs {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: $single-prod-wc-tabs-margin;
|
|
border-bottom: 1px solid $woo-border-color;
|
|
|
|
&:after {
|
|
content: ' ';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
padding: 0;
|
|
|
|
a {
|
|
color: $single-prod-wc-tabs-a-color;
|
|
font-size: $single-prod-wc-tabs-a-font-size;
|
|
line-height: $single-prod-wc-tabs-a-line-height;
|
|
font-weight: $single-prod-wc-tabs-a-font-weight;
|
|
padding: $single-prod-wc-tabs-a-padding;
|
|
display: block;
|
|
border-bottom: 1px solid transparent;
|
|
margin-bottom: -1px;
|
|
@include css3(transition, $single-prod-wc-tabs-a-transition);
|
|
|
|
&:hover {
|
|
border-color: $single-prod-wc-tabs-a-border-color;
|
|
color: $single-prod-wc-tabs-a-color-hover;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
border-color: $single-prod-wc-tabs-a-border-color;
|
|
color: $single-prod-wc-tabs-a-color-hover;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 1.9 - woocommerce-product-attributes */
|
|
.woocommerce-product-attributes {
|
|
margin: $paragraph-margin;
|
|
|
|
&-item__label {
|
|
font-weight: $woo-bold-font-weight;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
&-item__value p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.0 - single-prod-gal */
|
|
.single-prod-gal {
|
|
position: relative;
|
|
margin: 20px 0 20px;
|
|
|
|
|
|
|
|
.flex-control-nav.flex-control-thumbs {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 -7.5px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
|
|
>li {
|
|
float: left;
|
|
width: 100% / $single-prod-gal-thumbnails-number-per-row;
|
|
padding: 0 7.5px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
>img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
|
|
&:hover {
|
|
border: 5px solid darken($primary-color, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - quantity */
|
|
.quantity {
|
|
input[type="number"] {
|
|
width: 60px;
|
|
height: 60px;
|
|
text-align: center;
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
border-radius: $input-border-radius 0 0 $input-border-radius;
|
|
-moz-appearance: textfield;
|
|
|
|
&:focus {
|
|
border-color: $input-border-color;
|
|
}
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
&-wrap {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
&-buttons {
|
|
display: none;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
width: 30px;
|
|
flex-direction: row;
|
|
width: 120px;
|
|
height: 42px;
|
|
|
|
@include media-max(1200px) {
|
|
height: auto;
|
|
}
|
|
|
|
button {
|
|
height: 60px !important;
|
|
width: 60px;
|
|
font-size: 18px;
|
|
line-height: 23px;
|
|
border-width: $input-border-width;
|
|
border-style: solid;
|
|
border-color: $input-border-color;
|
|
border-radius: 0 $input-border-radius $input-border-radius 0;
|
|
border-left: none;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
background: $input-bg;
|
|
color: $input-color;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
@include css3(transition, $transition);
|
|
|
|
+button {
|
|
height: floor(($input-font-size * 1.5 + 2 + $input-padding-y * 2) - floor(($input-font-size * 1.5 + 2 + $input-padding-y * 2) / 2));
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $input-border-color;
|
|
background: $input-border-color;
|
|
color: #fff;
|
|
}
|
|
|
|
&.quantity-buttons__plus {}
|
|
|
|
&.quantity-buttons__minus {
|
|
border-top: 1px solid $input-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
+.quantity-buttons {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
&.hidden+.quantity-buttons {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.0 - star-rating */
|
|
.star-rating {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 14px;
|
|
line-height: 1;
|
|
width: 80px;
|
|
margin: 8px auto 9px;
|
|
|
|
&:before {
|
|
height: 14px;
|
|
width: 100%;
|
|
content: '';
|
|
background-repeat: repeat-x;
|
|
background-size: 16px 14px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
span {
|
|
overflow: hidden;
|
|
padding-top: 14px;
|
|
background-repeat: repeat-x;
|
|
background-size: 16px 14px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* 5.0 - woocommerce-Reviews */
|
|
.woocommerce-Reviews {
|
|
|
|
|
|
/* 5.1 - woocommerce-Reviews-title */
|
|
&-title,
|
|
.comment-reply-title {
|
|
font-family: $header-font-family;
|
|
font-size: 110%;
|
|
line-height: $header-font-line-height;
|
|
color: $header-color;
|
|
font-weight: $header-font-weight;
|
|
letter-spacing: 0;
|
|
text-transform: $header-text-transform;
|
|
margin: 40px 0 10px;
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* 5.2 - comments */
|
|
#comments {
|
|
ol.commentlist {
|
|
margin: 0;
|
|
width: 100%;
|
|
background: 0 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
padding: 0;
|
|
margin: 0 0 20px;
|
|
border: 0;
|
|
position: relative;
|
|
background: 0;
|
|
border: 0;
|
|
}
|
|
|
|
img.avatar {
|
|
display: none;
|
|
}
|
|
|
|
.comment-text {
|
|
margin: 0;
|
|
border: 1px solid $woo-border-color;
|
|
border-radius: 0;
|
|
padding: 15px 15px;
|
|
}
|
|
|
|
.star-rating {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.meta {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.description {
|
|
margin: 0;
|
|
font-size: 90%;
|
|
font-style: italic;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 5.3 - review_form */
|
|
#review_form {
|
|
#comment {
|
|
resize: none;
|
|
height: 120px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
textarea {
|
|
@extend .form-control;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
@extend .form-check-input;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
p.comment-form-author {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.comment-form-cookies-consent label {
|
|
display: inline;
|
|
}
|
|
|
|
p.form-submit {
|
|
margin: $paragraph-margin;
|
|
|
|
input[type="submit"] {
|
|
@extend .button;
|
|
}
|
|
}
|
|
|
|
p.stars {
|
|
display: block;
|
|
pointer-events: none;
|
|
|
|
>span {
|
|
display: inline-flex;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
width: 22px;
|
|
height: 18px;
|
|
position: relative;
|
|
text-indent: -999em;
|
|
text-decoration: none;
|
|
pointer-events: auto;
|
|
|
|
&:before {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: '';
|
|
text-indent: 0;
|
|
background-size: 22px 18px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.related {
|
|
>h2 {
|
|
color: #000000;
|
|
font-family: 'gilroy-regular', sans-serif;
|
|
margin-bottom: 30px;
|
|
margin-top: 50px;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* 6.0 - related */
|
|
.related .product-col {
|
|
opacity: 1 !important;
|
|
transform: translateZ(0) !important;
|
|
margin: 10px 0 0;
|
|
} |