hot-categories, popular-categories, sidebar & other
This commit is contained in:
shubhammehrotra.symfony@webkul.com
parent
6f5d255b47
commit
f6ffa7b526
|
|
@ -1200,8 +1200,8 @@
|
|||
|
||||
.mini-cart-container #mini-cart .badge {
|
||||
border-radius: 50%;
|
||||
top: -15px;
|
||||
left: -10px;
|
||||
top: -7px;
|
||||
left: -13px;
|
||||
padding: 4px;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
|
|
@ -1209,8 +1209,8 @@
|
|||
}
|
||||
|
||||
.mini-cart-container #mini-cart .cart-text {
|
||||
top: -2px;
|
||||
left: -10px;
|
||||
top: 0px;
|
||||
left: -14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -1821,18 +1821,50 @@
|
|||
background-color: #141516;
|
||||
}
|
||||
|
||||
#sidebar .category-content {
|
||||
.sidebar {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.sidebar .category-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#sidebar .category-content .category-title {
|
||||
.sidebar .category-content .category-title {
|
||||
top: -1px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar li:hover {
|
||||
color: #4D7EA8;
|
||||
.sidebar .category-content .rango-arrow-right {
|
||||
top: 4px;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar .category-content .category-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar .category-content .category-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.sidebar li:hover > a > span {
|
||||
color: #28557B;
|
||||
}
|
||||
|
||||
.sidebar .sub-categories {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar-level-0 {
|
||||
display: none;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
.grouped-product-container .grouped-product-list {
|
||||
|
|
@ -1880,12 +1912,13 @@
|
|||
}
|
||||
|
||||
.grouped-product-container .grouped-product-list ul li .qty .control-group {
|
||||
max-width: initial;
|
||||
height: 45px;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: initial;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grouped-product-container .grouped-product-list ul li .qty .control-group label {
|
||||
|
|
@ -1893,12 +1926,15 @@
|
|||
}
|
||||
|
||||
.grouped-product-container .grouped-product-list ul li .qty .control-group .control {
|
||||
height: 38px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.grouped-product-container .grouped-product-list ul li .qty .control-group > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bundle-options-wrapper .bundle-option-list {
|
||||
padding: 15px 0;
|
||||
border-top: solid 1px rgba(162, 162, 162, 0.2);
|
||||
|
|
@ -2040,6 +2076,7 @@
|
|||
}
|
||||
|
||||
.category-container {
|
||||
margin-left: 15px;
|
||||
padding: 40px 15px !important;
|
||||
}
|
||||
|
||||
|
|
@ -2118,11 +2155,6 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.slides-container .VueCarousel-pagination button {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
.slides-container .VueCarousel-pagination button:focus,
|
||||
.slides-container .VueCarousel-pagination button:active {
|
||||
outline: none;
|
||||
|
|
@ -2130,6 +2162,10 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.slides-container .VueCarousel-dot--active {
|
||||
background-color: #26A37C !important;
|
||||
}
|
||||
|
||||
.filter-attributes-item {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
|
|
@ -2162,6 +2198,10 @@
|
|||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.layered-filter-wrapper {
|
||||
padding: 42px 10px 0 10px;
|
||||
}
|
||||
|
||||
/* @author Shubham Mehrotra */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
|
|
@ -2188,8 +2228,10 @@ body .container-margin {
|
|||
}
|
||||
|
||||
.category-list-container {
|
||||
padding-left: 0px;
|
||||
display: inline-block;
|
||||
z-index: 10;
|
||||
padding: 0px !important;
|
||||
background: #FFFFFF;
|
||||
position: absolute !important;
|
||||
-webkit-box-shadow: inset -1px 0 0 0 #ECECEC;
|
||||
box-shadow: inset -1px 0 0 0 #ECECEC;
|
||||
}
|
||||
|
|
@ -2213,16 +2255,18 @@ body .container-margin {
|
|||
background: #ECECEC;
|
||||
}
|
||||
|
||||
.category-list-container .sub-category-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-list-container .sub-categories {
|
||||
top: 0px;
|
||||
top: -50px;
|
||||
left: 100%;
|
||||
width: 240px;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
display: none;
|
||||
padding: 10px 20px;
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
-webkit-box-shadow: inset -1px 0 0 0 #ECECEC;
|
||||
box-shadow: inset -1px 0 0 0 #ECECEC;
|
||||
}
|
||||
|
|
@ -2240,7 +2284,7 @@ body .container-margin {
|
|||
}
|
||||
|
||||
.banner-icon {
|
||||
height: 450px;
|
||||
height: 525px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -2354,72 +2398,58 @@ header #search-form > *:focus {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* advertisement-one */
|
||||
.advertisement-one .offers-lt-panel {
|
||||
height: 400px;
|
||||
background-image: url("../images/big-sale-banner.png");
|
||||
}
|
||||
|
||||
.advertisement-one .offers-ct-panel > .row {
|
||||
/* advertisements */
|
||||
.advertisement-four-container .offers-ct-panel > .row {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.advertisement-one .offers-ct-panel .offers-ct-top {
|
||||
height: 145px;
|
||||
background-image: url("../images/seasons.png");
|
||||
.advertisement-four-container .offers-ct-panel .offers-ct-top {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.advertisement-one .offers-ct-panel .offers-ct-bottom {
|
||||
height: 245px;
|
||||
background-image: url("../images/deals.png");
|
||||
.advertisement-four-container .offers-ct-panel .offers-ct-bottom {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.advertisement-one .offers-rt-panel {
|
||||
height: 400px;
|
||||
background-image: url("../images/kids.png");
|
||||
.advertisement-four-container > .row:first-child {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
/* advertisement-one */
|
||||
/* advertisement-two */
|
||||
.advertisement-two-container {
|
||||
max-width: 100%;
|
||||
.advertisement-four-container .col-4:nth-child(2) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.advertisement-two-container .ad-2-lt {
|
||||
height: 450px;
|
||||
background-position: top;
|
||||
background-image: url("../images/headphones.png");
|
||||
.advertisement-four-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 425px;
|
||||
}
|
||||
|
||||
.advertisement-two-container .ad-2-rt .top-container > div {
|
||||
height: 185px;
|
||||
background-position: top;
|
||||
background-image: url("../images/watch.png");
|
||||
.advertisement-four-container img:nth-of-type(1),
|
||||
.advertisement-four-container img:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.advertisement-two-container .ad-2-rt .bottom-container > div {
|
||||
bottom: 0px;
|
||||
height: 185px;
|
||||
position: absolute;
|
||||
background-position: top;
|
||||
background-image: url("../images/kids-2.png");
|
||||
.advertisement-two-container img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
/* advertisement-two */
|
||||
/* advertisement-three */
|
||||
.advertisement-three-container .ad-3-lt {
|
||||
height: 400px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../images/toster.png");
|
||||
.advertisement-three-container .col-6:first-child img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.advertisement-three-container .ad-3-rt {
|
||||
height: 400px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../images/trimmer.png");
|
||||
.advertisement-three-container .top-container img,
|
||||
.advertisement-three-container .bottom-container img {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
/* advertisement-three */
|
||||
.advertisement-three-container .bottom-container {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
/* advertisements */
|
||||
.recetly-viewed-items {
|
||||
padding-left: 10px !important;
|
||||
padding: 0px !important;
|
||||
|
|
@ -2509,11 +2539,11 @@ header #search-form > *:focus {
|
|||
|
||||
/* category with custom option */
|
||||
/* hot & popular categories */
|
||||
.hot-categories-container .col-sm-3 {
|
||||
padding-top: 15px;
|
||||
.hot-categories-container .hot-category-wrapper {
|
||||
padding: 15px 10px 15px 0;
|
||||
}
|
||||
|
||||
.hot-categories-container .col-sm-3 .card {
|
||||
.hot-categories-container .hot-category-wrapper .card {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
|
|
@ -2521,6 +2551,29 @@ header #search-form > *:focus {
|
|||
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.hot-categories-container .hot-category-wrapper .velocity-divide-page .left {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.hot-categories-container .hot-category-wrapper .velocity-divide-page .left img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hot-categories-container .hot-category-wrapper .velocity-divide-page .right {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
|
||||
.hot-categories-container .hot-category-wrapper:nth-last-child(2) {
|
||||
padding: 15px 0 15px 0px;
|
||||
}
|
||||
|
||||
.hot-categories-container .hot-category-wrapper:last-child {
|
||||
padding: 15px 0 15px 10px;
|
||||
}
|
||||
|
||||
.hot-categories-container ul,
|
||||
.popular-categories-container ul {
|
||||
line-height: 2.5rem;
|
||||
|
|
@ -2531,17 +2584,50 @@ header #search-form > *:focus {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.popular-categories-container .card-image {
|
||||
.popular-categories-container .popular-category-wrapper {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper .card {
|
||||
height: 100%;
|
||||
border: none;
|
||||
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper .card .category-image {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper .card .category-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper .card-image {
|
||||
height: 180px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../images/man.png");
|
||||
}
|
||||
|
||||
.popular-categories-container .card-description {
|
||||
.popular-categories-container .popular-category-wrapper .card-description {
|
||||
padding: 25px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper:nth-last-child(2) {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.popular-categories-container .popular-category-wrapper:last-child {
|
||||
padding-left: 16px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
/* hot & popular categories */
|
||||
/* Customer Reviews */
|
||||
.reviews-container .card {
|
||||
|
|
@ -2594,9 +2680,56 @@ header #search-form > *:focus {
|
|||
}
|
||||
|
||||
.categories-sidebar-container .main-category {
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
.categories-sidebar-container .content-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.categories-sidebar-container .content-list ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
background-color: #4D7EA8;
|
||||
}
|
||||
|
||||
.categories-sidebar-container .content-list ul li a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding: 8px 20px 8px 5px;
|
||||
}
|
||||
|
||||
.velocity-divide-page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.velocity-divide-page .left {
|
||||
z-index: 1;
|
||||
width: 230px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.velocity-divide-page .right {
|
||||
width: 100%;
|
||||
padding-left: 230px !important;
|
||||
}
|
||||
|
||||
.container-right {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
|
@ -2606,37 +2739,6 @@ header #search-form > *:focus {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.content-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
background-color: #4D7EA8;
|
||||
}
|
||||
|
||||
.content-list ul {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.content-list ul li a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding: 5px 20px 5px 5px;
|
||||
}
|
||||
|
||||
.home-base {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
|
@ -2757,7 +2859,7 @@ body::after {
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 1440px !important;
|
||||
max-width: 1300px !important;
|
||||
}
|
||||
|
||||
.remove-padding-margin {
|
||||
|
|
@ -2861,14 +2963,14 @@ body::after {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.footer .footer-content > .row .footer-rt-content .row .bg-image, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-top, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-bottom, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-rt-panel, .advertisement-one .footer .footer-content > .row .footer-rt-content .row .offers-rt-panel, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-lt, .advertisement-two-container .footer .footer-content > .row .footer-rt-content .row .ad-2-lt, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .top-container > div, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .bottom-container > div, .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .bottom-container > div, .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image, .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image {
|
||||
.footer .footer-content > .row .footer-rt-content .row .bg-image, .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image, .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image {
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
.footer .footer-content > .row .footer-rt-content .row .bg-image:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-top:not(:last-child), .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-top:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-bottom:not(:last-child), .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-bottom:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-rt-panel:not(:last-child), .advertisement-one .footer .footer-content > .row .footer-rt-content .row .offers-rt-panel:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-lt:not(:last-child), .advertisement-two-container .footer .footer-content > .row .footer-rt-content .row .ad-2-lt:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .top-container > div:not(:last-child), .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .top-container > div:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .bottom-container > div:not(:last-child), .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .bottom-container > div:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image:not(:last-child), .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image:not(:last-child) {
|
||||
.footer .footer-content > .row .footer-rt-content .row .bg-image:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image:not(:last-child), .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -3034,14 +3136,14 @@ body::after {
|
|||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
.pt42 {
|
||||
padding-top: 42px !important;
|
||||
}
|
||||
|
||||
.pl0 {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.pl5 {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.pl15 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
|
|
@ -3066,6 +3168,10 @@ body::after {
|
|||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
.pr15 {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
|
@ -3158,7 +3264,7 @@ body::after {
|
|||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.ml15, .advertisement-two-container .ad-2-rt {
|
||||
.ml15 {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
|
|
@ -3167,11 +3273,11 @@ body::after {
|
|||
-webkit-filter: blur(4px);
|
||||
}
|
||||
|
||||
.no-margin, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div {
|
||||
.no-margin {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.no-padding, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-two-container .ad-2-lt, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 {
|
||||
.no-padding, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
|
|
@ -3222,7 +3328,7 @@ body::after {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.full-back-size, .card-product-image-container .background-image-group, .advertisement-one .offers-lt-panel, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-rt-panel, .advertisement-two-container .ad-2-lt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div {
|
||||
.full-back-size, .card-product-image-container .background-image-group {
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
|
|
@ -3234,7 +3340,7 @@ body::after {
|
|||
border: none !important;
|
||||
}
|
||||
|
||||
.back-pos-rt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div {
|
||||
.back-pos-rt {
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
|
|
@ -3276,7 +3382,7 @@ body::after {
|
|||
background-color: #26A37C;
|
||||
}
|
||||
|
||||
.bg-image, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-rt-panel, .advertisement-two-container .ad-2-lt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div, .small-card-container .product-image {
|
||||
.bg-image, .small-card-container .product-image {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -3295,7 +3401,7 @@ body::after {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.unselectable * {
|
||||
.unselectable *, #top #account .welcome-content * {
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari */
|
||||
-moz-user-select: none;
|
||||
|
|
@ -3391,8 +3497,8 @@ body::after {
|
|||
float: left;
|
||||
width: 30%;
|
||||
height: 270px;
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
|
|
@ -3504,11 +3610,6 @@ body::after {
|
|||
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.text-up {
|
||||
top: -6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-down-3 {
|
||||
top: 3px;
|
||||
position: relative;
|
||||
|
|
@ -3519,6 +3620,11 @@ body::after {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.text-up-1 {
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-up-4 {
|
||||
top: -4px;
|
||||
position: relative;
|
||||
|
|
@ -3613,6 +3719,10 @@ a.default {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.VueCarousel .VueCarousel-slide:nth-of-type(1) #product-card-new {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.navigation-hide .VueCarousel-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -3659,12 +3769,25 @@ button[disabled] {
|
|||
}
|
||||
|
||||
.select-icon {
|
||||
top: 1px;
|
||||
top: 5px;
|
||||
left: -7px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.normal-text {
|
||||
color: #141516;
|
||||
}
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.display-table .cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-view {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -3851,13 +3974,14 @@ button[disabled] {
|
|||
|
||||
.product-detail .thumb-list .thumb-frame {
|
||||
padding: 1px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.product-detail .thumb-list .thumb-frame.active {
|
||||
border: 1px solid #26A37C;
|
||||
}
|
||||
|
||||
.product-detail .thumb-list .thumb-frame > .bg-image, .product-detail .thumb-list .advertisement-one .offers-ct-panel .thumb-frame > .offers-ct-top, .advertisement-one .offers-ct-panel .product-detail .thumb-list .thumb-frame > .offers-ct-top, .product-detail .thumb-list .advertisement-one .offers-ct-panel .thumb-frame > .offers-ct-bottom, .advertisement-one .offers-ct-panel .product-detail .thumb-list .thumb-frame > .offers-ct-bottom, .product-detail .thumb-list .advertisement-one .thumb-frame > .offers-rt-panel, .advertisement-one .product-detail .thumb-list .thumb-frame > .offers-rt-panel, .product-detail .thumb-list .advertisement-two-container .thumb-frame > .ad-2-lt, .advertisement-two-container .product-detail .thumb-list .thumb-frame > .ad-2-lt, .product-detail .thumb-list .advertisement-two-container .ad-2-rt .top-container.thumb-frame > div, .advertisement-two-container .ad-2-rt .product-detail .thumb-list .top-container.thumb-frame > div, .product-detail .thumb-list .advertisement-two-container .ad-2-rt .bottom-container.thumb-frame > div, .advertisement-two-container .ad-2-rt .product-detail .thumb-list .bottom-container.thumb-frame > div, .product-detail .thumb-list .small-card-container .thumb-frame > .product-image, .small-card-container .product-detail .thumb-list .thumb-frame > .product-image {
|
||||
.product-detail .thumb-list .thumb-frame > .bg-image, .product-detail .thumb-list .small-card-container .thumb-frame > .product-image, .small-card-container .product-detail .thumb-list .thumb-frame > .product-image {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -11960,13 +12084,12 @@ body {
|
|||
}
|
||||
|
||||
#top {
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
padding: 4px 0px 3px 0;
|
||||
margin: 0;
|
||||
min-height: 40px;
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.24);
|
||||
margin: 0;
|
||||
min-height: 32px;
|
||||
color: rgba(0, 0, 0, 0.83);
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
#top .btn, #top .quantity button, .quantity #top button,
|
||||
|
|
@ -12023,7 +12146,6 @@ body {
|
|||
|
||||
#top .btn-link {
|
||||
color: rgba(0, 0, 0, 0.83);
|
||||
padding: 0px 5px 6px 5px;
|
||||
}
|
||||
|
||||
#top .dropdown-menu-large {
|
||||
|
|
@ -12038,14 +12160,43 @@ body {
|
|||
color: rgba(0, 0, 0, 0.83);
|
||||
}
|
||||
|
||||
#top .welcome-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
padding-top: 2px;
|
||||
#top #account {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#top #account .select-icon {
|
||||
top: 0px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
#top #account .welcome-content {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#top #account + .account-modal {
|
||||
height: 135px;
|
||||
}
|
||||
|
||||
#top > div:last-child {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#top > div:last-child * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#top > div:last-child .welcome-content {
|
||||
float: right;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#top > div:last-child .welcome-content * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-top: 3px solid #269c77;
|
||||
border-radius: 0px;
|
||||
|
|
@ -12069,7 +12220,7 @@ body {
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.no-padding, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-two-container .ad-2-lt, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 {
|
||||
.no-padding, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
|
|
@ -12152,7 +12303,6 @@ body {
|
|||
}
|
||||
|
||||
header .logo {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -12176,7 +12326,7 @@ header #search-form .selectdiv {
|
|||
|
||||
header #search-form .selectdiv:before {
|
||||
top: 13px;
|
||||
left: 160px;
|
||||
right: 72%;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
content: "\E906";
|
||||
|
|
@ -12420,7 +12570,7 @@ header .dropdown-menu-large .dropdown-footer .checkout-link {
|
|||
background: #FFF;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
height: 525px;
|
||||
}
|
||||
|
||||
#nav-menu .navbar .category-dropdown li.category-list {
|
||||
|
|
|
|||
|
|
@ -1127,24 +1127,53 @@ $(document).ready(function () {
|
|||
route ? window.location.href = route : '';
|
||||
},
|
||||
|
||||
toggleSidebar: function toggleSidebar() {
|
||||
var rightBarContainer = document.getElementById('home-right-bar-container');
|
||||
var categoryListContainer = document.getElementById('sidebar');
|
||||
toggleSidebar: function toggleSidebar(id, _ref, type) {
|
||||
var target = _ref.target;
|
||||
|
||||
if (categoryListContainer) {
|
||||
categoryListContainer.classList.toggle('hide');
|
||||
}
|
||||
if (Array.from(target.classList)[0] == "main-category" || Array.from(target.parentElement.classList)[0] == "main-category") {
|
||||
var sidebar = $('#sidebar-level-' + id);
|
||||
if (sidebar && sidebar.length > 0) {
|
||||
if (type == "mouseover") {
|
||||
this.show(sidebar);
|
||||
} else if (type == "mouseout") {
|
||||
this.hide(sidebar);
|
||||
}
|
||||
}
|
||||
} else if (Array.from(target.classList)[0] == "category" || Array.from(target.classList)[0] == "category-icon" || Array.from(target.classList)[0] == "category-title" || Array.from(target.classList)[0] == "category-content" || Array.from(target.classList)[0] == "rango-arrow-right") {
|
||||
var parentItem = target.closest('li');
|
||||
if (target.id || parentItem.id.match('category-')) {
|
||||
var subCategories = $('#' + (target.id ? target.id : parentItem.id) + ' .sub-categories');
|
||||
|
||||
if (rightBarContainer.className.search('col-10') > -1) {
|
||||
rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
|
||||
} else {
|
||||
rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
|
||||
if (subCategories && subCategories.length > 0) {
|
||||
var subCategories1 = Array.from(subCategories)[0];
|
||||
subCategories1 = $(subCategories1);
|
||||
|
||||
if (type == "mouseover") {
|
||||
// this.show(subCategories1);
|
||||
} else if (type == "mouseout") {
|
||||
this.hide(subCategories1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toggleButtonDisability: function toggleButtonDisability(_ref) {
|
||||
var event = _ref.event,
|
||||
actionType = _ref.actionType;
|
||||
show: function show(element) {
|
||||
element.show();
|
||||
element.mouseleave(function (_ref2) {
|
||||
var target = _ref2.target;
|
||||
|
||||
$(target.closest('.sidebar')).hide();
|
||||
});
|
||||
},
|
||||
|
||||
hide: function hide(element) {
|
||||
element.hide();
|
||||
},
|
||||
|
||||
toggleButtonDisability: function toggleButtonDisability(_ref3) {
|
||||
var event = _ref3.event,
|
||||
actionType = _ref3.actionType;
|
||||
|
||||
var button = event.target.querySelector('button[type=submit]');
|
||||
|
||||
|
|
@ -35492,9 +35521,24 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
props: ['url', 'addClass', 'categories', 'mainSidebar', 'categoryCount'],
|
||||
props: ['id', 'url', 'addClass', 'categories', 'mainSidebar', 'categoryCount'],
|
||||
|
||||
data: function data() {
|
||||
var slicedCategories = this.categories;
|
||||
|
|
@ -35509,16 +35553,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
};
|
||||
},
|
||||
|
||||
mounted: function mounted() {
|
||||
var checkLocale = window.location.href.slice(0, (this.url + '/?locale=').length);
|
||||
var checkCurrency = window.location.href.slice(0, (this.url + '/?currency=').length);
|
||||
|
||||
if (checkLocale == this.url + '/?locale=' || checkCurrency == this.url + '/?currency=') {} else if (window.location.href !== this.url + '/' && this.mainSidebar || this.categories && this.categories.length == 0) {
|
||||
this.toggleSidebar();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
remainBar: function remainBar(id) {
|
||||
var sidebar = $('#' + id);
|
||||
if (sidebar && sidebar.length > 0) {
|
||||
sidebar.show();
|
||||
}
|
||||
},
|
||||
|
||||
hover: function hover(index, actionType) {
|
||||
var category = this.categories[index];
|
||||
|
||||
|
|
@ -35564,8 +35606,13 @@ var render = function() {
|
|||
? _c(
|
||||
"nav",
|
||||
{
|
||||
class: "" + (_vm.addClass ? _vm.addClass : ""),
|
||||
attrs: { id: "sidebar" }
|
||||
class: "sidebar " + (_vm.addClass ? _vm.addClass : ""),
|
||||
attrs: { id: _vm.id },
|
||||
on: {
|
||||
mouseover: function($event) {
|
||||
return _vm.remainBar(_vm.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_c(
|
||||
|
|
@ -35576,8 +35623,16 @@ var render = function() {
|
|||
"li",
|
||||
{
|
||||
key: index,
|
||||
staticClass: "category-content",
|
||||
attrs: { id: "category-" + category.id }
|
||||
staticClass: "category-content cursor-pointer",
|
||||
attrs: { id: "category-" + category.id },
|
||||
on: {
|
||||
mouseout: function($event) {
|
||||
return _vm.toggleSidebar(_vm.id, $event, "mouseout")
|
||||
},
|
||||
mouseover: function($event) {
|
||||
return _vm.toggleSidebar(_vm.id, $event, "mouseover")
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_c(
|
||||
|
|
@ -35587,26 +35642,57 @@ var render = function() {
|
|||
class: category.children.length > 0 ? "fw6" : "",
|
||||
attrs: {
|
||||
href: _vm.url + "/" + category["translations"][0].slug
|
||||
},
|
||||
on: {
|
||||
mouseover: function($event) {
|
||||
return _vm.hover(index, "mouseover")
|
||||
},
|
||||
mouseleave: function($event) {
|
||||
return _vm.hover(index, "mouseleave")
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_c(
|
||||
"div",
|
||||
{
|
||||
staticClass: "category-icon",
|
||||
on: {
|
||||
mouseout: function($event) {
|
||||
return _vm.toggleSidebar(
|
||||
_vm.id,
|
||||
$event,
|
||||
"mouseout"
|
||||
)
|
||||
},
|
||||
mouseover: function($event) {
|
||||
return _vm.toggleSidebar(
|
||||
_vm.id,
|
||||
$event,
|
||||
"mouseover"
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
category.image
|
||||
? _c("img", {
|
||||
attrs: {
|
||||
src: _vm.url + "/storage/" + category.image
|
||||
}
|
||||
})
|
||||
: _vm._e()
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c("span", { staticClass: "category-title" }, [
|
||||
_vm._v(_vm._s(category["name"]))
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("i", {
|
||||
staticClass: "angle-right-icon",
|
||||
staticClass: "rango-arrow-right pr15",
|
||||
on: {
|
||||
click: function($event) {
|
||||
return _vm.toggleSubCategory(index)
|
||||
mouseout: function($event) {
|
||||
return _vm.toggleSidebar(_vm.id, $event, "mouseout")
|
||||
},
|
||||
mouseover: function($event) {
|
||||
return _vm.toggleSidebar(
|
||||
_vm.id,
|
||||
$event,
|
||||
"mouseover"
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -35614,19 +35700,22 @@ var render = function() {
|
|||
),
|
||||
_vm._v(" "),
|
||||
category.children.length && category.children.length > 0
|
||||
? _c(
|
||||
"div",
|
||||
{ staticClass: "sub-categories" },
|
||||
[
|
||||
_c("sidebar-component", {
|
||||
attrs: {
|
||||
url: _vm.url,
|
||||
categories: category.children
|
||||
}
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
? _c("div", { staticClass: "sub-category-container" }, [
|
||||
_c(
|
||||
"div",
|
||||
{ staticClass: "sub-categories" },
|
||||
[
|
||||
_c("sidebar-component", {
|
||||
attrs: {
|
||||
url: _vm.url,
|
||||
id: "sidebar-level-" + Math.random(),
|
||||
categories: category.children
|
||||
}
|
||||
})
|
||||
],
|
||||
1
|
||||
)
|
||||
])
|
||||
: _vm._e()
|
||||
]
|
||||
)
|
||||
|
|
@ -36488,16 +36577,16 @@ var render = function() {
|
|||
]
|
||||
: _vm._e(),
|
||||
_vm._v(" "),
|
||||
!(_vm.viewAll == "false" || _vm.viewAll == "")
|
||||
!(_vm.viewAll == "false" || _vm.viewAll == "") && _vm.viewAll
|
||||
? [
|
||||
_c("div", { staticClass: "mr15" }, [
|
||||
_c(
|
||||
"a",
|
||||
{
|
||||
staticClass: "default",
|
||||
staticClass: "remove-decoration normal-text",
|
||||
attrs: {
|
||||
href: _vm.viewAll,
|
||||
title: "View all " + _vm.headerHeading
|
||||
title: "View all " + _vm.headerHeading + " products"
|
||||
}
|
||||
},
|
||||
[
|
||||
|
|
@ -36751,6 +36840,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
props: ['heading', 'headerContent', 'isEnabled']
|
||||
|
|
@ -36764,50 +36859,64 @@ var render = function() {
|
|||
var _vm = this
|
||||
var _h = _vm.$createElement
|
||||
var _c = _vm._self._c || _h
|
||||
return _c("div", { staticClass: "row col-12 remove-padding-margin" }, [
|
||||
_c("div", { staticClass: "main-category fs20 pt10 col-2 unselectable" }, [
|
||||
_c("i", {
|
||||
class:
|
||||
"rango-view-list " +
|
||||
(_vm.isEnabled == "0" ? "" : "cursor-pointer") +
|
||||
" align-vertical-top",
|
||||
on: {
|
||||
click: function($event) {
|
||||
_vm.isEnabled == "0" ? "" : _vm.toggleSidebar()
|
||||
}
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c("span", {
|
||||
staticClass: "text-up",
|
||||
domProps: { textContent: _vm._s(_vm.heading) }
|
||||
})
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "content-list row no-margin col-10" }, [
|
||||
return _c(
|
||||
"div",
|
||||
{ staticClass: "row velocity-divide-page remove-padding-margin" },
|
||||
[
|
||||
_c(
|
||||
"ul",
|
||||
{ staticClass: "no-margin", attrs: { type: "none" } },
|
||||
_vm._l(_vm.headerContent, function(content, index) {
|
||||
return _c("li", { key: index }, [
|
||||
content["content_type"] == "link"
|
||||
? _c("a", {
|
||||
attrs: {
|
||||
href: content["page_link"],
|
||||
target: content["link_target"] ? "_blank" : "_self"
|
||||
},
|
||||
domProps: { textContent: _vm._s(content.title) }
|
||||
})
|
||||
: _c("a", {
|
||||
attrs: { href: "#" },
|
||||
domProps: { textContent: _vm._s(content.title) }
|
||||
})
|
||||
])
|
||||
}),
|
||||
0
|
||||
)
|
||||
])
|
||||
])
|
||||
"div",
|
||||
{
|
||||
staticClass:
|
||||
"main-category fs16 unselectable fw6 cursor-pointer left",
|
||||
on: {
|
||||
mouseout: function($event) {
|
||||
return _vm.toggleSidebar("0", $event, "mouseout")
|
||||
},
|
||||
mouseover: function($event) {
|
||||
return _vm.toggleSidebar("0", $event, "mouseover")
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
_c("i", { class: "rango-view-list text-down-4 align-vertical-top" }),
|
||||
_vm._v(" "),
|
||||
_c("span", {
|
||||
staticClass: "pl5",
|
||||
domProps: { textContent: _vm._s(_vm.heading) },
|
||||
on: {
|
||||
mouseover: function($event) {
|
||||
return _vm.toggleSidebar("0", $event, "mouseover")
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "content-list right" }, [
|
||||
_c(
|
||||
"ul",
|
||||
{ staticClass: "no-margin", attrs: { type: "none" } },
|
||||
_vm._l(_vm.headerContent, function(content, index) {
|
||||
return _c("li", { key: index }, [
|
||||
content["content_type"] == "link"
|
||||
? _c("a", {
|
||||
attrs: {
|
||||
href: content["page_link"],
|
||||
target: content["link_target"] ? "_blank" : "_self"
|
||||
},
|
||||
domProps: { textContent: _vm._s(content.title) }
|
||||
})
|
||||
: _c("a", {
|
||||
attrs: { href: "#" },
|
||||
domProps: { textContent: _vm._s(content.title) }
|
||||
})
|
||||
])
|
||||
}),
|
||||
0
|
||||
)
|
||||
])
|
||||
]
|
||||
)
|
||||
}
|
||||
var staticRenderFns = []
|
||||
render._withStripped = true
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="(! (viewAll == 'false' || viewAll == ''))">
|
||||
<template v-if="(! (viewAll == 'false' || viewAll == '')) && viewAll">
|
||||
<div class="mr15">
|
||||
<a :href="viewAll" :title="`View all ${headerHeading}`" class="default">
|
||||
<a :href="viewAll" :title="`View all ${headerHeading} products`" class="remove-decoration normal-text">
|
||||
<h2 class="fs14 fw6 cursor-pointer tab">View All</h2>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
<template>
|
||||
<div class="row col-12 remove-padding-margin">
|
||||
<div class="main-category fs20 pt10 col-2 unselectable">
|
||||
<i
|
||||
:class="`rango-view-list ${isEnabled == '0' ? '' : 'cursor-pointer'} align-vertical-top`"
|
||||
@click="(isEnabled == '0') ? '' : toggleSidebar()">
|
||||
<div class="row velocity-divide-page remove-padding-margin">
|
||||
<div
|
||||
@mouseout="toggleSidebar('0', $event, 'mouseout')"
|
||||
@mouseover="toggleSidebar('0', $event, 'mouseover')"
|
||||
class="main-category fs16 unselectable fw6 cursor-pointer left">
|
||||
|
||||
<i :class="`rango-view-list text-down-4 align-vertical-top`">
|
||||
</i>
|
||||
<span class="text-up" v-text="heading"></span>
|
||||
<span
|
||||
class="pl5"
|
||||
v-text="heading"
|
||||
@mouseover="toggleSidebar('0', $event, 'mouseover')">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="content-list row no-margin col-10">
|
||||
<div class="content-list right">
|
||||
<ul type="none" class="no-margin">
|
||||
<li v-for="(content, index) in headerContent" :key="index">
|
||||
<a
|
||||
v-if="(content['content_type'] == 'link')"
|
||||
v-text="content.title"
|
||||
:href="content['page_link']"
|
||||
:target="content['link_target'] ? '_blank' : '_self'"
|
||||
v-text="content.title">
|
||||
v-if="(content['content_type'] == 'link')"
|
||||
:target="content['link_target'] ? '_blank' : '_self'">
|
||||
</a>
|
||||
|
||||
<a href="#" v-else v-text="content.title"></a>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,54 @@
|
|||
<template>
|
||||
<!-- categories list -->
|
||||
<nav
|
||||
id="sidebar"
|
||||
:class="`${addClass ? addClass : ''}`"
|
||||
:id="id"
|
||||
@mouseover="remainBar(id)"
|
||||
:class="`sidebar ${addClass ? addClass : ''}`"
|
||||
v-if="slicedCategories && slicedCategories.length > 0">
|
||||
|
||||
<ul type="none">
|
||||
<li
|
||||
:key="index"
|
||||
class="category-content"
|
||||
:id="`category-${category.id}`"
|
||||
v-for="(category, index) in slicedCategories">
|
||||
class="category-content cursor-pointer"
|
||||
v-for="(category, index) in slicedCategories"
|
||||
@mouseout="toggleSidebar(id, $event, 'mouseout')"
|
||||
@mouseover="toggleSidebar(id, $event, 'mouseover')">
|
||||
|
||||
<a
|
||||
class="category unset"
|
||||
@mouseover="hover(index, 'mouseover')"
|
||||
@mouseleave="hover(index, 'mouseleave')"
|
||||
:class="(category.children.length > 0) ? 'fw6' : ''"
|
||||
:href="`${url}/${category['translations'][0].slug}`">
|
||||
|
||||
<div
|
||||
class="category-icon"
|
||||
@mouseout="toggleSidebar(id, $event, 'mouseout')"
|
||||
@mouseover="toggleSidebar(id, $event, 'mouseover')">
|
||||
|
||||
<img
|
||||
v-if="category.image"
|
||||
:src="`${url}/storage/${category.image}`" />
|
||||
</div>
|
||||
<span class="category-title">{{ category['name'] }}</span>
|
||||
<i
|
||||
class="angle-right-icon"
|
||||
@click="toggleSubCategory(index)">
|
||||
class="rango-arrow-right pr15"
|
||||
@mouseout="toggleSidebar(id, $event, 'mouseout')"
|
||||
@mouseover="toggleSidebar(id, $event, 'mouseover')">
|
||||
<!-- v-if="category.children.length && category.children.length > 0"> -->
|
||||
</i>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="sub-categories"
|
||||
class="sub-category-container"
|
||||
v-if="category.children.length && category.children.length > 0">
|
||||
|
||||
<sidebar-component
|
||||
:url="url"
|
||||
:categories="category.children">
|
||||
</sidebar-component>
|
||||
<div class="sub-categories">
|
||||
<sidebar-component
|
||||
:url="url"
|
||||
:id="`sidebar-level-${Math.random()}`"
|
||||
:categories="category.children">
|
||||
</sidebar-component>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -43,6 +58,7 @@
|
|||
<script type="text/javascript">
|
||||
export default {
|
||||
props: [
|
||||
'id',
|
||||
'url',
|
||||
'addClass',
|
||||
'categories',
|
||||
|
|
@ -65,23 +81,14 @@
|
|||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
let checkLocale = window.location.href.slice(0, `${this.url}/?locale=`.length);
|
||||
let checkCurrency = window.location.href.slice(0, `${this.url}/?currency=`.length);
|
||||
|
||||
if (
|
||||
checkLocale == `${this.url}/?locale=`
|
||||
|| checkCurrency == `${this.url}/?currency=`
|
||||
) {
|
||||
} else if (
|
||||
(window.location.href !== `${this.url}/` && this.mainSidebar)
|
||||
|| (this.categories && this.categories.length == 0)
|
||||
) {
|
||||
this.toggleSidebar();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
remainBar: function (id) {
|
||||
let sidebar = $(`#${id}`);
|
||||
if (sidebar && sidebar.length > 0) {
|
||||
sidebar.show();
|
||||
}
|
||||
},
|
||||
|
||||
hover: function (index, actionType) {
|
||||
let category = this.categories[index];
|
||||
|
||||
|
|
|
|||
|
|
@ -39,21 +39,55 @@ $(document).ready(function () {
|
|||
route ? window.location.href = route : '';
|
||||
},
|
||||
|
||||
toggleSidebar: function () {
|
||||
let rightBarContainer = document.getElementById('home-right-bar-container');
|
||||
let categoryListContainer = document.getElementById('sidebar');
|
||||
toggleSidebar: function (id, {target}, type) {
|
||||
if (
|
||||
Array.from(target.classList)[0] == "main-category"
|
||||
|| Array.from(target.parentElement.classList)[0] == "main-category"
|
||||
) {
|
||||
let sidebar = $(`#sidebar-level-${id}`);
|
||||
if (sidebar && sidebar.length > 0) {
|
||||
if (type == "mouseover") {
|
||||
this.show(sidebar);
|
||||
} else if (type == "mouseout") {
|
||||
this.hide(sidebar);
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
Array.from(target.classList)[0] == "category"
|
||||
|| Array.from(target.classList)[0] == "category-icon"
|
||||
|| Array.from(target.classList)[0] == "category-title"
|
||||
|| Array.from(target.classList)[0] == "category-content"
|
||||
|| Array.from(target.classList)[0] == "rango-arrow-right"
|
||||
) {
|
||||
let parentItem = target.closest('li');
|
||||
if (target.id || parentItem.id.match('category-')) {
|
||||
let subCategories = $(`#${target.id ? target.id : parentItem.id} .sub-categories`);
|
||||
|
||||
if (categoryListContainer) {
|
||||
categoryListContainer.classList.toggle('hide');
|
||||
}
|
||||
if (subCategories && subCategories.length > 0) {
|
||||
let subCategories1 = Array.from(subCategories)[0];
|
||||
subCategories1 = $(subCategories1);
|
||||
|
||||
if (rightBarContainer.className.search('col-10') > -1) {
|
||||
rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
|
||||
} else {
|
||||
rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
|
||||
if (type == "mouseover") {
|
||||
// this.show(subCategories1);
|
||||
} else if (type == "mouseout") {
|
||||
this.hide(subCategories1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
show: function (element) {
|
||||
element.show();
|
||||
element.mouseleave(({target}) => {
|
||||
$(target.closest('.sidebar')).hide();
|
||||
});
|
||||
},
|
||||
|
||||
hide: function (element) {
|
||||
element.hide();
|
||||
},
|
||||
|
||||
toggleButtonDisability ({event, actionType}) {
|
||||
let button = event.target.querySelector('button[type=submit]');
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,11 @@ $dark-color: #000000;
|
|||
$light1-black: #141516;
|
||||
$light2-black: #cfcfd0;
|
||||
$link-color: #4D7EA8;
|
||||
$light-link-color: #28557B;
|
||||
$grey-clr: rgba(0,0,0,0.53);
|
||||
$light-grey-clr: rgb(158, 158, 158);
|
||||
$light-background: #F7F7F9;
|
||||
$sidebar-width: 230px;
|
||||
|
||||
$font-family-pro: 'Source Sans Pro', sans-serif;
|
||||
$font-family-regular: 'SourceSansPro-Regular';
|
||||
|
|
|
|||
|
|
@ -103,12 +103,12 @@ body {
|
|||
}
|
||||
|
||||
#top {
|
||||
border-bottom: 1px solid $border-common;
|
||||
padding: 4px 0px 3px 0;
|
||||
margin: 0;
|
||||
min-height: 40px;
|
||||
@include box-shadow(0 0 0 0 rgba(0, 0, 0, 0.24));
|
||||
|
||||
margin: 0;
|
||||
min-height: 32px;
|
||||
color: $font-color;
|
||||
border-bottom: 1px solid $border-common;
|
||||
|
||||
.btn {
|
||||
font-family: $font-family-pro;
|
||||
|
|
@ -160,7 +160,6 @@ body {
|
|||
|
||||
.btn-link {
|
||||
color: $font-color;
|
||||
padding: 0px 5px 6px 5px;
|
||||
}
|
||||
|
||||
.dropdown-menu-large {
|
||||
|
|
@ -175,12 +174,43 @@ body {
|
|||
color: $font-color;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
padding-top: 2px;
|
||||
text-align: right;
|
||||
#account {
|
||||
font-size: 14px;
|
||||
|
||||
.select-icon {
|
||||
top: 0px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
@extend .unselectable;
|
||||
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
+ .account-modal {
|
||||
height: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
height: 32px;
|
||||
|
||||
* {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
float: right;
|
||||
display: table;
|
||||
|
||||
* {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -295,7 +325,6 @@ body {
|
|||
|
||||
header {
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -318,7 +347,7 @@ header {
|
|||
|
||||
.selectdiv:before {
|
||||
top: 13px;
|
||||
left: 160px;
|
||||
right: 72%;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
content: "\E906";
|
||||
|
|
@ -556,7 +585,7 @@ header {
|
|||
background: #FFF;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
height: 525px;
|
||||
|
||||
li.category-list {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -412,8 +412,8 @@
|
|||
.badge {
|
||||
@include border-radius(50%);
|
||||
|
||||
top: -15px;
|
||||
left: -10px;
|
||||
top: -7px;
|
||||
left: -13px;
|
||||
padding: 4px;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
|
|
@ -421,8 +421,8 @@
|
|||
}
|
||||
|
||||
.cart-text {
|
||||
top: -2px;
|
||||
left: -10px;
|
||||
top: 0px;
|
||||
left: -14px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -1085,7 +1085,9 @@
|
|||
background-color: $light1-black;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.sidebar {
|
||||
width: $sidebar-width;
|
||||
|
||||
.category-content {
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -1094,12 +1096,43 @@
|
|||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rango-arrow-right {
|
||||
top: 4px;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding-right: 5px;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
> a {
|
||||
> span {
|
||||
color: $light-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-categories {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#sidebar {
|
||||
li:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
#sidebar-level-0 {
|
||||
display: none;
|
||||
border-top: 1px solid $border-common;
|
||||
}
|
||||
|
||||
.grouped-product-container {
|
||||
|
|
@ -1148,23 +1181,27 @@
|
|||
float: right;
|
||||
|
||||
.control-group {
|
||||
max-width: initial;
|
||||
height: 45px;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: initial;
|
||||
text-align: center;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control {
|
||||
height: 38px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1331,6 +1368,7 @@
|
|||
}
|
||||
|
||||
.category-container {
|
||||
margin-left: 15px;
|
||||
padding: 40px 15px !important;
|
||||
|
||||
.hero-image {
|
||||
|
|
@ -1411,17 +1449,16 @@
|
|||
bottom: 10px;
|
||||
position: absolute;
|
||||
|
||||
button {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.VueCarousel-dot--active {
|
||||
background-color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-attributes-item {
|
||||
|
|
@ -1456,4 +1493,8 @@
|
|||
display: none ;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.layered-filter-wrapper {
|
||||
padding: 42px 10px 0 10px;
|
||||
}
|
||||
|
|
@ -29,8 +29,10 @@ body {
|
|||
}
|
||||
|
||||
.category-list-container {
|
||||
padding-left: 0px;
|
||||
display: inline-block;
|
||||
z-index: 10;
|
||||
padding: 0px !important;
|
||||
background: $white-color;
|
||||
position: absolute !important;
|
||||
box-shadow: inset -1px 0 0 0 $border-light;
|
||||
|
||||
.category {
|
||||
|
|
@ -56,16 +58,18 @@ body {
|
|||
}
|
||||
|
||||
.category-list-container {
|
||||
.sub-category-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sub-categories {
|
||||
top: 0px;
|
||||
top: -50px;
|
||||
left: 100%;
|
||||
width: 240px;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
display: none;
|
||||
padding: 10px 20px;
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
background: $light-color;
|
||||
border-left: 1px solid $border-common;
|
||||
box-shadow: inset -1px 0 0 0 $border-light;
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +87,7 @@ body {
|
|||
}
|
||||
|
||||
.banner-icon {
|
||||
height: 450px;
|
||||
height: 525px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -197,112 +201,69 @@ header #search-form > *:focus {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* advertisement-one */
|
||||
.advertisement-one {
|
||||
.offers-lt-panel {
|
||||
@extend .full-back-size;
|
||||
|
||||
height: 400px;
|
||||
background-image: url('../images/big-sale-banner.png');
|
||||
}
|
||||
|
||||
/* advertisements */
|
||||
.advertisement-four-container {
|
||||
.offers-ct-panel {
|
||||
> .row {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.offers-ct-top {
|
||||
@extend .bg-image;
|
||||
@extend .no-padding;
|
||||
@extend .full-back-size;
|
||||
|
||||
height: 145px;
|
||||
background-image: url('../images/seasons.png');
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.offers-ct-bottom {
|
||||
@extend .bg-image;
|
||||
@extend .no-padding;
|
||||
@extend .full-back-size;
|
||||
|
||||
height: 245px;
|
||||
background-image: url('../images/deals.png');
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.offers-rt-panel {
|
||||
@extend .bg-image;
|
||||
@extend .full-back-size;
|
||||
> .row:first-child {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
height: 400px;
|
||||
background-image: url('../images/kids.png');
|
||||
.col-4:nth-child(2) {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 425px;
|
||||
}
|
||||
|
||||
img:nth-of-type(1),
|
||||
img:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
/* advertisement-one */
|
||||
|
||||
/* advertisement-two */
|
||||
.advertisement-two-container {
|
||||
max-width: 100%;
|
||||
|
||||
.ad-2-lt {
|
||||
@extend .bg-image;
|
||||
@extend .no-padding;
|
||||
@extend .full-back-size;
|
||||
|
||||
height: 450px;
|
||||
background-position: top;
|
||||
background-image: url('../images/headphones.png');
|
||||
}
|
||||
|
||||
.ad-2-rt {
|
||||
@extend .ml15;
|
||||
|
||||
.top-container {
|
||||
> div {
|
||||
@extend .bg-image;
|
||||
@extend .no-margin;
|
||||
@extend .full-back-size;
|
||||
@extend .back-pos-rt;
|
||||
|
||||
height: 185px;
|
||||
background-position: top;
|
||||
background-image: url('../images/watch.png');
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
> div {
|
||||
@extend .bg-image;
|
||||
@extend .no-margin;
|
||||
@extend .back-pos-rt;
|
||||
@extend .full-back-size;
|
||||
|
||||
bottom: 0px;
|
||||
height: 185px;
|
||||
position: absolute;
|
||||
background-position: top;
|
||||
background-image: url('../images/kids-2.png');
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
/* advertisement-two */
|
||||
|
||||
/* advertisement-three */
|
||||
.advertisement-three-container {
|
||||
.ad-3-lt {
|
||||
height: 400px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../images/toster.png');
|
||||
.col-6:first-child {
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ad-3-rt {
|
||||
height: 400px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../images/trimmer.png');
|
||||
.top-container,
|
||||
.bottom-container {
|
||||
img {
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
/* advertisement-three */
|
||||
/* advertisements */
|
||||
|
||||
.recetly-viewed-items {
|
||||
padding-left: 10px !important;
|
||||
|
|
@ -403,8 +364,8 @@ header #search-form > *:focus {
|
|||
/* hot & popular categories */
|
||||
|
||||
.hot-categories-container {
|
||||
.col-sm-3 {
|
||||
padding-top: 15px;
|
||||
.hot-category-wrapper {
|
||||
padding: 15px 10px 15px 0;
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
|
|
@ -413,6 +374,31 @@ header #search-form > *:focus {
|
|||
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.velocity-divide-page {
|
||||
.left {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-category-wrapper:nth-last-child(2) {
|
||||
padding: 15px 0 15px 0px;
|
||||
}
|
||||
|
||||
.hot-category-wrapper:last-child {
|
||||
padding: 15px 0 15px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -428,15 +414,48 @@ header #search-form > *:focus {
|
|||
}
|
||||
|
||||
.popular-categories-container {
|
||||
.card-image {
|
||||
height: 180px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../images/man.png');
|
||||
.popular-category-wrapper {
|
||||
padding: 0 8px;
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
border: none;
|
||||
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||
|
||||
.category-image {
|
||||
height: 180px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 180px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../images/man.png');
|
||||
}
|
||||
|
||||
.card-description {
|
||||
padding: 25px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-description {
|
||||
padding: 25px;
|
||||
margin-top: 15px;
|
||||
.popular-category-wrapper:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.popular-category-wrapper:nth-last-child(2) {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.popular-category-wrapper:last-child {
|
||||
padding-left: 16px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -499,8 +518,55 @@ header #search-form > *:focus {
|
|||
}
|
||||
|
||||
.main-category {
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid $border-common;
|
||||
}
|
||||
|
||||
.content-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
display: inline-flex;
|
||||
background-color: $link-color;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding: 8px 20px 8px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.velocity-divide-page {
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
z-index: 1;
|
||||
width: $sidebar-width;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
padding-left: $sidebar-width !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container-right {
|
||||
|
|
@ -511,36 +577,7 @@ header #search-form > *:focus {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
background-color: #4D7EA8;
|
||||
|
||||
ul {
|
||||
display: inline-flex;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding: 5px 20px 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-base {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
|
@ -669,7 +706,7 @@ body::after {
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 1440px !important;
|
||||
max-width: 1300px !important;
|
||||
}
|
||||
|
||||
.remove-padding-margin {
|
||||
|
|
|
|||
|
|
@ -330,6 +330,7 @@
|
|||
|
||||
.thumb-frame {
|
||||
padding: 1px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.active {
|
||||
border: 1px solid $theme-color;
|
||||
|
|
|
|||
|
|
@ -65,12 +65,12 @@
|
|||
.pt20 {
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
.pt42 {
|
||||
padding-top: 42px !important;
|
||||
}
|
||||
.pl0 {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
.pl5 {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
.pl15 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
|
|
@ -89,6 +89,9 @@
|
|||
.pr0 {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.pr5 {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
.pr15 {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
|
@ -391,8 +394,8 @@
|
|||
float: left;
|
||||
width: 30%;
|
||||
height: 270px;
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
|
|
@ -513,10 +516,6 @@
|
|||
box-shadow: 0 6px 14px 0 rgba(0,0,0,0.14);
|
||||
}
|
||||
|
||||
.text-up {
|
||||
top: -6px;
|
||||
position: relative;
|
||||
}
|
||||
.text-down-3 {
|
||||
top: 3px;
|
||||
position: relative;
|
||||
|
|
@ -525,6 +524,10 @@
|
|||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.text-up-1 {
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
.text-up-4 {
|
||||
top: -4px;
|
||||
position: relative;
|
||||
|
|
@ -621,6 +624,12 @@ a {
|
|||
.VueCarousel {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.VueCarousel-slide:nth-of-type(1) {
|
||||
#product-card-new {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-hide {
|
||||
|
|
@ -671,8 +680,21 @@ button[disabled] {
|
|||
}
|
||||
|
||||
.select-icon {
|
||||
top: 1px;
|
||||
top: 5px;
|
||||
left: -7px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.normal-text {
|
||||
color: $light1-black;
|
||||
}
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
|
||||
.cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -94,12 +94,14 @@ return [
|
|||
'footer-left-content' => 'Footer Left Content',
|
||||
'subscription-content' => 'Subscription bar Content',
|
||||
'activate-slider' => 'Activate Slider',
|
||||
'sidebar-categories' => 'Sidebar Categories',
|
||||
'footer-left-raw-content' => 'We love to craft softwares and solve the real world problems with the binaries. We are highly committed to our goals. We invest our resources to create world class easy to use softwares and applications for the enterprise business with the top notch, on the edge technology expertise.',
|
||||
'footer-middle-content' => 'Footer Middle Content',
|
||||
'update-meta-data' => 'Update Meta Data',
|
||||
'advertisement-one' => 'Advertisement One',
|
||||
'advertisement-two' => 'Advertisement Two',
|
||||
'advertisement-three' => 'Advertisement Three',
|
||||
'advertisement-four' => 'Advertisement Four Images',
|
||||
'advertisement-three' => 'Advertisement Three Images',
|
||||
'advertisement-two' => 'Advertisement Two Images',
|
||||
'advertisement-one' => 'Advertisement One Images',
|
||||
'footer' => 'Footer',
|
||||
],
|
||||
'category' => [
|
||||
|
|
@ -131,6 +133,8 @@ return [
|
|||
'home' => [
|
||||
'page-title' => 'Velocity-Home',
|
||||
'add-to-cart' => 'Add To Cart',
|
||||
'hot-categories' => 'Hot Categories',
|
||||
'popular-categories' => 'Popular Categories',
|
||||
],
|
||||
|
||||
'header' => [
|
||||
|
|
@ -150,7 +154,7 @@ return [
|
|||
],
|
||||
|
||||
'menu-navbar' => [
|
||||
'text-category' => 'Shop By Category',
|
||||
'text-category' => 'Shop by Category',
|
||||
'text-more' => 'More',
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
@click="toggleMiniCart">
|
||||
|
||||
<div class="mini-cart-content">
|
||||
<i class="rango-cart-1 fs24"></i>
|
||||
<i class="rango-cart-1 fs24 text-down-3"></i>
|
||||
<span class="badge" v-text="itemCount"></span>
|
||||
<span class="fs18 fw6 cart-text">{{ __('velocity::app.minicart.cart') }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>{{ __('velocity::app.admin.meta-data.activate-slider') }}</label>
|
||||
<label>{{ __('velocity::app.admin.meta-data.sidebar-categories') }}</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -87,12 +87,20 @@
|
|||
<accordian :title="'{{ __('admin::app.catalog.products.images') }}'" :active="false">
|
||||
<div slot="body">
|
||||
<div class="control-group">
|
||||
<label>{{ __('velocity::app.admin.meta-data.advertisement-one') }}</label>
|
||||
<label>{{ __('velocity::app.admin.meta-data.advertisement-four') }}</label>
|
||||
|
||||
<image-wrapper
|
||||
:button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'"
|
||||
input-name="images[1]">
|
||||
{{-- :images='@json($metaData->advertisement[1])'> --}}
|
||||
input-name="images[4]">
|
||||
</image-wrapper>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>{{ __('velocity::app.admin.meta-data.advertisement-three') }}</label>
|
||||
|
||||
<image-wrapper
|
||||
:button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'"
|
||||
input-name="images[3]">
|
||||
</image-wrapper>
|
||||
</div>
|
||||
|
||||
|
|
@ -106,11 +114,11 @@
|
|||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>{{ __('velocity::app.admin.meta-data.advertisement-three') }}</label>
|
||||
<label>{{ __('velocity::app.admin.meta-data.advertisement-one') }}</label>
|
||||
|
||||
<image-wrapper
|
||||
:button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'"
|
||||
input-name="images[3]">
|
||||
input-name="images[1]">
|
||||
</image-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,6 @@
|
|||
|
||||
methods: {
|
||||
navigateToStep: function(step) {
|
||||
debugger
|
||||
if (step <= this.completed_step) {
|
||||
this.current_step = step
|
||||
this.completed_step = step - 1;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
@php
|
||||
$isRendered = false;
|
||||
$advertisementFour = null;
|
||||
@endphp
|
||||
|
||||
@if ($velocityMetaData->advertisement)
|
||||
@php
|
||||
$advertisement = json_decode($velocityMetaData->advertisement, true);
|
||||
if (isset($advertisement[4])) {
|
||||
$advertisementFour = $advertisement[4];
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if ($advertisementFour)
|
||||
@php
|
||||
$isRendered = true;
|
||||
@endphp
|
||||
|
||||
<div class="container-fluid advertisement-four-container">
|
||||
<div class="row">
|
||||
<a @if (isset($one)) href="{{ $one }}" @endif class="col-4 no-padding">
|
||||
<img class="col-12" src="{{ asset('/storage/' . $advertisementFour['image_1']) }}" />
|
||||
</a>
|
||||
|
||||
<div class="col-4 offers-ct-panel">
|
||||
<a @if (isset($two)) href="{{ $two }}" @endif class="row pb15 col-12 remove-padding-margin">
|
||||
<img class="col-12 offers-ct-top" src="{{ asset('/storage/' . $advertisementFour['image_2']) }}" />
|
||||
</a>
|
||||
<a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin">
|
||||
<img class="col-12 offers-ct-bottom" src="{{ asset('/storage/' . $advertisementFour['image_3']) }}" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a @if (isset($four)) href="{{ $four }}" @endif class="col-4 no-padding">
|
||||
<img class="col-12" src="{{ asset('/storage/' . $advertisementFour['image_4']) }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if (! $isRendered)
|
||||
<div class="container-fluid advertisement-four-container">
|
||||
<div class="row">
|
||||
<a @if (isset($one)) href="{{ $one }}" @endif class="col-4 no-padding">
|
||||
<img class="col-12" src="{{ asset('/themes/velocity/assets/images/big-sale-banner.png') }}" />
|
||||
</a>
|
||||
|
||||
<div class="col-4 offers-ct-panel">
|
||||
<a @if (isset($two)) href="{{ $two }}" @endif class="row pb15 col-12 remove-padding-margin">
|
||||
<img class="col-12 offers-ct-top" src="{{ asset('/themes/velocity/assets/images/seasons.png') }}" />
|
||||
</a>
|
||||
<a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin">
|
||||
<img class="col-12 offers-ct-bottom" src="{{ asset('/themes/velocity/assets/images/deals.png') }}" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a @if (isset($four)) href="{{ $four }}" @endif class="col-4 no-padding">
|
||||
<img class="col-12" src="{{ asset('/themes/velocity/assets/images/kids.png') }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
|
@ -17,12 +17,18 @@
|
|||
@endphp
|
||||
|
||||
<div class="container-fluid advertisement-three-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8 ad-3-lt bg-image no-padding"></div>
|
||||
<a @if (isset($one)) href="{{ $one }}" @endif class="col-6 no-padding">
|
||||
<img src="{{ asset('/storage/' . $advertisementThree['image_1']) }}" class="full-width" />
|
||||
</a>
|
||||
|
||||
<div class="col-4 pr0">
|
||||
<div class="ad-3-rt bg-image no-padding"></div>
|
||||
<div class="col-6">
|
||||
<a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
|
||||
<img src="{{ asset('/storage/' . $advertisementThree['image_2']) }}" class="col-12 pr0" />
|
||||
</a>
|
||||
<a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
|
||||
<img src="{{ asset('/storage/' . $advertisementThree['image_3']) }}" class="col-12 pr0" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,12 +37,18 @@
|
|||
|
||||
@if (! $isRendered)
|
||||
<div class="container-fluid advertisement-three-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8 ad-3-lt bg-image no-padding"></div>
|
||||
<a @if (isset($one)) href="{{ $one }}" @endif class="col-6 no-padding">
|
||||
<img src="{{ asset('/themes/velocity/assets/images/headphones.png') }}" class="full-width" />
|
||||
</a>
|
||||
|
||||
<div class="col-4 pr0">
|
||||
<div class="ad-3-rt bg-image no-padding"></div>
|
||||
<div class="col-6">
|
||||
<a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
|
||||
<img src="{{ asset('/themes/velocity/assets/images/watch.png') }}" class="col-12 pr0" />
|
||||
</a>
|
||||
<a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
|
||||
<img src="{{ asset('/themes/velocity/assets/images/kids-2.png') }}" class="col-12 pr0" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,21 +17,14 @@
|
|||
@endphp
|
||||
|
||||
<div class="container-fluid advertisement-two-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col ad-2-lt"></div>
|
||||
<a class="col-8 no-padding">
|
||||
<img src="{{ asset('/storage/' . $advertisementTwo['image_1']) }}" />
|
||||
</a>
|
||||
|
||||
<div class="col ad-2-rt">
|
||||
|
||||
<div class="row top-container">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row bottom-container">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a class="col-4 pr0">
|
||||
<img src="{{ asset('/storage/' . $advertisementTwo['image_2']) }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
|
@ -39,21 +32,14 @@
|
|||
|
||||
@if (! $isRendered)
|
||||
<div class="container-fluid advertisement-two-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col ad-2-lt"></div>
|
||||
<a class="col-8 no-padding">
|
||||
<img src="{{ asset('/themes/velocity/assets/images/toster.png') }}" />
|
||||
</a>
|
||||
|
||||
<div class="col ad-2-rt">
|
||||
|
||||
<div class="row top-container">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row bottom-container">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a class="col-4 pr0">
|
||||
<img src="{{ asset('/themes/velocity/assets/images/trimmer.png') }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
@endphp
|
||||
|
||||
@if ($products->count())
|
||||
<div class="container-fluid accessories">
|
||||
<div class="container-fluid">
|
||||
<card-list-header
|
||||
view-all="{{ route('shop.productOrCategory.index', ['slug' => $categoryDetails->slug]) }}"
|
||||
heading="{{ $categoryDetails->name }}">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<carousel-component
|
||||
:slides-count="{{ sizeof($products) }}"
|
||||
slides-per-page="6"
|
||||
id="accessories-carousel">
|
||||
id="{{ $categoryDetails->name }}-carousel">
|
||||
|
||||
@foreach ($products as $index => $product)
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,8 @@
|
|||
|
||||
<div class="container-fluid popular-products">
|
||||
|
||||
<card-list-header
|
||||
heading="{{ __('shop::app.home.featured-products') }}"
|
||||
scrollable="{{
|
||||
($featuredProductsCount > (isset($cardCount) ? $cardCount : 6))
|
||||
? 'fearured-products-carousel'
|
||||
: false
|
||||
}}"
|
||||
|
||||
></card-list-header>
|
||||
<card-list-header heading="{{ __('shop::app.home.featured-products') }}">
|
||||
</card-list-header>
|
||||
|
||||
<div class="row flex-nowrap">
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<div class="container-fluid hot-categories-container">
|
||||
<card-list-header heading="{{ __('velocity::app.home.hot-categories') }}">
|
||||
</card-list-header>
|
||||
|
||||
<div class="row">
|
||||
@foreach ($category as $slug)
|
||||
@php
|
||||
$categoryDetails = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($slug);
|
||||
@endphp
|
||||
|
||||
@if ($categoryDetails)
|
||||
<div class="col hot-category-wrapper">
|
||||
<div class="card">
|
||||
<div class="row velocity-divide-page">
|
||||
<div class="left">
|
||||
<img src="{{ asset('/storage/' . $categoryDetails->image) }}" />
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<h3 class="fs20 clr-light">{{ $categoryDetails->name }}</h3>
|
||||
|
||||
<ul type="none">
|
||||
@foreach ($categoryDetails->children as $subCategory)
|
||||
<li>
|
||||
<a href="{{ $subCategory->slug }}" class="unset">
|
||||
{{ $subCategory->name }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<div class="container-fluid hot-categories-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 no-padding">
|
||||
<h2 class="fs20"> Hot Categories </h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-sm-1 mr10">
|
||||
<i class="rango-cloth fs30"></i>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<h3 class="fs20 clr-light">WOMEN</h3>
|
||||
|
||||
<ul type="none">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
<li>Fashion & Silver Jewellery</li>
|
||||
<li>Sunglasses</li>
|
||||
<li>Handloom & Handicraft Store</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-sm-1 mr10">
|
||||
<i class="rango-t-shirt fs30"></i>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<h3 class="fs20 clr-light">WOMEN</h3>
|
||||
|
||||
<ul type="none">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
<li>Fashion & Silver Jewellery</li>
|
||||
<li>Sunglasses</li>
|
||||
<li>Handloom & Handicraft Store</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-sm-1 mr10">
|
||||
<i class="rango-lipstick fs30"></i>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<h3 class="fs20 clr-light">WOMEN</h3>
|
||||
|
||||
<ul type="none">
|
||||
<li>Beauty & Grooming</li>
|
||||
<li>Luxury Beauty</li>
|
||||
<li>Make-up</li>
|
||||
<li>Health & Personal Care</li>
|
||||
<li>Household Supplies</li>
|
||||
<li>Personal Care Appliances</li>
|
||||
<li>Diet & Nutrition</li>
|
||||
<li>Subscribe & Save</li>
|
||||
<li>Amazon Pantry</li>
|
||||
<li>Value Bazaar</li>
|
||||
<li>All Grocery & Gourmet Foods</li>
|
||||
<li>Coffee, Tea & Beverages</li>
|
||||
<li>Snack Foods</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-sm-1 mr10">
|
||||
<i class="rango-globe fs30"></i>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<h3 class="fs20 clr-light">SPORTS</h3>
|
||||
|
||||
<ul type="none">
|
||||
<li>Cricket</li>
|
||||
<li>Badminton</li>
|
||||
<li>Cycling</li>
|
||||
<li>Football</li>
|
||||
<li>Running</li>
|
||||
<li>Camping & Hiking</li>
|
||||
<li>Fitness Accessories</li>
|
||||
<li>Yoga</li>
|
||||
<li>Strength Training</li>
|
||||
<li>Cardio Equipment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<div class="container-fluid popular-categories-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 no-padding">
|
||||
<h2 class="fs20"> Popular Categories </h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-3 general-container">
|
||||
<div class="row no-margin">
|
||||
<div class="no-padding full-width">
|
||||
|
||||
<div class="card-image bg-image"></div>
|
||||
|
||||
<div class="card-description">
|
||||
<h3 class="fs20">WOMEN</h3>
|
||||
|
||||
<ul class="clr-light pl40">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3 general-container">
|
||||
<div class="row no-margin">
|
||||
<div class="no-padding full-width">
|
||||
|
||||
<div class="card-image bg-image"></div>
|
||||
|
||||
<div class="card-description">
|
||||
<h3 class="fs20">WOMEN</h3>
|
||||
|
||||
<ul class="clr-light pl40">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3 general-container">
|
||||
<div class="row no-margin">
|
||||
<div class="no-padding full-width">
|
||||
|
||||
<div class="card-image bg-image"></div>
|
||||
|
||||
<div class="card-description">
|
||||
<h3 class="fs20">WOMEN</h3>
|
||||
|
||||
<ul class="clr-light pl40">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3 general-container">
|
||||
<div class="row no-margin">
|
||||
<div class="no-padding full-width">
|
||||
|
||||
<div class="card-image bg-image"></div>
|
||||
|
||||
<div class="card-description">
|
||||
<h3 class="fs20">WOMEN</h3>
|
||||
|
||||
<ul class="clr-light pl40">
|
||||
<li>Clothing</li>
|
||||
<li>Top Brands</li>
|
||||
<li>Watches</li>
|
||||
<li>Handbags & Clutches</li>
|
||||
<li>Gold & Diamond Jewellery</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,10 +9,8 @@
|
|||
@if (! empty($newProducts))
|
||||
<div class="container-fluid popular-products">
|
||||
|
||||
<card-list-header
|
||||
heading="{{ __('shop::app.home.new-products') }}"
|
||||
scrollable="new-products-carousel"
|
||||
></card-list-header>
|
||||
<card-list-header heading="{{ __('shop::app.home.new-products') }}">
|
||||
</card-list-header>
|
||||
|
||||
{!! view_render_event('bagisto.shop.new-products.before') !!}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<div class="container-fluid popular-categories-container">
|
||||
<card-list-header heading="{{ __('velocity::app.home.popular-categories') }}">
|
||||
</card-list-header>
|
||||
|
||||
<div class="row">
|
||||
@foreach ($category as $slug)
|
||||
@php
|
||||
$categoryDetails = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($slug);
|
||||
@endphp
|
||||
|
||||
@if ($categoryDetails)
|
||||
<div class="col popular-category-wrapper">
|
||||
<div class="card col-12 no-padding">
|
||||
<div class="category-image">
|
||||
<img src="{{ asset('/storage/' . $categoryDetails->image) }}" />
|
||||
</div>
|
||||
|
||||
<div class="card-description">
|
||||
<h3 class="fs20">{{ $categoryDetails->name }}</h3>
|
||||
|
||||
<ul class="clr-light pl40">
|
||||
@foreach ($categoryDetails->children as $subCategory)
|
||||
<li>
|
||||
<a href="{{ $subCategory->slug }}" class="unset">
|
||||
{{ $subCategory->name }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,70 +1,69 @@
|
|||
<header>
|
||||
<div class="container-margin">
|
||||
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
|
||||
<div id="logo">
|
||||
<a href="{{ route('shop.home.index') }}">
|
||||
@if ($logo = core()->getCurrentChannel()->logo_url)
|
||||
<img class="logo" src="{{ $logo }}" class="img-responsive" title="" alt="" />
|
||||
@else
|
||||
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" class="img-responsive" />
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 remove-padding-margin velocity-divide-page">
|
||||
<a id="logo" class="left" href="{{ route('shop.home.index') }}">
|
||||
@if ($logo = core()->getCurrentChannel()->logo_url)
|
||||
<img class="logo" src="{{ $logo }}" class="img-responsive" title="" alt="" />
|
||||
@else
|
||||
<img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" class="img-responsive" />
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
|
||||
<form
|
||||
role="search"
|
||||
action="{{ route('shop.search.index') }}"
|
||||
method="GET"
|
||||
id="search-form"
|
||||
class="input-group">
|
||||
<div class="row no-margin right">
|
||||
<div class="col-8 no-padding">
|
||||
<form
|
||||
role="search"
|
||||
action="{{ route('shop.search.index') }}"
|
||||
method="GET"
|
||||
id="search-form"
|
||||
class="input-group">
|
||||
|
||||
<div
|
||||
class="btn-toolbar full-width"
|
||||
role="toolbar">
|
||||
<div
|
||||
class="btn-toolbar full-width"
|
||||
role="toolbar">
|
||||
|
||||
<div class="btn-group mr-2 full-width row">
|
||||
<div class="btn-group mr-2 full-width row">
|
||||
|
||||
<div class="selectdiv">
|
||||
<select class="form-control fs13" name="category">
|
||||
<option value="">
|
||||
{{ __('velocity::app.header.all-categories') }}
|
||||
</option>
|
||||
<div class="selectdiv">
|
||||
<select class="form-control fs13 border-right-0" name="category">
|
||||
<option value="">
|
||||
{{ __('velocity::app.header.all-categories') }}
|
||||
</option>
|
||||
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
<span class="select-icon rango-arrow-down"></span>
|
||||
</select>
|
||||
</div>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
<span class="select-icon rango-arrow-down"></span>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group col-md-8 rows">
|
||||
<input
|
||||
required
|
||||
type="search"
|
||||
name="term"
|
||||
class="form-control"
|
||||
placeholder="{{ __('velocity::app.header.search-text') }}" />
|
||||
<div class="input-group col-md-8 rows">
|
||||
<input
|
||||
required
|
||||
name="term"
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="{{ __('velocity::app.header.search-text') }}" />
|
||||
|
||||
<div class="input-group-append">
|
||||
<button class="btn" type="submit" id="header-search-icon">
|
||||
<i class="fs14 rango-search"></i>
|
||||
</button>
|
||||
<div class="input-group-append">
|
||||
<button class="btn" type="submit" id="header-search-icon">
|
||||
<i class="fs14 rango-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,13 @@
|
|||
<meta http-equiv="content-language" content="{{ app()->getLocale() }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/velocity.css') }}" />
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="{{ asset('themes/velocity/assets/js/velocity.js') }}"></script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"
|
||||
></script>
|
||||
|
|
@ -79,22 +75,19 @@
|
|||
heading= "{{ __('velocity::app.menu-navbar.text-category') }}"
|
||||
></content-header>
|
||||
|
||||
<div class="container no-padding">
|
||||
<div class="">
|
||||
<div class="row col-12 remove-padding-margin">
|
||||
<sidebar-component
|
||||
main-sidebar=true
|
||||
id="sidebar-level-0"
|
||||
url="{{ url()->to('/') }}"
|
||||
:categories="{{ json_encode($categories) }}"
|
||||
category-count="{{ $velocityMetaData->sidebar_category_count }}"
|
||||
add-class="col-2 category-list-container pt10 no-padding mt15">
|
||||
add-class="category-list-container pt10">
|
||||
</sidebar-component>
|
||||
|
||||
<child-sidebar
|
||||
url="{{ url()->to('/') }}">
|
||||
</child-sidebar>
|
||||
|
||||
<div
|
||||
class="col-10 no-padding content" id="home-right-bar-container">
|
||||
class="col-12 no-padding content" id="home-right-bar-container">
|
||||
|
||||
<div class="container-right row no-margin col-12 no-padding">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,105 +3,96 @@
|
|||
{!! view_render_event('bagisto.shop.layout.header.account-item.after') !!}
|
||||
|
||||
<script type="text/x-template" id="login-header-template">
|
||||
<div class="pull-right">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn btn-link dropdown-icon open-dropdown"
|
||||
type="button"
|
||||
id="account"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
@click="togglePopup">
|
||||
<div class="dropdown">
|
||||
<div id="account">
|
||||
|
||||
<div class="welcome-content">
|
||||
<i class="material-icons align-vertical-top">perm_identity</i>
|
||||
<span class="align-vertical-middle">
|
||||
@guest('customer')
|
||||
{{ __('velocity::app.header.welcome-message', ['customer_name' => 'Guest']) }}
|
||||
@endguest
|
||||
|
||||
@auth('customer')
|
||||
{{ __('velocity::app.header.welcome-message', ['customer_name' => auth()->guard('customer')->user()->first_name]) }}
|
||||
@endauth
|
||||
</span>
|
||||
{{-- <span class="caret"></span> --}}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="account-modal sensitive-modal hide mt5">
|
||||
<!--Content-->
|
||||
<div class="welcome-content" @click="togglePopup">
|
||||
<i class="material-icons align-vertical-top">perm_identity</i>
|
||||
<span class="text-center">
|
||||
@guest('customer')
|
||||
<div class="modal-content">
|
||||
<!--Header-->
|
||||
<div class="modal-header no-border pb0">
|
||||
<label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
|
||||
|
||||
<button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--Body-->
|
||||
<div class="pl10 fs14">
|
||||
<p>{{ __('shop::app.header.dropdown-text') }}</p>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<div class="modal-footer">
|
||||
<div class="col-6 text-left">
|
||||
<a href="{{ route('customer.session.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs15">
|
||||
|
||||
{{ __('velocity::app.header.sign-in') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-6 text-right">
|
||||
<a href="{{ route('customer.register.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs15">
|
||||
{{ __('velocity::app.header.sign-up') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ __('velocity::app.header.welcome-message', ['customer_name' => 'Guest']) }}!
|
||||
@endguest
|
||||
|
||||
@auth('customer')
|
||||
<div class="modal-content customer-options">
|
||||
<div class="customer-session">
|
||||
<label class="">
|
||||
{{ auth()->guard('customer')->user()->first_name }}
|
||||
</label>
|
||||
{{ __('velocity::app.header.welcome-message', ['customer_name' => auth()->guard('customer')->user()->first_name]) }}
|
||||
@endauth
|
||||
</span>
|
||||
<span class="select-icon rango-arrow-down"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="account-modal sensitive-modal hide mt5">
|
||||
<!--Content-->
|
||||
@guest('customer')
|
||||
<div class="modal-content">
|
||||
<!--Header-->
|
||||
<div class="modal-header no-border pb0">
|
||||
<label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
|
||||
|
||||
<button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--Body-->
|
||||
<div class="pl10 fs14">
|
||||
<p>{{ __('shop::app.header.dropdown-text') }}</p>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<div class="modal-footer">
|
||||
<div class="col-6 text-left">
|
||||
<a href="{{ route('customer.session.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs15">
|
||||
|
||||
{{ __('velocity::app.header.sign-in') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
<li>
|
||||
<a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('shop.checkout.cart.index') }}" class="unset">{{ __('shop::app.header.cart') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-6 text-right">
|
||||
<a href="{{ route('customer.register.index') }}">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs15">
|
||||
{{ __('velocity::app.header.sign-up') }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
<!--/.Content-->
|
||||
</div>
|
||||
</div>
|
||||
@endguest
|
||||
|
||||
@auth('customer')
|
||||
<div class="modal-content customer-options">
|
||||
<div class="customer-session">
|
||||
<label class="">
|
||||
{{ auth()->guard('customer')->user()->first_name }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul type="none">
|
||||
<li>
|
||||
<a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('shop.checkout.cart.index') }}" class="unset">{{ __('shop::app.header.cart') }}</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endauth
|
||||
<!--/.Content-->
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -113,9 +104,11 @@
|
|||
template: '#login-header-template',
|
||||
|
||||
methods: {
|
||||
togglePopup: function () {
|
||||
togglePopup: function (event) {
|
||||
let accountModal = this.$el.querySelector('.account-modal');
|
||||
accountModal.classList.toggle('hide');
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
@endphp
|
||||
|
||||
@section('content-wrapper')
|
||||
<section class="row col-12">
|
||||
<section class="row col-12 velocity-divide-page">
|
||||
{!! view_render_event('bagisto.shop.productOrCategory.index.before', ['category' => $category]) !!}
|
||||
|
||||
@if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
|
||||
@include ('shop::products.list.layered-navigation')
|
||||
@endif
|
||||
|
||||
<div class="category-container col-10">
|
||||
<div class="category-container right">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h1 class="fw6 mb10">{{ $category->name }}</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@inject ('attributeRepository', 'Webkul\Attribute\Repositories\AttributeRepository')
|
||||
|
||||
@inject ('productFlatRepository', 'Webkul\Product\Repositories\ProductFlatRepository')
|
||||
|
||||
@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
|
||||
@inject ('attributeRepository', 'Webkul\Attribute\Repositories\AttributeRepository')
|
||||
@inject ('productFlatRepository', 'Webkul\Product\Repositories\ProductFlatRepository')
|
||||
|
||||
<?php
|
||||
$filterAttributes = [];
|
||||
|
|
@ -32,7 +30,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="layered-filter-wrapper col-2 pt42">
|
||||
<div class="layered-filter-wrapper left">
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
|
||||
|
||||
|
|
@ -65,12 +63,12 @@
|
|||
<div class="filter-attributes-title" @click="active = !active">
|
||||
<h4 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h4>
|
||||
|
||||
<div class="pull-right">
|
||||
<div class="pull-right display-table">
|
||||
<span class="link-color cursor-pointer" v-if="appliedFilters.length" @click.stop="clearFilters()">
|
||||
{{ __('shop::app.products.remove-filter-link-title') }}
|
||||
</span>
|
||||
|
||||
<i :class="`icon fs16 ${active ? 'rango-arrow-up' : 'rango-arrow-down'}`"></i>
|
||||
<i :class="`icon fs16 cell ${active ? 'rango-arrow-up' : 'rango-arrow-down'}`"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue