first commit
Dieser Commit ist enthalten in:
@@ -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
|
||||
*******************************/
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren