File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_product.scss
/***************************************************
scss file: /assets/scss/theme/_product.scss
+ Style for product in product page
****************************************************/
.woocommerce{
div.product{
div.entry-img { position: relative; margin-bottom: 105px; padding-right: 35px;
@media(max-width: $screen-md-max){ padding-right: 15px; width: 46%; }
@media(max-width: $screen-phone){ margin-bottom: 40px; width: 100%; }
.inner{ @include clearfix(); position: relative; }
@include product-block-badges();
.onsale{
position: absolute; top: 20px; left: auto; right: 20px; z-index: 2;
& + .images .container-image-and-badge,
& + .container-image-and-badge{
.yith-wcbm-badge{
top: 52px;
}
}
}
// override yth bagde
.container-image-and-badge{
.yith-wcbm-badge{
right:17.5px; left: auto;
}
}
.flex-control-nav{
@include ulclear();
> li { float: left; max-width: 100px; }
}
.flex-control-thumbs{ @include transition(all 0.25s ease-out 0s); @include opacity(1);
&:not(.ready-to-slide){
@include opacity(0);
}
}
.flex-direction-nav{
@include ulclear();
li{ padding: 0;
.flex-prev,
.flex-next{
position: absolute; left: 20px; @include square(30px); line-height: 30px; top: calc(50% - 80px - 15px); @include border-radius(0); display: none !important;
font-size: 0px; background: transparent; color: $link-color; z-index: 1; padding: 0; @include opacity(1); @include transition(all 0.25s ease);
&:hover{ color: $color1; }
&:before{ @include font-awesome5('\f104', 30px, 900); font-size: 36px; line-height: inherit; }
&.flex-next{
left: auto; right: 20px;
&:before{ @include font-awesome5('\f105', 30px, 900); line-height: inherit; }
}
&.flex-disabled{ cursor: not-allowed; color: rgba($link-color, 0.5);
&:hover{ color: rgba($color1, 0.5); }
}
}
}
}
}
div.entry-summary{
margin-bottom: 105px; padding-bottom: 0px; padding-left: 35px;
@media(max-width: $screen-md-max){ padding-left: 25px; }
@media(max-width: $screen-md-min){ padding-left: 15px; }
@media(max-width: $screen-phone){ width: 100%;}
}
div.images{ width: 100%; margin-bottom: 0px;
.flex-viewport{
border: 1px solid $line-border-color;
}
.woocommerce-product-gallery__trigger{
@include square(50px); background: #FFF; z-index: 1; text-indent: 0px; bottom: 20px; right: 20px;
position: absolute; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); @include border-radius(4px); border: 1px solid $line-border-color;
&:before{ @include font-ionicons('\f346', 50px); color: $link-color; font-size: 22px; border:none; left: 0px; top: 0px; margin:-1px 0 0 -1px; @include transition(all 0.25s ease); }
&:after{ display: none; }
img{ display: none !important; }
&:hover{ border-color: $color1; background: $color1;
&:before{ color: #FFF; }
}
}
.sns-product-popvideo{
@include square(50px); background: #FFF; text-indent: 0px; font-size: 0px;
position: absolute; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); @include border-radius(4px); border: 1px solid $line-border-color;
font-size: 0px; bottom: 80px; right: 20px;
&:before{ @include font-ionicons('\f24c', 50px); color: $link-color; font-size: 22px; border:none; left: 0px; top: 0px; margin:-1px 0 0 -1px; @include transition(all 0.25s ease); }
&:hover{ border-color: $color1; background: $color1;
&:before{ color: #FFF; }
}
}
.woocommerce-product-gallery__image{
cursor: move; @include border-radius(0px);
}
}
&.topslider-layout{
div.images{ position: relative;
.woocommerce-product-gallery__trigger{ left: 35px; }
.sns-product-popvideo{
& + .woocommerce-product-gallery__trigger{
left: 85px;
}
}
}
.gallery_type_n2.entry-img {
margin-bottom: 100px; width: 100%; padding: 0;
> .container{
@media(max-width: $screen-md-max){ padding-left: 0px; padding-right: 0px; width: 100%; }
}
.onsale{ left: 35px; right: auto; }
.inner{ margin: 0 -15px;
@media(max-width: $screen-md-max){
margin: 0 -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin: 0 -($sns-wgutter-xs / 2);
}
}
.woocommerce-product-gallery__wrapper{
width: 100% !important; transform: none !important; transition: none !important;
}
.slick-list{
.slick-slide{ clear: none; margin: 0 15px; overflow: hidden; border: none;
@media(max-width: $screen-md-max){
margin: 0 ($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin: 0 ($sns-wgutter-xs / 2);
}
img{ @include opacity(1);
&.flex-active{ @include opacity(0.4); }
}
}
}
.slick-arrow{ position: absolute; left: -35px; width: 32px; height: 32px; line-height: 1; top: calc(50% - 16px);
font-size: 0px; z-index: 1; padding: 0; background:none; @include opacity(0); @include transition(all 0.25s ease);
@media(max-width: $screen-md-min){ left: 20px; }
&:before{ @include font-ionicons('\f124', 32px); font-size: 32px; color: $button-bg-color; }
&.slick-next{
left: auto; right: -35px;
@media(max-width: $screen-md-min){
right: 20px;
}
&:before{ @include font-ionicons('\f125', 32px); }
}
&:hover{ color: $color1; }
&.slick-disabled{ cursor: not-allowed; }
}
&:hover{
.slick-arrow{ @include opacity(1); }
}
.flex-control-thumbs{
display: none;
}
}
.primary_block.row{
@media(max-width: $screen-xs-max){ margin-left: -7.5px; margin-right: -7.5px; }
}
.entry-summary{ margin-bottom: 100px; padding-left: 15px; padding-right: 35px; width: 35%;
.summary-inner{ padding: 40px 50px; border:1px solid $line-border-color; background:#f9f9f9; @include clearfix(); }
@media(max-width: 1440px){
width: 40%;
}
@media(max-width: $screen-md-max){
padding-right: 25px; width: 45%;
.summary-inner{ padding: 30px 40px; }
}
@media(max-width: $screen-md-min){
padding-right: 15px; width: 100%;
}
@media(max-width: $screen-xs-max){ padding-left: 7.5px; padding-right: 7.5px; }
@media(max-width: $screen-phone){
.summary-inner{ padding: 20px 30px; }
}
}
.tabs-info{
margin-bottom: 100px; padding-left: 35px; padding-right: 15px; width: 65%;
@media(max-width: 1440px){
width: 60%;
}
@media(max-width: $screen-md-max){
padding-left: 25px; width: 55%;
}
@media(max-width: $screen-md-min){
padding-left: 15px; width: 100%;
}
@media(max-width: $screen-xs-max){ padding-left: 7.5px; padding-right: 7.5px; }
#sns_tab_informations{
.tab-heading{ display: block; width: 100%; float: none;
ul.nav-tabs {
margin: 0;
> li{ display: inline-block; width: auto;
&:first-child{ margin-left: 0px; }
&:last-child{ margin-right: 0px; }
@media(max-width: $screen-phone){ width: 100%; display: block; margin: 3px 0;}
}
}
}
.tab-content{ padding: 35px 0 0; width: 100%; float: none;
#reviews { padding: 0 0;
#review_form_wrapper{ margin-top: 30px; }
}
}
}
}
@media(max-width: $screen-md-max){
#sns_tab_informations ul.nav-tabs{ display: block; @include clearfix(); }
}
.second_block{
.primary_block.row{
@media(max-width: $screen-phone){ margin-left: -7.5px; margin-right: -7.5px; }
}
}
}
.second_block {
&.gallery_type_n1{ margin-bottom: 113px;
.entry-img { margin-bottom: 0px;
.woocommerce-product-gallery{ margin-bottom: 0px;
.woocommerce-product-gallery__wrapper{
width: 100% !important; transform: none !important;
.woocommerce-product-gallery__image{ margin-top: 30px; width: 100% !important; display: block;
@media(max-width: $screen-md-min){ margin-top: 20px; }
@media(max-width: $screen-xs-max){ margin-top: 10px; }
&:first-child{ margin-top: 0px; }
.zoomImg{
&:nth-child(2) { display: none; }
}
}
}
}
.flex-control-thumbs{ display: none; }
}
.entry-summary{ margin-bottom: 0px; @include clearfix();
.summary-inner{ @include clearfix();
.inner{ @include clearfix(); }
}
@media (max-width: $screen-phone) {
margin-top: 85px;
.summary-inner{
position: static !important; height: auto !important;
.inner{ position: static !important; width: auto !important; @include transform(none !important);
}
}
}
}
}
&.gallery_type_h{
.entry-img {
.flex-viewport{
}
.flex-control-thumbs{
padding: 0; margin-top: 20px;
.slick-list{ margin: 0 -10px;
.slick-slide{ clear: none; padding: 0 ; margin: 0 10px; position: relative; border: 1px solid $line-border-color;
img{ cursor: pointer; @include opacity(0.6); @include transition(all 0.15s ease); @include border-radius(0px); margin: 0 auto;
&.flex-active{
cursor: text; @include opacity(1);
}
}
}
}
@media(max-width: $screen-md-min){
margin-top: 10px;
.slick-list{
margin: 0 -5px;
.slick-slide{ margin: 0 5px; }
}
}
.slick-arrow{ position: absolute; left: -35px; width: 24px; height: 24px; line-height: 1; top: calc(50% - 12px);
font-size: 0px; z-index: 1; padding: 0; background:none; @include opacity(0); @include transition(all 0.25s ease);
@media(max-width: $screen-md-min){ left: 10px; }
&:before{ @include font-ionicons('\f124', 24px); font-size: 24px; color: $button-bg-color; }
&.slick-next{
left: auto; right: -35px;
@media(max-width: $screen-md-min){
right: 10px;
}
&:before{ @include font-ionicons('\f125', 24px); }
}
&:hover{ color: $color1; }
&.slick-disabled{ cursor: not-allowed; }
}
&:hover{
.slick-arrow{ @include opacity(1); }
}
}
}
}
&.gallery_type_v{
.entry-img {
@media(max-width: $screen-phone){ width: 100%; }
.woocommerce-product-gallery{ position: relative;
.woocommerce-product-gallery__trigger,
.sns-product-popvideo{
left: auto; right: 20px;
}
}
.flex-viewport{
.woocommerce-product-gallery__image{ overflow: hidden; @include border-radius(0px); }
}
.flex-control-thumbs{
width: 120px; float: right; position: absolute; top: calc(50% - 2*114px - 2.5*10px); left: -60px;
padding: 15px; background: #fff; border-right: 1px solid $line-border-color;
&:before{ position: absolute; content: ""; height: 1px; width: 50%; left: calc(50% + 0.5px); top: 0px; background: $line-border-color; }
&:after{ position: absolute; content: ""; height: 1px; width: 50%; left: calc(50% + 0.5px); bottom: 0px; background: $line-border-color; }
@media(max-width: 1440px){ width: 90px; padding: 12px; top: calc(50% - 2*90px - 2.5*5px); left: -45px; }
@media(max-width: $screen-md-min){ width: 70px; padding: 10px; top: calc(50% - 1.5*70px - 2*5px); left: -35px;
left: 15px; border: none;
&:before, &:after { display: none; }
}
.slick-list{
margin: -7.5px 0;
@media(max-width: 1440px){ margin: -5px 0; }
@media(max-width: $screen-md-min){ margin: -5px 0; }
.slick-slide{ clear: none; margin: 7.5px 0; padding: 0; border:1px solid $line-border-color;
@media(max-width: 1440px){ margin: 5px 0; }
@media(max-width: $screen-md-min){ margin: 5px 0; }
img{ @include opacity(0.6); cursor: pointer; @include transition(all 0.15s ease);
&.flex-active{ cursor: text; @include opacity(1) }
}
}
}
&:hover{
.slick-arrow{ @include opacity(1); }
}
}
.onsale{ right: 20px; left: auto;
}
.flex-direction-nav{
li{
.flex-prev,
.flex-next{
top: calc(50% - 15px); left: 20px;
&.flex-next{
left: auto; right: calc(85px + 20px);
}
}
}
}
.slick-arrow{ position: absolute; top: -30px; width: 24px; height: 24px; line-height: 1; padding: 0; left: calc(50% - 12px); z-index: 1;
@include transition(all 0.15s ease); font-size: 0px;
color: $button-bg-color; background:none; border:none; @include opacity(0);
&:hover{ color: $color1; }
&:before{ @include font-ionicons('\f126', 24px); font-size: 24px; }
&.slick-next{
top: auto; bottom: -30px;
&:before{ @include font-ionicons('\f123', 24px); }
}
&.slick-disabled{ cursor: not-allowed; }
}
}
.entry-summary{
@media(max-width: $screen-phone){ width: 100%; }
}
}
}
.entry-summary{
.product_title{
font-size: 2.5em; font-weight: bold; margin-bottom: 23px; color: $link-color; text-transform: none;
@media(max-width: $screen-md-max){
font-size: 2.2857em;
}
@media(max-width: $screen-md-min){
font-size: 1.7142em;
}
}
// Price
.price{
margin: 0 0 27px; padding: 0 0; display: block; line-height: 1.1; font-size: 1.2857em; color: $link-color;
del{ padding: 0 5px; }
}
.woocommerce-product-rating{ margin: 0 0 0px;
.star-rating{
margin: 0 5px 0 0; position: relative !important; left: 0;
}
}
.woocommerce-product-details__short-description{
margin-bottom: 21px;
@media(max-width: $screen-md-min){ display: none; }
ul, ol{
li{ padding-top: 2px; padding-bottom: 2px; }
}
ul, ol, p{ margin-bottom: 15px; }
}
.time-cdown-wrap{ position: relative; margin: 32px 0 20px;
> span.label { font-weight: bold; padding: 0; margin-bottom: 12px; text-transform: uppercase; display: block; text-align: left;
}
}
.clock-digi{ display: inline-block;
> div { display: inline-block; float: left; padding: 0; margin: 0 0 0 15px; width: 70px; height: 75px; @include border-radius(4px);
text-transform: none; font-size: 12px; position: relative; background: #fff; border: 1px solid $line-border-color;
> div{ display: block; text-align: center; font-size: 12px; text-transform: uppercase;
> div { display: block; padding: 0 0; font-weight: bold; font-size: 35px; color: $link-color; text-transform: none; width: 100%; height: 100%; line-height: 50px; height: 50px;
@include transition(all 0.25s ease-out); @include border-radius(0px);
position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: calc(100% - 20px); left: 10px; bottom: 0px; background: $low-color; }
}
}
&:first-child{ margin-left: 0px;
&:before{ display: none; }
}
}
}
.stock{
font-size: 1em !important; margin: 0 0; position: relative;
&:before{ @include font-ionicons('\f120', 14px); margin-right: 6px; }
&.out-of-stock{
margin-bottom: 25px;
&:before{ color: #f33131; }
}
}
// Form cart
.cart{
margin: 0 0 20px; padding: 10px 0 0; display: block;
.reset_variations{
margin: 0 0 0 15px;
}
label{
float: left; margin: 0 10px 0 0; color: $text-color; line-height: 42px;
a{
font-size: 1em;
width: 100%;
}
}
.quantity{
margin: 0 10px 0 0; float: left; border:none; padding: 0;
@media(max-width: $screen-md-max){ margin-right: 20px; }
label.screen-reader-text{ text-transform: uppercase; font-weight: normal; line-height: 60px; display: none; }
.qty{ color: $color;
margin: 0 0; font-size: 1em; @include border-radius(4px);
appearance: textfield;
-moz-appearance: textfield;
}
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.single_add_to_cart_button{
height: 56px; line-height: 56px; border: none; background: $color1; font-weight: bold; color: #FFF;
margin: 0 15px 0 0; padding: 0 30px; text-transform: uppercase;
&.disabled{
background: $button-bg-color;
}
&:before{
@include font-ionicons('\f110', 18px); font-size: 18px; margin-right: 8px;
}
&:hover{
background: $color1;
}
}
.show{display: inline-block !important}
}
// Compare
.compare{
display: inline-block; margin: 0 25px 10px 0; position: relative; text-transform: uppercase; font-weight: bold;
padding: 0; background: none; color: $link-color; height: auto; line-height: inherit; float: left;
&:before{
@include font-ionicons('\f4a8', 18px); position: relative; top: 1px; font-size: 18px;
margin: 0 7px 0 0; @include transition(all 0.25s ease-out);
}
.blockUI.blockOverlay{
opacity: 1 !important; background: transparent !important;
&:before{
font-size: 16px; @include transition(all 0.25s ease-out); height: 20px; width: 20px; line-height: 20px; @include border-radius(20px);
background: #fff; color: $color1;
}
}
&:hover{
color: $color1;
a{ color: $color1; }
.blockUI.blockOverlay{
&:before{ color: $color1; }
}
}
}
// Wishlist
.yith-wcwl-add-to-wishlist{
display: inline-block; margin: 0 25px 10px 0; position: relative; float: left; opacity: 1 !important;
.yith-wcwl-add-button{ }
.feedback{display:none !important}
.ajax-loading{
opacity: 1 !important; cursor: wait; @include transition(all 0.25s ease);
position: absolute; left: 0px; top: 0px; margin: 0 0;
&:before{
position: absolute; left: 0px; top: 0px; font-size: 16px; background: transparent; @include transition(all 0.25s ease);
@include font-ionicons('\f1ce', 16px); z-index:1; color: $color1;
-webkit-animation: spin 1s ease-in-out infinite;
-moz-animation: spin 1s ease-in-out infinite;
-o-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
}
}
a{
display: inline-block; padding: 0 0; position: relative; text-transform: uppercase; font-weight: bold;
&:before{
@include font-ionicons('\f387', 18px); position: relative; top: 1px;
font-size: 18px; margin: 0 7px 0 0;
@include transition(all 0.25s ease-out);
}
}
.blockUI.blockOverlay{
overflow: hidden; opacity: 1 !important;
//&:after,
&:before{
font-size: 16px; cursor: wait; display: block !important; color: $color1; opacity: 1 !important;
height: 20px; width: 20px; line-height: 20px; @include border-radius(20px); background: #fff; position: relative; top: 2px;
}
}
&:hover{
.ajax-loading{
&:before{ color: $color1; }
}
a{
color: $color1;
&:before{color: $color1; }
}
}
+ .clear{display: none !important}
}
.show{display: inline-block !important;}
//Meta
.product_meta{
@include clearfix();
margin: 20px 0; padding: 16px 0; float: left; width: 100%; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 30px; background: $low-color; left: 0px; top: 0px; }
&:after{ position: absolute; content: ""; height: 1px; width: 30px; background: $low-color; left: 0px; bottom: 0px; }
.sku_wrapper,
.tagged_as,
.posted_in{
@include clearfix(); font-weight: bold; text-transform: uppercase; display: block; margin: 3px 0; padding: 0 0; position: relative; color: $link-color;
> *{font-weight: normal; text-transform: none; color: $color; }
a{ color: $link-color;
&:hover{
color: $color1;
}
}
}
.sku_wrapper{
span{ margin-left: 3px; }
}
.posted_in{
a{ margin-left: 0px; position: relative;
&:before{
content: ","; position: relative; left: -3px; color: $color;
}
&:first-child{ margin-left: 3px;
&:before{ display: none; }
}
}
}
.tagged_as{
a{ margin-left: 0px; position: relative;
&:before{
content: ","; position: relative; left: -3px; color: $color;
}
&:first-child{ margin-left: 3px;
&:before{ display: none; }
}
}
}
}
// Sharing buttons
.post-share-block{ margin: 0 0; float: left; width: 100%;
.ssbp-wrap,
.ssba-wrap{
.ssba-share-text{ display: inline-block; margin: 0 8px 0 0; }
br{ display: none; }
}
}
}
}
.product.type-product.product-type-grouped,
.product.type-product.product-type-variable{
.entry-summary{
.compare,
.yith-wcwl-add-to-wishlist{ @include opacity(0); }
form.cart{ width: 100%; display: block; margin-right: 0px; margin-bottom: 0px;
.compare,
.yith-wcwl-add-to-wishlist{
@include opacity(1);
}
}
.stock{
margin: 10px 0 10px;
}
}
}
.product.type-product.product-type-grouped{
.woocommerce-product-details__short-description{ border: none; }
form.cart { padding-top: 0;
table{ margin: 0 0 30px 0; border: none;
tr{
td{
&:last-child{ border-right: none; }
}
&:first-child{
td{ border-top: none; }
}
}
}
}
.entry-summary{
.stock{
margin: 5px 0 0;
}
.quantity {
.btn-decrement,
.btn-increment{
@include square(20px); min-width: 20px !important; right: 5px; top: 10px;
}
.btn-decrement{
left: 5px; right: auto;
}
.input-group-prepend{
.btn-decrement{
&:before{ @include font-ionicons('\f208', 20px); }
}
}
.input-group-append{
.btn-increment{
&:before{ @include font-ionicons('\f217', 20px); }
}
}
.qty {
width: 80px; height: 40px; border: 1px solid $base-border-color;
}
}
.single_add_to_cart_button{ margin: 0 15px 20px 0; display: block; }
.product_meta{ }
}
}
// Star ratings
.woocommerce-product-rating{
}
// Compare
#cboxOverlay{
background: rgba(0,0,0,0.6) !important;
}
#colorbox.yith_woocompare_colorbox { border: 10px solid $button-bg-color; }
.yith_woocompare_colorbox{
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxMiddleLeft, #cboxMiddleRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight{
height: 0px; width: 0px; background: none;
}
#cboxContent{
padding: 0 0;
#cboxClose{
display: block; background: none; @include square(24px); text-align: center;@include transition(all 0.25s ease); position: absolute;
background: $button-bg-color; color: #fff !important; overflow: hidden; padding: 0 0; font-size: 0px; text-align: center; @include border-radius(0px);
bottom:auto; right: 10px; top: 10px; text-indent: 0px;
&:hover{ text-decoration: none; background: $color1; }
&:before{ @include font-awesome5('\f00d', 24px, 900); font-size: 14px; color: inherit; position: absolute; right: 0px; bottom: 0px; }
}
}
}
// Quick View
#yith-quick-view-modal {
.yith-wcqv-main {
overflow: hidden; box-shadow: 0 0 0 10px $button-bg-color;
}
.yith-quick-view-overlay{
background: rgba(0, 0, 0, 0.6);
}
}
#yith-quick-view-modal.open .yith-wcqv-wrapper{
max-height: 512px;
}
.yith-wcqv-head{
#yith-quick-view-close{
display: block; @include square(24px); text-align: center; @include transition(all 0.25s ease); color: #FFF !important;
overflow: hidden; padding: 0 0; font-size: 0px; text-align: center; @include border-radius(0px); background: $button-bg-color;
border: none; position: absolute; top: 10px; right: 10px; @include opacity(1);
&:hover{ color: #FFF !important; text-decoration: none; background: $color1; }
&:before{ @include font-awesome5('\f00d', 24px, 900); font-size: 14px; color: inherit; }
}
}
#yith-quick-view-content {
height: 100%;
> .product { height: 100%; display: flex; }
.type-product{ display: flex; align-items: center;
@include product-block-badges();
.onsale{
position: absolute; top: 20px; right: calc(55% + 20px); left: auto; z-index: 2;
& + .images .container-image-and-badge,
& + .container-image-and-badge{
.yith-wcbm-badge{
top: 52px;
}
}
}
}
.images{
width: 45%; float: left; opacity: 1 !important; margin: 0; position: relative;
.woocommerce-product-gallery__image{
@include border-radius(0px); max-height: 512px;
> a { display: inline-flex; max-height: 512px; }
}
}
div.summary{
width: 55%; float: left; opacity: 1 !important; margin: 0; padding: 35px 0 35px 50px; overflow: auto;
.summary-content{ max-height: calc(560px - 70px); overflow-x: hidden; padding-right: 50px; }
.product_title{ font-size: 2em; margin-bottom: 18px; }
// Price
.price{
margin: 0 0 25px;
}
.woocommerce-product-rating{ margin: 0;
}
.woocommerce-product-details__short-description{
margin-bottom: 25px;
}
.cart{ margin: 0; }
form.cart.variations_form div.variations{
div.value {
a.reset_variations{ top: 0px; margin-left: 0px; }
select{ height: 40px; line-height: 40px; }
}
}
}
}
@media (max-width: $screen-xs-max) {
.yith-wcqv-button {
display: none !important;
}
}
}
// product tab
.tabs-info{
#sns_tab_informations{
margin: 0 0 20px;
}
}
#sns_tab_informations {
margin: 0 0 100px; padding: 0 0;
.tab-heading{
@include clearfix(); position: relative;
}
ul.nav-tabs {
@include ulclear(); position: relative; z-index: 1; border-bottom:none; display: table; margin: 0 auto 32px;
@media (max-width: $screen-phone) { display: block; @include clearfix(); }
> li {
padding: 0 25px; margin: 0 0; position: relative;
&:before{ content: ""; position: absolute; height: 1px; width: 20px; background: $low-color; @include border-radius(100%); left: -10px; top: 50% }
@media (max-width: $screen-md-min) {
&.dropdown + li{
margin-left: 0px;
a{ padding-left: 0px; }
}
&:last-child{
margin-right: 0px;
a{ padding-right: 0px; }
}
}
&:first-child, &.tabdrop + li {
padding-left: 0px;
&:before{ display: none; }
> a {
margin-left: 0;
}
}
&:last-child{ padding-right: 0px; }
&.active{
> a {
color: $color1; cursor: pointer;
&:before{ width: 100%; }
}
}
&:hover{
> a {
color: $color1;
}
}
&.tabdrop { margin: 25px 0 0 10px;
@media (max-width: $screen-phone) { margin-top: -5px; }
> a {
i{
padding-left: 10px;
}
}
}
> a {
@include transition(all 0.25s ease-out); position: relative; font-size: 1.2857em; background: transparent; border:none;
position: relative; color: $link-color; padding: 0; display: block; @include border-radius(0); margin: 0; text-transform: uppercase; font-weight: bold;
}
}
.dropdown{
cursor: pointer;
.dropdown-toggle{
display: block; font-size: 24px; height: 100%; width: 24px; color: $link-color; vertical-align: middle; padding: 0px;
i,
.display-tab,
.caret{ display: none; }
&:before{ @include font-ionicons('\f397', 24px); background: none; }
&:hover{
text-decoration: none; color: $color1;
}
}
&.active{
.dropdown-toggle{ color: $color1; }
}
&:before{ display: none; }
a{
cursor: pointer;
}
&:not(.active){
a{margin: 0 0; }
}
ul.dropdown-menu{
padding: 10px 0;
li{ padding: 0;
a{ padding: 5px 20px; text-transform: uppercase; font-weight: bold; }
&:first-child{
padding-top: 0px;
}
&:last-child{
padding-bottom: 0px;
}
}
}
}
}
.tab-content {
position: relative; margin: 0; padding: 0;
#comments,
> div{
> h2, > h3, > h4, > h5, > h6 {
margin-top: 0; text-transform: none;
}
> h2{
font-size: 1.2857em; margin-bottom: 15px; display: none;
}
}
#tab-description{
p{ margin-bottom: 15px;
&:last-child{
margin: 0;
}
}
ul,ol{
margin-bottom: 18px;
&:last-child{
margin: 0;
}
}
}
#tab-additional_information{
table.shop_attributes{ margin-top: 10px; margin-bottom: 5px; }
}
#reviews{
h2:first-child{
margin-bottom: 15px; display: none;
}
h3:first-child{
margin-bottom: 10px;
}
body.layout-type-m:not(.use-gallery-type-n2) & {
#review_form_wrapper{ margin-top: 40px;
@media(max-width: $screen-md-min){ margin-top: 30px; }
}
#comments {
}
}
#review_form_wrapper{
#reply-title{
margin: 0 0 15px; font-size: 1.2857em; line-height: 1.42857; font-weight: bold; color: $link-color; display: block;
}
}
}
}
#tab-sns_prod_custom_tab{
.widget-title{
padding:0;
&:after,&:before{
display:none;
}
}
}
}
.cross-sells{
position: relative; @include clearfix(); margin: 0 0 85px; padding: 0 0; z-index: 0;
&:hover{ z-index: 1;
.owl-nav{
@include opacity(1);
}
}
.prdlist-content{
margin-left: -15px; margin-right: -15px;
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
}
@include owl-nav1();
.owl-nav{
@include opacity(0); @include transition(all 0.25s ease-out);
}
.owl-item{
div.product{ float: none;
}
}
}
.upsells,
.related {
position: relative; @include clearfix(); margin: 0 0 93px; padding: 0 0; z-index: 0;
&:hover{ z-index: 1;
.owl-nav{
@include opacity(1);
}
}
> h2{
margin: 0 0 20px; font-size: 2.5em; font-weight: bold; color: $link-color; text-align: center; line-height: 1.1; position: relative;
@media(max-width: $screen-md-max){
font-size: 2.2857em;
}
@media(max-width: $screen-md-min){
font-size: 1.7142em;
}
}
.prdlist-content{
margin-left: -15px; margin-right: -15px;
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
}
@include owl-nav1();
.owl-nav{
@include transition(all 0.25s ease-out); @include opacity(0);
}
.owl-item{
div.product{ float: none; }
}
}
.upsells-list{
h2{
font-size: 1.4285em; color: $link-color; text-transform: none; font-weight: bold; display: block; padding: 0 0; margin: 0 0 25px; line-height: 1.1;
> span{
display: inline-block; position: relative;
}
}
.product{
padding: 10px 0 0; margin-top: 10px;
&:first-child{margin-top: 0px; padding-top: 0px;}
}
.list-view{
@include product-block-liststyle();
}
}
body.single-product{
.sns-main{
> .product.type-product:not(.topslider-layout){
div.upsells,
div.related {
&:last-child{ margin-bottom: 93px; }
}
}
> .product.type-product.topslider-layout{
.tabs-info{
#sns_tab_informations{
.tab-heading{ text-align: left; }
}
}
}
}
}
.yith-wcwl-share{
margin: 0 0 10px;
}
.item-animate {
@include opacity(0);
position: relative;
}
.play {
.item-animate {
@include opacity(1);
@include animation-play-state(running);
}
}
.fadeIn.play .item-animate { @include animation(fadeIn 300ms ease both); }
.fadeInDown.play .item-animate { @include animation(fadeInDown 300ms ease both); }
.fadeInUp.play .item-animate { @include animation(fadeInUp 300ms ease both); }
.fadeInRight.play .item-animate { @include animation(fadeInRight 300ms ease both); }
.fadeInLeft.play .item-animate { @include animation(fadeInLeft 300ms ease both); }
.zoomIn.play .item-animate { @include animation(zoomIn 300ms ease both); }
.zoomInLeft.play .item-animate { @include animation(zoomInLeft 300ms ease both); }
.zoomInRight.play .item-animate { @include animation(zoomInRight 300ms ease both); }
.zoomInUp.play .item-animate { @include animation(zoomInUp 300ms ease both); }
.zoomInDown.play .item-animate { @include animation(zoomInDown 300ms ease both); }
.bounceIn.play .item-animate { @include animation(bounceIn 300ms ease both); }
.bounceInRight.play .item-animate { @include animation(bounceInRight 300ms ease both); }
.bounceInLeft.play .item-animate { @include animation(bounceInLeft 300ms ease both); }
.bounceInUp.play .item-animate { @include animation(bounceInUp 300ms ease both); }
.bounceInDown.play .item-animate { @include animation(bounceInDown 300ms ease both); }
.woocommerce{
.type-product.product-type-variable{
form.cart.variations_form{
margin-top: -10px;
div.variations{
margin: 0 0 20px; padding: 0 0;
&:not(.re-designed){
div.value{
select{ @include opacity(1); visibility: visible; }
}
}
div.label{
padding: 0 0;
label{
color: $link-color; margin: 0 0 8px; float: none; line-height: normal; text-transform: uppercase; font-weight: bold;
}
}
div.value{
padding: 0 0; margin-bottom: 0px; border: none; @include clearfix();
&:last-child{ margin-bottom: 0px; }
select{
margin-bottom: 5px; min-width: auto; display: block; @include opacity(0); visibility: hidden;
}
.sellect-wrap{
display: inline-block;
}
.option{
margin: 0 8px 8px 0; padding: 3px 15px; background: #f9f9f9; cursor: pointer; display: inline-block;
float: left; overflow: hidden; color: $link-color; position: relative; @include transition(all 0.25s ease-out);
&:before{ position: absolute; content: ""; height: 100%; width: 100%; border: 1px solid $base-border-color; left: 0px; top: 0px; @include transition(all 0.25s ease-out); }
&:hover{
&:before{ border-color: $color; }
}
&.selected{
color: $color1;
&:before{ border: 2px solid $color1; }
}
span{
display: block; text-align: center;
}
&.text{
&.selected{
}
}
&.color{
float: left; position: relative; border: none; @include border-radius(0px); width: 40px; height: 40px; background: #fff;
@include transition(all 0.25s ease-out); padding: 0;
span{
width: 26px; height: 26px; @include border-radius(0px); margin: 7px;
}
&.selected{
&:before{
border: 2px solid $color1;
}
}
}
&.image{
background: #FFF; width: 75px; position: relative;
display: inline-block; @include transition(all 0.25s ease-out); padding: 0 0; margin: 0 10px 10px 0;
&:before{ }
span{
padding: 8px;
}
&:hover{
}
&.selected{
border-color: $color1; background: #fff;
}
}
}
a.reset_variations{
display: inline-block !important; visibility: visible; position: relative; top: -15px; color: $link-color;
margin: 0 0 0 5px; font-size: 0.8571em; text-transform: uppercase; font-weight: bold;
&:before{
@include font-ionicons('\f21c', 14px); font-size: 14px; margin-right: 4px; text-align: left;
}
&:hover{ color: $color1; }
}
}
}
.single_variation_wrap{
margin: 0 0 20px; @include clearfix();
.single_variation{
margin: 0 0 20px;
> * {
&.woocommerce-variation-description{
> * {
&:first-child{ margin-top: -5px; }
}
}
&.woocommerce-variation-price{
.price{ color: $link-color; font-size: 1.2857em; margin-top: -3px; }
}
> *{
&:last-child{ margin: 0 0 20px; }
}
}
}
}
}
form.cart.variations_form[current-image=""]{
div.variations{
div.value{
a.reset_variations{
display: none !important; margin: 0 0; visibility: hidden;
}
}
}
}
}
}
.pswp{
body.admin-bar & {
top: 32px;
@media(max-width: $screen-md-min){
top: 46px;
}
@media(max-width: $screen-phone){ top: 0px; }
}
.pswp__bg{ background: rgba(0,0,0,0.9); }
.pswp__zoom-wrap{
iframe.sns-prdpopvideo{
position: relative; left: 50%; top: 50%; @include translate(-50%, -50%); display: inline-block;
}
}
}