//========== GENERAL VARS ==========//
$app-brand-prefix : leo;
$block-prefix : block;
$block-selector : block;
$block-heading-selector : title_block;
$block-content-selector : block_content;
$ease : cubic-bezier(0.25, 0.46, 0.45, 0.94);
/***********************************************************************/
// some basic colors
$white: #FFFFFF;
$black: #000000;
$blue: #6087D2; // Skin blue
$wild-sand: #ffffff;
$silver: #f5f5f5;
$red: #ff0000;
$red-light: #ff9999;
$yellow-light: #ffdc73;
$nocolor: transparent;
// Variables paths
// ========================================================================
$font-family: Roboto;
$font-family-tertiary : Roboto; // font for menu
$font-family-septenary : Roboto; // font for slideshow
$font-family-senary : Roboto; // font for Price
$font-icon : "FontAwesome";
$theme-font-size: 14px;
$theme-font-size-medium: 18px;
//////////////////// Variables defined for Themes + Skins ////////////////
$theme-color-default: #000000;
$theme-color-secondary: #656565;
$theme-color-tertiary: #ba0000;
$theme-color-four: #b34a4a;
$theme-bg-color: #ffffff;
$theme-text-color: #000000;
$theme-text-color-secondary: #666666;
$theme-text-color-tertiary: #666666;
$theme-text-banner-color: #ffffff;
//-------- BORDERS
$border-color: #e5e5e5;
$main-border: 1px solid $border-color;
$main-border-hover: 1px solid $theme-color-secondary;
//--------- BUTTON
$theme-button-one-color: #ffffff;
$theme-button-one-bg: #000000;
$theme-button-one-border: #000000;
$theme-button-one-hover-color: #000000;
$theme-button-one-hover-bg: #ffffff;
$theme-button-one-hover-border: #000000;
$theme-button-two-color: #000000;
$theme-button-two-bg: #ffffff;
$theme-button-two-border: #000000;
$theme-button-two-hover-color: #ffffff;
$theme-button-two-hover-bg: #000000;
$theme-button-two-hover-border: #000000;
//--------- BACKGROUNDS
$dark-background: $black;
$light-background: $white;
// Variables
// --------------------------------------------------
$rtl-left : left;
$rtl-right : right;
$theme-gutter-width: 30px;
// Button
// ========================================================================
// add to cart
$button-addtocart-bg: $white;
$button-addtocart-color: $theme-text-color;
$button-addtocart-border: $main-border;
$button-addtocart-bg-hover: $white;
$button-addtocart-color-hover: $theme-color-secondary ;
$button-addtocart-border-hover: $main-border;
$button-addtocart-font-size: $theme-font-size - 3;
$button-addtocart-font-family: $font-family-tertiary;
//---------- Product Elements
// price
$price-color: $theme-color-default;
$product-price-color: $theme-color-default;
$product-price-reduction-bg: #f2434a;
$product-price-old-color: #777777;
$product-price-font-family: $font-family-senary;
$product-price-font-size: $theme-font-size + 10;
// name
$product-name-color: $black;
$product-name-hover-color: $theme-color-secondary;
$product-name-font-family: $font-family;
$product-name-font-size: $theme-font-size ;
// image
$product-image-border: $main-border;
$product-image-radius: 0px;
// rating
$product-rating-font-size: 12px;
//========== MIXINS ==========//
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
@mixin tab-focus() {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
@mixin size($width, $height) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
@mixin placeholder($color: $input-color-placeholder) {
&::-moz-placeholder { color: $color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin hide-text() {
font: #{0/0} a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@mixin text-hide() {
@include hide-text();
}
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@mixin transition($transition...) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-property($transition-property...) {
-webkit-transition-property: $transition-property;
transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transition-transform($transition...) {
-webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition;
transition: transform $transition;
}
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees); // IE9 only
transform: rotate($degrees);
}
@mixin scale($scale-args...) {
-webkit-transform: scale($scale-args);
-ms-transform: scale($scale-args); // IE9 only
transform: scale($scale-args);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y); // IE9 only
transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
@mixin rotateX($degrees) {
-webkit-transform: rotateX($degrees);
-ms-transform: rotateX($degrees); // IE9 only
transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
-webkit-transform: rotateY($degrees);
-ms-transform: rotateY($degrees); // IE9 only
transform: rotateY($degrees);
}
@mixin perspective($perspective) {
-webkit-perspective: $perspective;
-moz-perspective: $perspective;
perspective: $perspective;
}
@mixin perspective-origin($perspective) {
-webkit-perspective-origin: $perspective;
-moz-perspective-origin: $perspective;
perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin; // IE9 only
transform-origin: $origin;
}
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-timing-function($timing-function) {
-webkit-animation-timing-function: $timing-function;
animation-timing-function: $timing-function;
}
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count) {
-webkit-animation-iteration-count: $iteration-count;
animation-iteration-count: $iteration-count;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin backface-visibility($visibility){
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
backface-visibility: $visibility;
}
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-ms-user-select: $select; // IE10+
user-select: $select;
}
@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
-webkit-column-count: $column-count;
-moz-column-count: $column-count;
column-count: $column-count;
-webkit-column-gap: $column-gap;
-moz-column-gap: $column-gap;
column-gap: $column-gap;
}
@mixin hyphens($mode: auto) {
word-wrap: break-word;
-webkit-hyphens: $mode;
-moz-hyphens: $mode;
-ms-hyphens: $mode; // IE10+
-o-hyphens: $mode;
hyphens: $mode;
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
ackground-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
@mixin reset-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
background-size: $width-1x $height-1x;
}
}
@mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
@mixin nav-divider($color: #e5e5e5) {
height: 1px;
margin: (($line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: $color;
}
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
& > .panel-heading {
color: $heading-text-color;
background-color: $heading-bg-color;
border-color: $heading-border;
+ .panel-collapse .panel-body {
border-top-color: $border;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: $border;
}
}
}
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}
@mixin table-row-variant($state, $background) {
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.#{$state},
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
background-color: $background;
}
}
.table-hover > tbody > tr {
> td.#{$state}:hover,
> th.#{$state}:hover,
&.#{$state}:hover > td,
&.#{$state}:hover > th {
background-color: darken($background, 5%);
}
}
}
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
}
a.list-group-item-#{$state} {
color: $color;
.list-group-item-heading { color: inherit; }
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: $color;
border-color: $color;
}
}
}
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
&:hover,
&:focus,
&:active,
&.active {
color: $color;
background-color: darken($background, 8%);
border-color: darken($border, 12%);
}
.open & { &.dropdown-toggle {
color: $color;
background-color: darken($background, 8%);
border-color: darken($border, 12%);
} }
&:active,
&.active {
background-image: none;
}
.open & { &.dropdown-toggle {
background-image: none;
} }
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
}
}
.badge {
color: $background;
background-color: $color;
}
}
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
}
&:first-child {
> a,
> span {
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius);
}
}
}
}
@mixin label-variant($color) {
background-color: $color;
&[href] {
&:hover,
&:focus {
background-color: darken($color, 10%);
}
}
}
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color;
}
a#{$parent}:hover {
background-color: darken($color, 10%);
}
}
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color;
}
a#{$parent}:hover {
color: darken($color, 10%);
}
}
@mixin navbar-vertical-align($element-height) {
margin-top: (($navbar-height - $element-height) / 2);
margin-bottom: (($navbar-height - $element-height) / 2);
}
@mixin progress-bar-variant($color) {
background-color: $color;
.progress-striped & {
@include gradient-striped();
}
}
@mixin responsive-visibility($parent) {
#{$parent} {
display: block !important;
}
table#{$parent} { display: table; }
tr#{$parent} { display: table-row !important; }
th#{$parent},
td#{$parent} { display: table-cell !important; }
}
@mixin responsive-invisibility($parent) {
#{$parent} {
display: none !important;
}
}
@mixin container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@include clearfix();
}
@mixin make-row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
position: relative;
float: left;
width: percentage(($columns / $grid-columns));
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
@media (min-width: $screen-xs-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-xs-column-push($columns) {
@media (min-width: $screen-xs-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-xs-column-pull($columns) {
@media (min-width: $screen-xs-min) {
right: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-sm-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-offset($columns) {
@media (min-width: $screen-sm-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-push($columns) {
@media (min-width: $screen-sm-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-pull($columns) {
@media (min-width: $screen-sm-min) {
right: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-md-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-offset($columns) {
@media (min-width: $screen-md-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-push($columns) {
@media (min-width: $screen-md-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-pull($columns) {
@media (min-width: $screen-md-min) {
right: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-lg-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-offset($columns) {
@media (min-width: $screen-lg-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-push($columns) {
@media (min-width: $screen-lg-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-pull($columns) {
@media (min-width: $screen-lg-min) {
right: percentage(($columns / $grid-columns));
}
}
@mixin make-grid-columns() {
$list: '';
$i: 1;
$list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
@mixin float-grid-columns($class) {
$list: '';
$i: 1;
$list: ".col-#{$class}-#{$i}";
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-#{$class}-#{$i}";
}
#{$list} {
float: left;
}
}
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
}
}
@if ($type == push) {
.col-#{$class}-push-#{$index} {
left: percentage(($index / $grid-columns));
}
}
@if ($type == pull) {
.col-#{$class}-pull-#{$index} {
right: percentage(($index / $grid-columns));
}
}
@if ($type == offset) {
.col-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $grid-columns));
}
}
}
@mixin loop-grid-columns($columns, $class, $type) {
@for $i from 0 through $columns {
@include calc-grid-column($i, $class, $type);
}
}
@mixin make-grid($class) {
@include float-grid-columns($class);
@include loop-grid-columns($grid-columns, $class, width);
@include loop-grid-columns($grid-columns, $class, pull);
@include loop-grid-columns($grid-columns, $class, push);
@include loop-grid-columns($grid-columns, $class, offset);
}
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: $text-color;
}
.form-control {
border-color: $border-color;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken($border-color, 10%);
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
@include box-shadow($shadow);
}
}
.input-group-addon {
color: $text-color;
border-color: $border-color;
background-color: $background-color;
}
.form-control-feedback {
color: $text-color;
}
}
@mixin form-control-focus($color: $input-border-focus) {
$color-rgba: rgba(red($color), green($color), blue($color), .6);
&:focus {
border-color: $color;
outline: 0;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
}
}
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}
select#{$parent} {
height: $input-height;
line-height: $input-height;
}
textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}
@mixin border-exclude-top($border-deep, $border-type , $border-color ){
border-bottom: $border-deep $border-type $border-color ;
border-left: $border-deep $border-type $border-color ;
border-right: $border-deep $border-type $border-color ;
}
@mixin border-exclude-bottom($border-deep, $border-type , $border-color ){
border-top: $border-deep $border-type $border-color ;
border-left: $border-deep $border-type $border-color ;
border-right: $border-deep $border-type $border-color ;
}
@mixin border-exclude-left($border-deep, $border-type , $border-color ){
border-top: $border-deep $border-type $border-color ;
border-bottom: $border-deep $border-type $border-color ;
border-right: $border-deep $border-type $border-color ;
}
@mixin border-exclude-right($border-deep, $border-type , $border-color ){
border-top: $border-deep $border-type $border-color ;
border-bottom: $border-deep $border-type $border-color ;
border-left: $border-deep $border-type $border-color ;
}
@mixin rounded-corners ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin clearboxstyle(){
background: none;
border:none;
}
@mixin clearfloat(){
float: none;
width: 100%;
}
@mixin transform-style($transform-style){
-webkit-transform-style: $transform-style;
-moz-transform-style: $transform-style;
-ms-transform-style: $transform-style;
-o-transform-style: $transform-style;
transform-style: $transform-style;
}
@mixin backface-visibility($backface-visibility){
backface-visibility: $backface-visibility; /* W3C */
-webkit-backface-visibility: $backface-visibility; /* Safari & Chrome */
-moz-backface-visibility: $backface-visibility; /* Firefox */
-ms-backface-visibility: $backface-visibility; /* Internet Explorer */
-o-backface-visibility: $backface-visibility; /* Opera */
}
@mixin animation-theme($animation-duration, $animation-fill-mode, $animation-name){
-webkit-animation-duration: $animation-duration;
-moz-animation-duration: $animation-duration;
-ms-animation-duration: $animation-duration;
-o-animation-duration: $animation-duration;
animation-duration: $animation-duration;
-webkit-animation-fill-mode: $animation-fill-mode;
-moz-animation-fill-mode: $animation-fill-mode;
-ms-animation-fill-mode: $animation-fill-mode;
-o-animation-fill-mode: $animation-fill-mode;
animation-fill-mode: $animation-fill-mode;
-webkit-animation-name: $animation-name;
-moz-animation-name: $animation-name;
-ms-animation-name: $animation-name;
-o-animation-name: $animation-name;
animation-name: $animation-name;
}
@mixin perspective($perspective){
-webkit-perspective: $perspective;
-ms-perspective: $perspective;
-moz-perspective: $perspective;
-o-perspective: $perspective;
perspective: $perspective;
}
@mixin transition-timing-function($timing-function) {
-moz-transition-timing-function: $timing-function;
-o-transition-timing-function: $timing-function;
-webkit-transition-timing-function: $timing-function;
transition-timing-function: $timing-function;
}
@mixin transform($arguments){
-webkit-transform: $arguments;
-moz-transform: $arguments;
-ms-transform: $arguments;
-o-transform: $arguments;
}
@mixin appearance($appearance){
appearance: $appearance;
-moz-appearance: $appearance;
-ms-appearance: $appearance;
-o-appearance: $appearance;
-webkit-appearance: $appearance;
}
@mixin rgba($colour, $alpha)
{
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
$ieAlphaColour: argb($alphaColour);
background-color: $colour;
background-color: $alphaColour;
zoom: 1;
background-color: transparent\9;
}
@mixin border-rgba($colour, $alpha)
{
$alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
$ieAlphaColour: argb($alphaColour);
border-color: $colour;
border-color: $alphaColour;
zoom: 1;
border-color: transparent\9;
}
@mixin sub-heading($sub-heading-bg, $sub-heading-color) {
color: $sub-heading-color;
a{
color: $sub-heading-color;
&:hover{
color: $sub-heading-color;
}
}
padding: $base-box-padding;
position: relative;
background: $sub-heading-bg;
}
@mixin sub-heading-before {
height: 0;
width: 0;
@include rtl-right(45%);
top: 100%;
content: "";
position: absolute;
border: 4px solid transparent;
border-top-color: $gray-lighter;
}
@mixin background-hover {
color: $text-color;
background: rgba(228, 50, 40, 0.3);
}
@mixin button-variant-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
color: $color;
background-color: $background;
border-color: $border;
@include transition(all 0.35s ease);
&:hover,
&:focus,
&:active,
&.active {
color: $colorhover;
background-color: $bghover;
border-color: $borderhover ;
@include transition(all 0.35s ease);
}
.open & { &.dropdown-toggle {
color: $colorhover;
background-color: $bghover;
border-color: $borderhover ;
} }
&:active,
&.active {
background-image: none;
}
.open & { &.dropdown-toggle {
background-image: none;
} }
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
}
}
.badge {
color: $background;
background-color: $color;
}
}
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
& .#{$block-heading-selector} {
color: $heading-text-color;
a{
color: $heading-text-color;
}
background-color: $heading-bg-color;
border-color: $heading-border;
+ .#{$block-prefix}-collapse .#{$block-content-selector} {
border-top-color: $border;
}
}
& > .#{$block-prefix}-footer {
+ .#{$block-prefix}-collapse .#{$block-prefix}-body {
border-bottom-color: $border;
}
}
}
@mixin container-layout-variant($color, $background){
background: $background;
color: $color;
}
@mixin rtl-base-simple ($property, $direction) {
#{$property}:$direction;
.rtl & {
@if $direction == $rtl-right {
#{$property}:$rtl-left;
}
@else {
#{$property}:$rtl-right;
}
}
}
@mixin rtl-base-inherit ($property, $direction, $value, $inherit : inherit) {
#{$property}-#{$direction}: $value;
.rtl & {
@if $direction == $rtl-right {
#{$property}-#{$rtl-left}: $value;
}
@else {
#{$property}-#{$rtl-right}: $value;
}
#{$property}-#{$direction}: $inherit;
}
}
@mixin rtl-base-toprightbottomleft ($property, $t, $r, $b, $l) {
#{$property}: $t $r $b $l;
.rtl & {
#{$property}: $t $l $b $r;
}
}
@mixin rtl-direction ($forBody : true) {
direction: ltr;
@if $forBody {
&.rtl {
direction: rtl;
}
}
@else {
.rtl & {
direction: rtl;
}
}
}
@mixin rtl-font-family ($ltr, $rtl, $forBody : false) {
font-family: $ltr;
@if $forBody {
&.rtl, &.non-latin {
font-family:$rtl;
}
}
@else {
.rtl &, .non-latin & {
font-family:$rtl;
}
}
}
@mixin rtl-margin ($t, $r, $b, $l) {
@include rtl-base-toprightbottomleft(margin,$t, $r, $b, $l);
}
@mixin rtl-margin-left ($value) {
@include rtl-base-inherit(margin,$rtl-left,$value);
}
@mixin rtl-margin-right ($value) {
@include rtl-base-inherit(margin,$rtl-right,$value);
}
@mixin rtl-padding ($t, $r, $b, $l) {
@include rtl-base-toprightbottomleft(padding,$t, $r, $b, $l);
}
@mixin rtl-padding-left ($value) {
@include rtl-base-inherit(padding,$rtl-left,$value);
}
@mixin rtl-padding-right ($value) {
@include rtl-base-inherit(padding,$rtl-right,$value);
}
@mixin rtl-border-width ($t,$r,$b,$l) {
@include rtl-base-toprightbottomleft(border-width,$t,$r,$b,$l);
}
@mixin rtl-border-style ($t,$r,$b,$l) {
@include rtl-base-toprightbottomleft(border-style,$t,$r,$b,$l);
}
@mixin rtl-border-left ($value) {
@include rtl-base-inherit(border,$rtl-left,$value);
}
@mixin rtl-border-right ($value) {
@include rtl-base-inherit(border,$rtl-right,$value);
}
@mixin rtl-left ($value) {
#{$rtl-left}: $value;
.rtl & {
#{$rtl-right}: $value;
#{$rtl-left}: auto;
}
}
@mixin rtl-right ($value) {
#{$rtl-right}: $value;
.rtl & {
#{$rtl-left}: $value;
#{$rtl-right}: auto;
}
}
@mixin rtl-text-align-left () {
@include rtl-base-simple(text-align, $rtl-left);
}
@mixin rtl-text-align-right () {
@include rtl-base-simple(text-align, $rtl-right);
}
@mixin rtl-float-left () {
@include rtl-base-simple(float, $rtl-left);
}
@mixin rtl-float-right () {
@include rtl-base-simple(float, $rtl-right);
}
@mixin rtl-background-position-left ($vertical) {
background-position:$rtl-left $vertical !important;
.rtl & {
background-position:$rtl-right $vertical !important;
}
}
@mixin rtl-background-position-right ($vertical) {
background-position:$rtl-right $vertical;
.rtl & {
background-position:$rtl-left $vertical;
}
}
@mixin rtl-background-position-percent ($vertical, $horPercent) {
background-position:$horPercent $vertical;
.rtl & {
background-position:100% - $horPercent $vertical;
}
}
@mixin rtl-text-shadow ($x, $rest) {
text-shadow: $x $rest;
.rtl & {
text-shadow: -1 * $x $rest;
}
}
@mixin rtl-box-shadow ($x, $rest) {
-moz-box-shadow: $x $rest;
-webkit-box-shadow: $x $rest;
box-shadow: $x $rest;
.rtl & {
-moz-box-shadow: -1 * $x $rest;
-webkit-box-shadow: -1 * $x $rest;
box-shadow: -1 * $x $rest;
}
}
@mixin rtl-border-radius($tl, $tr, $br, $bl) {
-moz-border-radius: $tl $tr $br $bl;
-webkit-border-radius: $tl $tr $br $bl;
border-radius: $tl $tr $br $bl;
.rtl & {
-moz-border-radius: $tr $tl $bl $br;
-webkit-border-radius: $tr $tl $bl $br;
border-radius: $tr $tl $bl $br;
}
}
@mixin rtl-border-radius-topright ($value) {
-moz-border-top-#{$rtl-right}-radius: $value;
-webkit-border-top-#{$rtl-right}-radius: $value;
border-top-#{$rtl-right}-radius: $value;
.rtl & {
-moz-border-top-#{$rtl-left}-radius: $value;
-webkit-border-top-#{$rtl-left}-radius: $value;
border-top-#{$rtl-left}-radius: $value;
-moz-border-top-#{$rtl-right}-radius: inherit;
-webkit-border-top-#{$rtl-right}-radius: inherit;
border-top-#{$rtl-right}-radius: inherit;
}
}
@mixin rtl-border-radius-bottomright ($value) {
-moz-border-bottom-#{$rtl-right}-radius: $value;
-webkit-border-bottom-#{$rtl-right}-radius: $value;
border-bottom-#{$rtl-right}-radius: $value;
.rtl & {
-moz-border-bottom-#{$rtl-left}-radius: $value;
-webkit-border-bottom-#{$rtl-left}-radius: $value;
border-bottom-#{$rtl-left}-radius: $value;
-moz-border-bottom-#{$rtl-right}-radius: inherit;
-webkit-border-bottom-#{$rtl-right}-radius: inherit;
border-bottom-#{$rtl-right}-radius: inherit;
}
}
@mixin rtl-border-radius-topleft ($value) {
-moz-border-top-#{$rtl-left}-radius: $value;
-webkit-border-top-#{$rtl-left}-radius: $value;
border-top-#{$rtl-left}-radius: $value;
.rtl & {
-moz-border-top-#{$rtl-right}-radius: $value;
-webkit-border-top-#{$rtl-right}-radius: $value;
border-top-#{$rtl-right}-radius: $value;
-moz-border-top-#{$rtl-left}-radius: inherit;
-webkit-border-top-#{$rtl-left}-radius: inherit;
border-top-#{$rtl-left}-radius: inherit;
}
}
@mixin rtl-border-radius-bottomleft ($value) {
-moz-border-bottom-#{$rtl-left}-radius: $value;
-webkit-border-bottom-#{$rtl-left}-radius: $value;
border-bottom-#{$rtl-left}-radius: $value;
.rtl & {
-moz-border-bottom-#{$rtl-right}-radius: $value;
-webkit-border-bottom-#{$rtl-right}-radius: $value;
border-bottom-#{$rtl-right}-radius: $value;
-moz-border-bottom-#{$rtl-left}-radius: inherit;
-webkit-border-bottom-#{$rtl-left}-radius: inherit;
border-bottom-#{$rtl-left}-radius: inherit;
}
}
@mixin inline-block(){
display: inline-block;
vertical-align: middle;
}
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
//========== SASS ==========//
//==========================//
//========== COLLECTION PRODUCT GRID ==========//
.product-price{
font-family: $product-price-font-family;
font-size: $product-price-font-size;
line-height:25px;
padding: 0px;
}
.price{
color: $price-color;
font-weight: 500;
&.sale-price{
color: $product-price-color;
}
}
.price-old, .old-price,.cd-new-price {
font-size: $product-price-font-size - 8;
color: $product-price-old-color;
font-style:normal;
font-weight: 300;
text-decoration: line-through;
}
.product_list{
&.list{
.product_block{
border: 0px;
}
}
}
.product_list_owl{
margin-left: -$theme-gutter-width/2;
margin-right: -$theme-gutter-width/2;
.owl-item{
margin: $theme-gutter-width 0px;
padding: 0px $theme-gutter-width/2;
}
}
.product-block{
position: relative;
margin: 0px;
overflow: hidden;
@include box-sizing(border-box);
.product-meta{
position: relative;
text-align: left;
}
// price
.content_price{
margin:0;
padding:8px 0 5px;
text-align:center;
height:54px;
float:none !important;
}
// desc
.product-desc{
overflow: hidden;
display: none;
padding: 5px 0px;
color: $theme-text-color-tertiary;
font-size: $theme-font-size - 1;
font-weight: 300;
}
// title name
.name{
text-transform: none;
margin: 0px;
padding:10px 0;
min-height: 40px;
/*height:54px;*/
text-align:center;
overflow:hidden;
text-transform:uppercase;
a {
color: $product-name-color;
font-size: $product-name-font-size;
font-family: $product-name-font-family;
font-weight: normal;
text-decoration: none;
line-height: 20px;
text-align:center;
&:hover{
color: $product-name-hover-color;
}
}
}
// image
.image{
position: relative;
overflow: hidden;
text-align: center;
@include rounded-corners ($product-image-radius);
margin: 0px;
border: 0px;
.product_img_link{
position:relative;
display:inline-block;
width:100%;
&:before{
position:absolute;
top:0;
left:0;
content:"";
@include size(100%,100%);
@include rgba(#000,0.2);
z-index:10;
@include opacity(0);
@include transition(all 0.4s $ease 0s);
}
}
}
.product-additional{
position: absolute;
top: 0px;
visibility: hidden;
left: 0px;
width: 100%;
perspective: 500px;
@include opacity(0);
@include transition(all 0.6s ease-in-out);
z-index:8;
}
&:hover {
.product-additional{
visibility: visible;
@include transition(all 0.3s ease-in-out);
@include opacity(1);
}
}
// label
.product-flags{float: left;}
.availability{}
.online_only{}
.discount{}
// button
.functional-buttons{
width: 100%;
position:absolute;
bottom:5px;
left:0;
padding:10px;
z-index:11;
@include opacity(0);
visibility:hidden;
@include transition(all 0.4s $ease 0s);
.btn{
height:40px;
padding-left:12px;
padding-right:12px;
line-height:24px;
&.btn-wishlist{
span{
font-size:0px;
}
}
}
.cart{
/* @include rtl-float-left();*/
}
.wishlist{
@include rtl-float-right();
.btn-wishlist{
padding: 0px;
width:40px;
line-height:40px;
}
}
.view_detail{
@include rtl-float-left();
.lnk_view{
padding: 0px;
display: block;
span{
font-size: 0px;
}
}
}
}
.quickview{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 120px;
height: 40px;
margin: auto;
@include transition(all 0.4s $ease 0s);
z-index:11;
@include transform-origin(50% 100%);
@include transform(perspective(200px) rotate3d(1,0,0,-90deg) translateY(100%));
}
.review{
.spr-badge-starrating{
margin: 0px;
float: left;
.spr-icon{
font-size: 14px;
text-align: center;
padding: 0px 1px;
&.spr-icon-star-empty{
@include opacity(1);
color: #c0c0c0;
text-shadow: 0 0 1px #c0c0c0;
}
}
}
.spr-badge-caption{
font-size: 11px;
font-style: italic;
color: $theme-text-color-tertiary;
padding-top: 4px;
float: left;
margin-left:5px;
}
}
.deal-clock{
position: absolute;
left: 0px;
right: 0px;
bottom: 100%;
margin-bottom: 0px;
z-index: 1;
background-color: rgba(200, 200, 200, 0.5);
@include transition(all 0.5s ease 0s);
.product_list.list &{
position: relative;
margin-top: 10px;
z-index: 1 !important;
bottom: 0px !important;
background-color: $nocolor;
}
ul{
li{
b{
display: block;
}
}
}
}
&:hover{
.image{
.product_img_link{
&:before{
@include opacity(1);
}
}
}
.quickview{
@include transform(perspective(200px) rotate3d(1,0,0,0deg) translateY(0));
}
.functional-buttons{
@include opacity(1);
visibility:visible;
}
.deal-clock{
z-index: -1;
bottom: 50%;
@include opacity(0);
@include transition(all 0.5s ease 0s);
.product_list.list &{
@include opacity(1);
}
}
.leo-more-info{
left: 0px;
width: 80px;
@include opacity(1);
@include transition(all 0.4s ease 0s);
}
}
}
.ajax_addtocart{
background: $button-addtocart-bg;
color: $button-addtocart-color;
font-size: $button-addtocart-font-size;
font-family: $button-addtocart-font-family;
font-weight: 300;
text-transform: uppercase;
border: $button-addtocart-border;
display: block;
@include transition(all 0.3s ease 0s);
span{
padding: 0px 11px;
&.select_options{
padding: 0px 3px;
}
.productpage &{
padding: 0px 10px;
&.select_options{
padding: 0px 2px;
}
}
}
&:hover{
background: $button-addtocart-bg-hover;
color: $button-addtocart-color-hover;
@include transition(all 0.3s ease 0s);
}
}
.ajax_addtocart.disabled, .ajax_addtocart[disabled]{
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
box-shadow: none;
}
.new-box{
width: 0px;
height: 0px;
position: absolute;
top: 0px;
left: 0px;
text-transform: lowercase;
border-top: 46px solid #4acfd4;
border-right: 46px solid $nocolor;
.label-new{
font-family: $font-family;
font-size: 11px;
font-weight: 300;
color: $white;
position: absolute;
left: 0px;
top: -36px;
padding: 0px 6px;
@include transform(rotate(-50deg));
}
}
.sale-box{
width: 64px;
height: 64px;
position: absolute;
top: 10px;
right: 10px;
text-transform: lowercase;
.label-sale{
font-family: $font-family;
font-weight: 300;
color: $white;
font-size:14px;
padding: 0;
line-height: 64px;
display:block;
background-color:#bdca8c;
border-radius:100%;
}
}
//========== END COLLECTION PRODUCT GRID ==========//
//========== COLLECTION PRODUCT LIST ==========//
.product_list.list{
.product-block{
.product-meta{
padding: 0px;
text-align: left;
.name{
min-height: 20px;
text-align:left;
}
.content_price{
float:none;
width:inherit;
text-align:left;
}
}
.product-desc{
display: block;
}
.functional-buttons{
position: relative;
display: block;
top: 0px;
bottom: auto;
margin-top: 15px;
margin-bottom: 15px;
}
}
.review{
border-top: 0px;
.spr-badge-caption{
display: none;
}
.spr-badge{
padding: 0px 0px 5px;
}
}
.ajax_addtocart{
span{
&.select_options{
padding: 0px 10px;
}
}
}
.view_detail{
}
}
//========== END COLLECTION PRODUCT LIST ==========//
//========== PRODUCT DETAIL PAGE ==========//
.product_heading{
line-height: 38px;
border: $main-border;
background: $white;
margin-bottom: 20px;
padding: 0px 15px;
height: 40px;
font-size: $theme-font-size - 1;
}
//---------- product-left-column ----------//
.product-left-column{
#image-block {
position: relative;
padding: 0px;
border:$main-border;
a{
@include inline-block();
&.jqzoom div div img {
width: auto;
max-width: 10000px;
}
}
#view_full_size {
display: block;
cursor: pointer;
text-align: center;
.span_link {
position: absolute;
bottom: 10px;
right: 10px;
display: block;
padding: 4px;
text-align: center;
line-height: 20px;
&::after {
font-family: $font-icon;
color: #C0C0C0;
font-size: 25px;
line-height: 25px;
content: "\f00e";
font-weight: normal;
margin: 0px 0px 0px 2px;
}
&:hover{
color: $theme-color-default;
}
}
}
}
}
#views_block{
text-align: center;
position: relative;
margin-top: 20px;
}
#thumbs_list{
position: relative;
margin: 0px -10px;
#thumblist{
list-style-type: none;
overflow: hidden;
position: static;
}
.owl-item{
padding: 0px 10px;
}
.thumb_item{
a{
display:inline-block;
width:100%;
}
img{
border: $main-border;
}
}
}
#view_scroll_left, #view_scroll_right {
width: 30px;
height: 30px;
line-height: 0;
font-size: 0px;
overflow: hidden;
&:before{
padding-left: 2px;
color: #C0C0C0;
font-family: "FontAwesome";
font-size: 20px;
line-height: 22px;
}
}
#view_scroll_left{
&:before{
content: "\f137";
padding-right: 2px;
}
}
#view_scroll_right {
position: absolute;
top: 50%;
right: 0px;
margin-top: -15px;
&:before{
content: "\f138";
}
}
span.view_scroll_spacer {
position: absolute;
top: 50%;
left: 0px;
width: 30px;
height: 30px;
margin-top: -15px;
}
//---------- Quick View ----------//
.product-left-column{
.image-block {
position: relative;
padding: 0px;
border: 1px solid #EBEBEB;
.view_full_size {
display: block;
cursor: pointer;
text-align: center;
a{
display: block;
}
.span_link {
position: absolute;
bottom: 10px;
right: 10px;
display: block;
padding: 4px;
text-align: center;
line-height: 20px;
&::after {
font-family: $font-icon;
color: #C0C0C0;
font-size: 25px;
line-height: 25px;
content: "\f00e";
font-weight: normal;
margin: 0px 0px 0px 2px;
}
&:hover{
color: $theme-color-default;
}
}
}
}
}
.thumbs_list{
overflow: hidden;
@include rtl-float-left();
width: 295px;
margin-left: 45px;
.thumblist{
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
height: 126px;
}
li{
@include rtl-float-left();
width: 88px;
height: 126px;
cursor: pointer;
border: 1px solid #DBDBDB;
margin-right: 8px;
line-height: 0;
box-sizing: border-box;
list-style: outside none none;
&:first-child{
margin: 0px 9px 0px 0px;
}
&.last{
margin-right: 0px;
}
}
}
.view_scroll_left, .view_scroll_right {
margin-top: 38px;
height: 20px;
width: 20px;
line-height: 0;
font-size: 0px;
overflow: hidden;
&:before{
padding-left: 2px;
color: #C0C0C0;
font-family: "FontAwesome";
font-size: 20px;
line-height: 22px;
}
}
.view_scroll_left{
&:before{
content: "\f137";
padding-right: 2px;
}
}
.view_scroll_right {
float: left;
&:before{
content: "\f138";
}
}
//---------- product-center-column ----------//
.product-center-column{
font-size: $theme-font-size;
font-weight: 300;
color: $theme-text-color-tertiary;
h1{
margin: 0px 0px 30px;
font-size: 30px;
font-family: $font-family-tertiary;
font-weight: 900;
line-height: 50px;
color: $theme-text-color;
text-transform: uppercase;
}
.block__price{
border-bottom:1px dotted #aaa;
padding-bottom:15px;
}
.socialsharing_product{
padding:25px 0;
border-bottom:1px dotted #aaa;
}
.review{
.spr-badge-caption{
font-size:$theme-font-size;
font-style:normal;
}
padding-bottom:20px;
}
.spr-badge-starrating{
.spr-icon{
font-size: 14px;
padding: 0px 1px;
top: 0px;
}
}
.spr-badge-caption{
font-size: $theme-font-size - 2;
font-style: italic;
}
.brand{
font-size: $theme-font-size - 2;
margin: 0px;
text-transform: none;
line-height: 30px;
a,span{
color: $theme-text-color-tertiary;
}
span{
font-weight: bold;
}
}
.product-description{
line-height: 24px;
margin-bottom: 15px;
padding: 25px 0px;
font-size: $theme-font-size;
border-bottom:1px dotted #aaa;
}
#ProductPrice{
font-size:48px;
font-weight:300;
color:$theme-text-color;
}
}
//---------- product-right-column ----------//
.product-right-column{
font-size: $theme-font-size;
font-weight: 300;
color: $theme-text-color-tertiary;
.available{
margin: 0px;
font-weight: 400;
color: #72c13d;
text-transform: uppercase;
&.outstock{
color: #e55e5e;
}
}
#ProductPrice{
font-size:48px;
font-weight:300;
color:$theme-text-color;
}
.total-price{
margin-top: 15px;
display: none;
}
.selector-wrapper{
display: block;
margin-top: 15px;
&:before,&:after{
content: "";
display: table;
}
&:after{
clear: both;
}
label{
margin: 0px 10px 0px 0px;
@include rtl-float-left();
line-height: 36px;
min-width: 60px;
font-weight: 300;
}
select{
padding: 5px 15px;
}
}
.quantity_wanted_p{
text-align:center;
}
.product-single__variants{
color:#E04B34;
}
.quantity-selector{
@include rtl-margin-right(10px);
margin-bottom: 0px;
font-weight: 600;
line-height: 30px;
min-width: 60px;
display:inline-block;
}
.js-qty{
display:inline-block;
margin-bottom: 0px;
width:70px;
}
.price-product-detail{
margin: 6px 0px 10px 0px;
}
.btn-wishlist{
border: $main-border;
text-transform: uppercase;
letter-spacing: 1px;
font-family: $font-family-tertiary;
font-weight: 300;
font-size: $theme-font-size - 3;
color: $theme-text-color-tertiary;
padding: 0px 10px;
line-height: 30px;
.fa{
color: $theme-text-color-secondary;
@include transition(all 0.3s);
}
&:hover{
color: $theme-color-secondary;
background: $nocolor;
border-color: $theme-color-secondary;
.fa{
color: $theme-color-secondary;
@include transition(all 0.3s);
}
}
}
.add_to_cart_detail{
display: block;
margin: 15px 0px;
width:100%;
text-transform: uppercase;
&:focus{
background-color:$white !important;
color:$theme-color-default !important;
}
}
.socialsharing_product{
margin: $theme-gutter-width 0px 0px;
}
#usefull_link_block{
margin: 10px 0px;
text-align:center;
li{
a{
color: $theme-text-color-tertiary;
border:none;
line-height: 24px;
text-transform:capitalize;
font-weight:400;
letter-spacing:0;
font-size:14px;
span{
font-weight:400;
}
.fa{
margin-right:10px;
color:#000;
}
&:hover,&:active,&:focus{
background-color:transparent;
color: $theme-text-color-secondary;
}
}
}
}
}
.line-product-top{
margin: 25px 0px 25px;
border-top:1px dotted #aaa;
}
.line-product{
margin: 10px 0px;
}
.deal-clock{
margin-bottom: 10px;
font-family: $font-family-septenary;
text-align: center;
padding: 10px 0px;
border-top: $main-border;
border-bottom: $main-border;
}
//---------- Product more info ----------//
.primary_block{
padding: 10px $theme-gutter-width $theme-gutter-width ;
background: $white;
}
.more_info_block{
padding-top: $theme-gutter-width;
border-top:1px dotted #aaa;
.panel{
border-color: $nocolor;
.panel-body{
border: $main-border;
}
}
.page-subheading{
background: $white;
padding:10px 0;
text-align:left;
a{
display: block;
color: $theme-color-default;
}
}
.tab-content{
padding: $theme-gutter-width 0px;
}
.nav-tabs{
border: 0px;
text-align:center;
li{
float:none;
display:inline-block;
a{
background:$theme-bg-color;
padding: 10px 20px;
color: $theme-text-color-secondary;
font-family: $font-family-tertiary;
font-weight: 800;
text-transform: uppercase;
font-size: $theme-font-size;
&:hover,&:focus{
background:$white;
color: $theme-text-color;
}
}
&:hover{
a{
background:$white;
border-color: $nocolor;
color: $theme-text-color;
}
}
&.active{
a{
background:$white;
border-color: $nocolor;
color: $theme-text-color;
&:hover,&:focus{
background:$white;
border-color: $nocolor;
color: $theme-text-color;
}
}
}
}
}
#haravan-product-reviews{
margin: 0px;
}
.spr-container{
padding: 15px !important;
border: none;
color: $theme-text-color-tertiary;
a{
color: $theme-text-color-tertiary;
&:hover{
color: $theme-color-secondary;
}
}
.spr-form-label{
font-weight: 400;
}
.spr-form-input-text, .spr-form-input-email, .spr-form-input-textarea{
padding: 6px 10px;
border: $main-border;
}
.spr-header-title,.spr-form-title{
font-size: $theme-font-size;
margin: 0px;
height: 30px;
line-height: 30px;
}
.spr-form-input-error, input.spr-form-input-error[type="text"], input.spr-form-input-error[type="email"]{
border-color: #C0363A;
}
.spr-icon{
font-size: $theme-font-size - 2;
color: #fad31f;
&.spr-icon-star-empty{
color: $theme-text-color-tertiary;
&:hover,&:focus{
color: #fad31f;
}
}
&.spr-icon-star-hover{
color: #fad31f;
}
}
}
.products_block{
.productscategory_title{
font-size: 16px;
letter-spacing: 2px;
text-align: center;
margin: 0px 0px 45px;
background: url("//hstatic.net/s/files/1/0766/6813/t/2/assets/list-icon.png?7613187826630311557") repeat-x scroll 0px -110px transparent;
height: 30px;
line-height: 30px;
span{
background: $theme-color-default;
padding: 0px 10px;
}
}
}
}
.zoomWindow{
border: 0px !important;
}
.rte{
font-size: $theme-font-size;
color: $theme-text-color-tertiary;
font-family: $font-family;
font-weight: 300;
line-height: 20px;
p{
margin: 0px 0px 10px;
line-height:26px;
}
img{
max-width:100%;
}
}
//---------- Product Review ----------//
.spr-icon-star,.spr-icon-star-half-alt{
color: #FFD314;
&:hover,&:focus{
color: #FFD314;
}
}
//========== END PRODUCT DETAIL PAGE ==========//
.leo-more-info{
position: absolute;
top: 0px;
left: -20px;
height: auto;
width: 0px;
overflow: hidden;
background-color: $theme-bg-color;
z-index: 1000;
@include transition(all 0.4s ease 0s);
@include opacity(0);
@include box-shadow(0px 0px 5px 2px rgba($black, 0.1));
.views_block{
position: relative;
text-align: center;
}
.thumbs_list{
width: 80px;
margin: 0px;
height: 200px;
margin-top: 30px;
overflow: hidden;
li{
margin: 0px 0px 5px;
width: 80px;
height: 100px;
border: 0px;
a{
display: block;
}
}
}
span.view_scroll_spacer{
top: 0px;
width: 100%;
right: 0px;
left: 0px;
text-align: center;
margin-top: 0px;
.view_scroll_left{
margin-top: 0px;
&:before{
content: "\f106";
}
&:hover:before{
color: $theme-text-color-secondary;
}
}
}
.view_scroll_right{
margin-top: 0px;
height: 30px;
display: block;
width: 100%;
&:before{
content: "\f107";
line-height: 28px;
}
&:hover:before{
color: $theme-text-color-secondary;
}
}
}
.page-product-box{
.panel-body{
.rte{
padding: 15px;
}
}
.page-subheading{
margin-bottom: 0px;
}
}
.zoomContainer{
z-index: 0;
}
.warring{
padding: 20px 0px 15px;
text-align: center;
}
.product-right,.product-left{
.product-center-column h1{
font-size:30px;
margin-top:0;
}
}
.product_list.grid {
@include clearfix();
}
Scroll To Top
