File "_shop-single.scss"
Full Path: /home/ovanhxso/public_html/sass/page/_shop-single.scss
File size: 8.6 KB
MIME-type: text/plain
Charset: utf-8
/*--------------------------------------------------------------
#shop-single-page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#11.1 shop-single-section
--------------------------------------------------------------*/
.shop-single-section {
/*** product slider ***/
.shop-single-slider {
.slider-for {
text-align: center;
img {
display: inline-block;
}
}
.slider-nav {
padding: 0 25px;
margin-top: 35px;
}
.slider-nav > i {
position: absolute;
top: 50%;
left: 0;
@include translatingY();
z-index: 100;
}
.slider-nav > i:hover {
cursor: pointer;
}
.slider-nav .nav-btn-rt {
left: auto;
right: 0;
}
.slider-nav .slick-slide {
text-align: center;
img {
display: inline-block;
}
}
}
.product-details {
padding: 30px 30px 93px;
@include media-query(1199px) {
padding: 40px 30px 85px;
}
@include media-query(991px) {
margin-top: 45px;
padding: 40px 30px;
}
@include media-query(767px) {
padding: 0;
}
h2 {
font-size: 28px;
font-size: calc-rem-value(28);
line-height: 1.4em;
margin: 0 0 0.33em;
@include media-query(767px) {
font-size: 22px;
font-size: calc-rem-value(22);
}
}
.price {
font-size: 36px;
font-size: calc-rem-value(36);
color: $theme-primary-color;
margin: 7px 0 14px;
@include media-query(991px) {
font-size: 30px;
font-size: calc-rem-value(30);
}
@include media-query(767px) {
font-size: 25px;
font-size: calc-rem-value(25);
}
.old {
font-size: 24px;
font-size: calc-rem-value(24);
font-weight: normal;
color: lighten($text-color, 20%);
text-decoration: line-through;
display: inline-block;
margin-left: 5px;
@include media-query(991px) {
font-size: 20px;
font-size: calc-rem-value(20);
}
@include media-query(767px) {
font-size: 18px;
font-size: calc-rem-value(18);
}
}
}
p {
margin-bottom: 1.3em;
}
p:last-child {
margin: 0;
}
/*** product option ***/
.product-option {
margin-top: 45px;
}
.product-option .product-row {
overflow: hidden;
button:after {
display: none;
}
}
.product-option .product-row > div {
height: 35px;
display: inline-block;
float: left;
}
.product-option .product-row > div + div {
margin-left: 15px;
}
.product-option .product-row > div:first-child {
width: 85px;
}
.product-option .product-row > div:last-child .theme-btn:hover {
background: $theme-primary-color;
border-color: $theme-primary-color;
color: $white;
}
.product-option .theme-btn {
font-size: 12px;
font-size: calc-rem-value(12);
font-weight: 600;
padding: 0 20px;
height: 35px;
line-height: 27px;
outline: 0;
&:hover {
background-color: $theme-primary-color;
color: $white;
border-color: $theme-primary-color;
}
@include media-query(767px) {
font-size: 14px;
font-size: calc-rem-value(14);
}
&:before {
display: none;
}
&:hover {
background: $heading-color;
color: $white;
}
}
.product-option .heart-btn i {
font-size: 15px;
font-size: calc-rem-value(15);
}
.product-option .product-row > div:last-child .theme-btn {
font-size: 18px;
font-size: calc-rem-value(18);
}
#product-count {
border-radius: 0;
border: 1px solid lighten($black, 90%);
}
#product-count:focus {
box-shadow: none;
outline: none;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up,
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
border-radius: 0;
border-color: lighten($black, 90%);
&:hover {
background-color: $theme-primary-color;
color: $white;
}
}
}
/*** product info ***/
.product-info {
margin-top: 75px;
h4 {
font-size: 15px;
font-size: calc-rem-value(15);
font-weight: 400;
margin: 0;
line-height: 1.7em;
}
p {
margin-bottom: 1.3em;
}
.tab-pane p:last-child {
margin-bottom: 0;
}
/*** tabs ***/
.nav-tabs {
border: 0;
@include media-query(767px) {
margin-bottom: 20px;
}
}
.nav-tabs li {
border: 2px solid #efefef;
margin-right: 1px;
}
.nav-tabs li.active a {
border: 0;
outline: 0;
}
.nav-tabs a {
font-weight: 700;
font-size: 15px;
font-size: calc-rem-value(15);
color: $text-color;
border: 0;
border-radius: 0;
margin: 0;
display: block;
padding: 12px 20px 11px;
@include media-query(767px) {
font-size: 14px;
font-size: calc-rem-value(14);
font-weight: normal;
padding: 10px 10px 8px;
text-transform: none;
}
}
.nav-tabs a:hover,
.nav-tabs .active a {
background: $theme-primary-color;
color: $white;
}
.nav-tabs .active,
.nav-tabs li:hover {
border-color: $theme-primary-color;
}
.tab-content {
border: 2px solid #efefef;
padding: 35px 25px;
margin-top: -1px;
@include media-query(767px) {
border: 0;
padding: 0;
margin: 0;
}
}
/*** client rv ***/
.client-rv {
overflow: hidden;
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
.client-pic {
width: 60px;
float: left;
@include media-query(767px) {
width: 100%;
float: none;
margin-bottom: 10px;
}
}
.details {
width: calc(100% - 80px);
float: right;
@include media-query(767px) {
width: 100%;
float: none;
}
}
.name-rating-time {
border-bottom: 1px solid lighten($black, 90%);
@include media-query(767px) {
padding-bottom: 3px;
}
}
.name-rating-time > div,
.name-rating > div {
display: inline-block;
font-size: 14px;
font-size: calc-rem-value(14);
@include media-query(767px) {
font-size: 12px;
font-size: calc-rem-value(12);
display: block;
}
}
.rating {
font-size: 12px;
color: $theme-primary-color;
padding-left: 12px;
@include media-query(767px) {
padding-left: 0;
margin: 4px 0 7px;
}
}
.name-rating-time .time {
float: right;
color: lighten($black, 70%);
text-transform: uppercase;
@include media-query(767px) {
float: none;
}
}
.review-body {
padding-top: 12px;
}
}
/*** review form ***/
.review-form-wrapper {
margin-top: 50px;
@include widther(1200px) {
padding-left: 15px;
}
}
.review-form {
@include media-query(991px) {
margin-top: 45px;
}
h4 {
margin-bottom: 1.73em;
font-weight: 400;
}
form {
input,
textarea {
background: #fbfbfb;
border-radius: 0;
box-shadow: none;
height: 40px;
border: 2px solid #efefef;
}
input:focus,
textarea:focus {
box-shadow: none;
outline: none;
}
textarea {
height: 130px;
}
> div {
margin-bottom: 27px;
}
> div:last-child {
margin-bottom: 0;
}
.rating-wrapper > div {
display: inline-block;
@include media-query(767px) {
display: block;
float: none !important;
}
}
.rating-wrapper > div:last-child {
float: right;
@include media-query(767px) {
margin-top: 20px;
}
}
.rating a {
font-size: 14px;
color: lighten($black, 80%);
display: inline-block;
margin-right: 10px;
@include media-query(767px) {
font-size: 12px;
margin-right: 5px;
}
}
.rating a:last-child {
margin: 0;
}
.rating a:hover {
color: $theme-primary-color;
}
.theme-btn-s4 {
background-color: transparent;
color: #908f8f;
outline: 0;
box-shadow: none;
&:hover {
background-color: $theme-primary-color;
color: $white;
}
@include widther(767px) {
font-size: 15px;
font-size: calc-rem-value(15);
padding: 0 20px;
}
}
}
}
.review-form .submit button {
border: 0;
outline: none;
@include transition-time(0.3s);
&:hover {
background: darken($theme-primary-color, 5%);
color: $white;
}
}
}
.slider-nav .slick-slide:focus {
outline: none;
}
}