File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/woocommerce_old/single-product.less
/*------------------------------------------------------------------
[Woocommerce styles]
1. Woocommerce single product styles
-------------------------------------------------------------------*/
.single-product {
div.page-title-inner .page-title {
.hide();
}
.product {
.clearfix();
section.up-sells {
padding: 0 10px;
margin-top: 60px;
> h2 {
.widget-title();
margin-bottom: 30px;
}
}
}
/* Images section */
.woocommerce-product-gallery {
margin-bottom: 28px;
.woocommerce-product-gallery__wrapper {
padding-right: 60px;
> .woocommerce-product-gallery__image {
&:first-child {
.rel();
overflow: hidden;
.block();
width: 100%;
margin-bottom: 15px;
img {
.block();
width: 100%;
}
.dfd-large-image {
.abs();
width: auto;
max-width: none;
visibility: hidden;
.opacity(0);
.transition(~"visibility .5s ease, opacity .5s ease");
}
&:hover {
.dfd-large-image {
visibility: visible;
.opacity(1);
}
}
}
}
}
.single-product-thumbnails {
cursor: move;
margin: 0 -7px;
.woocommerce-product-gallery__image {
height: auto;
}
a {
.rel();
.block();
padding: 0 7px;
}
img {
.block();
}
}
}
.single_add_to_cart_button_wrap {
.quantity .screen-reader-text {
.hide();
}
}
/* Title */
.summary {
.product_title {
letter-spacing: 0;
line-height: 1.2;
margin-bottom: 10px;
}
}
.subtitle.product-main-subtitle {
font-size: @subtitles-font-size + 1;
padding-bottom: 15px;
border-bottom: 1px dotted @border-color;
color: fade(@title-color, 70%);
}
.dfd-price-rating-wrap {
display: table;
padding: 15px 0;
/* Price */
> .price-wrap {
display: table-cell;
vertical-align: bottom;
.rel();
overflow: hidden;
padding-right: 20px;
.price {
margin: 0;
.block-title();
.amount {
font-size: 25px;
text-decoration: none;
}
del {
font-size: 20px;
padding-right: 15px;
color: fade(@block-title-color, 70%);
.amount {
font-size: inherit;
color: inherit;
}
}
ins {
font-size: 25px;
text-decoration: none;
.amount {
font-size: inherit;
}
}
}
}
> .legal-price-info {
display: table-cell;
vertical-align: bottom;
p {
margin: 0;
}
}
/* Rating */
.woocommerce-product-rating {
display: table-cell;
vertical-align: bottom;
overflow: hidden;
.woocommerce-review-link {
.rel();
font-size: @default-text-font-size;
margin-left: 10px;
color: fade(@title-color, 70%);
}
.star-rating {
width: 76px !important;
&:before {
font-size: 13px;
}
span {
&:before {
font-size: 13px;
}
}
}
}
}
p.stock {
.subtitle();
font-size: @default-text-font-size;
line-height: 1;
padding-bottom: 15px;
margin-bottom: 15px;
color: fade(@title-color, 70%);
}
/* Description */
.woocommerce-product-details__short-description {
margin-bottom: 40px;
padding-top: 25px;
border-top: 1px dotted @border-color;
p {
margin-bottom: 0;
}
}
/* Cart */
@s: 50px;
.cart {
width: 100%;
.clearfix();
.cover {
.rel();
.block();
.transform(rotateX(0));
.transform-style(preserve-3d);
.transition-transform(.3s ease);
.transform-origin(50% 0%);
}
a:hover {
.cover {
.transform(rotateX(90deg));
}
}
.front {
background: @third-site-dark-color;
border-left: 1px solid fade(@main-site-dark-color, 10%);
}
.back {
.abs();
top: 100%;
left: 0;
background: lighten(@third-site-dark-color, 5%);
border-top: 1px solid fade(@main-site-dark-color, 20%);
border-left: 1px solid fade(@main-site-dark-color, 10%);
.transform(rotateX(-90deg) perspective(1000px));
.transform-origin(50% 0%);
}
.added_to_cart {
.rel();
overflow: hidden;
float: left;
height: @s;
line-height: @s;
background: @third-site-dark-color;
color: @main-site-dark-color;
.front,
.back {
.block();
overflow: hidden;
height: @s;
line-height: @s;
padding-right: 25px;
i {
.block();
width: @s;
height: @s;
line-height: @s;
text-align: center;
border-right: 1px solid fade(@main-site-dark-color, 10%);
}
i, span {
float: left;
}
span {
padding-left: 25px;
}
}
}
.single_add_to_cart_button {
.rel();
float: left;
height: @s;
line-height: @s;
padding: 0 25px 0 75px;
background: @third-site-dark-color;
color: @main-site-dark-color;
border-width: 0;
&.added {
.hide();
}
&:before {
content: "\e7c7";
font-family: @font-icons-main;
font-weight: normal;
.abs();
left: 0;
top: 0;
.block();
width: @s;
height: @s;
line-height: @s;
color: fade(@main-site-dark-color, 50%);
border-right: 1px solid fade(@main-site-dark-color, 10%);
.transition(color .3s ease);
}
&:hover {
background: @third-site-dark-color;
color: @main-site-dark-color;
border-width: 0;
&:before {
color: @main-site-dark-color;
}
}
}
.quantity {
.screen-reader-text {
.hide();
}
}
}
.single_variation_wrap {
.clearfix();
.single_variation {
.price {
.inline-block();
.block-title();
margin-bottom: 10px;
.amount {
text-decoration: none;
}
del {
padding-right: 15px;
color: @subtitle-color;
.amount {
color: inherit;
}
}
ins {
text-decoration: none;
}
}
.price,
.stock {
line-height: 1.3;
}
.stock {
margin-bottom: 20px;
}
}
}
/* WishList */ /* Size guide */
.single-product-wishlist-wrap {
float: left;
.product-in-wishlist,
.add_to_wishlist {
.rel();
.block();
overflow: hidden;
width: @s;
height: @s;
line-height: @s;
text-align: center;
background: @third-site-dark-color;
color: fade(@main-site-dark-color, 50%);
border-left: 1px solid fade(@main-site-dark-color, 10%);
.transition(color .3s ease);
.cover,
.front,
.back {
.block();
width: @s;
height: @s;
line-height: @s;
text-align: center;
}
i {
font-size: 15px;
.rel();
color: inherit;
}
&:hover {
color: @main-site-dark-color;
}
}
img {
.hide();
}
}
/* Share */
.share-wrap {
margin-top: 30px;
padding: 20px 0 25px 0;
border-top: 1px dotted @border-color;
div.box-name {
font-size: @box-name-font-size - 3;
text-transform: uppercase;
margin-bottom: 10px;
}
.entry-share-no-popup {
overflow: hidden;
a {
font-size: 12px;
float: left;
.block();
width: 46px;
height: 46px;
line-height: 42px;
text-align: center;
color: @title-color;
border-top: 2px solid @third-site-dark-color;
border-bottom: 2px solid @third-site-dark-color;
.transition(color .3s ease);
&:before {
.block();
border-right: 1px solid @border-color;
}
&:first-child {
border-left: 2px solid @third-site-dark-color;
}
&:last-child {
border-right: 2px solid @third-site-dark-color;
&:before {
border-right-width: 0 !important;
}
}
> a {
.hide();
}
&:hover {
color: fade(@title-color, 50%);
}
}
}
}
/* Product Meta */
.product_meta {
.rel();
> span {
font-size: @default-text-font-size;
.block();
text-align: left;
padding-bottom: 5px;
color: @subtitle-color;
.sku,
a {
color: @title-color;
}
a {
.transition(color .3s ease);
&:hover {
color: @main-site-light-color;
}
}
}
}
/*
* Tabs
*/
.wc-tabs-wrapper {
padding-top: 75px;
padding-left: 10px;
padding-right: 10px;
.tabs {
text-align: center;
margin-bottom: 35px;
li {
.inline-block();
a {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
background: transparent;
border: 1px solid transparent;
.rel();
display: block;
padding: 0 20px;
text-align: center;
line-height: 38px;
color: @title-color;
.transition(~"background .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out");
}
&.active {
a {
color: @title-color;
border-color: @border-color;
}
}
}
}
.woocommerce-Tabs-panel {
margin-bottom: 35px;
&#tab-description,
&#tab-additional_information {
> h2 {
display: none;
}
}
}
}
.shop_attributes {
border-width: 0 !important;
border-collapse: collapse;
tbody {
tr {
background: transparent;
border-bottom: 1px solid @border-color;
&:last-child {
border-bottom-width: 0;
}
th {
width: 50%;
text-align: right;
.dfd-font-styles();
padding: 15px 25px;
color: @subtitle-color;
border-bottom-width: 0;
}
td {
width: 50%;
text-align: left;
.dfd-font-styles();
padding: 15px 25px;
color: @title-color;
border-bottom-width: 0;
p {
padding: 0;
}
}
}
}
}
.products-slider-wrap {
margin-top: 60px;
}
/*
* Comments
*/
.comment-form-author,
.comment-form-email,
.comment-form-rating {
label {
.dfd-font-styles();
padding-bottom: 10px;
}
}
#respond form .comment-form-rating label {
margin-bottom: 0;
}
/*
* Grouped product
*/
.product-type-grouped {
form.cart {
.woocommerce-grouped-product-list {
border-width: 0;
margin: 0;
.woocommerce-grouped-product-list-item {
background: transparent;
td {
vertical-align: middle;
border-bottom: 1px dotted @border-color;
line-height: 2em;
a {
.link-style();
}
&.woocommerce-grouped-product-list-item__quantity {
padding-left: 0;
a.product_type_variable {
.cover {
.transform(none);
.front {
background: transparent;
}
i,
.back {
display: none;
}
}
}
}
&.woocommerce-grouped-product-list-item__price {
.link-style();
&:hover {
color: @link-color;
}
}
}
&:last-child {
td {
border-bottom-width: 0;
}
}
}
}
}
}
/*
* Variable product
*/
.product-type-variable {
form.cart {
table.variations {
position: relative;
padding-bottom: 20px;
.rounded(0);
border: none;
margin-bottom: 0;
tbody {
> tr {
width: 50%;
display: inline-block;
padding-bottom: 10px;
background-color: transparent;
.value {
width: auto;
display: block;
padding: 0;
background-color: @main-site-dark-color;
.dk-select {
border: 1px solid @border-color;
background: #ffffff;
.dk-selected {
overflow: hidden;
border-width: 0;
.rounded(0);
&:before {
content: "\ec1c";
font-family: "icomoon";
font-size: 12px;
position: absolute;
top: 50%;
right: 15px;
height: 1em;
line-height: 1;
margin-top: -0.5em;
color: inherit;
background: transparent;
.box-shadow(none);
}
}
.dk-select-options {
top: 100%;
.box-shadow(none);
background: inherit;
border: 1px solid @border-color;
border-top-width: 0;
left: -1px;
right: -1px;
width: auto;
.dk-option {
padding: 8px 10px;
line-height: 2.5em;
border-bottom-width: 0;
&:hover,
&.dk-option-selected {
color: @main-site-light-color;
background: #fafafa;
}
}
}
&.dk-select-open-down,
&.dk-select-open-up {
border-bottom-color: transparent;
}
}
}
.label {
display: none;
}
&:nth-child(odd) {
padding-right: 5px;
}
&:nth-child(even) {
padding-left: 5px;
}
}
}
.reset_variations {
position: absolute;
left: 0;
bottom: 0;
.subtitle();
line-height: 1;
font-size: @subtitles-font-size + 1;
margin-top: 15px;
.transition(color .3s ease);
&:hover {
color: @main-site-light-color;
}
&:before {
content: "\ec40";
position: relative;
font-family: 'icomoon';
color: inherit;
padding-right: 5px;
font-style: normal;
}
}
}
}
}
}
.wcmp-quick-view-wrapper .wcmp-close-single {
right: -15px;
top: -15px;
.wooicon-cross2 {
.block();
width: 100%;
height: 100%;
background: @third-site-dark-color;
&:before,
&:after {
content: "";
.block();
width: 2px;
height: 16px;
.abs();
top: 50%;
left: 50%;
margin-top: -8px;
background: @main-site-dark-color;
.transition-transform(.3s ease);
}
&:before {
.transform(rotate(-45deg) scale(1));
}
&:after {
.transform(rotate(45deg) scale(1));
}
&:hover {
&:before {
.transform(rotate(-45deg) scale(1.2));
}
&:after {
.transform(rotate(45deg) scale(1.2));
}
}
}
}
/*
* Responcive Single product old syule
*/
@media only screen and (max-width: @screen-x-large - 1) {
.single-product {
#layout .product {
padding-left: 10px;
padding-right: 10px;
.related.products.products-slider-wrap {
padding-left: 0;
padding-right: 0;
h3.widget-title {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
}
@media only screen and (max-width: @screen-medium - 1) {
.single-product {
#layout .product {
&.product-type-grouped {
section.up-sells {
.products {
.product {
width: 50%;
float: left;
&:last-child {
clear: none;
}
}
}
}
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
padding-right: 0;
}
&.type-product .summary {
padding-left: 0;
padding-right: 0;
}
}
}
}
@media only screen and (max-width: 600px) {
.single-product {
#layout .product {
&.product-type-variable {
form.cart table.variations {
tbody > tr {
width: 100%;
&:nth-child(odd) {
padding-right: 0;
}
&:nth-child(even) {
padding-left: 0;
}
}
}
}
&.product-type-grouped {
section.up-sells {
.products {
.product {
width: 100%;
float: none;
}
}
}
}
}
}
}