///// Elements Styles //////////////// ////////////// ////////////// ////////////// ////////////// ////////////// ////////////// .widget-products{ .products-grid > .row { border:none; } } .productinfo-show-discounts { font-size: $font-size-base - 2; margin: 20px 0!important; @include rtl-padding-left(75px); position: relative; color: #666; &:before { background: url('#{$image-theme-path}icon-show-discounts.png') no-repeat center center $brand-success; @include size (36px,36px); @include border-radius(50%); position: absolute; @include rtl-left(20px); top: 20px; content: ""; } padding: $alert-padding; margin-bottom: $line-height-computed; border: 1px solid transparent; border-radius: $alert-border-radius; @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); ul { list-style: none; @include rtl-padding-left(60px); li { padding: 3px 0; &:before { content: "\f14a"; font-family: "FontAwesome"; color: $brand-success; @include rtl-padding-right(8px); } } } } //reviews #reviews{ .reviews-summary { padding: 15px 30px; .review-summary-total{ text-align: center; font-weight: 400; .review-summary-result { @include size(90px, 90px); text-align: center; border: 2px solid $brand-warning; color: $brand-warning; line-height: 90px; font-size: 24px; @include border-radius(50%); margin-bottom: 8px; } } .review-summary-detal { overflow: hidden; display: block; .review-label{ color: $black; font-weight: 400; } .progress { } } } .comments{ border-top: 1px solid $border-color; padding: 20px 30px; .commentlist { margin: 15px 0; .comment { margin-bottom: 30px; } .comment-image { min-width: 100px; @include rtl-margin-right(20px); > span { display: block; margin-bottom: 5px; } .avatar { @include border-radius(50%); } .author { color: $black; } } .comment-text { border: 1px solid $border-color; padding: 15px 30px; @include border-radius( 3px); > div { margin-bottom: 7px; } } } } .review_form_wrapper { border-top: 1px solid $border-color; padding: 20px 30px; } .progress{ height: 15px; margin-bottom: 15px; } } ////////// Pages Styles ////////////// ////////////// ////////////// ////////////// ////////////// ////////////// ////////////// /** * Product Single Page */ .product-block{ position: relative; margin-bottom: 20px; list-style: none; .onsale{ position: absolute; @include size(36px, 36px); background-color: $brand-danger; color: #fff; top: 0; @include border-radius(50%); line-height: 36px; font-size: 12px; font-weight: 400; z-index: 100; } .image{ position: relative; text-align: center; overflow: hidden; padding: 2px; img{ height: auto; width: 100%; } a,.product-image{ display: inline-block; overflow: hidden; position: relative; } .image-effect{ top: 0; position: absolute; overflow: hidden; @include rtl-left(0); @include opacity(1); @include translate(-100%, 0px); @include transition(all 0.3s); } .image-hover{ @include transition(all 0.3s ); } &:hover{ .image-effect{ @include translate(0px,0px); } .image-hover{ @include translate(100%, 0px); } } .yith-wcwl-add-to-wishlist, .yith-wcwl-add-to-wishlist{ span{ display: none; } } } .caption{ margin-right: 10px; margin-left: 10px; text-align: center; } .price{ > * { width: auto; display: inline-block; span{ margin: 0 3px; @include inline-block(); } display: inline-block; text-align: center; @include font-size(font-size, $product-price-font-size); font-weight: $product-price-font-weight; } & > del{ @include rtl-text-align-right; } & > ins{ @include rtl-text-align-left; } } .name{ @include font-size(font-size, $product-name-font-size); line-height: $product-name-line-height; font-weight: normal; } .category{ text-transform: none; font-weight: $product-category-font-weight; font-style: $product-category-font-style; @include font-size(font-size, $product-category-font-size); a{ color: $product-category-color; &:hover{ color: $product-category-hover-color; } } } .rating{ text-align: center; .star-rating{ display: inline-block; } } .add_to_cart_button{ position: relative; &.loading{ .title-cart{ visibility: hidden; &:after{ visibility: visible; content: "Loadding.."; position: absolute; top: 9px; left: 5px; width: 100%; text-align: center; } } } } &:hover{ .button-action > div{ @include opacity(1); } } } //// button actions .button-action{ > div{ position: absolute; bottom: 20px; @include rtl-left (20px); @include size(35px, 35px); @include transition-property(all); @include transition-duration(0.35s); @media(min-width: $screen-sm-max){ @include opacity(0); } &.yith-wcwl-add-to-wishlist{ @include transition-delay(0.2s, 0s); } &.yith-compare{ @include rtl-left (58px); @include transition-delay(0.3s, 0s); .compare.added { overflow: hidden; color: transparent!important; &:before{ content: "\f0ec"; font-family: 'FontAwesome'; position: absolute; color: $white!important; @include size(35px, 35px); } } } &.quick-view{ @include rtl-left (96px); @include transition-delay(0.4s, 0s); } a{ background-color: $theme-color; @include border-radius(3px); color: $white!important; line-height: 35px; text-align: center!important; @include size(35px, auto); @include transition(all 0.35s); @include box-shadow(0 1px 2px #d9d9d9); i{ margin: 0!important; } &:hover{ background-color: $theme-color-second; border-color: $theme-color-second; color: $white; } } } .title, .clear{ display: none; } } /** * Products Listing In Grid Style */ .woocommerce .products-grid{ & > .row{ > li { list-style: none; width: 25%; float: left; padding-left:$grid-gutter-width/2; padding-right: $grid-gutter-width/2; margin-top: $grid-gutter-width; position: relative; @media(max-width: $screen-sm-max) { width: 33.333333%; } &:hover { > a { h3 { color: $theme-color; } } } > a { text-align: center; display: block; position: relative; h3 { font-size: 16px; color: $input-color-placeholder; font-weight: 500; margin: 15px 0; @include transition(.3s); } .rating { text-align: center; .star-rating { display: inline-block; float: none; overflow: hidden; position: relative; height: 1.1em; line-height: 1; font-size: 0.8em; width: 6em; letter-spacing: 2px; font-family: 'star'; color: #ffcc33; &:before { content: "\73\73\73\73\73"; color: $light-gray; 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; } } } .price { font-size: 18px; font-weight: 700; display: block; color: $theme-color; del { span { text-decoration: line-through; @include opacity(.5); font-size: 80%; } } > * span { display: inline-block; margin: 0 3px; } } } .add-cart { text-align: center; margin-top: 15px; display: none; } } } .product-block{ .caption{ margin-left: 20px; margin-right: 20px; } } div.product{ position: relative; &:after{ background-color:$border-color; position:auto; bottom: 0; right: 0; width: 100%; content: ""; height: 1px; } &.first{ clear: both; border-left:none; } .name{ max-height: 40px; overflow: hidden; } border:solid 1px $border-color; border-right:none; border-bottom:none; } } ul.pbr-w-products-list{ padding:0; margin:0!important; .product-block{ padding:15px; margin-bottom: 0; margin-top:0; &:nth-child(2n){ background: #F9F9F9; } img{ max-width: 90px; @include rtl-margin-right(15px); } } } .woocommerce .woocommerce-result-count { margin: 5px 0 0; } /** * Single product */ /*------------------------------------*\ Quantity inputs \*------------------------------------*/ .quantity { position : relative; margin : 0 auto; overflow : hidden; zoom : 1; span{ font-size: $font-size-base + 2; @include rtl-margin-right(5px); } @include rtl-float-left(); input.qty { @include border-right-radius(0); @include border-left-radius(0); padding : 0; @include size(45px, 40px); padding: 0; text-align: center; color: $black; font-weight: 400; border: 1px solid #e5e5e5; &:focus{ @include form-control-focus(); } } .plus, .minus { background : $white; @include rtl-float-right(); @include rtl-clear-right(); display : block; padding : 0; margin : 0; vertical-align : text-top; text-decoration : none; overflow : visible; text-decoration : none; cursor : pointer; line-height : 13px; font-size : 12px; color : $text-color; border : 1px solid $border-color; text-align: center; @include size(25px , 19px); } .plus { @include border-bottom-radius(0); @include rtl-right (0); } .minus { bottom: 0; @include rtl-right (0); @include border-top-radius(0); } } .single-product{ .summary{ @include font-size(font-size, $single-product-summary-font-size); .product_meta{ clear: both; margin-top: 0; padding: 10px 0 5px; a{ color: #a0a0a0; &:hover{ color: $theme-color; text-decoration: none; } } > span{ display: block; color: $black; } > div{ margin-bottom: $theme-margin / 2; } } .share_social { background-color: #f5f5f5; border: 1px solid #f0f0f0; padding: 15px; margin-top: 15px; @include border-radius(4px); span{ color: $black; line-height: 35px; } } .clear{ display:none; } form.cart{ @include rtl-float-left(); margin-top: 15px; } .yith-wcwl-add-to-wishlist{ @include rtl-float-left(); position: relative; .ajax-loading{ position: absolute; top: 5px; @include rtl-left(20px); } } a.compare{ @include rtl-float-left(); &.added{ position: relative !important; &:before{ position: absolute; top: -4px; content: "\f0ec"; font-family: "FontAwesome"; display: block; @include square(30px); @include rtl-left(-35px); } } } } .woocommerce-tabs { .panel { border: none; border-radius: 0; @include box-shadow(none); h2 { position: relative; padding: 18px 0 15px; margin-bottom: 25px; border-bottom: 1px solid $border-color; &:before { content: ""; position: absolute; top: 0; @include rtl-left(0); width: 40px; height: 6px; background-color: $theme-color; } } } } } .product > #reviews { border: none; #comments { h2 { position: relative; padding: 18px 0 15px; margin-bottom: 25px; border-bottom: 1px solid $border-color; &:before { content: ""; position: absolute; top: 0; @include rtl-left(0); width: 40px; height: 6px; background-color: $theme-color; } } .commentlist { padding: 0; .comment { margin: 0; .comment_container { padding-bottom: 25px; img.avatar { border: none; padding: 0; width: 55px; } .comment-text { @include rtl-margin-left(70px); padding: 0; border: none; .description { p:last-child { margin-bottom: 0; } } } } } } } #review_form_wrapper { #review_form { #respond { .comment-reply-title { position: relative; padding: 18px 0 15px; margin-bottom: 25px; border-bottom: 1px solid $border-color; font-size: 30px; &:before { content: ""; position: absolute; top: 0; @include rtl-left(0); width: 40px; height: 6px; background-color: $theme-color; } } .comment-form { > p { margin-bottom: 15px; > label { display: block; } input[type=text] { height: 34px; border: 1px solid $border-color; padding: 6px 12px; line-height: 20px; width: 100%; } textarea { border: 1px solid $border-color; padding: 6px 12px; height: auto; width: 100%; } &.form-submit { margin-top: 20px; margin-bottom: 0; } } } } } } } .upsells.products { margin-bottom: 30px; h2 { position: relative; padding: 18px 0 15px; margin-bottom: 25px; border-bottom: 1px solid $border-color; &:before { content: ""; position: absolute; top: 0; @include rtl-left(0); width: 40px; height: 6px; background-color: $theme-color; } } .products.products-grid { margin-top: -30px; } } .related.products { h2 { position: relative; padding: 18px 0 15px; margin-bottom: 25px; border-bottom: 1px solid $border-color; &:before { content: ""; position: absolute; top: 0; @include rtl-left(0); width: 40px; height: 6px; background-color: $theme-color; } } .products.products-grid { margin-top: -30px; } } .woocommerce .woocommerce-message { border-top-color: $theme-color; &:before { color: $theme-color; } } // product woocommerce tabs .woocommerce div.product .woocommerce-tabs{ margin-bottom: 30px; ul.tabs{ background:none; padding: 0; &:before, &:after { content: none !important; } li{ border:none; margin: 0; padding: 0; border-radius: 3px; &.active{ background-color: $gray-lighter; } &:after, &:before, &.active:before, &.active:after{ box-shadow:0px 0px 0 #fff!important; border:none !important; } a{ padding: 5px 20px; border-radius: 3px; font-size: 13px; text-transform: uppercase; } } } .wc-tab{ padding: 0; } } /** * Category And Listing Page */ // styling sortorder and display mode .products-top-wrap{ background:none ; .woocommerce-ordering{ margin-bottom:0px; select { box-shadow: none !important; &:focus { border-color: $border-color; } } } } /** * Checkout Page */ /** * Thanks you page */