first commit
Этот коммит содержится в:
@@ -0,0 +1,98 @@
|
||||
/*-------------------------
|
||||
background images
|
||||
-------------------------*/
|
||||
|
||||
.bg-img {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .bg-img4 {
|
||||
// background-image: url("../img/slider/slide4.jpg");
|
||||
// }
|
||||
|
||||
// .bg-img5 {
|
||||
// background-image: url("../img/slider/slide5.jpg");
|
||||
// }
|
||||
|
||||
// .bg-img6 {
|
||||
// background-image: url("../img/slider/slide6.jpg");
|
||||
// }
|
||||
|
||||
// .bg-img7 {
|
||||
// background-image: url("../img/slider/slide7.jpg");
|
||||
// }
|
||||
|
||||
// .bg-img8 {
|
||||
// background-image: url("../img/slider/slide8.jpg");
|
||||
// }
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.bg-img {
|
||||
background-position: 15% bottom;
|
||||
}
|
||||
.bg-img.bg-img4 {
|
||||
background-position: 45% bottom;
|
||||
}
|
||||
.wraped .bg-img {
|
||||
background-position: 40% bottom;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
background colors
|
||||
------------------------*/
|
||||
|
||||
.theme-bg {
|
||||
background-color: $theme-color !important;
|
||||
}
|
||||
.theme-bg2 {
|
||||
background-color: $theme-color2 !important;
|
||||
}
|
||||
.theme-bg3 {
|
||||
background-color: $theme-color3 !important;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: $color-grey-dark !important;
|
||||
}
|
||||
|
||||
.bg-lighten {
|
||||
background-color: $color-grey !important;
|
||||
}
|
||||
.bg-lighten2 {
|
||||
background-color: $color-grey-light;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: $color-dark !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
text-color
|
||||
-------------------*/
|
||||
|
||||
.theme-color {
|
||||
color: $theme-color;
|
||||
}
|
||||
.theme-color2 {
|
||||
color: $theme-color2;
|
||||
}
|
||||
.theme-color3 {
|
||||
color: $theme-color3;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: $color-warning !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: $color-dark !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $body-color !important;
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
/* Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
/*---------------------------*
|
||||
#Template default CSS
|
||||
*----------------------------*/
|
||||
|
||||
body {
|
||||
background: $color-white;
|
||||
font-family: $poppins;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 14px;
|
||||
line-height: $base-line-height;
|
||||
color: #565656;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.container{
|
||||
@include max-screen(1199){
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $raleway;
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph-spacing;
|
||||
line-height: 1.715;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
img,
|
||||
input {
|
||||
@include transition(0.3s);
|
||||
}
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
&.separator {
|
||||
color: $separator-color;
|
||||
margin: 0 8px;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.zoom-in img {
|
||||
@include transition(0.3s linear);
|
||||
}
|
||||
|
||||
.zoom-in:hover img {
|
||||
@include transform(scale(1.045) rotate(0.05deg));
|
||||
}
|
||||
|
||||
.theme-border {
|
||||
border: 2px solid $theme-color !important;
|
||||
}
|
||||
.theme-border2 {
|
||||
border: 2px solid $theme-color2 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
hr.hr {
|
||||
background-color: $border-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
span.required {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.theme1 {
|
||||
.hover-color {
|
||||
&:hover {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w-md-50 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@include min-screen(768) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@function fontweight($fontweight-name) {
|
||||
@return (map-get($fontWeights, $fontweight-name));
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@mixin transition($time) {
|
||||
transition: all $time;
|
||||
}
|
||||
|
||||
@mixin transform($value) {
|
||||
transform: $value;
|
||||
}
|
||||
@mixin border-radius($value) {
|
||||
border-radius: $value;
|
||||
}
|
||||
|
||||
// Placeholder Mixins
|
||||
@mixin placeholder {
|
||||
&::placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// media queries
|
||||
$units: 1px !default;
|
||||
|
||||
@mixin max-screen($res-first, $res-last: $res-first) {
|
||||
@if $res-first == $res-last {
|
||||
@media screen and (max-width: if(unitless($res-first), $res-first*$units, $res-first)) {
|
||||
@content;
|
||||
}
|
||||
} @else if $res-first < $res-last {
|
||||
@media screen and (min-width: if(unitless($res-first), $res-first*$units, $res-first)) and (max-width: if(unitless($res-last), $res-last*$units, $res-last)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin min-screen($res) {
|
||||
@media screen and (min-width: if(unitless($res), $res*$units, $res)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// /*--
|
||||
// - Overlay
|
||||
// ------------------------------------------*/
|
||||
// [data-overlay] {
|
||||
// position: relative;
|
||||
// background-size: cover;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center center;
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// content: "";
|
||||
// }
|
||||
// }
|
||||
|
||||
// /*-- Overlay Color --*/
|
||||
// [data-overlay="light"] {
|
||||
// &::before {
|
||||
// // background-color: $white;
|
||||
// }
|
||||
// }
|
||||
// [data-overlay="dark"] {
|
||||
// &::before {
|
||||
// // background-color: $black;
|
||||
// }
|
||||
// }
|
||||
|
||||
// /*-- Overlay Opacity --*/
|
||||
// [data-opacity="1"] {
|
||||
// &::before {
|
||||
// opacity: 0.1;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="2"] {
|
||||
// &::before {
|
||||
// opacity: 0.2;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="3"] {
|
||||
// &::before {
|
||||
// opacity: 0.3;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="4"] {
|
||||
// &::before {
|
||||
// opacity: 0.4;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="5"] {
|
||||
// &::before {
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="6"] {
|
||||
// &::before {
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="7"] {
|
||||
// &::before {
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="8"] {
|
||||
// &::before {
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
// }
|
||||
// [data-opacity="9"] {
|
||||
// &::before {
|
||||
// opacity: 0.9;
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,83 @@
|
||||
/*-----------------------
|
||||
# selection colors
|
||||
-------------------------*/
|
||||
|
||||
*::-moz-selection {
|
||||
background: $theme-color;
|
||||
color: $color-white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: $theme-color;
|
||||
color: $color-white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*-----------------------
|
||||
# Input Placeholder
|
||||
-------------------------*/
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::-ms-input-placeholder,
|
||||
textarea::-ms-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*--------------------------
|
||||
input active placeholder
|
||||
--------------------------*/
|
||||
|
||||
input:active::-webkit-input-placeholder,
|
||||
textarea:active::-webkit-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:active::-moz-placeholder,
|
||||
textarea:active::-moz-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:active:-ms-input-placeholder,
|
||||
textarea:active:-ms-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:active::-ms-input-placeholder,
|
||||
textarea:active::-ms-input-placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:active::placeholder,
|
||||
textarea:active::placeholder {
|
||||
color: $placeholder-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/*-----------------------
|
||||
# Margin & Padding
|
||||
-------------------------*/
|
||||
|
||||
// padding x and y
|
||||
@for $i from 1 through 16 {
|
||||
.py-#{5 * $i} {
|
||||
padding-top: 5px * $i;
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.px-#{5 * $i} {
|
||||
padding-left: 5px * $i;
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Margin Top
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 26 {
|
||||
.mt-#{5 * $i} {
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Margin Bottom
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 26 {
|
||||
.mb-#{5 * $i} {
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Margin Left
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.ml-#{5 * $i} {
|
||||
margin-left: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Margin Right
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.mr-#{5 * $i} {
|
||||
margin-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Padding Top
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 26 {
|
||||
.pt-#{5 * $i} {
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------
|
||||
# Padding Bottom
|
||||
------------------*/
|
||||
|
||||
@for $i from 1 through 26 {
|
||||
.pb-#{5 * $i} {
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------
|
||||
# Padding Left
|
||||
---------------*/
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.pl-#{5 * $i} {
|
||||
padding-left: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------
|
||||
# Padding Right
|
||||
---------------*/
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.pr-#{5 * $i} {
|
||||
padding-right: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
.px-xl-90 {
|
||||
@include min-screen(1920) {
|
||||
padding-left: 90px;
|
||||
padding-right: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-pe-0 {
|
||||
@include max-screen(991) {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
// Variables
|
||||
|
||||
//# Base font family
|
||||
|
||||
$poppins: "Poppins";
|
||||
$raleway: "Raleway";
|
||||
|
||||
// font-weght
|
||||
|
||||
$fontWeights: (
|
||||
"light": 300,
|
||||
"regular": 400,
|
||||
"medium": 500,
|
||||
"semi-bold": 600,
|
||||
"bold": 700,
|
||||
"black": 800,
|
||||
"heavy": 900,
|
||||
);
|
||||
|
||||
// # Paragraph spacing
|
||||
$paragraph-spacing: 0px;
|
||||
//# Base line height
|
||||
$base-line-height: 1.75;
|
||||
// theme colors
|
||||
$theme-color: #5a5ac9;
|
||||
$theme-color2: #8a72e0;
|
||||
$theme-color3: #10a341;
|
||||
// text colors
|
||||
$black: #000;
|
||||
$color-white: #ffffff;
|
||||
$color-dark: #111111;
|
||||
$color-dark2: #292929;
|
||||
$color-grey: #f5f5f5;
|
||||
$color-grey-dark: #efefef;
|
||||
$color-grey-light: #f6f6f6;
|
||||
$color-grey-light2: #f9f9f9;
|
||||
$body-color: #707070;
|
||||
$color-warning: #fdd835;
|
||||
$star-deselect: #d0d0d0;
|
||||
$del: #9b9b9b;
|
||||
$focus-color: #253237;
|
||||
$placeholder-color: #565656;
|
||||
$instock: #777;
|
||||
$feature: #f1f1f1;
|
||||
$camel: #c19a6b;
|
||||
// Soft color
|
||||
$black-soft: #7e7e7e;
|
||||
$grey-soft: #9d9d9d;
|
||||
$overlay-color: rgba(0, 0, 0, 0.5);
|
||||
$progress-color: rgba(49, 56, 72, 0.298);
|
||||
// separator color
|
||||
$separator-color: #bfbfbf;
|
||||
$deselect: #e0e0e0;
|
||||
$border-color: #ebebeb;
|
||||
$border-color2: #eee;
|
||||
$tab-menu-color: #666;
|
||||
// theme dots color
|
||||
$themedot2: #d6d6d6;
|
||||
$grayCardBg: #f7f7f7;
|
||||
@@ -0,0 +1,109 @@
|
||||
/*******************************
|
||||
hero-side-category style
|
||||
*******************************/
|
||||
.hero-side-category {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.category-toggle {
|
||||
padding: 10px 20px;
|
||||
background-color: $color-white;
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 24px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 2px solid $border-color2;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
@include transform(translate(0, 2px));
|
||||
}
|
||||
}
|
||||
|
||||
.category-menu {
|
||||
background-color: $color-white;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 110%;
|
||||
border: 1px solid $border-color;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 2;
|
||||
height: 500px;
|
||||
overflow-x: auto;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
|
||||
.category-menu {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 25px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: $focus-color;
|
||||
font-weight: fontweight(regular);
|
||||
position: relative;
|
||||
border-bottom: 1px solid $border-color;
|
||||
i {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
.category-mega-menu {
|
||||
display: none;
|
||||
a {
|
||||
padding: 10px 25px 10px 35px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(regular);
|
||||
color: $focus-color;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
text-transform: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-side-category {
|
||||
.category-menu {
|
||||
li {
|
||||
#more-btn {
|
||||
font-weight: fontweight(medium);
|
||||
padding-left: 45px;
|
||||
i {
|
||||
right: auto;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// category-menu
|
||||
// theme1
|
||||
.theme1 {
|
||||
.category-menu {
|
||||
li {
|
||||
&:hover > {
|
||||
a {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***********************************
|
||||
hero-side-category style END
|
||||
***********************************/
|
||||
@@ -0,0 +1,104 @@
|
||||
body.open {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
|
||||
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 9999999;
|
||||
background: rgba(22, 22, 27, 0.97);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.open .overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.scale {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay form.search-box {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
max-width: 80%;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
-o-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.open .overlay form.search-box {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.overlay .search-box input {
|
||||
border: 0 none;
|
||||
line-height: 60px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
border: 1px solid $border-color;
|
||||
padding: 10px 50px 10px 10px;
|
||||
height: 60px;
|
||||
color: $color-white;
|
||||
text-transform: capitalize;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-white !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.overlay .search-box button {
|
||||
background-color: transparent;
|
||||
border: 0 none;
|
||||
color: #ffffff;
|
||||
font-size: 25px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button.close {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
z-index: 33;
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
color: $color-white !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/*******************************
|
||||
badge style
|
||||
*******************************/
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
font-weight: fontweight(medium);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.badge-danger {
|
||||
color: $color-white;
|
||||
background-color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
.badge-success {
|
||||
color: $color-white;
|
||||
background-color: $theme-color3 !important;
|
||||
}
|
||||
|
||||
.cbdg1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 10px;
|
||||
left: 15px;
|
||||
padding: 0px;
|
||||
line-height: 18px;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.cbdg1 {
|
||||
color: $color-white;
|
||||
background-color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cb6 {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
// badge position
|
||||
|
||||
.top-left {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.top-right {
|
||||
@extend.top-left;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
badge style END
|
||||
*******************************/
|
||||
@@ -0,0 +1,60 @@
|
||||
/****************************
|
||||
#Common Banner
|
||||
****************************/
|
||||
.banner-thumb {
|
||||
img {
|
||||
width: 100%;
|
||||
@include max-screen(767) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* hover-animation */
|
||||
|
||||
.hover-animation {
|
||||
a {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
right: 51%;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
&::before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
@include transition(0.9s linear);
|
||||
}
|
||||
&::after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
@include transition(0.9s linear);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
#common-banner End
|
||||
********************************/
|
||||
@@ -0,0 +1,65 @@
|
||||
/****************************
|
||||
breadcrumb-section
|
||||
****************************/
|
||||
.breadcrumb-section {
|
||||
@include max-screen(767) {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@include max-screen(1200) {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item {
|
||||
text-transform: capitalize;
|
||||
line-height: 1;
|
||||
padding: 0px !important;
|
||||
@include max-screen(450) {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: $color-dark !important;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item {
|
||||
&::before {
|
||||
content: "\f3d3";
|
||||
color: $body-color !important;
|
||||
margin: 0 10px;
|
||||
content: "\f3d3";
|
||||
font-family: "Ionicons";
|
||||
padding: 0px !important;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.breadcrumb-item {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-section {
|
||||
.section-title {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************
|
||||
breadcrumb-section END
|
||||
****************************/
|
||||
@@ -0,0 +1,216 @@
|
||||
/****************************
|
||||
button style
|
||||
****************************/
|
||||
// theme btn Normal
|
||||
.btn {
|
||||
font-family: $raleway;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
@include border-radius(0px);
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.btn-secondary {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $color-dark;
|
||||
border-color: $color-dark;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.btn-outline-primary {
|
||||
color: $color-dark;
|
||||
border-color: $color-dark;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
&:hover {
|
||||
background: $color-dark;
|
||||
color: $color-white;
|
||||
border-color: $color-dark;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// theme btn dark
|
||||
|
||||
.btn-dark {
|
||||
color: $color-white;
|
||||
background: $color-dark;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: $theme-color;
|
||||
background: $theme-color;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// btn md
|
||||
.btn--sm {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
.btn--md {
|
||||
padding: 10px 25px;
|
||||
}
|
||||
// btn lg
|
||||
.btn--lg {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
// btn xl
|
||||
.btn--xl {
|
||||
padding: 18px 35px;
|
||||
}
|
||||
/* border radius in rounded class*/
|
||||
|
||||
.rounded {
|
||||
@include border-radius(3rem !important);
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
@include border-radius(0 5px 5px 0);
|
||||
}
|
||||
|
||||
/* custom button styles */
|
||||
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 65px;
|
||||
height: 100%;
|
||||
color: $color-white;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
&.position-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
@include transition(0.3s);
|
||||
&.theme-bg {
|
||||
&:hover {
|
||||
background-color: $color-dark !important;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
&.bg-dark {
|
||||
&:hover {
|
||||
background-color: $color-dark2 !important;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
&.bg-white {
|
||||
width: 45px;
|
||||
font-size: 28px;
|
||||
background-color: transparent !important;
|
||||
padding: 0;
|
||||
color: $color-dark !important;
|
||||
&:hover {
|
||||
color: $color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-letter-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 14px;
|
||||
color: $color-white;
|
||||
padding: 0 20px;
|
||||
line-height: 47px;
|
||||
height: 47px;
|
||||
@include border-radius(0 30px 30px 0);
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.news-letter-btn {
|
||||
background: $theme-color;
|
||||
border: 0px solid $theme-color;
|
||||
&:hover {
|
||||
background-color: $color-dark;
|
||||
color: $color-white;
|
||||
border-color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.banner-btn {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%, -50%));
|
||||
}
|
||||
|
||||
// shop-now-btn
|
||||
|
||||
.shop-now-btn {
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
padding: 10px 30px;
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
@include border-radius(0px);
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-search-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 18px;
|
||||
color: $color-white;
|
||||
padding: 0 20px;
|
||||
line-height: 47px;
|
||||
height: 100%;
|
||||
@include border-radius(0 30px 30px 0);
|
||||
}
|
||||
|
||||
.theme1 {
|
||||
.blog-search-btn {
|
||||
background: $theme-color;
|
||||
border: 1px solid $theme-color;
|
||||
&:hover {
|
||||
background-color: $color-dark;
|
||||
color: $color-white;
|
||||
border-color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************************
|
||||
button style END
|
||||
****************************/
|
||||
@@ -0,0 +1,33 @@
|
||||
/*************************************
|
||||
cart-block-links CSS
|
||||
*************************************/
|
||||
.cart-block-links {
|
||||
li {
|
||||
margin-right: 30px;
|
||||
a {
|
||||
font-size: 20px;
|
||||
@include max-screen(767) {
|
||||
font-size: 20px;
|
||||
}
|
||||
font-family: $raleway;
|
||||
font-weight: fontweight(medium);
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.cart-block-links {
|
||||
&.theme1 a {
|
||||
color: $color-dark;
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************
|
||||
cart-block-links CSS END
|
||||
*************************************/
|
||||
@@ -0,0 +1,221 @@
|
||||
/*************************************
|
||||
check-box style CSS
|
||||
*************************************/
|
||||
|
||||
.widget-check-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidbar-widget {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.sidbar-widget .title {
|
||||
font-weight: fontweight(bold);
|
||||
font-size: 18px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-transform: capitalize;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
.sidbar-widget .sub-title {
|
||||
font-weight: fontweight(semi-bold);
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"] + label:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"] + label:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"] + label:hover:before {
|
||||
border-color: $theme-color;
|
||||
}
|
||||
|
||||
.widget-check-box.color-grey input[type="checkbox"] + label:before {
|
||||
background-color: $black-soft;
|
||||
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.widget-check-box.color-grey input[type="checkbox"]:checked + label:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.widget-check-box.color-white input[type="checkbox"] + label:before {
|
||||
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.widget-check-box.color-black input[type="checkbox"] + label:before {
|
||||
background-color: $tab-menu-color;
|
||||
border: 1px solid $tab-menu-color;
|
||||
}
|
||||
|
||||
.widget-check-box.color-camel input[type="checkbox"] + label:before {
|
||||
background-color: $camel;
|
||||
border: 1px solid $camel;
|
||||
}
|
||||
|
||||
.widget-check-box.color-camel input[type="checkbox"]:checked + label:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="checkbox"]:checked + label:before {
|
||||
width: 10px;
|
||||
top: -1px;
|
||||
left: 5px;
|
||||
border-color: $theme-color;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.widget-check-box input[type="checkbox"]:checked + label:before {
|
||||
border-color: $theme-color;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.widget-check-box.color-black input[type="checkbox"]:checked + label:before {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
/* radio check box style */
|
||||
|
||||
.widget-check-box input[type="radio"]:checked,
|
||||
.widget-check-box input[type="radio"]:not(:checked) {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"]:checked + label,
|
||||
.widget-check-box input[type="radio"]:not(:checked) + label {
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"]:checked + label:before,
|
||||
.widget-check-box input[type="radio"]:not(:checked) + label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: 100%;
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"]:checked + label:after,
|
||||
.widget-check-box input[type="radio"]:not(:checked) + label:after {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $theme-color;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"]:not(:checked) + label:after {
|
||||
opacity: 0;
|
||||
@include transform(scale(0));
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"]:checked + label:after {
|
||||
opacity: 1;
|
||||
@include transform(scale(1));
|
||||
}
|
||||
|
||||
.widget-check-box input[type="radio"] + label:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
/* check-box style CSS End */
|
||||
#amount {
|
||||
border: 0;
|
||||
color: #565656;
|
||||
font-size: 14px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.sidbar-widget .ui-widget-content {
|
||||
border: 1px solid $theme-color;
|
||||
}
|
||||
.sidbar-widget .ui-slider-horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
.sidbar-widget .ui-widget-header {
|
||||
background: $theme-color;
|
||||
}
|
||||
.sidbar-widget .ui-slider-handle {
|
||||
top: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background: $color-white;
|
||||
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
margin-top: -7.5px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
/*************************************
|
||||
check-box style CSS END
|
||||
*************************************/
|
||||
@@ -0,0 +1,53 @@
|
||||
/* *******************
|
||||
counter style
|
||||
**********************/
|
||||
|
||||
.product-count {
|
||||
&.style {
|
||||
input {
|
||||
color: $color-dark;
|
||||
background-color: $color-white;
|
||||
height: 54px;
|
||||
padding: 10px 30px 10px 10px;
|
||||
width: 80px;
|
||||
border: 1px solid $border-color;
|
||||
display: block;
|
||||
text-align: center;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
border-left: 1px solid $border-color;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 27px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
color: $color-dark;
|
||||
font-size: 10px;
|
||||
@include transform(translateX(-100%));
|
||||
user-select: none;
|
||||
}
|
||||
.increment {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* *******************
|
||||
counter style End
|
||||
**********************/
|
||||
@@ -0,0 +1,196 @@
|
||||
/* ***************
|
||||
contact-form
|
||||
******************/
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.contact-form .title {
|
||||
text-transform: capitalize;
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
font-size: 14px;
|
||||
color: $color-dark;
|
||||
padding-top: 0.625rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.contact-form .form-control {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 16px;
|
||||
color: $body-color;
|
||||
padding: 0.8rem 1.6rem;
|
||||
height: 38px;
|
||||
line-height: 1.25;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
|
||||
.contact-form textarea.form-control {
|
||||
min-height: 300px;
|
||||
@include max-screen(767) {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-page-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.contact-page-title {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-contact-block {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.single-contact-block {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-contact-block:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.single-contact-block h4 {
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
color: $color-dark;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.single-contact-block h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-contact-block h4 img {
|
||||
margin: 5px 20px 20px 0;
|
||||
}
|
||||
|
||||
.single-contact-block p {
|
||||
font-size: 15px;
|
||||
line-height: 29px;
|
||||
margin-bottom: 0;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
span.required {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.contact-form .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
font-size: 14px;
|
||||
color: $color-dark;
|
||||
padding: 0.8rem 0rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.contact-form input {
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
border: 1px solid $border-color;
|
||||
outline: 0;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.contact-form textarea {
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
height: 155px;
|
||||
padding-left: 20px;
|
||||
border: 1px solid $border-color;
|
||||
outline: 0;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.contact-page-side-content {
|
||||
padding-right: 30px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* login page */
|
||||
|
||||
.log-in-form {
|
||||
border: 1px solid $border-color;
|
||||
font-size: 13px;
|
||||
color: $body-color;
|
||||
padding: 30px 15px 15px;
|
||||
}
|
||||
|
||||
.log-in-form .form-control {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
padding: 0.8rem 1.6rem;
|
||||
height: 38px;
|
||||
line-height: 1.25;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
|
||||
.show-password {
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-white;
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6875rem;
|
||||
padding: 0.67rem 1rem !important;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
|
||||
.login-form-links a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.for-get {
|
||||
font-size: 14px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid $border-color !important;
|
||||
}
|
||||
|
||||
.no-account {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.form-message.error {
|
||||
color: #ff0000;
|
||||
}
|
||||
.form-message.success {
|
||||
color: #008000;
|
||||
}
|
||||
/* ***************
|
||||
contact-form End
|
||||
******************/
|
||||
@@ -0,0 +1,50 @@
|
||||
/* ***************
|
||||
search-form
|
||||
******************/
|
||||
|
||||
.search-form {
|
||||
.form-control {
|
||||
padding: 10px 70px 10px 20px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
font-size: 14px;
|
||||
background: $color-white;
|
||||
color: $color-dark;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 5px;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.theme1-border {
|
||||
border-color: $border-color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-body {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
top: 40px;
|
||||
right: 255px;
|
||||
@include max-screen(1500) {
|
||||
right: 220px;
|
||||
}
|
||||
@include max-screen(1100) {
|
||||
right: 205px;
|
||||
}
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.width-calc-from-left {
|
||||
width: calc(100% - 220px);
|
||||
@include max-screen(991) {
|
||||
width: calc(100%);
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ***************
|
||||
search-form End
|
||||
******************/
|
||||
@@ -0,0 +1,62 @@
|
||||
/*************************************
|
||||
media CSS
|
||||
*************************************/
|
||||
|
||||
.static-media {
|
||||
&.me-50 {
|
||||
@include max-screen(1200, 1399) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
@include max-screen(992, 1199) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
@include max-screen(767) {
|
||||
font-size: 13px;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
strong {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.email {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.phone {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
&.modify{a {
|
||||
&:hover {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************
|
||||
media CSS ENd
|
||||
*************************************/
|
||||
@@ -0,0 +1,35 @@
|
||||
/********************************
|
||||
static media Css
|
||||
********************************/
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
.static-media-wrap {
|
||||
padding: 45px 30px;
|
||||
}
|
||||
|
||||
.static-media2 {
|
||||
.title {
|
||||
text-transform: capitalize;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: fontweight(bold);
|
||||
color: $color-white;
|
||||
@include max-screen(992, 1199) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
static media Css End
|
||||
********************************/
|
||||
@@ -0,0 +1,418 @@
|
||||
/*************************************
|
||||
common modal CSS
|
||||
*************************************/
|
||||
|
||||
/* modal style1 */
|
||||
|
||||
.modal {
|
||||
&.style1 {
|
||||
.modal-dialog {
|
||||
max-width: 1020px;
|
||||
}
|
||||
.modal-header {
|
||||
border: none;
|
||||
padding: 6px 0.625rem;
|
||||
height: 30px;
|
||||
.close {
|
||||
font-size: 30px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
color: $black;
|
||||
text-shadow: 0 1px 0 $color-white;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 30px;
|
||||
padding: 0;
|
||||
&:hover {
|
||||
color: $color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 30px 30px 90px;
|
||||
}
|
||||
.product-head {
|
||||
.title {
|
||||
font-weight: fontweight(semi-bold);
|
||||
text-transform: capitalize;
|
||||
font-size: 24px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.star-content {
|
||||
.star-on {
|
||||
color: $color-warning;
|
||||
font-size: 12px;
|
||||
}
|
||||
.de-selected {
|
||||
color: $deselect;
|
||||
}
|
||||
}
|
||||
}
|
||||
.new-price {
|
||||
text-transform: capitalize;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 30px;
|
||||
color: $color-dark;
|
||||
font-size: 26px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.modal.style1 .product-head .title {
|
||||
margin: 0 0 2rem 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.check-box .title {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.pro-social-links {
|
||||
ul {
|
||||
li {
|
||||
margin-right: 15px;
|
||||
&.share {
|
||||
line-height: 30px;
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: $grey-soft;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.pro-social-links {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addto-whish-list {
|
||||
a {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: $tab-menu-color;
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.addto-whish-list {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-discount {
|
||||
margin: 15px 0px 0px;
|
||||
}
|
||||
|
||||
.regular-price {
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 30px;
|
||||
color: $color-dark;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
/* modal style2 */
|
||||
|
||||
.modal {
|
||||
&.style2 {
|
||||
.modal-dialog {
|
||||
max-width: 300px;
|
||||
}
|
||||
.modal-header {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
.close {
|
||||
font-size: 30px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
color: $black;
|
||||
text-shadow: 0 1px 0 $color-white;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 30px;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
&:hover {
|
||||
color: $color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
padding: 45px 25px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
i {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* modal style3 */
|
||||
|
||||
.modal {
|
||||
&.style3 {
|
||||
.modal-dialog {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid $color-grey;
|
||||
.close {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 30px;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
color: $color-white;
|
||||
font-size: 30px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 0 $color-white;
|
||||
|
||||
&:hover {
|
||||
color: $color-dark;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
padding-right: 20px;
|
||||
color: $color-white;
|
||||
font-size: 1.125rem;
|
||||
line-height: 24px;
|
||||
line-height: 1;
|
||||
font-weight: fontweight(medium);
|
||||
span {
|
||||
font-size: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 3.125rem 1.875rem;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
line-height: 24px;
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.price {
|
||||
line-height: 1.4;
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
.color {
|
||||
line-height: 2.5;
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
|
||||
.quantity {
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-cart-content {
|
||||
padding-left: 2.5rem;
|
||||
strong {
|
||||
font-weight: fontweight(medium);
|
||||
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.modal-cart-content {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.divide-right {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
.dmc {
|
||||
font-size: 14px !important;
|
||||
font-weight: fontweight(regular);
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.divide-right {
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.modal.style3 img {
|
||||
display: block;
|
||||
max-width: 180px;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-content-btn i {
|
||||
font-size: 15px;
|
||||
margin-right: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* modal 4 style */
|
||||
|
||||
.style4 {
|
||||
.modal-dialog {
|
||||
max-width: 600px;
|
||||
}
|
||||
.modal-title {
|
||||
font-weight: fontweight(regular);
|
||||
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
background: $color-dark !important;
|
||||
}
|
||||
.modal-header {
|
||||
padding: 30px 30px 0px;
|
||||
margin-bottom: 10px;
|
||||
border: 0px;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 15px 30px 30px;
|
||||
}
|
||||
.modal-form {
|
||||
> .title {
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
label {
|
||||
&.title {
|
||||
border-top: 1px solid $border-color;
|
||||
padding-top: 15px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
margin: 12px 0 4px 0;
|
||||
text-align: right;
|
||||
display: block;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 0 5px;
|
||||
min-height: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
&.textarea {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-thumb {
|
||||
img {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.title {
|
||||
padding: 10px 0 5px;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.star-content {
|
||||
span {
|
||||
color: $color-warning;
|
||||
font-size: 18px;
|
||||
&.quality {
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.required {
|
||||
font-size: 12px;
|
||||
color: $color-dark;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.or {
|
||||
font-size: 12px;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
/*************************************
|
||||
common modal CSS ENd
|
||||
*************************************/
|
||||
@@ -0,0 +1,47 @@
|
||||
/*------------------*
|
||||
# Main-menu
|
||||
*------------------*/
|
||||
.main-menu {
|
||||
li {
|
||||
margin: 0 1px;
|
||||
position: relative;
|
||||
a {
|
||||
font-weight: fontweight(semi-bold);
|
||||
display: block;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
@include max-screen(992, 1199) {
|
||||
padding: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
i {
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
li {
|
||||
a {
|
||||
color: $color-dark;
|
||||
}
|
||||
&:hover > a {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*------------------*
|
||||
# Main-menu END
|
||||
*------------------*/
|
||||
@@ -0,0 +1,156 @@
|
||||
/*------------------*
|
||||
# mega-menu
|
||||
*------------------*/
|
||||
|
||||
.mega-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 3;
|
||||
background: $color-white;
|
||||
padding: 30px 15px;
|
||||
box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15);
|
||||
margin: 0 15px;
|
||||
transform-origin: 0 0;
|
||||
transform-style: preserve-3d;
|
||||
@include transform(rotateX(-75deg));
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
li {
|
||||
&:hover > {
|
||||
.mega-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
@include transform(rotateX(0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mega-menu li ul li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mega-menu li > ul li:last-child a {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mega-menu li > ul li > a:hover {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mega-menu li ul li.mega-menu-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mega-menu li ul li.mega-menu-title a {
|
||||
color: $color-dark;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
padding: 0 !important;
|
||||
}
|
||||
.mega-menu li a {
|
||||
text-align: left;
|
||||
padding: 0 0 5px;
|
||||
color: #565656;
|
||||
text-transform: capitalize;
|
||||
line-height: 28px;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// mega-menu-custom-with
|
||||
|
||||
.mega-menu-custom-with {
|
||||
max-width: 1110px;
|
||||
min-width: 1110px;
|
||||
@include max-screen(1200) {
|
||||
min-width: 95%;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.mega-menu {
|
||||
li {
|
||||
ul {
|
||||
li {
|
||||
&.mega-menu-title {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// blog-ctry-menu
|
||||
|
||||
.blog-ctry-menu {
|
||||
li {
|
||||
a {
|
||||
position: relative;
|
||||
font-weight: fontweight(regular);
|
||||
color: #565656;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
line-height: 35px;
|
||||
&::before {
|
||||
content: "\f2c7";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
font-family: "Ionicons";
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
&::before {
|
||||
content: "\f462";
|
||||
}
|
||||
}
|
||||
}
|
||||
// category-sub-menu
|
||||
ul.category-sub-menu {
|
||||
display: none;
|
||||
li {
|
||||
a {
|
||||
font-size: 13px;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
color: $body-color;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------*
|
||||
# mega-menu END
|
||||
*------------------*/
|
||||
@@ -0,0 +1,68 @@
|
||||
/*------------------*
|
||||
# sub-menu
|
||||
*------------------*/
|
||||
|
||||
.sub-menu {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
min-width: 240px;
|
||||
z-index: 4;
|
||||
box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15);
|
||||
background: $color-white;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
transform-style: preserve-3d;
|
||||
@include transform(rotateX(-75deg));
|
||||
}
|
||||
.main-menu {
|
||||
li {
|
||||
&:hover > {
|
||||
.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
@include transform(rotateX(0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-menu {
|
||||
li {
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid $border-color2;
|
||||
margin: 0;
|
||||
a {
|
||||
font-weight: fontweight(regular);
|
||||
text-align: left;
|
||||
text-transform: capitalize;
|
||||
padding: 0;
|
||||
color: #565656;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:hover > a {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform-origin: 0 0;
|
||||
transform-style: preserve-3d;
|
||||
@include transform(rotateX(-75deg));
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------*
|
||||
# sub-menu END
|
||||
*------------------*/
|
||||
@@ -0,0 +1,136 @@
|
||||
/*------------------*
|
||||
# Top Nave
|
||||
*------------------*/
|
||||
|
||||
.static-info {
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
li {
|
||||
position: relative;
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
a {
|
||||
font-weight: fontweight(regular);
|
||||
text-transform: capitalize;
|
||||
padding: 0 15px;
|
||||
@include max-screen(576, 767) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.english .topnav-submenu {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// navbar-top
|
||||
// theme1
|
||||
.theme1 {
|
||||
.navbar-top {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.modify {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* topnav-submenu */
|
||||
|
||||
.topnav-submenu {
|
||||
top: 50px !important;
|
||||
right: 15px !important;
|
||||
left: auto !important;
|
||||
min-width: 130px;
|
||||
overflow: hidden;
|
||||
padding: 0 15px;
|
||||
background: $color-white;
|
||||
z-index: 3;
|
||||
border-radius: 0;
|
||||
transform: translate3d(0px, 0px, 0px) !important;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: ease-in 0.3s;
|
||||
-webkit-transition: ease-in 0.3s;
|
||||
-moz-transition: ease-in 0.3s;
|
||||
-ms-transition: ease-in 0.3s;
|
||||
-o-transition: ease-in 0.3s;
|
||||
box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15);
|
||||
&.show {
|
||||
top: 40px !important;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@include max-screen(767) {
|
||||
top: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen(991) {
|
||||
right: auto !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
line-height: 25px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
&:last-child a {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// topnav-submenu
|
||||
// theme1
|
||||
.theme1 {
|
||||
.topnav-submenu {
|
||||
li {
|
||||
a {
|
||||
color: #556655 !important;
|
||||
&:hover {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
&.active a {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------*
|
||||
# Top Nave ENd
|
||||
*------------------*/
|
||||
@@ -0,0 +1,140 @@
|
||||
/********************************
|
||||
offcanvas cart style
|
||||
********************************/
|
||||
.offcanvas {
|
||||
.inner {
|
||||
.head {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid $border-color2;
|
||||
.offcanvas-close {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-indent: -9999px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-total {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-top: 1px solid $border-color2;
|
||||
margin: 30px 0;
|
||||
border-bottom: 1px solid $border-color2;
|
||||
strong {
|
||||
color: $color-dark;
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
}
|
||||
|
||||
.minicart-message {
|
||||
margin-top: 15px;
|
||||
color: $color-dark;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minicart-product-list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
.image {
|
||||
flex: 1 0 0px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
@include max-screen(575) {
|
||||
flex: 1 0 50px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
flex: 1 0 calc(100% - 150px);
|
||||
padding-left: 15px;
|
||||
.title {
|
||||
color: $color-dark;
|
||||
line-height: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.quantity-price {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
.amount {
|
||||
color: $color-dark;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.remove {
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0 3px;
|
||||
color: $color-dark;
|
||||
font-size: 18px;
|
||||
}
|
||||
@include max-screen(575) {
|
||||
flex: 1 0 calc(100% - 75px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
|
||||
.theme1 {
|
||||
.inner {
|
||||
.sub-total {
|
||||
.amount {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.minicart-product-list {
|
||||
li {
|
||||
.content {
|
||||
.title {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
offcanvas cart style ENd
|
||||
********************************/
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
/********************************
|
||||
offcanvas toggler btn
|
||||
********************************/
|
||||
.mobile-menu-toggle {
|
||||
svg {
|
||||
width: 50px;
|
||||
position: relative;
|
||||
@include min-screen(576) {
|
||||
top: -8px;
|
||||
}
|
||||
path {
|
||||
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),
|
||||
stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
|
||||
fill: none;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 30px;
|
||||
&#top,
|
||||
&#bottom {
|
||||
stroke-dasharray: 240px 950px;
|
||||
}
|
||||
&#middle {
|
||||
stroke-dasharray: 240px 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .close {
|
||||
svg {
|
||||
path {
|
||||
&#top,
|
||||
&#bottom {
|
||||
stroke-dasharray: -650px;
|
||||
stroke-dashoffset: -650px;
|
||||
}
|
||||
&#middle {
|
||||
stroke-dasharray: 1px 220px;
|
||||
stroke-dashoffset: -115px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
&.theme1 {
|
||||
svg {
|
||||
path {
|
||||
stroke: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/********************************
|
||||
offcanvas toggler btn END
|
||||
********************************/
|
||||
@@ -0,0 +1,246 @@
|
||||
/********************************
|
||||
offcanvas menu style
|
||||
********************************/
|
||||
body {
|
||||
&.offcanvas-open {
|
||||
overflow-y: hidden;
|
||||
padding-right: 17px;
|
||||
@include max-screen(991) {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-overlay {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
background-color: $overlay-color;
|
||||
}
|
||||
|
||||
// offcanvas
|
||||
.offcanvas {
|
||||
&.offcanvas-open {
|
||||
@include transform(translateX(0));
|
||||
}
|
||||
&.offcanvas-mobile-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
&.offcanvas-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
visibility: visible;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(regular);
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 400px;
|
||||
@include max-screen(480) {
|
||||
width: 300px;
|
||||
}
|
||||
height: 100vh;
|
||||
@include transform(translateX(100%));
|
||||
background-color: $color-white;
|
||||
box-shadow: none;
|
||||
@include transition(0.5s ease-in-out);
|
||||
|
||||
.inner {
|
||||
padding: 20px;
|
||||
@include max-screen(991) {
|
||||
overflow-y: scroll;
|
||||
height: 660px;
|
||||
}
|
||||
@include max-screen(767) {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
@include max-screen(480) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $color-dark;
|
||||
font-weight: fontweight(medium);
|
||||
}
|
||||
.offcanvas-close {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 50px !important;
|
||||
text-indent: -9999px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
@include transition(0.5s ease-in-out);
|
||||
@include transform(rotate(-45deg));
|
||||
background-color: $color-dark;
|
||||
}
|
||||
&:hover:after {
|
||||
@include transform(rotate(0deg));
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
@include transition(0.5s ease-in-out);
|
||||
@include transform(rotate(45deg));
|
||||
background-color: $color-dark;
|
||||
}
|
||||
&:hover:before {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-menu ul {
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
a {
|
||||
// color: $color-dark;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 8px 20px;
|
||||
text-transform: capitalize;
|
||||
border-top: 1px solid $border-color2;
|
||||
font-size: 14px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 30px;
|
||||
}
|
||||
.offcanvas-submenu {
|
||||
position: static;
|
||||
top: auto;
|
||||
display: none;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
li {
|
||||
line-height: inherit;
|
||||
position: relative;
|
||||
a {
|
||||
font-weight: fontweight(regular);
|
||||
padding-left: 40px;
|
||||
}
|
||||
ul a {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-expand {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 24px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
@include transition(0.5s ease-in-out);
|
||||
background-color: $color-dark;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
&.active > .menu-expand {
|
||||
&::after {
|
||||
@include transform(rotate(0) scale(0.75));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-social {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px 0;
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@include border-radius(50%);
|
||||
text-align: center;
|
||||
border: 2px solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offcanvas-menu
|
||||
// theme1
|
||||
.theme1 {
|
||||
.offcanvas-menu {
|
||||
li > {
|
||||
&:hover .menu-expand:after {
|
||||
background: $theme-color;
|
||||
}
|
||||
&:hover .menu-expand:before {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offcanvas-menu
|
||||
|
||||
// offcanvas-social
|
||||
.theme1 {
|
||||
.offcanvas-social {
|
||||
a {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: $theme-color;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offcanvas-social
|
||||
|
||||
/********************************
|
||||
offcanvas menu style ENd
|
||||
********************************/
|
||||
@@ -0,0 +1,36 @@
|
||||
/********************************
|
||||
pagination
|
||||
********************************/
|
||||
|
||||
.page-item {
|
||||
margin: 0 4px;
|
||||
.page-link {
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: fontweight(regular);
|
||||
color: $color-dark !important;
|
||||
background: $color-grey-light !important;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
border: 0 !important;
|
||||
@include border-radius(50% !important);
|
||||
i {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.active .page-link,
|
||||
.page-link:hover {
|
||||
color: $color-white !important;
|
||||
background: $theme-color !important;
|
||||
}
|
||||
|
||||
/********************************
|
||||
pagination END
|
||||
********************************/
|
||||
@@ -0,0 +1,86 @@
|
||||
/********************************
|
||||
product-tags style
|
||||
********************************/
|
||||
|
||||
.product-size {
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
}
|
||||
select {
|
||||
background-color: $color-white;
|
||||
padding: 0 30px 0 10px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: 40px;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 14px;
|
||||
color: $color-dark;
|
||||
border: 1px solid $border-color;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=)
|
||||
no-repeat scroll right 0.5rem center/1.25rem 1.25rem;
|
||||
option {
|
||||
font-weight: fontweight(regular);
|
||||
}
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-arrow-down {
|
||||
position: absolute;
|
||||
left: calc(100% - 85px);
|
||||
}
|
||||
|
||||
/* product-widget */
|
||||
|
||||
.product-widget {
|
||||
.title {
|
||||
font-weight: fontweight(semi-bold);
|
||||
font-size: 18px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-transform: capitalize;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-tag {
|
||||
li {
|
||||
a {
|
||||
font-weight: fontweight(regular);
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
padding: 10px 25px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #565656;
|
||||
border: 1px solid $border-color;
|
||||
background: $color-white;
|
||||
margin: 4px;
|
||||
margin-left: 4px;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
product-tags style END
|
||||
********************************/
|
||||
@@ -0,0 +1,74 @@
|
||||
/********************************
|
||||
product links style
|
||||
********************************/
|
||||
.actions {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
@include min-screen(768) {
|
||||
bottom: 20px;
|
||||
}
|
||||
bottom: 30px;
|
||||
li {
|
||||
margin: 0 3px;
|
||||
.action {
|
||||
display: block;
|
||||
background: $color-grey-light;
|
||||
color: $color-dark;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
}
|
||||
@include transform(scale3d(0, 0, 0));
|
||||
@include border-radius(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
.card-body {
|
||||
&:hover {
|
||||
.actions {
|
||||
li {
|
||||
a {
|
||||
@include transform(scale3d(1, 1, 1));
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
a {
|
||||
@include transition(0.6s);
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
a {
|
||||
@include transition(0.9s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.actions {
|
||||
li {
|
||||
&:hover .action {
|
||||
background: $theme-color;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
product links style END
|
||||
********************************/
|
||||
@@ -0,0 +1,36 @@
|
||||
/********************************
|
||||
product tab menu style
|
||||
********************************/
|
||||
.product-tab-menu {
|
||||
.nav-item {
|
||||
margin: 0px 2px;
|
||||
@include max-screen(560) {
|
||||
margin: 0px 2px 5px;
|
||||
}
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
padding: 8px 15px;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.nav-link {
|
||||
&.active,
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
background: transparent;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********************************
|
||||
product tab menu style END
|
||||
********************************/
|
||||
@@ -0,0 +1,156 @@
|
||||
@import "./product-tabs-menu";
|
||||
@import "./product-links";
|
||||
|
||||
/********************************
|
||||
product-card style
|
||||
********************************/
|
||||
.tab-content {
|
||||
.tab-pane {
|
||||
&.active {
|
||||
.product-list {
|
||||
animation: zoomIn 0.5s ease;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-thumbnail {
|
||||
img {
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
&.second-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border: 0;
|
||||
box-shadow: 0 0 11.83px 1.17px rgba(0, 0, 0, 0.06);
|
||||
&:hover img {
|
||||
&.second-img {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* product desc style */
|
||||
|
||||
.product-desc {
|
||||
padding: 18px;
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
@include max-screen(991) {
|
||||
font-size: 14px;
|
||||
}
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.product-desc {
|
||||
.title {
|
||||
&:hover {
|
||||
a {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.star-rating {
|
||||
span {
|
||||
font-weight: fontweight(regular);
|
||||
line-height: 1;
|
||||
margin: 0 1px 0 0;
|
||||
font-size: 18px;
|
||||
color: $color-warning;
|
||||
.de-selected {
|
||||
color: $border-color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-weight: fontweight(bold);
|
||||
font-size: 16px;
|
||||
color: $color-dark;
|
||||
.del {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.product-price {
|
||||
.onsale {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pro-btn {
|
||||
background: $color-grey-light;
|
||||
color: $color-dark;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-weight: fontweight(regular);
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
.pro-btn-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.pro-btn {
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product-thumbnail {
|
||||
@include max-screen(480) {
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
@include max-screen(480) {
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
product-card style END
|
||||
********************************/
|
||||
@@ -0,0 +1,26 @@
|
||||
/********************************
|
||||
scrollUp style
|
||||
********************************/
|
||||
|
||||
#scrollUp {
|
||||
background: $theme-color;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
border-radius: 100%;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
font-weight: fontweight(medium);
|
||||
&:hover {
|
||||
background: $theme-color2;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********************************
|
||||
scrollUp style End
|
||||
********************************/
|
||||
@@ -0,0 +1,78 @@
|
||||
/*******************************
|
||||
blog-init
|
||||
*******************************/
|
||||
.blog-init {
|
||||
.slick-list {
|
||||
margin: 0 -15px;
|
||||
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-thumb {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post-content {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: fontweight(semi-bold);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.sub-title {
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.read-more {
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
color: $theme-color;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-link {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: $theme-color;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-links {
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
a {
|
||||
color: $tab-menu-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*******************************
|
||||
blog-init End
|
||||
*******************************/
|
||||
@@ -0,0 +1,32 @@
|
||||
/********************************
|
||||
brand section
|
||||
********************************/
|
||||
.brand-init {
|
||||
&.border-top {
|
||||
border-color: $border-color !important;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
margin: 0 -15px;
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-brand {
|
||||
a {
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include transform(scale(1.045) rotate(0.05deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
brand section End
|
||||
********************************/
|
||||
@@ -0,0 +1,36 @@
|
||||
/********************************
|
||||
# featured section
|
||||
********************************/
|
||||
|
||||
.featured-init {
|
||||
.product-thumbnail {
|
||||
img {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-init2 {
|
||||
.product-thumbnail {
|
||||
img {
|
||||
max-width: 120px;
|
||||
@include max-screen(480, 767) {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-init {
|
||||
.product-thumbnail {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
# featured section End
|
||||
********************************/
|
||||
@@ -0,0 +1,109 @@
|
||||
/********************************
|
||||
Main Slider
|
||||
********************************/
|
||||
|
||||
.slick-slider {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.slider-height {
|
||||
height: 855px;
|
||||
@include max-screen(1200, 1400) {
|
||||
height: 595px;
|
||||
}
|
||||
@include max-screen(992, 1199) {
|
||||
height: 595px;
|
||||
}
|
||||
@include max-screen(768, 991) {
|
||||
height: 450px;
|
||||
}
|
||||
@include max-screen(767) {
|
||||
height: 300px;
|
||||
}
|
||||
@include max-screen(576, 767) {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
.slider-height2 {
|
||||
height: 714px;
|
||||
@include max-screen(1200, 1400) {
|
||||
height: 600px;
|
||||
}
|
||||
@include max-screen(992, 1199) {
|
||||
height: 480px;
|
||||
}
|
||||
@include max-screen(768, 991) {
|
||||
height: 400px;
|
||||
}
|
||||
@include max-screen(767) {
|
||||
height: 300px;
|
||||
}
|
||||
@include max-screen(576, 767) {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-content-width {
|
||||
max-width: 52%;
|
||||
@include max-screen(768, 1500) {
|
||||
max-width: 52%;
|
||||
}
|
||||
@include max-screen(576) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-content {
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 65px;
|
||||
text-transform: capitalize;
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
@include max-screen(1200, 1600) {
|
||||
font-size: 50px;
|
||||
}
|
||||
@include max-screen(992, 1199) {
|
||||
font-size: 45px;
|
||||
}
|
||||
@include max-screen(768, 991) {
|
||||
font-size: 35px;
|
||||
}
|
||||
@include max-screen(767) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 20px;
|
||||
color: $color-dark;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0;
|
||||
@include max-screen(768, 991) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@include max-screen(767) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.mb-25 {
|
||||
@include max-screen(767) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
opacity: 0;
|
||||
&.mt-45 {
|
||||
@include max-screen(767) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
# main slider End
|
||||
********************************/
|
||||
@@ -0,0 +1,62 @@
|
||||
/********************************
|
||||
popular Slider
|
||||
********************************/
|
||||
|
||||
.popular-slider-init {
|
||||
.slick-list {
|
||||
padding: 20px 0px;
|
||||
margin: 0 -15px;
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-card {
|
||||
text-align: center;
|
||||
background: $color-white;
|
||||
border: 0;
|
||||
box-shadow: 0 0 11.83px 1.17px rgba(0,0,0,.06);
|
||||
@include border-radius(0px);
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
.thumb-naile{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.popular-title {
|
||||
text-transform: uppercase;
|
||||
padding: 20px 0px 0px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.popular-card {
|
||||
text-align: center;
|
||||
.card-body {
|
||||
.popular-title {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/********************************
|
||||
popular Slider ENd
|
||||
********************************/
|
||||
@@ -0,0 +1,36 @@
|
||||
/********************************
|
||||
product Slider
|
||||
********************************/
|
||||
|
||||
.product-slider-init {
|
||||
.slick-list {
|
||||
padding: 15px 0;
|
||||
margin: -15px;
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-slider-new {
|
||||
.slick-list {
|
||||
padding: 15px 0;
|
||||
margin: -15px;
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-slider2-init {
|
||||
.slick-list {
|
||||
padding: 15px 0;
|
||||
margin: -15px;
|
||||
.slick-slide {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/********************************
|
||||
product Slider End
|
||||
********************************/
|
||||
@@ -0,0 +1,50 @@
|
||||
/********************************
|
||||
countdown-sync-nav Slider
|
||||
********************************/
|
||||
|
||||
.countdown-sync-nav {
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.product-sync-nav {
|
||||
// max-width: 90%;
|
||||
margin: 0 auto;
|
||||
.slick-slide {
|
||||
padding: 0 5px;
|
||||
.product-thumb {
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border-color: $theme-color;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.slick-current {
|
||||
.product-thumb {
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-opacity {
|
||||
.slick-slide {
|
||||
img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.slick-current.slick-active {
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
countdown-sync-nav Slider End
|
||||
********************************/
|
||||
@@ -0,0 +1,105 @@
|
||||
/********************************
|
||||
product-ctry-init
|
||||
********************************/
|
||||
.product-ctry-init {
|
||||
.product-desc {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
@include max-screen(576) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
.del {
|
||||
font-size: 19px;
|
||||
}
|
||||
.onsale {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.availability {
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
color: $instock;
|
||||
}
|
||||
span {
|
||||
&.in-stock {
|
||||
font-weight: fontweight(regular);
|
||||
color: $theme-color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-deal {
|
||||
.title {
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* clockdiv css */
|
||||
|
||||
.clockdiv {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
line-height: 18px;
|
||||
max-width: 100px;
|
||||
margin-right: 15px;
|
||||
@include max-screen(767) {
|
||||
max-width: 100%;
|
||||
margin: 0 auto 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
line-height: 1;
|
||||
margin-top: 20px;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
color: $color-dark;
|
||||
position: relative;
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 22px;
|
||||
@include max-screen(768, 991) {
|
||||
font-size: 18px;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -4px;
|
||||
content: ":";
|
||||
}
|
||||
&:first-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0 0;
|
||||
color: $color-dark;
|
||||
font-weight: fontweight(regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-sync-init {
|
||||
.product-thumb {
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************
|
||||
product-ctry-init ENd
|
||||
********************************/
|
||||
@@ -0,0 +1,275 @@
|
||||
/********************************
|
||||
slick arrow style
|
||||
********************************/
|
||||
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 50%;
|
||||
border: 0px;
|
||||
background: $color-dark;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
@include transform(translateY(-50%));
|
||||
@include border-radius(50%);
|
||||
}
|
||||
|
||||
.main-slider {
|
||||
.slick-prev {
|
||||
left: 40px;
|
||||
background: $color-dark;
|
||||
color: $color-white;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-next {
|
||||
right: 40px;
|
||||
background: $color-dark;
|
||||
color: $color-white;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-arrow {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// slick-nav
|
||||
.slick-nav {
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
@include max-screen(1199) {
|
||||
left: 0px;
|
||||
}
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-prev {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
@include max-screen(1199) {
|
||||
right: 0px;
|
||||
}
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-next {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// slick-nav-sync
|
||||
.slick-nav-sync {
|
||||
.slick-prev {
|
||||
left: -15px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-prev {
|
||||
left: 15px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
right: -15px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-next {
|
||||
right: 15px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// slick-nav-brand
|
||||
.slick-nav-brand {
|
||||
.slick-prev {
|
||||
left: -40px;
|
||||
@include max-screen(1024) {
|
||||
left: -15px;
|
||||
}
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-prev {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
right: -40px;
|
||||
@include max-screen(1024) {
|
||||
right: -15px;
|
||||
}
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
.slick-next {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// blog-init
|
||||
// .blog-init {
|
||||
// .slick-prev {
|
||||
// left: 0px;
|
||||
// opacity: 0;
|
||||
// visibility: hidden;
|
||||
// }
|
||||
// &:hover {
|
||||
// .slick-prev {
|
||||
// left: -30px;
|
||||
// opacity: 1;
|
||||
// visibility: visible;
|
||||
// @include max-screen(1480) {
|
||||
// left: -15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .slick-next {
|
||||
// right: 0px;
|
||||
// opacity: 0;
|
||||
// visibility: hidden;
|
||||
// }
|
||||
// &:hover {
|
||||
// .slick-next {
|
||||
// right: -30px;
|
||||
// @include max-screen(1480) {
|
||||
// right: -15px;
|
||||
// }
|
||||
// visibility: visible;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// theme1
|
||||
.theme1 .slick-arrow {
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* slick dots style */
|
||||
|
||||
.dots-style {
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 30px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
li {
|
||||
line-height: 1;
|
||||
button {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
text-indent: 2000px;
|
||||
font-size: 0px;
|
||||
display: block;
|
||||
margin: 0 5px;
|
||||
@include transition(0.3s);
|
||||
@include border-radius(50%);
|
||||
&:hover {
|
||||
@include transform(scale3d(1, 1, 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// popular-slider
|
||||
.popular-slider-init {
|
||||
&.dots-style {
|
||||
.slick-dots {
|
||||
bottom: 0px;
|
||||
position: static;
|
||||
margin-top: 30px;
|
||||
li {
|
||||
button {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@include transition(0.3s linear);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.slick-dots {
|
||||
li {
|
||||
button {
|
||||
background: $color-dark;
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
&.slick-active {
|
||||
button {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// popular-slider
|
||||
// theme1
|
||||
.theme1 {
|
||||
.popular-slider-init {
|
||||
&.dots-style {
|
||||
.slick-dots {
|
||||
li {
|
||||
button {
|
||||
background: $color-dark;
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
&.slick-active {
|
||||
button {
|
||||
width: 28px;
|
||||
background: $theme-color;
|
||||
@include border-radius(8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********************************
|
||||
slick arrow style ENd
|
||||
********************************/
|
||||
@@ -0,0 +1,36 @@
|
||||
/*******************************
|
||||
sticky header
|
||||
*******************************/
|
||||
|
||||
#sticky.is-isticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
@include transition(0.3s);
|
||||
animation: ease-in-out 0.5s fadeInDown;
|
||||
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
&.is-isticky {
|
||||
background: $color-white;
|
||||
&:hover {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sticky.custom-sticky.is-isticky {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
@include max-screen(991) {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
sticky header End
|
||||
*******************************/
|
||||
@@ -0,0 +1,32 @@
|
||||
/*******************************
|
||||
section-title style
|
||||
*******************************/
|
||||
|
||||
.section-title {
|
||||
padding-bottom: 50px;
|
||||
.title {
|
||||
position: relative;
|
||||
font-size: 30px;
|
||||
font-weight: fontweight(bold);
|
||||
text-transform: capitalize;
|
||||
@include max-screen(480) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
bottom: 0px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
section-title style End
|
||||
*******************************/
|
||||
@@ -0,0 +1,234 @@
|
||||
/*------------------*
|
||||
# Footer
|
||||
*------------------*/
|
||||
.nletter-form {
|
||||
.form-control {
|
||||
height: 47px;
|
||||
background: $color-white;
|
||||
color: $black-soft;
|
||||
padding: 10px 120px 10px 10px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
border: 1px solid $color-white;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
@include border-radius(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.social-network {
|
||||
@include max-screen(767) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
li {
|
||||
margin: 0 10px 0 0;
|
||||
a {
|
||||
display: block;
|
||||
color: $color-dark;
|
||||
background: $color-white;
|
||||
line-height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.social-network {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// kvmgdnombnm
|
||||
|
||||
.social-network2 {
|
||||
li {
|
||||
margin: 0 15px 0 0;
|
||||
@include max-screen(767) {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
@include max-screen(767) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.social-network2 {
|
||||
li {
|
||||
a {
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.modify{
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.address {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.address-widget {
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.text {
|
||||
line-height: 1;
|
||||
color: $body-color;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.address-widget {
|
||||
.title {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* footer-menu */
|
||||
|
||||
.mx-w-400 {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-widget {
|
||||
.section-title {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.footer-widget {
|
||||
.section-title {
|
||||
&::after {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// footer-menu
|
||||
.footer-menu {
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: #565656;
|
||||
&:hover {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme1
|
||||
.theme1 {
|
||||
.footer-menu {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* coppy-right */
|
||||
|
||||
.coppy-right {
|
||||
p {
|
||||
color: $color-white;
|
||||
}
|
||||
a {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
// theme1
|
||||
.theme1 {
|
||||
.coppy-right {
|
||||
a {
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************
|
||||
footer section End
|
||||
********************************/
|
||||
@@ -0,0 +1,6 @@
|
||||
//menu part
|
||||
@import "../../components/nav/top-nav-style1";
|
||||
@import "../../components/nav/main-menu";
|
||||
@import "../../components/nav/mega-menu";
|
||||
@import "../../components/nav/sub-menu";
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
/*------------------*
|
||||
# Main Content start
|
||||
*------------------*/
|
||||
|
||||
//media Components
|
||||
//product-tags
|
||||
@import "../../components/product-tags/product-tags";
|
||||
//counter
|
||||
@import "../../components/counter/counter";
|
||||
// check-box
|
||||
@import "../../components/check-box/check-box";
|
||||
//static-media
|
||||
@import "../../components/media/static-media";
|
||||
//media
|
||||
@import "../../components/media/media";
|
||||
//slick_arrow_dots
|
||||
@import "../../components/slider/slick_arrow_dots-style";
|
||||
// main-slider
|
||||
@import "../../components/slider/main-slider";
|
||||
// banner
|
||||
@import "../../components/banner/banner";
|
||||
// bread-crumbs
|
||||
@import "../../components/bread-crumbs/bread-crumbs";
|
||||
// product-tabs
|
||||
@import "../../components/products/product-tabs";
|
||||
//product-slider
|
||||
@import "../../components/slider/product-slider";
|
||||
//popular-slider
|
||||
@import "../../components/slider/popular-slider";
|
||||
//featured-slider
|
||||
@import "../../components/slider/featured-slider";
|
||||
//single-product-sync
|
||||
@import "../../components/slider/single-product-sync";
|
||||
//single-product-sync-nav
|
||||
@import "../../components/slider/single-product-sync-nav";
|
||||
// blog-slider
|
||||
@import "../../components/slider/blog-slider";
|
||||
//brand-slider
|
||||
@import "../../components/slider/brand-slider";
|
||||
//pagination
|
||||
@import "../../components/pagination/pagination";
|
||||
// modal
|
||||
@import "../../components/modal/modal";
|
||||
|
||||
/*------------------*
|
||||
# Main Content ENd
|
||||
*------------------*/
|
||||
@@ -0,0 +1,42 @@
|
||||
/*------------------*
|
||||
# About Us Page
|
||||
*------------------*/
|
||||
|
||||
.about-content .title {
|
||||
font-weight: fontweight(semi-bold);
|
||||
color: $color-dark;
|
||||
text-transform: capitalize;
|
||||
font-size: 30px;
|
||||
@include max-screen(767) {
|
||||
font-size: 25px;
|
||||
}
|
||||
max-width: 900px;
|
||||
margin: 0 auto 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.about-info .title {
|
||||
font-size: 34px;
|
||||
|
||||
font-weight: fontweight(semi-bold);
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.single-service {
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: fontweight(semi-bold);
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.service-section {
|
||||
.single-blog {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* *******************
|
||||
about us page End
|
||||
**********************/
|
||||
@@ -0,0 +1,149 @@
|
||||
/*------------------*
|
||||
# Account Page
|
||||
*------------------*/
|
||||
|
||||
.my-account .title {
|
||||
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
font-weight: fontweight(bold);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.register {
|
||||
.title {
|
||||
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
font-weight: fontweight(bold);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.myaccount-tab-menu {
|
||||
flex-direction: column;
|
||||
background-color: $color-white;
|
||||
}
|
||||
.myaccount-tab-menu a {
|
||||
border: 1px solid $border-color;
|
||||
border-bottom: 0;
|
||||
color: $color-dark;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
display: block;
|
||||
padding: 15px 15px 13px;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.myaccount-tab-menu a:last-child {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
.myaccount-tab-menu a:hover,
|
||||
.myaccount-tab-menu a.active {
|
||||
background-color: $theme-color;
|
||||
color: $color-white;
|
||||
}
|
||||
.myaccount-tab-menu a i {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
width: 25px;
|
||||
}
|
||||
.myaccount-content {
|
||||
background-color: $color-white;
|
||||
font-size: 14px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 575px) {
|
||||
.myaccount-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
.myaccount-content h3 {
|
||||
border-bottom: 1px solid $border-color;
|
||||
font-size:30px;
|
||||
font-weight: fontweight(bold);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.myaccount-content .welcome a {
|
||||
color: $color-dark;
|
||||
}
|
||||
.myaccount-content .welcome a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
.myaccount-content .welcome strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.myaccount-content a.edit-address-btn {
|
||||
border-color: #333;
|
||||
}
|
||||
.myaccount-content a.edit-address-btn i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.myaccount-content a.edit-address-btn:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
.myaccount-table {
|
||||
white-space: nowrap;
|
||||
font-size: 15px;
|
||||
}
|
||||
.myaccount-table table th,
|
||||
.myaccount-table .table th {
|
||||
padding: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.myaccount-table table td,
|
||||
.myaccount-table .table td {
|
||||
padding: 20px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.myaccount-table table td a:hover,
|
||||
.myaccount-table .table td a:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
.saved-message {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
}
|
||||
.account-details-form h4 {
|
||||
text-transform: capitalize;
|
||||
margin: 0;
|
||||
color: $color-dark;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.table .thead-light th {
|
||||
background-color: #e9ecef;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.account-details-form {
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="number"],
|
||||
input[type="tel"] {
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
padding: 0.8rem 1.6rem;
|
||||
height: 38px;
|
||||
line-height: 1.25;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ***************
|
||||
my-account End
|
||||
******************/
|
||||
@@ -0,0 +1,832 @@
|
||||
/*------------------*
|
||||
# Check out Page
|
||||
*------------------*/
|
||||
|
||||
.billing-info-wrap .billing-info input,
|
||||
.billing-info-wrap .billing-select input {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .checkout-account-toggle input {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.billing-info-wrap .additional-info-wrap .additional-info textarea {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
height: 138px;
|
||||
padding: 17px 20px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.billing-info-wrap {
|
||||
.title {
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
font-weight: fontweight(semi-bold);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.your-order-area {
|
||||
.title {
|
||||
font-size: 30px;
|
||||
text-transform: capitalize;
|
||||
font-weight: fontweight(semi-bold);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.billing-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.billing-info label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
height: 45px;
|
||||
border-radius: 0px;
|
||||
outline: 0;
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
border-color: #e6e6e6;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.open-toggle,
|
||||
.open-toggle2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap {
|
||||
padding: 38px 45px 44px;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-top ul li {
|
||||
font-size: 24px;
|
||||
text-transform: capitalize;
|
||||
color: #111;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-top ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-top ul li {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
list-style: outside none none;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-middle {
|
||||
border-bottom: 1px solid #dee0e4;
|
||||
border-top: 1px solid #dee0e4;
|
||||
margin: 29px 0;
|
||||
padding: 19px 0 18px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-bottom ul li.your-order-shipping {
|
||||
font-size: 15px;
|
||||
color: $color-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-middle ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-bottom ul {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-total ul {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.billing-info-wrap .billing-info input,
|
||||
.billing-info-wrap .billing-select input {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .nice-select {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .nice-select .list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.billing-info-wrap .nice-select:active,
|
||||
.billing-info-wrap .nice-select.open,
|
||||
.billing-info-wrap .nice-select:focus {
|
||||
border-color: #ebebeb;
|
||||
}
|
||||
|
||||
.billing-info-wrap .billing-info input.billing-address,
|
||||
.billing-info-wrap .billing-select input.billing-address {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .checkout-account label {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .checkout-account input {
|
||||
border: 1px solid #e6e6e6;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-top: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.billing-info-wrap .checkout-account-toggle input {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.billing-info-wrap .additional-info-wrap h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: $color-dark;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.billing-info-wrap .additional-info-wrap .additional-info textarea {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
height: 138px;
|
||||
padding: 17px 20px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.additional-info-wrap {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap {
|
||||
padding: 38px 45px 44px;
|
||||
|
||||
@include max-screen(767) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-top ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-top ul li {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
list-style: outside none none;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-middle {
|
||||
border-bottom: 1px solid #dee0e4;
|
||||
border-top: 1px solid #dee0e4;
|
||||
margin: 29px 0;
|
||||
padding: 19px 0 18px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-middle ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-bottom ul {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-bottom ul li.your-order-shipping {
|
||||
font-size: 15px;
|
||||
color: $color-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-total {
|
||||
border-bottom: 1px solid #dee0e4;
|
||||
border-top: 1px solid #dee0e4;
|
||||
margin: 18px 0 33px;
|
||||
padding: 17px 0 19px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-total ul {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-total ul li.order-total {
|
||||
font-weight: 500;
|
||||
color: $color-dark;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.your-order-area .your-order-wrap .your-order-product-info .your-order-total ul li {
|
||||
font-weight: 600;
|
||||
color: $theme-color;
|
||||
font-size: 16px;
|
||||
list-style: outside none none;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion:last-child {
|
||||
margin: 0 0 0;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion h4 a {
|
||||
color: $color-dark;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion .panel-body {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.your-order-area .payment-accordion .panel-body p {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.Place-order {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.open-toggle,
|
||||
.open-toggle2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title {
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title span {
|
||||
color: $color-dark;
|
||||
font-size: 14px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title a {
|
||||
color: $color-dark;
|
||||
display: block;
|
||||
padding: 16px 55px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title a:hover::before {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account h3.panel-title a::before {
|
||||
color: #000;
|
||||
content: "\f3d0";
|
||||
display: inline-block;
|
||||
font-family: "Ionicons";
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .account-info-wrapper {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .account-info-wrapper h4 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
color: $color-dark;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .account-info-wrapper h5 {
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.2px;
|
||||
margin-top: 7px;
|
||||
font-weight: 600;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-info label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-info input {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
border: 1px solid #ebebeb;
|
||||
color: #666;
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-back-btn {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-top: 26px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-back-btn .billing-back a {
|
||||
color: $color-dark;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-back-btn .billing-back a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .billing-back-btn .billing-back a i {
|
||||
font-size: 15px;
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-info {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-info p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-edit-delete a.edit {
|
||||
background-color: #0090f0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-edit-delete a.edit:hover {
|
||||
background-color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-edit-delete a:hover {
|
||||
background-color: $theme-color;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper .entries-edit-delete a {
|
||||
background-color: #f32013;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin: 0 2px;
|
||||
padding: 12px 15px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.single-my-account {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.single-my-account:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper {
|
||||
border: 1px solid #eaeaea;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.single-my-account .myaccount-info-wrapper .entries-wrapper::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list a:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list a::before {
|
||||
background-color: #000;
|
||||
bottom: 5px;
|
||||
content: "";
|
||||
height: 18px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
-webkit-transition: all 0.4s ease 0s;
|
||||
-o-transition: all 0.4s ease 0s;
|
||||
transition: all 0.4s ease 0s;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list a.active h4 {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-register-tab-list a h4 {
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
margin: 0 20px;
|
||||
text-transform: capitalize;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
-o-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 80px;
|
||||
text-align: left;
|
||||
|
||||
@include max-screen(768) {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form input {
|
||||
background-color: transparent;
|
||||
border: 1px solid #ebebeb;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
height: 45px;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form .button-box .login-toggle-btn {
|
||||
padding: 10px 0 19px;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form input[type="checkbox"] {
|
||||
height: 15px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form .button-box .login-toggle-btn label {
|
||||
color: $color-dark;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form .button-box .login-toggle-btn a.flote-none {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form .button-box .login-toggle-btn a {
|
||||
color: $color-dark;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
-o-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
|
||||
@include max-screen(480) {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-register-wrapper .login-form-container .login-register-form form .button-box .login-toggle-btn a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.contact-map #mapid {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
.custom-row-2 {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.custom-row-2 div[class^="col-"] {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.contact-info-wrap {
|
||||
background-color: #f3f3f3;
|
||||
padding: 120px 70px 116px 90px;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info .contact-icon {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info .contact-icon i {
|
||||
font-size: 20px;
|
||||
color: $color-dark;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border: 1px solid #252525;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
-o-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info .contact-info-dec p {
|
||||
line-height: 1;
|
||||
color: $color-dark;
|
||||
margin: 0 0 9px;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info .contact-info-dec p a {
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info .contact-info-dec p a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.contact-info-wrap .single-contact-info:hover .contact-icon i {
|
||||
background-color: $theme-color;
|
||||
color: #fff;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
|
||||
.contact-social h3 {
|
||||
font-weight: 700;
|
||||
color: $color-dark;
|
||||
font-size: 24px;
|
||||
margin: 0 0 17px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.contact-social ul li a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.contact-social .social-info li a {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background-color: #f3f3f3;
|
||||
padding: 35px;
|
||||
|
||||
@include max-screen(767) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form .contact-title h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: $color-dark;
|
||||
line-height: 1;
|
||||
margin-bottom: 36px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.contact-form .contact-form-style input,
|
||||
.contact-form .contact-form-style textarea {
|
||||
background: transparent;
|
||||
border: 1px solid #c1c1c1;
|
||||
height: 40px;
|
||||
padding: 2px 14px;
|
||||
margin-bottom: 30px;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.contact-form p {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.contact-form .contact-form-style textarea {
|
||||
padding: 20px 14px;
|
||||
margin-bottom: 0;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.contact-map {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.contact-form .contact-form-style button {
|
||||
border: none;
|
||||
background-color: $theme-color;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
padding: 15px 52px;
|
||||
margin-top: 33px;
|
||||
outline: none;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
-o-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.contact-form .contact-form-style button:hover {
|
||||
background-color: $color-dark;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
font-size: 20px;
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
margin: 20px 0px 15px;
|
||||
}
|
||||
|
||||
.check-out-btn {
|
||||
padding: 14px 30px;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*------------------*
|
||||
# Compare Page
|
||||
*------------------*/
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.compare-section .table {
|
||||
min-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-section img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.compare-section .title {
|
||||
font-weight: fontweight(bold);
|
||||
font-size: 30px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.compare-section .sub-title {
|
||||
font-size: 15px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.compare-section .table .thead-light th {
|
||||
background-color: $color-white;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.compare-section .table td,
|
||||
.compare-section .table th {
|
||||
vertical-align: middle;
|
||||
border: 1px solid $border-color;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.compare-section .table th {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.compare-section .table td {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.compare-section .table td p {
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
/* ***************
|
||||
compare End
|
||||
******************/
|
||||
@@ -0,0 +1,8 @@
|
||||
/*------------------*
|
||||
# Contact Us Page
|
||||
*------------------*/
|
||||
|
||||
@import "../components/forms/contact-form/contact-form";
|
||||
/*------------------*
|
||||
# Contact Us End
|
||||
*------------------*/
|
||||
@@ -0,0 +1,13 @@
|
||||
/*******************
|
||||
map page start
|
||||
******************/
|
||||
|
||||
.map iframe {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ***************
|
||||
map page End
|
||||
******************/
|
||||
@@ -0,0 +1,306 @@
|
||||
/************************
|
||||
single-product start
|
||||
************************/
|
||||
|
||||
|
||||
.single-product-head {
|
||||
.title {
|
||||
font-weight: fontweight(semi-bold);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.star-content {
|
||||
.star-on {
|
||||
margin: 0 1px 0 0;
|
||||
color: $color-warning;
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 18px;
|
||||
}
|
||||
a {
|
||||
font-size: 15px;
|
||||
font-weight: fontweight(regular);
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// product-tab-menu single-product
|
||||
|
||||
.product-tab-menu {
|
||||
&.single-product {
|
||||
.nav-item {
|
||||
margin-bottom: 30px;
|
||||
.nav-link {
|
||||
text-transform: capitalize;
|
||||
color: $color-dark;
|
||||
padding: 0 0 15px 0;
|
||||
margin: 0 30px;
|
||||
font-size: 24px;
|
||||
font-weight: fontweight(semi-bold);
|
||||
border: 0px;
|
||||
@include max-screen(767) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@include border-radius(0px);
|
||||
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
&.active {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-product-desc {
|
||||
background: $color-white;
|
||||
padding: 30px;
|
||||
border: 1px solid $border-color;
|
||||
ul {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.studio-thumb {
|
||||
img {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
h3 {
|
||||
text-transform: capitalize;
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
font-size: 0.9375rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
color: $color-dark;
|
||||
font-weight: fontweight(medium);
|
||||
small {
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-features {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
li {
|
||||
flex: 1 0 40%;
|
||||
|
||||
font-weight: fontweight(regular);
|
||||
background: $feature;
|
||||
padding: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
min-height: 2.5rem;
|
||||
word-break: normal;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grade-content {
|
||||
.grade {
|
||||
font-weight: fontweight(medium);
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
color: $instock;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.star-on {
|
||||
color: $color-warning;
|
||||
|
||||
font-weight: fontweight(regular);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: fontweight(medium);
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
color: $instock;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: $color-dark;
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
padding-top: 9px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
color: $grey-soft;
|
||||
}
|
||||
}
|
||||
|
||||
.group-img {
|
||||
img {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-grouped {
|
||||
.title {
|
||||
margin-bottom: 0.8rem;
|
||||
color: $color-dark;
|
||||
font-size: 15px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $body-color;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.product-anotherinfo-wrapper ul li {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
list-style: outside none none;
|
||||
margin: 0 0 13px;
|
||||
}
|
||||
.product-anotherinfo-wrapper ul li span {
|
||||
color: $color-dark;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
margin: 0 26px 0 0;
|
||||
min-width: 85px;
|
||||
}
|
||||
.single-review .review-top-wrap .review-left {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.single-review .review-top-wrap .review-left .review-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.single-review .review-top-wrap .review-left .review-name h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.single-review .review-top-wrap .review-left .rating-product {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rating-product {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.rating-product i {
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
color: #fdd835;
|
||||
}
|
||||
|
||||
.single-review .review-top-wrap .review-left {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.review-left a {
|
||||
color: #565656;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.single-review .review-bottom p {
|
||||
margin: 0;
|
||||
max-width: 93%;
|
||||
}
|
||||
|
||||
.ratting-form-wrapper .ratting-form form .star-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 6px 0 20px;
|
||||
}
|
||||
.ratting-form-wrapper h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ratting-form-wrapper .ratting-form form .star-box span {
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
.rating-form-style {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ratting-form-wrapper .ratting-form form .rating-form-style input,
|
||||
.ratting-form-wrapper .ratting-form form .rating-form-style textarea {
|
||||
padding: 2px 10px 2px 20px;
|
||||
background: transparent;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rating-form-style input {
|
||||
height: 45px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #253237;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rating-form-style {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ratting-form-wrapper .ratting-form form .rating-form-style textarea {
|
||||
height: 180px;
|
||||
padding: 20px 10px 2px 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rating-form-style input[type="submit"] {
|
||||
padding: 0 55px !important;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
width: auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
text-transform: uppercase;
|
||||
background: $color-dark !important;
|
||||
color: #fff !important;
|
||||
transition: all 300ms linear;
|
||||
&:hover {
|
||||
background: $theme-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
/************************
|
||||
single-product End
|
||||
************************/
|
||||
@@ -0,0 +1,54 @@
|
||||
/*------------------*
|
||||
# Whishlist Page
|
||||
*------------------*/
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.whish-list-section .table {
|
||||
min-width: 1030px;
|
||||
}
|
||||
}
|
||||
|
||||
.whish-list-section .title {
|
||||
font-weight: fontweight(bold);
|
||||
font-size: 30px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.whish-list-section .table .thead-light th {
|
||||
background-color: $theme-color;
|
||||
border-color: transparent;
|
||||
text-transform: capitalize;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
color: $color-white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.whish-list-section .table td,
|
||||
.whish-list-section .table th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.whish-list-section img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.whish-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
.whish-list-price {
|
||||
color: $color-dark;
|
||||
font-size: 15px;
|
||||
}
|
||||
select.form-control {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: $feature
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=)
|
||||
no-repeat scroll right 0.5rem center/1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
/* ***************
|
||||
whishlist End
|
||||
******************/
|
||||
@@ -0,0 +1,471 @@
|
||||
/*------------------*
|
||||
# Blog Pages
|
||||
*------------------*/
|
||||
|
||||
/* 10. Blog Section CSS */
|
||||
|
||||
.blog-title {
|
||||
margin: 25px 0px 0px;
|
||||
|
||||
.title {
|
||||
color: $color-dark;
|
||||
font-size: 34px;
|
||||
font-weight: fontweight(medium);
|
||||
line-height: 1;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-transform: capitalize;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* blog left sidebar */
|
||||
|
||||
.sidebar-widget .post-title {
|
||||
font-size: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: fontweight(bold);
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-transform: capitalize;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-search-form .form-control {
|
||||
height: 46px;
|
||||
border: 2px solid $theme-color;
|
||||
padding-right: 22%;
|
||||
@include max-screen(1200, 1500) {
|
||||
padding-right: 25%;
|
||||
}
|
||||
|
||||
@include max-screen(992, 1199) {
|
||||
padding-right: 30%;
|
||||
}
|
||||
|
||||
@include max-screen(768, 991) {
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
@include max-screen(576, 767) {
|
||||
padding-right: 15%;
|
||||
}
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.blog-media-list .sub-title {
|
||||
font-size: 14px;
|
||||
font-weight: fontweight(bold);
|
||||
}
|
||||
|
||||
.post-thumb img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.object-fit-none {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.font-style-normal {
|
||||
font-style: normal !important;
|
||||
}
|
||||
.section-title.underline-shape {
|
||||
& h2 {
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-section {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.comment-section .title {
|
||||
text-transform: capitalize;
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-section .sub-title {
|
||||
text-transform: capitalize;
|
||||
color: $color-dark;
|
||||
line-height: 24px;
|
||||
|
||||
font-weight: fontweight(medium);
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-section span {
|
||||
display: block;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.comment-section p {
|
||||
margin: 30px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.reply {
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.reply:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.section-title.underline-shape {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blog-post-media {
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-image img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.single-blog.blog-image img {
|
||||
height: auto;
|
||||
}
|
||||
.blog-post-media iframe {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
.blog-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.blog-title a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
.blog-page-meta li a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
.blog-page-meta li {
|
||||
display: inline-block;
|
||||
}
|
||||
.blog-page-meta li a {
|
||||
display: block;
|
||||
color: #565656;
|
||||
}
|
||||
.blog-page-meta li:first-child:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -9px;
|
||||
left: auto;
|
||||
background: #555;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.blog-page-meta li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.blog-page-meta li:first-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.blog-page-meta {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.blog-post-content-inner p {
|
||||
margin: 20px 0;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid#ebebeb;
|
||||
}
|
||||
.blog-post-content-inner .read-more-btn:hover {
|
||||
color: $theme-color;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.blog-gallery .slick-arrow i {
|
||||
font-size: 26px;
|
||||
color: #333;
|
||||
}
|
||||
.blog-gallery .slick-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blog-gallery .slick-arrow.next {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.blog-gallery:hover .slick-arrow {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
left: 20px;
|
||||
}
|
||||
.blog-gallery:hover .slick-arrow.next {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
.blog-gallery .slick-slide img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.single-post-content p {
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
.single-post-content p.quate-speech {
|
||||
margin-left: 15px;
|
||||
@include min-screen(992) {
|
||||
margin-left: 60px;
|
||||
}
|
||||
padding: 10px 15px;
|
||||
line-height: 26px;
|
||||
font-style: italic;
|
||||
border-left: 3px solid$theme-color;
|
||||
}
|
||||
.tag-list li {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
color: $color-dark;
|
||||
}
|
||||
.tag-list li a {
|
||||
color: #565656;
|
||||
}
|
||||
.tag-list li a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
.social li {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
color: $color-dark;
|
||||
}
|
||||
.social li a {
|
||||
color: #565656;
|
||||
}
|
||||
.social li a:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
span.title {
|
||||
font-weight: 700;
|
||||
color: $color-dark;
|
||||
}
|
||||
.blog-related-post .blog-title {
|
||||
font-size: 18px;
|
||||
@include max-screen(1024) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-related-post {
|
||||
padding: 40px 0 30px 0;
|
||||
@include max-screen(767) {
|
||||
padding: 40px 0 0px 0;
|
||||
}
|
||||
border-top: 1px solid#ebebeb;
|
||||
border-bottom: 1px solid#ebebeb;
|
||||
}
|
||||
.blog-single-tags-share {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.comment-area .review-content {
|
||||
padding: 30px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
.comment-area {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.comment-heading {
|
||||
font-size: 24px;
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.blog-comment-form .comment-heading {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.blog-comment-form p {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.review-name {
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.single-form input,
|
||||
.single-form textarea {
|
||||
padding: 2px 10px 2px 20px;
|
||||
background: transparent;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #333;
|
||||
}
|
||||
.single-form input {
|
||||
height: 45px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: $color-dark;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
}
|
||||
.single-form textarea {
|
||||
height: 180px;
|
||||
padding: 20px 10px 2px 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
.single-form input[type="submit"] {
|
||||
padding: 0 55px !important;
|
||||
line-height: 48px;
|
||||
width: auto;
|
||||
height: 48px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
text-transform: uppercase;
|
||||
background: $theme-color !important;
|
||||
color: #fff !important;
|
||||
transition: all 300ms linear;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.single-form input[type="submit"]:hover {
|
||||
background: $color-dark !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.single-blog .blog-post-content-inner {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.comment-area .single-review.child-review {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.single-review .review-img {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 90px;
|
||||
flex: 0 0 90px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
.single-review {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0 0 50px;
|
||||
@include max-screen(767) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.single-review .review-img {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 90px;
|
||||
flex: 0 0 90px;
|
||||
margin: 0 15px 0 0;
|
||||
@include max-screen(767) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-review {
|
||||
img {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-form {
|
||||
label {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view-list,
|
||||
.grid-view {
|
||||
.product-thumbnail {
|
||||
@include max-screen(767) {
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
.second-img {
|
||||
@include max-screen(767) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view-list {
|
||||
.product-thumbnail {
|
||||
img {
|
||||
@include min-screen(767) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/********************************
|
||||
Blog Section End
|
||||
********************************/
|
||||
@@ -0,0 +1,123 @@
|
||||
/*------------------*
|
||||
# Shop Pages
|
||||
*------------------*/
|
||||
.tab-content .tab-pane.active .grid-view .product-card {
|
||||
animation: zoomIn 0.5s ease;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.tab-content .tab-pane .grid-view-list .product-card {
|
||||
padding: 15px;
|
||||
}
|
||||
.tab-content .tab-pane.active .grid-view-list .product-card {
|
||||
animation: fadeInRight 0.5s ease;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.grid-nav-wraper {
|
||||
padding: 10px 30px;
|
||||
@include max-screen(991) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-grid-nav .nav .nav-item {
|
||||
margin-right: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.total-products {
|
||||
font-weight: fontweight(regular);
|
||||
margin-left: 50px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
@include max-screen(991) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-grid-nav .nav .nav-link {
|
||||
color: $color-dark;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.shop-grid-nav .nav .nav-link.active,
|
||||
.shop-grid-nav .nav .nav-link:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.shop-grid-button button {
|
||||
width: 100%;
|
||||
background: $color-white;
|
||||
padding: 2px 15px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: $color-dark;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shop-grid-button button span {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.shop-grid-menu {
|
||||
background: $color-white;
|
||||
width: calc(100% - 145px);
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.shop-grid-menu .dropdown-item {
|
||||
font-weight: fontweight(regular);
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
padding: 3px 15px;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.shop-grid-menu .dropdown-item:hover {
|
||||
background: $theme-color;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.sort-by {
|
||||
min-width: 70px;
|
||||
|
||||
font-weight: fontweight(regular);
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
color: $color-dark;
|
||||
margin-left: 50px;
|
||||
@include max-screen(991) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list-des {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.availability-list p span {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.grid-view-list {
|
||||
.product-desc .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select{
|
||||
padding: 0px 15px;
|
||||
height: 30px !important;
|
||||
border: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/*------------------*
|
||||
# Shop Pages End
|
||||
*------------------*/
|
||||
@@ -0,0 +1,210 @@
|
||||
/*-----------------------------------------------------------------------------------
|
||||
|
||||
Template Name: Looki - Beauty & Cosmetics eCommerce Bootstrap 5 Template
|
||||
Template URI: site.com
|
||||
Description: Looki - Beauty & Cosmetics eCommerce Bootstrap 5 Template
|
||||
Author: Hastech
|
||||
Author URI: site.com
|
||||
Version: 1.0
|
||||
|
||||
-----------------------------------------------------------------------------------
|
||||
|
||||
CSS INDEX
|
||||
===================
|
||||
|
||||
[ 01. Theme default CSS ]
|
||||
[ 02. header CSS ]
|
||||
[ 02.1 header sticky CSS ]
|
||||
[ 02.2 search-form CSS ]
|
||||
[ 02.3 cart-links CSS ]
|
||||
[ 02.4 offcanvas-menu-toggler CSS ]
|
||||
[ 02.5 offcanvas CSS ]
|
||||
[ 02.6 offcanvas-cart CSS ]
|
||||
[ 02.7 all-ctry-menu CSS ]
|
||||
[ 03. main-slider CSS ]
|
||||
[ 03.1 banner CSS ]
|
||||
[ 03.2 bread-crumbs CSS ]
|
||||
[ 04. tabs-slider CSS ]
|
||||
[ 05. product-slider CSS ]
|
||||
[ 06. popular-slider CSS ]
|
||||
[ 07. featured-slider CSS ]
|
||||
[ 08. single-product-sync CSS ]
|
||||
[ 09. single-product-sync-nav CSS ]
|
||||
[ 09.1 single-product CSS ]
|
||||
[ 10. blog-slider CSS ]
|
||||
[ 11. brand-slider CSS ]
|
||||
[ 12. slick arrow dots CSS ]
|
||||
[ 13. product-tags CSS ]
|
||||
[ 14. counter CSS ]
|
||||
[ 15. check-box CSS ]
|
||||
[ 16. static-media CSS ]
|
||||
[ 17. media CSS ]
|
||||
[ 18. pagination CSS ]
|
||||
[ 19. modal CSS ]
|
||||
[ 20. Footer CSS ]
|
||||
[ 21. footer CSS ]
|
||||
[ 22. scroll-up CSS ]
|
||||
[ 23. pages ]
|
||||
[ 23.1 blogPages ]
|
||||
[ 23.2 shopPages ]
|
||||
[ 23.3 about-us ]
|
||||
[ 23.4 whishlist ]
|
||||
[ 23.5 contact-us ]
|
||||
[ 23.6 account ]
|
||||
[ 23.7 check-out ]
|
||||
[ 23.8 compare ]
|
||||
[ 23.9 map ]
|
||||
|
||||
|
||||
-----------------------------------------------------------------------------------*/
|
||||
|
||||
// Base variables
|
||||
@import "./base/variables";
|
||||
//mixins
|
||||
@import "./base/mixins";
|
||||
//functions
|
||||
@import "./base/functions";
|
||||
//base
|
||||
/****************************
|
||||
[ 01. Theme default CSS ]
|
||||
*****************************/
|
||||
@import "./base/base";
|
||||
|
||||
//placeholder
|
||||
@import "./base/placeholder";
|
||||
//overlay
|
||||
@import "./base/overlay";
|
||||
//overlay
|
||||
@import "./components/back-drop-search/back-drop-search";
|
||||
//background-&-colors
|
||||
@import "./base/background-&-colors";
|
||||
//spacer
|
||||
@import "./base/spacer";
|
||||
//buttons Components
|
||||
@import "./components/buttons/buttons";
|
||||
//title-section
|
||||
@import "./components/title-section/title-section";
|
||||
// badge
|
||||
@import "./components/badge/badge";
|
||||
// header
|
||||
/****************************
|
||||
[ 02. header CSS ]
|
||||
*****************************/
|
||||
@import "./layout/header/header";
|
||||
//sticky
|
||||
/****************************
|
||||
[ 02.1 header sticky CSS ]
|
||||
*****************************/
|
||||
@import "./components/sticky-header/sticky-header";
|
||||
// search form
|
||||
/****************************
|
||||
[ 02.2 search-form CSS ]
|
||||
*****************************/
|
||||
@import "./components/forms/search-form/search-form";
|
||||
//cart-links
|
||||
/****************************
|
||||
[ 02.3 cart-links CSS ]
|
||||
*****************************/
|
||||
@import "./components/cart-links/cart-links";
|
||||
// offcanvas-menu-toggler
|
||||
/***********************************
|
||||
[ 02.4 offcanvas-menu-toggler CSS ]
|
||||
************************************/
|
||||
@import "./components/offcanvas-menu-toggler/offcanvas-menu-toggler";
|
||||
//offcanvas
|
||||
/****************************
|
||||
[ 02.5 offcanvas CSS ]
|
||||
*****************************/
|
||||
@import "./components/offcanvas/offcanvas";
|
||||
//offcanvas-cart
|
||||
/****************************
|
||||
[ 02.6 offcanvas-cart CSS ]
|
||||
*****************************/
|
||||
@import "./components/offcanvas-cart/offcanvas-cart";
|
||||
// all-ctry-menu
|
||||
/****************************
|
||||
[ 02.7 all-ctry-menu CSS ]
|
||||
*****************************/
|
||||
@import "./components/all-ctry-menu/all-ctry-menu";
|
||||
|
||||
//main-content
|
||||
|
||||
@import "./layout/main-content/main-content";
|
||||
|
||||
/************************************
|
||||
|
||||
[ 09.1 single-product CSS ]
|
||||
|
||||
*************************************/
|
||||
@import "./pages/single-product";
|
||||
/****************************
|
||||
[ 21. footer CSS ]
|
||||
*****************************/
|
||||
//footer
|
||||
@import "./layout/footer/footer";
|
||||
|
||||
/****************************
|
||||
[ 22. scroll-up CSS ]
|
||||
*****************************/
|
||||
|
||||
@import "./components/scroll-up/scroll-up";
|
||||
|
||||
/****************************
|
||||
[ 23. pages ]
|
||||
*****************************/
|
||||
|
||||
/****************************
|
||||
[ 23.1 blogPages ]
|
||||
*****************************/
|
||||
|
||||
@import "./pages/blogPages/blog";
|
||||
|
||||
/****************************
|
||||
[ 23.2 shopPages ]
|
||||
*****************************/
|
||||
@import "./pages/shopPages/shop";
|
||||
|
||||
/****************************
|
||||
[ 23.3 about-us ]
|
||||
*****************************/
|
||||
|
||||
@import "./pages/about-us";
|
||||
|
||||
/****************************
|
||||
[ 23.4 whishlist ]
|
||||
*****************************/
|
||||
|
||||
@import "./pages/whishlist";
|
||||
|
||||
/****************************
|
||||
[ 23.5 contact-us ]
|
||||
*****************************/
|
||||
|
||||
@import "./pages/contact-us";
|
||||
|
||||
/****************************
|
||||
[ 23.6 account ]
|
||||
*****************************/
|
||||
|
||||
@import "./pages/account";
|
||||
|
||||
/****************************
|
||||
[ 23.7 check-out ]
|
||||
|
||||
*****************************/
|
||||
|
||||
@import "./pages/check-out";
|
||||
|
||||
/****************************
|
||||
[ 23.8 compare ]
|
||||
|
||||
*****************************/
|
||||
|
||||
@import "./pages/compare";
|
||||
|
||||
/****************************
|
||||
[ 23.9 map ]
|
||||
|
||||
*****************************/
|
||||
|
||||
@import "./pages/map";
|
||||
Ссылка в новой задаче
Block a user