first upload all files
This commit is contained in:
77
Themes/Storefront/resources/assets/public/sass/app.scss
Normal file
77
Themes/Storefront/resources/assets/public/sass/app.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
$grid-columns: 18;
|
||||
|
||||
@import
|
||||
'~bootstrap/scss/bootstrap',
|
||||
'~line-awesome/dist/line-awesome/scss/line-awesome',
|
||||
'~jquery-nice-select/scss/nice-select',
|
||||
'~animate.css/animate',
|
||||
'~slick-carousel/slick/slick',
|
||||
'~slick-carousel/slick/slick-theme',
|
||||
'~slick-lightbox/src/styles/slick-lightbox',
|
||||
'~kbw-countdown/src/css/jquery.countdown',
|
||||
'~nouislider/distribute/nouislider',
|
||||
'~flatpickr/dist/flatpickr';
|
||||
|
||||
@import
|
||||
'utils/_variables',
|
||||
'utils/_utilities',
|
||||
'utils/_common';
|
||||
|
||||
@import
|
||||
'base/_reset',
|
||||
'base/_typography',
|
||||
'base/_carousel';
|
||||
|
||||
@import
|
||||
'components/_custom-select',
|
||||
'components/_mega-menu',
|
||||
'components/_tabs',
|
||||
'components/_buttons',
|
||||
'components/_scrollbar',
|
||||
'components/_countdown',
|
||||
'components/_breadcrumb',
|
||||
'components/_form',
|
||||
'components/_alert',
|
||||
'components/_table',
|
||||
'components/_badge',
|
||||
'components/_panel',
|
||||
'components/_pagination',
|
||||
'components/_loader',
|
||||
'components/_modal',
|
||||
'components/_toast';
|
||||
|
||||
@import
|
||||
'layout/_top-nav',
|
||||
'layout/_header',
|
||||
'layout/_sidebar-menu',
|
||||
'layout/_sidebar-cart',
|
||||
'layout/_navigation',
|
||||
'layout/_landscape-products',
|
||||
'layout/_steps',
|
||||
'layout/_order-summary',
|
||||
'layout/_subscribe',
|
||||
'layout/_newsletter',
|
||||
'layout/_cookie-bar',
|
||||
'layout/_footer';
|
||||
|
||||
@import
|
||||
'pages/_home',
|
||||
'pages/_login',
|
||||
'pages/_register',
|
||||
'pages/_account',
|
||||
'pages/_contact',
|
||||
'pages/_compare',
|
||||
'pages/_product-search',
|
||||
'pages/_product-details',
|
||||
'pages/_cart',
|
||||
'pages/_checkout',
|
||||
'pages/_order-complete',
|
||||
'pages/_all-brands',
|
||||
'pages/_all-categories',
|
||||
'pages/_order-details',
|
||||
'pages/_404',
|
||||
'pages/_custom-page';
|
||||
|
||||
[v-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
.slick-list {
|
||||
.slick-track {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dotted {
|
||||
&.slick-slider {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
font-family: 'Line Awesome Free';
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: $color-gray-dark;
|
||||
opacity: 1;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev:before {
|
||||
content: '\f104';
|
||||
}
|
||||
|
||||
.slick-next:before {
|
||||
content: '\f105';
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.slick-prev:before {
|
||||
content: '\f105';
|
||||
}
|
||||
|
||||
.slick-next:before {
|
||||
content: '\f104';
|
||||
}
|
||||
}
|
||||
|
||||
.slick-lightbox {
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
&:before {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-lightbox-close {
|
||||
right: 13px;
|
||||
|
||||
&:before {
|
||||
font-family: 'Line Awesome Free';
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
content: '\f00d';
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: -12px;
|
||||
|
||||
li {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 0 8px 12px;
|
||||
transition: $transition-primary;
|
||||
|
||||
button {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
padding: 0;
|
||||
transition: $transition-primary;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
font-size: 14px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-radius: 5px;
|
||||
transition: $transition-primary;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
width: 30px;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
|
||||
&:before {
|
||||
width: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
padding: 4px 0;
|
||||
color: $color-gray-dark;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
right: 69px;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
right: -3px;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
html {
|
||||
font-family: $primary-font;
|
||||
}
|
||||
|
||||
body {
|
||||
direction: ltr;
|
||||
font-family: $primary-font;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
min-width: 320px;
|
||||
color: $color-black;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
ul, ol, li, address, p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div, a, button {
|
||||
&:active, &:focus, &:visited {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
|
||||
> .tooltip-inner {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 4.5%;
|
||||
padding-right: 4.5%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
max-width: 1770px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2200px) {
|
||||
.container {
|
||||
max-width: 1920px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding-left: 4%;
|
||||
padding-right: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.container {
|
||||
padding-left: 1.5%;
|
||||
padding-right: 1.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
h1, h2, h3, h4, h5, h6, p, span {
|
||||
font-family: $primary-font;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.alert {
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
display: flex;
|
||||
margin: 0 0 0 15px;
|
||||
padding: 20px 64px 20px 28px;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-left: 3px solid;
|
||||
border-radius: $radius-default;
|
||||
|
||||
> i {
|
||||
font-size: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 16px;
|
||||
top: 50%;
|
||||
right: 17px;
|
||||
padding: 10px;
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: $color-green;
|
||||
background: #e8f7f3;
|
||||
border-color: $color-green;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: $color-red;
|
||||
background: #fbebea;
|
||||
border-color: $color-red;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: $color-info;
|
||||
background: #e2ecf7;
|
||||
border-color: $color-info;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: $color-yellow;
|
||||
background: #fef5ea;
|
||||
border-color: $color-yellow;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.badge {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
color: $color-green;
|
||||
background: #edf9f6;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
color: $color-red;
|
||||
background: #fdf0ed;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
color: $color-info;
|
||||
background: #eef5fb;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
color: $color-yellow;
|
||||
background: #fff9ef;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.breadcrumb {
|
||||
margin: 23px 0 0;
|
||||
padding: 0;
|
||||
background: $color-white;
|
||||
|
||||
ul {
|
||||
margin-left: -11px;
|
||||
|
||||
> li {
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '\f105';
|
||||
font-family: 'Line Awesome Free';
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
right: -7px;
|
||||
top: 1px;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-gray-dark;
|
||||
|
||||
&:after {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
.btn {
|
||||
font-family: $primary-font;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
border: none;
|
||||
padding: 7px 24px;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
font-weight: 500;
|
||||
color: $color-white;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
&:focus {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:active:focus {
|
||||
background: $color-default-hover;
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active {
|
||||
background: $color-default-hover;
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover:focus {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
font-weight: 500;
|
||||
padding: 6px 24px;
|
||||
background: transparent;
|
||||
border: 1px solid $color-default;
|
||||
border: 1px solid var(--color-primary);
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:active:focus {
|
||||
color: $color-white;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover:focus {
|
||||
color: $color-black;
|
||||
background: transparent !important;
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-loading {
|
||||
&:after {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover:focus {
|
||||
&:after {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
margin-top: 5px;
|
||||
padding: 12px 50px;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
font-size: 15px;
|
||||
color: $color-black;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.is-countdown {
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
.countdown-row {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.countdown-show4 {
|
||||
.countdown-section {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
position: relative;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.countdown-amount {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
margin: 0 auto 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.countdown-period {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
color: $color-gray;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.nice-select {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
border: none;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.form-control {
|
||||
color: $color-black;
|
||||
padding: 12px 30px 12px 20px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
|
||||
&.arrow-black {
|
||||
background-position: right 10px center;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
min-width: 190px;
|
||||
margin-top: 1px;
|
||||
padding: 19px 0 16px;
|
||||
border-radius: $radius-default;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
transform: scale(0.8);
|
||||
z-index: 9;
|
||||
transition: all $transition-default cubic-bezier(0.5, 0, 0, 1.25);
|
||||
}
|
||||
|
||||
.option {
|
||||
line-height: 36px;
|
||||
padding: 0 30px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&.focus {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
font-weight: 400;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&.focus {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 9px;
|
||||
|
||||
> span {
|
||||
margin-left: 4px;
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
font-size: 14px;
|
||||
height: 45px;
|
||||
padding: 10px 15px;
|
||||
border-color: $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
|
||||
&.arrow-black {
|
||||
background-position: right 10px center;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
&.form-control {
|
||||
transition: border $transition-default, resize 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
&:checked + label,
|
||||
&:not(:checked) + label {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:checked + label:before,
|
||||
&:not(:checked) + label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:checked + label:after,
|
||||
&:not(:checked) + label:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 6px;
|
||||
width: 10px;
|
||||
border: 2px solid;
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
/*rtl:begin:ignore*/
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg) scale(0);
|
||||
/*rtl:end:ignore*/
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:not(:checked) + label:after {
|
||||
opacity: 0;
|
||||
transform: rotate(-45deg) scale(0) #{'/*rtl:ignore*/'};
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: rotate(-45deg) scale(1) #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
&:checked + label,
|
||||
&:not(:checked) + label {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:checked + label:before,
|
||||
&:not(:checked) + label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 50%;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:checked + label:after,
|
||||
&:not(:checked) + label:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:not(:checked) + label:after {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
> a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.form-control {
|
||||
border-color: $color-red;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
margin: 4px 0 -5px;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: $color-gray-dark !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $color-gray-dark !important;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: $color-gray-dark !important;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.loading {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $color-white-transparent;
|
||||
border-radius: $radius-default;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $color-default;
|
||||
border: 3px solid var(--color-primary);
|
||||
border-top-color: transparent !important;
|
||||
z-index: 3;
|
||||
animation: loader-spin 800ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
color: transparent !important;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 2px solid $color-white;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent !important;
|
||||
animation: loader-spin 800ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-spin {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tab-loader {
|
||||
0% {
|
||||
left: 0;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: calc(100% - 20px);
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
.mega-menu {
|
||||
> .multi-level {
|
||||
.sub-menu {
|
||||
> li {
|
||||
&:hover {
|
||||
> a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
> .sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .sub-menu {
|
||||
position: absolute;
|
||||
width: 175px;
|
||||
padding: 12px 0 10px;
|
||||
background: $color-white;
|
||||
border-radius: $radius-default;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
transition: $transition-default;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
font-size: 14px;
|
||||
line-height: 29px;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 36px 0 19px;
|
||||
color: $color-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
> i {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
> .fluid-menu-wrap {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu-wrap {
|
||||
position: absolute;
|
||||
width: 720px;
|
||||
background: $color-white;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right bottom;
|
||||
border-radius: $radius-default;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
.fluid-menu-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 20px 10px 0;
|
||||
|
||||
.fluid-menu-list {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
width: 33.33333333333333%;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.fluid-menu-title {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 7px;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fluid-sub-menu-list {
|
||||
li {
|
||||
a {
|
||||
font-size: 13px;
|
||||
line-height: 29px;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-in-top {
|
||||
0% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-in-right {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-in-bottom {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-in-left {
|
||||
0% {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.modal {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.pagination {
|
||||
margin-right: -13px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.page-item {
|
||||
&.active {
|
||||
.page-link {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.page-link {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
.page-link {
|
||||
padding: 8px 10px;
|
||||
|
||||
> i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
font-weight: 500;
|
||||
line-height: 23px;
|
||||
margin: 0;
|
||||
padding: 8px 14px;
|
||||
color: $color-gray-dark;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $radius-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.pagination {
|
||||
.page-item {
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
.page-link {
|
||||
> i {
|
||||
transform: rotateY(180deg) #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.pagination {
|
||||
margin-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.panel {
|
||||
margin-bottom: 50px;
|
||||
border-radius: $radius-default;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
padding: 20px 30px;
|
||||
background: $color-white-lite;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default $radius-default 0 0;
|
||||
|
||||
> a {
|
||||
color: $color-gray-dark;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-top: none;
|
||||
border-radius: 0 0 $radius-default $radius-default;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.custom-scrollbar {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $color-gray-lite transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
border-radius: $radius-default;
|
||||
background: $color-gray-lite;
|
||||
|
||||
&:hover {
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.table-bordered {
|
||||
td {
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
thead {
|
||||
th {
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
padding: 15px 30px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 20px 30px;
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
%nav-link {
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
padding: 13px 3px;
|
||||
color: $color-gray-dark;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
transition: $transition-default;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: 0;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
transform: translateX(-50%);
|
||||
transition: 150ms ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50%;
|
||||
bottom: -7px;
|
||||
height: 8px;
|
||||
width: 15px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
transition: 150ms ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
top: auto;
|
||||
transform: none;
|
||||
animation: tab-loader 1.2s ease infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border: none;
|
||||
|
||||
.nav-link {
|
||||
@extend %nav-link;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs:not(.featured-categories-tabs) {
|
||||
list-style: none;
|
||||
margin-bottom: -1px;
|
||||
|
||||
.tab-item {
|
||||
@extend %nav-link;
|
||||
|
||||
float: left;
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
transition: none;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.slick-list {
|
||||
margin: 0 -15px -50px;
|
||||
padding: 30px 0 50px;
|
||||
|
||||
.slick-track {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.tab-content {
|
||||
.slick-list {
|
||||
margin: 0 -8px -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "~vue-toast-notification/dist/theme-default";
|
||||
|
||||
.notices {
|
||||
.toast {
|
||||
max-width: 768px;
|
||||
opacity: 1;
|
||||
min-height: 3.5em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.cookie-bar-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -200px;
|
||||
background: #3b4045;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(0);
|
||||
z-index: 50;
|
||||
transition: 600ms ease;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(-200px);
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-bar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
|
||||
.cookie-bar-text {
|
||||
font-size: 14px;
|
||||
margin-right: 100px;
|
||||
color: $color-white-dark;
|
||||
}
|
||||
|
||||
.cookie-bar-action {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
.btn-accept {
|
||||
padding: 5px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.cookie-bar {
|
||||
flex-direction: column;
|
||||
padding: 16px 0 20px;
|
||||
|
||||
.cookie-bar-text {
|
||||
margin: 0 0 14px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import 'footer/_footer-top',
|
||||
'footer/_footer-bottom';
|
||||
|
||||
.footer {
|
||||
padding-top: 70px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@import 'header/_header-left',
|
||||
'header/_header-search',
|
||||
'header/_searched-keywords',
|
||||
'header/_search-suggestion',
|
||||
'header/_header-right',
|
||||
'header/_sticky-header';
|
||||
|
||||
.header-wrap {
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
.header-wrap-inner {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.header-wrap-inner {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.landscape-products-wrap {
|
||||
margin-top: 45px;
|
||||
|
||||
.products-header {
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.landscape-products {
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
margin: 0 -15px -50px;
|
||||
padding: 30px 0 50px;
|
||||
|
||||
.slick-track {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.landscape-products {
|
||||
.slick-list {
|
||||
margin: 0 -8px -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
.navigation-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.navbar {
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
|
||||
.navbar-nav {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-text {
|
||||
margin-left: auto;
|
||||
margin-right: 25px;
|
||||
color: $color-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
position: relative;
|
||||
width: 262px;
|
||||
min-width: 262px;
|
||||
display: flex;
|
||||
padding: 4px 0 4px 4px;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
|
||||
&.show {
|
||||
.category-nav-inner {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.category-dropdown-wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.category-nav-inner {
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 14px 35px 13px 30px;
|
||||
color: $color-white;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-radius: $radius-default 0 0 $radius-default;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-dropdown-wrap {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: calc(100% + 31px);
|
||||
display: none;
|
||||
width: 263px;
|
||||
background: $color-white;
|
||||
border: 1px solid $border-color;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-radius: $radius-default;
|
||||
z-index: 4;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: $border-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.category-dropdown {
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -25px;
|
||||
border-width: 13px 15px;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: -23px;
|
||||
border-width: 12px 14px;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-megamenu {
|
||||
position: static;
|
||||
padding: 15px 0;
|
||||
|
||||
> li {
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.more-categories {
|
||||
> .menu-item {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .menu-item {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
> .menu-item-icon {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .menu-item {
|
||||
position: relative;
|
||||
line-height: 46px;
|
||||
display: block;
|
||||
padding: 0 50px 0 24px;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: none;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 15px;
|
||||
height: 15px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
> .menu-item-icon {
|
||||
font-size: 16px;
|
||||
display: inline-flex;
|
||||
margin: 15px 10px 0 0;
|
||||
color: $color-gray;
|
||||
vertical-align: top;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 25px;
|
||||
color: $color-gray;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mega-menu {
|
||||
.dropdown {
|
||||
&:hover {
|
||||
> .sub-menu {
|
||||
animation: menu-in-left 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .sub-menu {
|
||||
right: -175px;
|
||||
top: 0;
|
||||
animation: menu-in-right 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu {
|
||||
&:hover {
|
||||
> .fluid-menu-wrap {
|
||||
animation: menu-in-left 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu-wrap {
|
||||
top: 0;
|
||||
right: -720px;
|
||||
animation: menu-in-right 250ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-megamenu {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.mega-menu {
|
||||
> .fluid-menu {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-item {
|
||||
&:hover {
|
||||
> .nav-link {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
right: 12px;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.multi-level,
|
||||
&.fluid-menu {
|
||||
> .nav-link {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-link {
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
margin-bottom: -1px;
|
||||
padding: 12px 15px 12px;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
transition: none;
|
||||
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
color: $color-gray;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mega-menu {
|
||||
> .dropdown.multi-level {
|
||||
> .sub-menu {
|
||||
left: 0;
|
||||
top: 59px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&:hover {
|
||||
> .sub-menu {
|
||||
animation: menu-in-top 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .sub-menu {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
animation: menu-in-bottom 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu {
|
||||
&:hover {
|
||||
> .fluid-menu-wrap {
|
||||
animation: menu-in-top 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
> .fluid-menu-wrap {
|
||||
top: 59px;
|
||||
left: 0;
|
||||
animation: menu-in-bottom 250ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.horizontal-megamenu {
|
||||
> .nav-item {
|
||||
&:hover {
|
||||
> .nav-link {
|
||||
> i {
|
||||
left: 15px #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.category-nav {
|
||||
width: 245px;
|
||||
min-width: 245px;
|
||||
|
||||
.category-dropdown-wrap {
|
||||
width: 246px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.navigation-inner {
|
||||
.navigation-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1047px) {
|
||||
.vertical-megamenu {
|
||||
&.mega-menu {
|
||||
> .fluid-menu {
|
||||
> .fluid-menu-wrap {
|
||||
right: -696px;
|
||||
width: 696px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.navigation-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-inner {
|
||||
.navbar {
|
||||
.navbar-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
display: none;
|
||||
|
||||
.category-dropdown-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
.newsletter-wrap {
|
||||
.modal-dialog {
|
||||
width: 850px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 15px;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-left {
|
||||
width: 63%;
|
||||
padding: 41px 50px 37px;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 45px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
margin-bottom: 26px;
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
|
||||
.error-message {
|
||||
display: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
> .error-message {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-subscribe {
|
||||
font-weight: 400;
|
||||
margin-left: 10px;
|
||||
padding: 7px 30px;
|
||||
white-space: nowrap;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
color: $color-gray-dark;
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-checkbox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-right {
|
||||
width: 37%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.newsletter-wrap {
|
||||
.modal-dialog {
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-left {
|
||||
width: 100%;
|
||||
padding: 33px 40px 27px;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.newsletter-wrap {
|
||||
.modal-dialog {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.newsletter-left {
|
||||
padding: 28px 30px 22px;
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .error-message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-subscribe {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@import 'order-summary/_order-summary-top',
|
||||
'order-summary/_order-summary-middle',
|
||||
'order-summary/_order-summary-bottom';
|
||||
|
||||
.order-summary-wrap {
|
||||
width: 380px;
|
||||
min-width: 380px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
padding: 24px 30px 30px;
|
||||
background: $color-white-dark;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.price-amount {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.order-summary-wrap {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-top: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
@import 'sidebar-cart/_sidebar-cart-top',
|
||||
'sidebar-cart/_sidebar-cart-middle',
|
||||
'sidebar-cart/_sidebar-cart-bottom';
|
||||
|
||||
.sidebar-cart-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -200px;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
background: $color-white;
|
||||
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 200;
|
||||
transition: $transition-primary;
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
g {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.sidebar-cart-wrap {
|
||||
right: -180px;
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.sidebar-cart-wrap {
|
||||
right: -165px;
|
||||
width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
.sidebar-cart-wrap {
|
||||
right: -150px;
|
||||
width: 300px;
|
||||
|
||||
.sidebar-cart-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.btn-view-cart {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
.sidebar-menu-wrap {
|
||||
position: fixed;
|
||||
left: -150px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 270px;
|
||||
background: $color-white;
|
||||
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 200;
|
||||
transition: $transition-primary;
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.sidebar-menu-header {
|
||||
display: flex;
|
||||
padding: 15px 26px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
> h4 {
|
||||
font-weight: 400;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.sidebar-menu-close {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 18px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-tab {
|
||||
border-bottom: none;
|
||||
|
||||
.nav-item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.nav-tabs {
|
||||
.nav-link {
|
||||
padding: 8px;
|
||||
color: $color-gray-dark;
|
||||
text-align: center;
|
||||
background: $color-white-lite;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
font-weight: 400;
|
||||
color: $color-black;
|
||||
background: $color-white;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tab-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
margin: 15px 0;
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
> .menu-item {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> .menu-item-icon {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.menu-item {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
> .menu-item-icon {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .menu-item {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 16px;
|
||||
height: 15px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
> .menu-item-icon {
|
||||
font-size: 16px;
|
||||
color: $color-gray;
|
||||
margin: 1px 10px 0 0;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
> a {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
> a {
|
||||
max-width: 155px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
> a,
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 45px;
|
||||
max-width: 170px;
|
||||
display: inline-block;
|
||||
margin-left: 24px;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 30px;
|
||||
color: $color-gray;
|
||||
float: right;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
> a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.steps-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.step-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.step-tab {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
height: 60px;
|
||||
width: 350px;
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
|
||||
&.active {
|
||||
color: $color-white;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
|
||||
.step-tab-text {
|
||||
.bg-text {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-tab-link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: $color-black;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-tab-text {
|
||||
position: relative;
|
||||
|
||||
.bg-text {
|
||||
font-size: 45px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -35px;
|
||||
width: 50px;
|
||||
color: $color-black;
|
||||
opacity: 0.15;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.steps-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-tabs {
|
||||
.step-tab {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.step-tab-text {
|
||||
.bg-text {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 886px) {
|
||||
.step-tabs {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.step-tab {
|
||||
margin: 8px 15px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
.subscribe-wrap {
|
||||
margin-top: 50px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.subscribe {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30px 0 25px;
|
||||
|
||||
> .row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subscribe-text {
|
||||
.title,
|
||||
.sub-title {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
line-height: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
|
||||
> input {
|
||||
height: 50px;
|
||||
width: 450px;
|
||||
border: none;
|
||||
padding: 12px 147px 10px 20px;
|
||||
}
|
||||
|
||||
> .btn-subscribe {
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
border-radius: 0 $radius-default $radius-default 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.subscribe {
|
||||
.subscribe-field {
|
||||
.form-group {
|
||||
> input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.subscribe {
|
||||
.subscribe-field {
|
||||
.form-group {
|
||||
> input {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.subscribe {
|
||||
padding-bottom: 34px;
|
||||
|
||||
.subscribe-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subscribe-field {
|
||||
margin-top: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.subscribe {
|
||||
.subscribe-field {
|
||||
> form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
> input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.top-nav-wrap {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
padding: 10px 15px;
|
||||
|
||||
.top-nav-left {
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-right-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
border-right: 1px solid $border-color-lite;
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.nice-select {
|
||||
padding: 0 20px 0 0;
|
||||
|
||||
.list {
|
||||
left: -22px;
|
||||
min-width: 150px;
|
||||
margin-top: 11px;
|
||||
padding: 14px 0 11px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.top-nav {
|
||||
> .row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-nav-left {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.footer-bottom {
|
||||
margin-top: 60px;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
line-height: 26px;
|
||||
color: $color-gray;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-payment {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> img {
|
||||
max-height: 30px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.footer-bottom {
|
||||
margin-top: 50px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-payment {
|
||||
margin-top: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.footer-top {
|
||||
.title {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin: 37px 0 0 -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links:not(.footer-tags) {
|
||||
.list-inline {
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-tags {
|
||||
.title {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
margin-bottom: -7px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin: 0 4px 7px 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 33px;
|
||||
display: block;
|
||||
color: $color-gray;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
padding: 0 10px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.footer-top {
|
||||
> .row {
|
||||
> div:nth-child(4) {
|
||||
.footer-links {
|
||||
margin-top: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-tags {
|
||||
margin-top: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.footer-top {
|
||||
.social-links {
|
||||
margin: 19px 0 -3px -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 38px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
.header-column-left {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.sidebar-menu-icon-wrap {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.sidebar-menu-icon {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
width: 35px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
> span {
|
||||
width: 20px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
&:last-child {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
height: 2px;
|
||||
width: 16px;
|
||||
margin-bottom: 4px;
|
||||
background: $color-black;
|
||||
transition: $transition-primary;
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
width: 266px;
|
||||
padding: 0 15px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
svg {
|
||||
direction: ltr #{'/*rtl:ignore*/'};
|
||||
height: 60px;
|
||||
width: 245px;
|
||||
|
||||
#logo_f_bg,
|
||||
#logo_f_text,
|
||||
#logo_f_text_inner {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.header-logo {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.sidebar-menu-icon-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.header-logo {
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 391px) {
|
||||
.header-logo {
|
||||
width: 160px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
.header-column-right {
|
||||
height: 60px;
|
||||
padding: 0 15px;
|
||||
|
||||
.header-wishlist,
|
||||
.header-cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
line-height: 28px;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
.header-wishlist {
|
||||
&:hover {
|
||||
> span,
|
||||
.icon-wrap > i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-cart {
|
||||
margin-left: 35px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
> span,
|
||||
.icon-wrap > i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
> i {
|
||||
font-size: 34px;
|
||||
line-height: 36px;
|
||||
color: $color-black;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
> .count {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
top: 1px;
|
||||
right: -6px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: $color-white;
|
||||
background: $color-red;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.header-column-right {
|
||||
.icon-wrap {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.header-wishlist,
|
||||
.header-cart {
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.header-column-right {
|
||||
.header-wishlist {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-cart {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 391px) {
|
||||
.header-column-right {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
.header-search-wrap {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
position: relative;
|
||||
|
||||
.header-search-lg {
|
||||
position: relative;
|
||||
display: flex;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.search-input {
|
||||
height: 58px;
|
||||
padding-left: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-search-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: 40px;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 $radius-default $radius-default 0;
|
||||
|
||||
> i {
|
||||
font-size: 18px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nice-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.list {
|
||||
margin-top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-search-sm-form {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: $color-white;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transform: scale(0.96);
|
||||
pointer-events: none;
|
||||
transition: $transition-default;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
> form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
> input {
|
||||
height: 60px;
|
||||
padding: 10px 50px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-close,
|
||||
.btn-search {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 24px;
|
||||
color: $color-gray;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.header-search {
|
||||
.header-search-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-search-sm-form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.header-search-wrap {
|
||||
position: static;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
margin-left: auto;
|
||||
padding: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
.header-search-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-search-sm {
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 34px;
|
||||
line-height: 36px;
|
||||
color: $color-black;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 391px) {
|
||||
.header-search-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
.search-suggestions {
|
||||
position: absolute;
|
||||
left: 41px;
|
||||
top: 60px;
|
||||
right: 41px;
|
||||
background: $color-white;
|
||||
border-bottom: 2px solid $color-default;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
border-radius: 0 0 $radius-default $radius-default;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.search-suggestions-inner {
|
||||
max-height: 425px;
|
||||
background: $color-white;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
padding: 6px 20px;
|
||||
color: $color-gray-dark;
|
||||
background: $color-white-dark;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 7px;
|
||||
height: 15px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
transition: $transition-default;
|
||||
|
||||
&.active {
|
||||
background: #f7f9fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-suggestion {
|
||||
.title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
& + .product-suggestion {
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-suggestion-list {
|
||||
.single-item {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.product-suggestion {
|
||||
padding-bottom: 3px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.more-results {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin: 14px 0 -14px;
|
||||
padding: 6px 0;
|
||||
color: $color-gray-dark;
|
||||
background: $color-white-dark;
|
||||
text-align: center;
|
||||
border-top: 1px solid $color-gray-lite;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-suggestion-list {
|
||||
.list-item {
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.single-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
min-width: 0;
|
||||
margin-left: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.product-info-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 3px;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin: -2px 0 -1px 15px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-weight: 500;
|
||||
font-style: inherit;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.search-suggestions {
|
||||
top: 76px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
|
||||
.search-suggestions-inner {
|
||||
max-height: 359px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrap-inner {
|
||||
&.sticky {
|
||||
.search-suggestions {
|
||||
top: 71px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-search-sm-form {
|
||||
&.active {
|
||||
+ .search-suggestions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.header-search {
|
||||
.searched-keywords {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
margin: 14px auto -9px;
|
||||
justify-content: center;
|
||||
|
||||
> label {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 0;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.searched-keywords-list {
|
||||
height: 26px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -1px;
|
||||
top: 4px;
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background: $color-gray-dark;
|
||||
}
|
||||
|
||||
&:first-child:after {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-gray-dark;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.header-search {
|
||||
.searched-keywords {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.header-wrap-inner {
|
||||
&.sticky {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: -200px;
|
||||
right: 0;
|
||||
min-width: 320px;
|
||||
padding: 10px 0;
|
||||
background: $color-white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
z-index: 150;
|
||||
|
||||
.row {
|
||||
&.flex-nowrap {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
height: 55px;
|
||||
|
||||
svg {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.searched-keywords {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
top: 0;
|
||||
transition: 600ms ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.order-summary-bottom {
|
||||
.checkout-terms-and-conditions {
|
||||
margin: -1px 0 0;
|
||||
padding-bottom: 17px;
|
||||
text-align: center;
|
||||
|
||||
.error-message {
|
||||
margin: -2px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#paypal-button-container {
|
||||
.paypal-buttons {
|
||||
vertical-align: top;
|
||||
|
||||
iframe.component-frame {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.order-summary-middle {
|
||||
padding: 25px 0 8px;
|
||||
|
||||
&.loading {
|
||||
&:before {
|
||||
left: -15px;
|
||||
top: 15px;
|
||||
right: -15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-methods {
|
||||
margin: 21px 0 -6px;
|
||||
|
||||
> h6 {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: -1px 0 0;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
label {
|
||||
padding-right: 20px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.order-summary-top {
|
||||
.section-title {
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
padding: 25px 0 24px;
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 9px;
|
||||
justify-content: space-between;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.sidebar-cart-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: $color-white;
|
||||
|
||||
.sidebar-cart-subtotal {
|
||||
display: flex;
|
||||
margin: 0 30px;
|
||||
padding: 25px 0;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $border-color-lite;
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-cart-actions {
|
||||
display: flex;
|
||||
padding: 20px 30px;
|
||||
background: $color-white-lite;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.sidebar-cart-middle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
bottom: 155px;
|
||||
padding: 0 30px;
|
||||
|
||||
&.empty {
|
||||
bottom: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-cart-items-wrap {
|
||||
padding: 5px 0;
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
.sidebar-cart-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 25px 0 21px;
|
||||
border-bottom: 1px solid $color-white-lite;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin: 0 30px 0 20px;
|
||||
min-width: 0;
|
||||
|
||||
.product-name {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
display: block;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-cart-item {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: -8px;
|
||||
|
||||
.btn-remove {
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.sidebar-cart-top {
|
||||
display: flex;
|
||||
padding: 15px 30px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.sidebar-cart-close {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 18px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.error-page-left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 26px;
|
||||
padding-bottom: 21px;
|
||||
}
|
||||
|
||||
> p {
|
||||
width: 350px;
|
||||
margin-bottom: 44px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.btn-back-to-home {
|
||||
align-self: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page-left {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
padding-bottom: 22px;
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-back-to-home {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.error-page-left {
|
||||
> p {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.error-page-right {
|
||||
.error-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page-right {
|
||||
margin-bottom: 43px;
|
||||
text-align: center;
|
||||
|
||||
.error-image {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.error-page-right {
|
||||
.error-image {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@import '404/_error-page-left',
|
||||
'404/_error-page-right';
|
||||
|
||||
.error-page-wrap {
|
||||
margin-top: 70px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-page {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
@import 'account/_my-orders',
|
||||
'account/_my-downloads',
|
||||
'account/_my-wishlist',
|
||||
'account/_my-reviews',
|
||||
'account/_my-addresses',
|
||||
'account/_my-profile';
|
||||
|
||||
%account-common-buttons {
|
||||
display: inline-flex;
|
||||
margin-top: -2px;
|
||||
padding: 0;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
margin: 5px 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap {
|
||||
margin-top: 42px;
|
||||
|
||||
.account-left {
|
||||
min-width: 267px
|
||||
}
|
||||
|
||||
.account-right {
|
||||
width: 100%;
|
||||
margin-left: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap-inner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account-sidebar {
|
||||
li {
|
||||
&.active {
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 17px;
|
||||
height: 15px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
padding: 8px 0 8px 28px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 24px;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
margin: 5px 12px 0 0;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap {
|
||||
.pagination {
|
||||
margin: 17px -13px -15px 0;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
padding: 64px 15px 63px;
|
||||
text-align: center;
|
||||
|
||||
> h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.account-wrap {
|
||||
.account-left {
|
||||
min-width: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.account-wrap {
|
||||
margin-top: 23px;
|
||||
|
||||
.account-left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.account-right {
|
||||
margin: 29px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.all-brands-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.all-brands {
|
||||
.all-brands-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px -30px;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 70%;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent-lite;
|
||||
border-color: var(--color-primary-transparent-lite);
|
||||
|
||||
> img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
|
||||
svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
path {
|
||||
stroke: $color-white;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 5px;
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
.all-categories-wrap {
|
||||
margin-top: 44px;
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
path {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-category {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-category-list {
|
||||
column-count: 6;
|
||||
column-gap: 40px;
|
||||
column-fill: initial;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
color: $color-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-category-list {
|
||||
margin-left: 10px;
|
||||
padding-top: 2px;
|
||||
|
||||
li {
|
||||
padding: 1px 0;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.single-category-list {
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.single-category-list {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.single-category-list {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import 'cart/_shopping-cart',
|
||||
'cart/_shopping-cart-table';
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "checkout/_checkout-left", "checkout/_checkout-right";
|
||||
|
||||
.checkout-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.checkout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkout-inner {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
.compare-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
g {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
position: relative;
|
||||
padding: 25px 30px;
|
||||
|
||||
&:not(:first-child) {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 20px 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
width: 261px;
|
||||
min-width: 261px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 200px;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
margin: 0 auto 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.rating-count {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-add-to-cart {
|
||||
font-size: 16px;
|
||||
display: inline-flex;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
&:hover {
|
||||
border-color: $color-gray-lite !important;
|
||||
|
||||
> i {
|
||||
color: $color-black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
.animated {
|
||||
animation: zoomInOut 0.5s ease;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
.animated {
|
||||
animation: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.compare-table {
|
||||
td {
|
||||
&:first-child {
|
||||
width: 245px;
|
||||
min-width: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
.contact-wrap {
|
||||
margin: 90px 0;
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: 34%;
|
||||
overflow: hidden;
|
||||
border-radius: $radius-default;
|
||||
|
||||
> iframe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-wrap {
|
||||
display: flex;
|
||||
margin-top: -12%;
|
||||
justify-content: center;
|
||||
|
||||
.contact-form-inner {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
box-shadow: 0px 5px 28.5px 1.5px rgba(9, 6, 24, 0.1);
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-left {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
min-width: 350px;
|
||||
padding: 44px 60px 44px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-bottom: 48px;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
li {
|
||||
color: $color-white;
|
||||
margin-bottom: 29px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin: 45px 0 0 -8px;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> svg {
|
||||
position: absolute;
|
||||
right: -35px;
|
||||
bottom: -45px;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
opacity: 0.15;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-right {
|
||||
width: 100%;
|
||||
padding: 44px 60px 50px;
|
||||
background: $color-white;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.contact-wrap {
|
||||
margin: 70px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.contact-form-wrap {
|
||||
.contact-form-inner {
|
||||
width: 90%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-left {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 34px 30px 34px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
li {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin: 35px 0 -4px -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-right {
|
||||
padding: 34px 30px 40px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.contact-form-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.contact-form-inner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.custom-page-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.custom-page-content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 23px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong, em {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import
|
||||
'home/_home-section',
|
||||
'home/_features',
|
||||
'home/_featured-categories',
|
||||
'home/_banner',
|
||||
'home/_landscape-tab-products',
|
||||
'home/_grid-products',
|
||||
'home/_brands',
|
||||
'home/_vertical-products',
|
||||
'home/_blog';
|
||||
@@ -0,0 +1,40 @@
|
||||
.login-wrap {
|
||||
.remember-me {
|
||||
margin-top: -1px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: -1px;
|
||||
color: $color-gray;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sign-in {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.btn-create-account {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.login-wrap {
|
||||
.remember-me,
|
||||
.forgot-password {
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.order-complete-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.order-complete {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
|
||||
.checkmark {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 23px;
|
||||
border-radius: 50%;
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
stroke-width: 2.5;
|
||||
stroke-miterlimit: 10;
|
||||
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
||||
}
|
||||
|
||||
.checkmark-circle {
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
stroke-dasharray: 166;
|
||||
stroke-dashoffset: 166;
|
||||
stroke-width: 1.5;
|
||||
stroke-miterlimit: 10;
|
||||
fill: none;
|
||||
animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
|
||||
}
|
||||
|
||||
.checkmark-check {
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
transform-origin: 50% 50%;
|
||||
animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
|
||||
}
|
||||
|
||||
@keyframes stroke {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0%, 100% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import 'order-details/_order-details-top',
|
||||
'order-details/_order-details-middle',
|
||||
'order-details/_order-details-bottom';
|
||||
|
||||
.order-details-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 34px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@import 'product-details/_product-details-top',
|
||||
'product-details/_product-image-gallery',
|
||||
'product-details/_product-details-info',
|
||||
'product-details/_product-details-bottom',
|
||||
'product-details/_product-description',
|
||||
'product-details/_product-specification',
|
||||
'product-details/_product-reviews';
|
||||
|
||||
.product-details-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import 'product-search/_product-search-left',
|
||||
'product-search/_product-search-right',
|
||||
'product-search/_category-menu',
|
||||
'product-search/_filter-section',
|
||||
'product-search/_search-result',
|
||||
'product-search/_grid-view-product',
|
||||
'product-search/_list-view-product';
|
||||
|
||||
.product-search-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.product-search {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.product-search {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.register-wrap {
|
||||
.terms-and-conditions {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
> img {
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-create-account {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.btn-sign-in {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
.my-addresses {
|
||||
padding: 40px 30px;
|
||||
|
||||
.address-card-wrap {
|
||||
.btn-add-new-address {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 30px;
|
||||
padding: 15px 20px 12px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
}
|
||||
|
||||
.address-card-data {
|
||||
margin-bottom: 6px;
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
|
||||
&:not(:first-child) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-card-actions {
|
||||
display: flex;
|
||||
margin-left: -8px;
|
||||
|
||||
.btn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.btn-edit-address {
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete-address {
|
||||
&:hover {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-form {
|
||||
margin-top: -7px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.my-addresses {
|
||||
.address-card-wrap {
|
||||
.btn-add-new-address {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-form {
|
||||
.btn-cancel {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-save-address {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.my-downloads-table {
|
||||
.btn-download {
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.my-orders-table {
|
||||
margin-bottom: 5px;
|
||||
|
||||
thead {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 23px 30px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
padding: 11px 0;
|
||||
color: $color-gray;
|
||||
|
||||
> i {
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> span {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.my-profile {
|
||||
padding: 35px 30px 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.my-profile {
|
||||
.btn-save-changes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.my-reviews-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
tbody {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
min-width: 220px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
> i {
|
||||
font-size: 18px;
|
||||
margin-right: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.my-wishlist-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
tbody {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
min-width: 220px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
margin-top: 0 !important;
|
||||
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
.shopping-cart {
|
||||
.table-responsive {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.shopping-cart-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
thead {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
|
||||
&:last-child {
|
||||
width: 70px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
width: 70px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-options {
|
||||
margin: 4px 0 1px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
position: relative;
|
||||
width: 57px;
|
||||
|
||||
.input-quantity {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-number {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 50%;
|
||||
background: $color-white;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 1;
|
||||
|
||||
> i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-minus {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-plus {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.shopping-cart-table {
|
||||
.number-picker {
|
||||
.btn-number {
|
||||
transform: translateY(-50%) rotateY(180deg) #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.shopping-cart-table {
|
||||
td {
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.shopping-cart-table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: top;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding: 20px 0 11px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
padding: 2px 0 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
> label {
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 5px;
|
||||
color: $color-gray;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.shopping-cart-table {
|
||||
tbody {
|
||||
td {
|
||||
&:first-child {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
> label {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.shopping-cart-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.shopping-cart {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shopping-cart-inner {
|
||||
flex-grow: 1;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.shopping-cart {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shopping-cart-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.checkout-left {
|
||||
flex-grow: 1;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
.account-details {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.create-an-account-form {
|
||||
.helper-text {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin: -4px 0 14px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.create-an-account-label,
|
||||
.ship-to-different-address-label {
|
||||
margin: 4px 0 7px;
|
||||
|
||||
label {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.select-address {
|
||||
padding: 3px 0;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
label {
|
||||
> span {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: $color-black;
|
||||
|
||||
&:not(:first-child) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: inline-flex;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-wrap {
|
||||
.btn-add-new-address {
|
||||
font-weight: 500;
|
||||
margin-bottom: 22px;
|
||||
padding: 5px 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-to-different-address-form {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.order-notes {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-form {
|
||||
.order-notes {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout-left {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.checkout-right {
|
||||
width: 395px;
|
||||
min-width: 395px;
|
||||
padding: 0 15px;
|
||||
|
||||
.payment-method {
|
||||
.title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method-form {
|
||||
padding: 28px 30px 5px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
margin: -4px 0 0 28px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: -2px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-instructions {
|
||||
margin-top: 30px;
|
||||
padding: 24px 30px 23px;
|
||||
background: $color-white-dark;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-wrap {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#stripe-card-element {
|
||||
margin-top: 30px;
|
||||
padding: 30px;
|
||||
background: $color-white-dark;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.checkout-right {
|
||||
.coupon-wrap {
|
||||
.form-group {
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn-apply-coupon {
|
||||
width: 100%;
|
||||
padding: 7px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-right {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-top: 14px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout-right {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
.banner-wrap {
|
||||
margin-top: 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
&.m-t-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
animation: effect-height 700ms ease-in;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&:after {
|
||||
animation: effect-width 700ms ease-in;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
> img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default;
|
||||
transform: scale(1);
|
||||
transition: 800ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.three-column-full-width-banner {
|
||||
.row {
|
||||
> div {
|
||||
&:first-child {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.two-column-banner {
|
||||
.row {
|
||||
> .col-md-9 {
|
||||
&:last-child {
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.three-column-banner {
|
||||
.row {
|
||||
> .col-md-6 {
|
||||
&:first-child {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes effect-height {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes effect-width {
|
||||
0% {
|
||||
width: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
.blog-wrap {
|
||||
margin-top: 44px;
|
||||
|
||||
.blog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
|
||||
.section-title {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
margin-top: 2px;
|
||||
color: $color-gray-dark;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post {
|
||||
width: calc(33.33333333333333% - 30px);
|
||||
margin: 0 15px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
|
||||
|
||||
.blog-image {
|
||||
.image-placeholder {
|
||||
border-color: #f6f7f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
position: relative;
|
||||
margin: -1px -1px 0 -1px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default $radius-default 0 0;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
display: flex;
|
||||
height: 227px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f6f7f8;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-bottom: none;
|
||||
border-radius: $radius-default $radius-default 0 0;
|
||||
transition: $transition-default;
|
||||
|
||||
> img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
height: 55px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $color-default-transparent;
|
||||
background: var(--color-primary-transparent);
|
||||
border-radius: $radius-default;
|
||||
|
||||
> span {
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
> li {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $color-gray;
|
||||
margin-left: 25px;
|
||||
cursor: default;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-body {
|
||||
padding: 26px 20px 30px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 13px;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
font-weight: 300;
|
||||
line-height: 22px;
|
||||
max-height: 66px;
|
||||
margin-bottom: 29px;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.blog-post {
|
||||
.blog-image {
|
||||
.image-placeholder {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.blog-post {
|
||||
width: calc(50% - 30px);
|
||||
|
||||
&:last-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.blog-post {
|
||||
width: 100%;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.top-brands-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.top-brands {
|
||||
padding: 35px 50px;
|
||||
border: 1px solid $border-color-lite;
|
||||
border-radius: $radius-default;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.slick-prev {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
&:before {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.top-brand-image {
|
||||
display: inline-flex;
|
||||
height: 55px;
|
||||
margin: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
> img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transition: $transition-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.top-brands {
|
||||
padding: 35px;
|
||||
|
||||
.slick-prev {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.featured-categories-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.featured-categories-header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-categories-text {
|
||||
padding-right: 30px;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-categories-tabs {
|
||||
display: flex;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
height: 160px;
|
||||
width: 170px;
|
||||
margin-left: 30px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
transition: $transition-default;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
border-color: $color-default-transparent-lite;
|
||||
border-color: var(--color-primary-transparent-lite);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent-lite;
|
||||
border-color: var(--color-primary-transparent-lite);
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-category-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 50%;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-category-name {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px) {
|
||||
.featured-categories-wrap {
|
||||
.tabs {
|
||||
.tab-item {
|
||||
height: 140px;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1650px) {
|
||||
.featured-categories-wrap {
|
||||
.tabs {
|
||||
.tab-item {
|
||||
height: 130px;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.featured-categories-wrap {
|
||||
.tabs {
|
||||
.tab-item {
|
||||
height: 120px;
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1550px) {
|
||||
.featured-categories-wrap {
|
||||
.tabs {
|
||||
.tab-item {
|
||||
height: 110px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.featured-categories-wrap {
|
||||
.featured-categories-header {
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin: 30px -15px -30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.tab-item {
|
||||
margin: 0 15px 30px 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.features-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.features {
|
||||
padding-bottom: 30px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.single-feature {
|
||||
position: relative;
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
margin-top: 30px;
|
||||
padding: 0 15px;
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 42px;
|
||||
width: 1px;
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
justify-content: flex-start;
|
||||
padding: 0 30px;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
.grid-products-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.tabs {
|
||||
.tab-item {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
padding: 15px 3px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-products {
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
right: 69px;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.grid-products-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
flex: 0 0 16.66666666666667%;
|
||||
max-width: 16.66666666666667%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(7) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(-n+6) {
|
||||
border-top: 1px solid $color-gray-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1760px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
|
||||
&:nth-child(6),
|
||||
&:nth-child(11) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
|
||||
&:nth-child(5) {
|
||||
border-top: none;
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(6),
|
||||
&:nth-child(11) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
|
||||
&:nth-child(4),
|
||||
&:nth-child(7),
|
||||
&:nth-child(10) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:nth-child(5),
|
||||
&:nth-child(9) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.grid-products-wrap {
|
||||
margin-bottom: 0;
|
||||
|
||||
.tabs {
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: none !important;
|
||||
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-products {
|
||||
.slick-list {
|
||||
margin: 0 -15px -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(5),
|
||||
&:nth-child(9),
|
||||
&:nth-child(11) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:nth-child(4),
|
||||
&:nth-child(10) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@import '_slider';
|
||||
|
||||
.home-section-wrap {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-section-inner {
|
||||
display: flex;
|
||||
width: calc(100% - 293px);
|
||||
margin-left: 293px;
|
||||
|
||||
.home-slider-wrap {
|
||||
width: 66.85%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.15%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1650px) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.34%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.home-section-inner {
|
||||
width: calc(100% - 276px);
|
||||
margin-left: 276px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1255px) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 66.90%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.home-section-wrap {
|
||||
.home-section-inner {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.landscape-tab-products-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.section-title {
|
||||
margin-top: 13px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.landscape-left-tab-products {
|
||||
margin-bottom: -50px;
|
||||
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.landscape-tab-products-wrap {
|
||||
.tab-products-header {
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 10px;
|
||||
padding-top: 15px;
|
||||
float: none !important;
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
float: none !important;
|
||||
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
.home-slider {
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
&.slick-initialized {
|
||||
.slide {
|
||||
&:not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
.caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: $radius-default;
|
||||
|
||||
&:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 1 !important;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&.align-left {
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
.captions {
|
||||
margin-left: 100px;
|
||||
text-align: left;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
right: 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
.captions {
|
||||
margin-right: 100px;
|
||||
text-align: right;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.captions {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 48px;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: $color-gray;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
display: none;
|
||||
margin-top: 37px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
opacity: 0.1;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.slick-prev {
|
||||
left: 0;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
&:before {
|
||||
color: $color-white;
|
||||
margin-right: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.slick-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
|
||||
&:before {
|
||||
color: $color-white;
|
||||
margin-left: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin-left: 80px;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin-right: 80px;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.captions {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 38px;
|
||||
line-height: 38px
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
font-size: 14px;
|
||||
margin-top: 32px;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin: 0 50px 0 40px;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin: 0 40px 0 50px;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
font-size: 13px;
|
||||
margin-top: 27px;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin: 0 35px 0 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin: 0 35px 0 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInImage {
|
||||
animation-name: zoomInImage;
|
||||
}
|
||||
|
||||
@keyframes zoomInImage {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1.05, 1.05, 1.05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
.vertical-products-wrap {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.daily-deals-wrap {
|
||||
.daily-deals-header {
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
padding-bottom: 13px;
|
||||
|
||||
b {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daily-deals {
|
||||
border-radius: $radius-default;
|
||||
border: 1px solid $color-gray-lite;
|
||||
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
left: 36px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
right: 36px;
|
||||
}
|
||||
|
||||
.daily-deals-inner {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 320px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
margin-bottom: 23px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
h6 {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
max-height: 48px;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
padding: 10px 0 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $color-gray-lite;
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
.rating-count {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.daily-deals-countdown.is-countdown {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.countdown-amount {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: $color-white-lite;
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deal-progress {
|
||||
margin-bottom: 21px;
|
||||
|
||||
.deal-stock {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stock-available,
|
||||
.stock-sold {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
color: $color-gray-dark;
|
||||
|
||||
> span {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 10px;
|
||||
background: $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.progress-bar {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.vertical-products-wrap {
|
||||
.row {
|
||||
> div:not(:first-child) {
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.vertical-products-wrap {
|
||||
.vertical-products {
|
||||
.vertical-products-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.vertical-product-card {
|
||||
margin-bottom: 34px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin-bottom: 12px;
|
||||
|
||||
h6 {
|
||||
line-height: 24px;
|
||||
max-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.daily-deals {
|
||||
.daily-deals-inner {
|
||||
padding: 20px 30px 40px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding-bottom: 80%;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.order-details-bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
|
||||
.order-summary-list {
|
||||
width: 300px;
|
||||
|
||||
.price-amount {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.order-summary-total {
|
||||
width: 300px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.order-details-bottom {
|
||||
.order-summary-list,
|
||||
.order-summary-total {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
.order-details-middle {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.table-responsive {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.order-details-table {
|
||||
tbody {
|
||||
td {
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-options {
|
||||
margin: 4px 0 1px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 881px) {
|
||||
.order-details-table {
|
||||
td {
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.order-details-middle {
|
||||
.table-responsive {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-details-table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: top;
|
||||
display: block;
|
||||
|
||||
&:nth-child(1) {
|
||||
padding: 25px 30px 11px !important;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
padding: 2px 30px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 30px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
> label {
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 5px;
|
||||
color: $color-gray;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.order-details-table {
|
||||
tbody {
|
||||
td {
|
||||
&:nth-child(1) {
|
||||
padding: 25px 20px 11px !important;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
padding: 2px 20px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 20px 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.order-details-top {
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
.order-information {
|
||||
display: inline-block;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.order-information-list {
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 9px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
min-width: 165px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-billing-details,
|
||||
.order-shipping-details {
|
||||
h4 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
address {
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.order-details-top {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
.order-information {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.order-billing-details {
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.description {
|
||||
padding-top: 46px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong, em {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.description {
|
||||
padding-top: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.description {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.product-details-bottom {
|
||||
display: flex;
|
||||
|
||||
.left-sidebar {
|
||||
width: 285px;
|
||||
min-width: 285px;
|
||||
padding-right: 15px;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 14px;
|
||||
|
||||
& + .banner {
|
||||
margin-top: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-bottom-inner {
|
||||
width: calc(100% - 282px);
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-tab {
|
||||
> .tabs {
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
|
||||
.nav-item {
|
||||
margin: 0 26px -1px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 15px 3px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-bottom {
|
||||
.left-sidebar {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-bottom-inner {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.product-details-tab {
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
.product-details-info {
|
||||
width: calc(100% - 600px);
|
||||
padding: 0 15px 0 30px;
|
||||
|
||||
.details-info-top {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
font-size: 16px;
|
||||
margin-bottom: 9px;
|
||||
|
||||
.rating-count {
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
& + .brief-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
& + .details-info-top-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.availability {
|
||||
margin-bottom: 14px;
|
||||
|
||||
&.in-stock {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
&.out-of-stock {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
& + .details-info-top-actions {
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.brief-description {
|
||||
margin-bottom: 12px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.details-info-top-actions {
|
||||
.btn {
|
||||
padding: 0;
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-compare {
|
||||
font-weight: 500;
|
||||
|
||||
&.added {
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-middle {
|
||||
padding: 22px 0 25px;
|
||||
border-top: 1px solid $border-color-lite;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 24px;
|
||||
padding-bottom: 18px;
|
||||
|
||||
.previous-price {
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-variants {
|
||||
padding-bottom: 10px;
|
||||
|
||||
.form-group {
|
||||
.extra-price {
|
||||
font-weight: 500;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.form-custom-radio {
|
||||
.extra-price {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.variant-check {
|
||||
margin: -1px 0 7px;
|
||||
|
||||
.error-message {
|
||||
margin: -7px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-radio {
|
||||
margin: -2px 0 8px;
|
||||
|
||||
.error-message {
|
||||
margin: -6px 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-input,
|
||||
.variant-select {
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 6px 0 -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-custom-selection {
|
||||
margin-bottom: 10px;
|
||||
|
||||
label {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: -4px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-selection {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
min-width: 42px;
|
||||
display: flex;
|
||||
margin: 0 10px 10px 0;
|
||||
padding: 6px 10px;
|
||||
color: $color-gray;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-middle-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group-quantity {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
|
||||
.input-quantity {
|
||||
width: 100px;
|
||||
padding: 10px 39px 10px 10px;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.btn-number {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
line-height: 18px;
|
||||
background: none;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-plus {
|
||||
top: 0;
|
||||
height: 24px;
|
||||
border-top-right-radius: $radius-default;
|
||||
}
|
||||
|
||||
.btn-minus {
|
||||
top: 23px;
|
||||
height: 22px;
|
||||
border-bottom-right-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
margin-left: 20px;
|
||||
padding: 8px 30px;
|
||||
|
||||
> i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-bottom {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.additional-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 -6px -12px;
|
||||
padding: 5px 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
padding: 0 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
label {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.product-details-info {
|
||||
width: calc(100% - 500px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-info {
|
||||
width: 100%;
|
||||
margin-top: 34px;
|
||||
padding: 0;
|
||||
|
||||
.product-variants {
|
||||
margin-top: -5px;
|
||||
|
||||
.variant-custom-selection {
|
||||
label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-check,
|
||||
.variant-radio {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-input,
|
||||
.variant-select {
|
||||
label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.product-details-info {
|
||||
.details-info-middle-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
margin: 20px 0 0 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.product-details-top {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.right-sidebar {
|
||||
width: 285px;
|
||||
min-width: 285px;
|
||||
padding-left: 15px;
|
||||
|
||||
.feature-list {
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
|
||||
.single-feature {
|
||||
margin-bottom: 20px;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-top-inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
.product-details-top {
|
||||
.right-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-top-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
.product-image-gallery {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
margin-top: 8px;
|
||||
|
||||
.additional-image {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
margin: 8px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: $transition-default;
|
||||
|
||||
&.slick-current {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 16px;
|
||||
flex-grow: 1;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.base-image {
|
||||
&.slick-initialized {
|
||||
.base-image-inner {
|
||||
&:not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-inner {
|
||||
&:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-slide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 100%;
|
||||
background: $color-white;
|
||||
cursor: crosshair;
|
||||
|
||||
&:hover {
|
||||
> img:not(.zoomImg) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> img:not(.zoomImg) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 130px;
|
||||
|
||||
& ~ .zoomImg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gallery-trigger {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transform: rotateY(180deg);
|
||||
|
||||
> i {
|
||||
font-size: 20px;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.product-image-gallery {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
|
||||
.additional-image {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.base-image-wrap {
|
||||
.base-image-slide {
|
||||
cursor: zoom-in;
|
||||
|
||||
&:hover {
|
||||
> img:not(.zoomImg) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.btn-gallery-trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 577px) {
|
||||
.additional-image-wrap {
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
top: -4px;
|
||||
|
||||
&:before {
|
||||
content: "\f106";
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: -14px;
|
||||
transform: translate(0, 0);
|
||||
|
||||
&:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.product-image-gallery {
|
||||
width: 100%;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.additional-image-wrap {
|
||||
.slick-track {
|
||||
right: 2px #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
display: flex;
|
||||
width: calc(100% - 32px);
|
||||
min-width: 0;
|
||||
margin: 16px auto 0;
|
||||
|
||||
.slick-prev {
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -22px;
|
||||
}
|
||||
|
||||
.additional-image {
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-wrap {
|
||||
margin-left: 0;
|
||||
|
||||
.base-image-slide {
|
||||
padding-bottom: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
.reviews {
|
||||
padding-top: 45px;
|
||||
|
||||
.pagination {
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-form {
|
||||
> h4 {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: -1px 0 -2px;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
color: $color-gray-lite;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-yellow;
|
||||
|
||||
~ label {
|
||||
color: $color-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
~ label {
|
||||
color: $color-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
padding: 7px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-review-wrap {
|
||||
margin-top: 4px;
|
||||
|
||||
&.loading {
|
||||
&:after {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 35px 0 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
path {
|
||||
stroke-width: 3px;
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-review {
|
||||
margin-bottom: 27px;
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.reviewer-message {
|
||||
color: $color-gray;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.review-date,
|
||||
.review-approval {
|
||||
font-size: 14px;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.user-review-wrap {
|
||||
margin: 48px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.reviews {
|
||||
padding-top: 35px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.specification {
|
||||
padding-top: 51px;
|
||||
|
||||
.specification-inner {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 15px 30px;
|
||||
background: $color-white-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.specification-list {
|
||||
padding: 35px 30px 34px 30px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
line-height: 23px;
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 23px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.specification {
|
||||
padding: 41px 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.specification-list {
|
||||
li {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.browse-categories-wrap {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.browse-categories {
|
||||
margin: -7px 0 0 -5px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
|
||||
&.active {
|
||||
> a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-left: 25px;
|
||||
color: $color-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
transform: rotate(0deg);
|
||||
transition: 200ms ease-in-out;
|
||||
|
||||
&.open {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
padding-top: 8px;
|
||||
|
||||
li {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
.filter-section-wrap {
|
||||
background: $color-white;
|
||||
|
||||
.filter-section-header {
|
||||
> i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section-inner {
|
||||
&.custom-scrollbar {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 33px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> h6 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-show-more {
|
||||
display: inline-flex;
|
||||
margin: 6px 0 9px;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-price {
|
||||
padding-bottom: 15px;
|
||||
|
||||
.price-input {
|
||||
display: flex;
|
||||
|
||||
> .form-group {
|
||||
&:first-child {
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
|
||||
&:after {
|
||||
content: "-";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 3px;
|
||||
|
||||
.noUi-handle {
|
||||
top: -6px;
|
||||
right: -7px #{'/*rtl:ignore*/'};
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
background: $border-color-lite;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
transform-origin: 0 100% #{'/*rtl:ignore*/'};
|
||||
}
|
||||
|
||||
.noUi-handle {
|
||||
border: none;
|
||||
background: $color-default-transparent-lite;
|
||||
background: var(--color-primary-transparent-lite);
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
cursor: ew-resize;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
.form-check {
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> label {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.filter-section-wrap {
|
||||
position: fixed;
|
||||
left: -165px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 200;
|
||||
transition: $transition-primary;
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 15px 20px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
color: $color-white;
|
||||
border-bottom: none;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section-inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 23px 20px 15px;
|
||||
|
||||
&.custom-scrollbar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.grid-view-products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px;
|
||||
|
||||
> .col {
|
||||
display: flex;
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1700px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.search-result-middle {
|
||||
&.empty {
|
||||
.grid-view-products {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view-products {
|
||||
margin: 0 -8px;
|
||||
padding-bottom: 14px;
|
||||
|
||||
> .col {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.grid-view-products {
|
||||
margin: 0 -8px;
|
||||
|
||||
> .col {
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
.list-view-products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.list-product-card {
|
||||
display: flex;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.list-product-card-inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-primary;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-white;
|
||||
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-card-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.product-card-right {
|
||||
flex-grow: 1;
|
||||
margin: -5px 0 -8px 30px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
|
||||
.image-placeholder {
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-countdown {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: $transition-primary;
|
||||
|
||||
&.is-countdown {
|
||||
.countdown-section {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-amount {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
background: $color-default-transparent;
|
||||
background: var(--color-primary-transparent);
|
||||
}
|
||||
|
||||
.countdown-period {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
> h6 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
max-height: 48px;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
color: $color-black;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
margin-bottom: 14px;
|
||||
|
||||
.rating-count {
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
margin: 0 0 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 18px;
|
||||
margin-bottom: 13px;
|
||||
|
||||
.previous-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
font-size: 13px;
|
||||
margin-bottom: 9px;
|
||||
padding: 7px 30px 6px;
|
||||
|
||||
> i {
|
||||
font-size: 15px;
|
||||
margin: 5px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-actions {
|
||||
.btn {
|
||||
padding: 0;
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-compare {
|
||||
&.added {
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.list-product-card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.list-product-card-inner {
|
||||
flex-direction: column;
|
||||
|
||||
.product-card-left {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.product-search-left {
|
||||
width: 263px;
|
||||
min-width: 263px;
|
||||
margin: -6px 30px 0 0;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 29px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.product-search-left {
|
||||
width: 246px;
|
||||
min-width: 246px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-left {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.product-search-right {
|
||||
width: calc(100% - 293px);
|
||||
|
||||
.categories-banner {
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> img {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.product-search-right {
|
||||
width: calc(100% - 276px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-right {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user