From f57e0c67200d6efde74ade6f404cb0e1fda49d90 Mon Sep 17 00:00:00 2001 From: jitendra Date: Mon, 1 Oct 2018 12:07:32 +0530 Subject: [PATCH 1/4] Configurable option on cart page --- packages/Webkul/Checkout/src/Cart.php | 7 +++++-- packages/Webkul/Shipping/composer.json | 2 +- .../Shop/src/Resources/views/checkout/cart/index.blade.php | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/Webkul/Checkout/src/Cart.php b/packages/Webkul/Checkout/src/Cart.php index ec1c41953..67f4a1f54 100644 --- a/packages/Webkul/Checkout/src/Cart.php +++ b/packages/Webkul/Checkout/src/Cart.php @@ -368,10 +368,10 @@ class Cart { } if($data['is_configurable'] == "true") { - $this->canAddOrUpdate($parent->child->id, $parent->quantity); - $parent = $cart->items()->create($itemData['parent']); + $this->canAddOrUpdate($parent->child->id, $parent->quantity); + $itemData['child']['parent_id'] = $parent->id; $cart->items()->create($itemData['child']); @@ -503,7 +503,10 @@ class Cart { $data = []; foreach($item->product->super_attributes as $attribute) { + dd($item->child); + dd($attribute->options); $option = $attribute->options()->where('id', $item->child->{$attribute->code})->first(); + $data['attributes'][$attribute->code] = [ 'attribute_name' => $attribute->name, 'option_label' => $option->label, diff --git a/packages/Webkul/Shipping/composer.json b/packages/Webkul/Shipping/composer.json index 7e3676e4f..f894797bb 100644 --- a/packages/Webkul/Shipping/composer.json +++ b/packages/Webkul/Shipping/composer.json @@ -17,7 +17,7 @@ "extra": { "laravel": { "providers": [ - "Webkul\\Cart\\Providers\\ShippingServiceProvider" + "Webkul\\Shipping\\Providers\\ShippingServiceProvider" ], "aliases": {} } diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php index 18ae5c9e1..d1b9239d9 100644 --- a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php @@ -49,11 +49,11 @@ @if ($product->type == 'configurable')
- {{-- @foreach (cart::getItemAttributeOptionDetails($item) as $key => $option) + @foreach (cart::getItemAttributeOptionDetails($item) as $key => $option) {{ (!$key ? '' : ' , ') . $option['attribute_name'] . ' : ' . $option['option_label'] }} - @endforeach --}} + @endforeach
@endif From 0de154a4f2a454c0826aa3931f622c04554ce8b0 Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Mon, 1 Oct 2018 12:14:14 +0530 Subject: [PATCH 2/4] merging with master --- .../Shop/src/Resources/assets/sass/app.scss | 2035 ++--------------- .../src/Resources/assets/sass/components.scss | 57 + .../src/Resources/assets/sass/override.scss | 69 + .../views/home/featured-products.blade.php | 2 +- .../views/home/new-products.blade.php | 2 +- .../Resources/views/products/index.blade.php | 64 +- .../list/layered-navigation.blade.php | 2 - .../views/products/list/toolbar.blade.php | 2 +- public/themes/default/assets/css/shop.css | 1858 +++------------ 9 files changed, 723 insertions(+), 3368 deletions(-) create mode 100644 packages/Webkul/Shop/src/Resources/assets/sass/components.scss create mode 100644 packages/Webkul/Shop/src/Resources/assets/sass/override.scss diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 97f608e66..0ebf9eaad 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -1,24 +1,229 @@ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500"); +@import "variables"; @import "icons"; @import "mixins"; -@import "variables"; +@import "override"; +@import "components"; -body { - margin: 0; - padding: 0; - font-weight: 500; - max-width: 100%; + + +//main store front layouting +.main-container-wrapper { + max-width: 90%; width: auto; - color: $font-color; - font-size: $font-size-base; + margin-left: auto; + margin-right: auto; + + .content-container { + display: block; + } + + .product-grid-4 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; + } + + .product-grid-3 { + display: grid; + grid-template-columns: repeat(3, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; + } + + .product-list { + .product-card { + width: 100%; + display: inline-block; + margin-bottom: 20px; + + .product-image { + float: left; + width: 30%; + height: 350px; + + img { + height: 100%; + } + } + + .product-information { + float: right; + width: 70%; + padding-left: 30px; + } + + &:last-child { + margin-bottom: 0; + } + } + } + + section.featured-products { + display: block; + margin-bottom: 5%; + + .featured-heading { + width: 100%; + text-align: center; + text-transform: uppercase; + font-size: 18px; + margin-bottom: 20px; + + .featured-separator { + color: lightgray; + } + } + } + + section.news-update { + display: block; + box-sizing: border-box; + width: 100%; + margin-bottom: 5%; + + .news-update-grid { + display: grid; + grid-template-columns: 58.5% 40%; + grid-gap: 20px; + + .block1 { + display: block; + box-sizing: border-box; + + img { + display: flex; + height: 100%; + width: 100%; + } + } + + .block2 { + display: block; + box-sizing: border-box; + display: grid; + grid-template-rows: repeat(2, minmax(50%, 1fr)); + grid-row-gap: 20px; + + .sub-block1 { + display: block; + box-sizing: border-box; + + img { + width: 100%; + } + } + + .sub-block2 { + display: block; + box-sizing: border-box; + + img { + width: 100%; + } + } + } + } + } } -* { - font-family: "Montserrat", sans-serif; -} +//category page +.main { + .category-block { + display: flex; + flex-direction: row; + width: 100%; -.btn.btn-primary{ - border-radius: 0px; + .category-block { + width: 100%; + display: block; + + .hero-image { + border: 1px solid green; + + img { + width: 100%; + height: 400px; + } + } + } + } + + .top-toolbar { + width: 100%; + display: inline-block; + + .page-info { + float: left; + color: $font-color; + line-height: 45px; + + span:first-child { + display: inline; + } + + span:last-child { + display: none; + } + } + + .pager { + float: right; + + label { + margin-right: 5px; + } + + select { + background: #FFFFFF; + border: 1px solid #C7C7C7; + border-radius: 3px; + color: $font-color; + padding: 10px; + } + + .view-mode { + display: inline-block; + margin-right: 20px; + + a, span { + display: inline-block; + vertical-align: middle; + + &.grid-view { + margin-right: 10px; + } + } + + .sort-filter { + display: none; + } + } + + .sorter { + display: inline-block; + margin-right: 10px; + } + + .limiter { + display: inline-block; + } + } + } + + .reponsive-sorter-limiter { + display: none; + } + + .bottom-toolbar { + display: block; + margin-top: 40px; + margin-bottom: 40px; + text-align: center; + } } .header { @@ -299,314 +504,7 @@ body { } } - -//=======>Need to be removed -// header page responsive css start here -@media all and (max-width: 480px) { - - .header { - // border: 1px solid black; - margin-top: 16px; - margin-bottom: 21px; - - .header-top { - margin-bottom: 16px; - display: flex; - // max-width: 92%; - width: 100%; - margin-left: auto; - margin-right: auto; - // border: 1px solid indigo; - align-items: center; - justify-content: space-between; - - div.left-content { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - - ul.logo-container { - margin-right: 12px; - - li { - display: flex; - } - } - - ul.search-container { - li.search-group { - display: none; - } - } - } - - div.right-content { - display: none; - } - - .right-responsive { - display: inherit; - } - } - - .search-suggestion { - display: none; - - .search-content { - border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; - height: 48px; - - .icon.search-icon { - margin-left: 15px; - margin-top: 12px; - } - - span { - margin-bottom: -7px; - margin-left: 5px; - } - - .right { - float: right; - margin-right: 15px; - } - } - - .suggestion { - margin-top: 14px; - height: 32px; - margin-bottom: 14px; - border-bottom: 1px solid $border-color; - - span { - margin-left: 48px; - } - } - } - - .header-bottom { - height: 200px; - margin-left: auto; - margin-right: auto; - border-top: none; - border-bottom: none; - display: none; - - ul.nav { - width: 100%; - height: 100px; - } - - .nav > li { - float: none; - border-bottom: 1px solid $border-color; - - a { - margin-left: 10px; - } - - .dropdown-right-icon{ - float: right; - margin-top: 5px; - margin-right: 5px; - } - } - - .nav > li:first-child { - border-top: 1px solid $border-color; - } - - .nav > li:last-child { - float:none; - - span { - color: #FF6472; - letter-spacing: -0.38px; - } - - img { - margin-left: 20px; - } - } - - /* submenu positioning*/ - - .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color:white; - z-index: 1; - left: -99999em; - } - - .nav > li:hover > ul { - left: auto; - min-width: 100%; - } - - .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -1px; - } - - .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top:-5px - } - - .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px - } - - .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; - } - } - } - -} - -@media all and (min-width: 481px) and (max-width: 920px) { - - .header { - // border: 1px solid black; - margin-top: 16px; - margin-bottom: 21px; - - .header-top { - margin-bottom: 16px; - display: flex; - // max-width: 92%; - width: 100%; - margin-left: auto; - margin-right: auto; - // border: 1px solid indigo; - align-items: center; - justify-content: space-between; - - div.left-content { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - - ul.logo-container { - margin-right: 12px; - - li { - display: flex; - } - } - - ul.search-container { - li.search-group { - display: none; - } - } - } - - div.right-content { - display: none; - } - - .right-responsive { - display: inherit; - } - } - - .search-suggestion { - display: none; - } - - .header-bottom { - height: 200px; - margin-left: auto; - margin-right: auto; - border-top: none; - border-bottom: none; - display: none; - - ul.nav { - width: 100%; - height: 100px; - } - - .nav > li { - float: none; - border-bottom: 1px solid $border-color; - - a { - margin-left: 10px; - } - - .dropdown-right-icon{ - float: right; - margin-top: 5px; - margin-right: 5px; - } - } - - .nav > li:first-child { - border-top: 1px solid $border-color; - } - - .nav > li:last-child { - float:none; - - span { - color: #FF6472; - letter-spacing: -0.38px; - } - - img { - margin-left: 20px; - } - } - - /* submenu positioning*/ - - .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color:white; - z-index: 1; - left: -99999em; - } - - .nav > li:hover > ul { - left: auto; - min-width: 100%; - } - - .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -1px; - } - - .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top:-5px - } - - .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px - } - - .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; - } - } - } - -} -// header page responsive ends here -//<=======Need to be removed - - +//slider styles section.slider-block { display: block; margin-left: auto; @@ -674,6 +572,7 @@ section.slider-block { } } +//layered filter wrapper styles .layered-filter-wrapper { width: 25%; float: left; @@ -760,487 +659,7 @@ section.slider-block { } } -.main-container-wrapper { - max-width: 80%; - width: auto; - margin-left: auto; - margin-right: auto; - - .content-container { - display: flex; - width: 100%; - flex-direction: row; - } - - .product-grid { - display: grid; - grid-gap: 30px; - - &.max-2-col { - grid-template-columns: repeat(2, minmax(auto, 1fr)); - } - - &.max-3-col { - grid-template-columns: repeat(3, minmax(auto, 1fr)); - } - - &.max-4-col { - grid-template-columns: repeat(4, minmax(auto, 1fr)); - } - } - - .product-card { - - .product-image { - margin-bottom: 10px; - background: #F2F2F2; - - img { - align-self: center; - max-width: 100%; - width: auto; - margin-bottom: 14px; - } - } - - .product-name { - margin-bottom: 14px; - width: 100%; - color: $font-color; - - a { - color: $font-color; - } - } - - .product-description { - margin-bottom: 14px; - display: none; - } - - .product-ratings { - width: 100%; - margin-bottom: 14px; - - .icon { - width: 16px; - height: 16px; - } - - .total-reviews { - display: none; - } - } - - .cart-fav-seg { - display: inline-flex; - width: 100%; - align-items: center; - - .addtocart { - border-radius: 0px; - margin-right: 10px; - text-transform: uppercase; - white-space: nowrap; - } - } - } - - .product-list { - .product-card { - width: 100%; - display: inline-block; - margin-bottom: 20px; - - .product-image { - float: left; - width: 30%; - height: 350px; - - img { - height: 100%; - } - } - - .product-information { - float: right; - width: 70%; - padding-left: 30px; - } - - &:last-child { - margin-bottom: 0; - } - } - } - - .top-toolbar { - width: 100%; - display: inline-block; - margin-bottom: 25px; - - .page-info { - float: left; - color: $font-color; - line-height: 45px; - - span:first-child { - display: inline; - } - - span:last-child { - display: none; - } - } - - .pager { - float: right; - - label { - margin-right: 5px; - } - - select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: $font-color; - padding: 10px; - } - - .view-mode { - display: inline-block; - margin-right: 20px; - - a, span { - display: inline-block; - vertical-align: middle; - - &.grid-view { - margin-right: 10px; - } - } - - .sort-filter { - display: none; - } - } - - .sorter { - display: inline-block; - margin-right: 10px; - } - - .limiter { - display: inline-block; - } - } - } - - .reponsive-sorter-limiter { - display: none; - } - - .bottom-toolbar { - display: block; - margin-top: 40px; - margin-bottom: 40px; - text-align: center; - } - - section.featured-products { - display: block; - margin-bottom: 5%; - - .featured-heading { - width: 100%; - text-align: center; - text-transform: uppercase; - font-size: 18px; - margin-bottom: 20px; - - .featured-separator { - color: lightgray; - } - } - } - - section.news-update { - display: block; - box-sizing: border-box; - width: 100%; - margin-bottom: 5%; - - .news-update-grid { - display: grid; - grid-template-columns: 58.5% 40%; - grid-gap: 20px; - - .block1 { - display: block; - box-sizing: border-box; - - img { - display: flex; - height: 100%; - width: 100%; - } - } - - .block2 { - display: block; - box-sizing: border-box; - display: grid; - grid-template-rows: repeat(2, minmax(50%, 1fr)); - grid-row-gap: 20px; - - .sub-block1 { - display: block; - box-sizing: border-box; - - img { - width: 100%; - } - } - - .sub-block2 { - display: block; - box-sizing: border-box; - - img { - width: 100%; - } - } - } - } - } -} - - -//=======>Need to be removed -// responsive category css start here -@media all and (max-width: 480px) { - - .main-container-wrapper { - - .content-container { - flex-direction: column-reverse; - } - - .layered-filter-wrapper { - display: none; - } - - .main { - width: 92%; - margin-left: 4%; - } - - .product-grid { - - &.max-2-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - - &.max-3-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - - &.max-4-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - } - - .product-card { - - .product-ratings { - .total-reviews { - display: none; - } - } - - .cart-fav-seg { - .addtocart { - font-size: 12px; - } - } - } - - .top-toolbar { - border-bottom: 1px solid $border-color; - margin-bottom: 10px; - - .page-info { - - span:first-child { - display: none; - } - - span:last-child { - display: inline; - font-size: 18px; - } - } - - .pager { - - .view-mode { - margin-right: 0px; - - a, span { - display: none; - - &.grid-view { - display: none; - } - } - - .sort-filter { - margin-top: 15px; - display: inline-block; - } - } - - .sorter { - display: none; - } - - .limiter { - display: none; - } - } - } - - .reponsive-sorter-limiter { - display: none; - - select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: $font-color; - padding: 10px; - } - } - - .bottom-toolbar { - margin-bottom: 80px; - } - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - - .main-container-wrapper { - - .content-container { - flex-direction: column-reverse; - } - - .layered-filter-wrapper { - display: none; - } - - .main { - width: 92%; - margin-left: 4%; - } - - .product-grid { - - &.max-2-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - - &.max-3-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - - &.max-4-col { - grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); - } - } - - .product-card { - - .product-ratings { - .total-reviews { - display: none; - } - } - - .cart-fav-seg { - .addtocart { - font-size: 12px; - } - } - } - - .top-toolbar { - border-bottom: 1px solid $border-color; - margin-bottom: 10px; - - .page-info { - - span:first-child { - display: none; - } - - span:last-child { - display: inline; - font-size: 18px; - } - } - - .pager { - - .view-mode { - margin-right: 0px; - - a, span { - display: none; - - &.grid-view { - display: none; - } - } - - .sort-filter { - margin-top: 15px; - display: inline-block; - } - } - - .sorter { - display: none; - } - - .limiter { - display: none; - } - } - } - - .reponsive-sorter-limiter { - display: none; - - select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: $font-color; - padding: 10px; - } - } - - .bottom-toolbar { - margin-bottom: 80px; - } - } -} -//<=======Need to be removed - - +//product page price styles .product-price { margin-bottom: 14px; width: 100%; @@ -1262,6 +681,7 @@ section.slider-block { } } +//footer responsive with out media query. .footer { background-color: #f2f2f2; padding-left: 10%; @@ -1746,139 +1166,7 @@ section.product-detail { } // product pages css ends here - -//=======>Need to be removed -// products responsive css starts here -@media all and (max-width: 480px) { - - section.product-detail { - - div.category-breadcrumbs { - display: none; - } - - div.layouter { - - form { - display: block; - - div.product-image-group { - margin-right: 0px; - - div { - flex-direction: column-reverse; - - .thumb-list { - height: 140px; - margin-top: 5px; - width:100%; - flex-direction: row; - overflow-x: scroll; - - .thumb-frame { - - img { - height: 100%; - width: auto; - } - } - - .gallery-control { - display: none; - } - } - - .product-hero-image { - width: 100%; - - img { - width: 100%; - } - } - } - } - - .details { - width: 100%; - margin-top: 20px; - border-bottom: 1px solid $border-color; - - .attributes { - border-bottom: none; - } - } - } - } - } - -} - -@media all and (min-width: 481px) and (max-width: 920px) { - - section.product-detail { - - div.category-breadcrumbs { - display: none; - } - - div.layouter { - - form { - display: block; - - div.product-image-group { - margin-right: 0px; - - div { - flex-direction: column-reverse; - - .thumb-list { - height: 140px; - margin-top: 5px; - width:100%; - flex-direction: row; - overflow-x: scroll; - - .thumb-frame { - - img { - height: 100%; - width: auto; - } - } - - .gallery-control { - display: none; - } - } - - .product-hero-image { - width: 100%; - - img { - width: 100%; - } - } - } - } - - .details { - width: 100%; - margin-top: 20px; - border-bottom: 1px solid $border-color; - - .attributes { - border-bottom: none; - } - } - } - } - } - -} -// products responsive css ends here -//<=======Need to be removed - +//rating and reviews of product pages .rating-reviews { .rating-header { @@ -2323,883 +1611,6 @@ section.cart { } } - - - - -//=======>Need to be removed -@media all and (max-width: 480px){ - - .attached-products-wrapper { - - .title { - - .border-bottom { - border-bottom: 1px solid rgba(162, 162, 162, 0.2); - display: inline-block; - width: 100%; - position: initial; - top: 40px; - left: 0%; - margin-left: 0px; - } - } - } -} -//<=======Need to be removed - - - - -//=======>Need to be removed -@media all and (min-width: 481px) and (max-width: 920px) { - - .attached-products-wrapper { - - .title { - - .border-bottom { - border-bottom: 1px solid rgba(162, 162, 162, 0.2); - display: inline-block; - width: 100%; - position: initial; - top: 40px; - left: 0%; - margin-left: 0px; - } - } - } -} -//<=======Need to be removed - - - - -//=======>Need to be removed -// order page css start here -.order { - margin-left: 5.5%; - margin-top: 1%; - width: 100%; - - .order-section-head { - .order-number { - font-size: 28px; - text-transform: capitalize; - text-align: left; - } - - .order-cancel { - font-size: 17px; - margin-top: 1%; - color: $brand-color; - letter-spacing: -0.11px; - float: right; - } - - .order-status { - margin-left: 20px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - padding: 5px 5px 5px 10px; - background: #2ED04C; - border-radius: 100px; - } - - .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: $border-color; - } - } - - .order-section-head-small { - display: none; - } - - .payment-place { - color: $profile-content-color; - margin-top: 1.4%; - - .placed-on { - display: flex; - flex-direction: row; - - .place-text { - width: 210px; - - span { - color: #5E5E5E; - letter-spacing: -0.12px; - } - - .processing { - display: none; - } - } - - .place-date { - - span { - color: #5E5E5E; - letter-spacing: -0.12px; - } - } - } - - .payment-status { - display: flex; - flex-direction: row; - margin-top: 22px; - - .payment-text { - width: 210px; - - span { - color: #5E5E5E; - letter-spacing: -0.12px; - } - } - - .status { - - span { - color: #5E5E5E; - letter-spacing: -0.12px; - } - } - } - - .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: $border-color; - } - } - - .order-details{ - width:100%; - margin-top: 2.5%; - margin-bottom: 2%; - - .detail{ - font-size: 18px; - color: #8E8E8E; - } - } - - .table { - tbody { - tr { - height: 50px; - border-bottom: 1pt solid #e7e7e7; - } - td { - padding : 16px; - } - } - } - - .total { - margin-top: 2%; - height: 130px; - - .calculate { - width: 300px; - float: right; - - .sub-total { - - span { - font-size: 14px; font-size: 14px; - color: #3A3A3A; - color: #3A3A3A; - } - - .left { - margin-left: 109px; - } - - .middle { - margin-right: 5px; - margin-left: 5px; - } - } - - .ship-handle { - margin-top: 5px; - - span { - font-size: 14px; - color: #3A3A3A; - } - - .left { - margin-left: 24px; - } - - .middle { - margin-right: 5px; - margin-left: 5px; - } - } - - .discount { - margin-top: 5px; - - span { - font-size: 14px; font-size: 14px; - color: #3A3A3A; - } - - .left { - margin-left: 98px; - } - - .middle { - margin-right: 5px; - margin-left: 5px; - } - } - - .grand-total { - margin-top: 5px; - - span { - font-size: 14px; font-size: 14px; - color: #3A3A3A; - font-weight: bold; - } - - .left { - margin-left: 87px; - } - - .middle { - margin-right: 5px; - margin-left: 5px; - } - } - - .due { - margin-top: 5px; - - span { - font-size: 14px; font-size: 14px; - color: #3A3A3A; - font-weight: bold; - } - - .left { - margin-left: 101px; - } - - .middle { - margin-right: 5px; - margin-left: 5px; - } - } - } - } - - .product-config { - display: none; - } - - .horizontal-rule { - width: 100%; - height: 1px; - vertical-align: middle; - background: $border-color; - } - - .order-information { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 2.3%; - - .order-address-method { - width : 250px; - - .address-method{ - font-size: 18px; - color: #8E8E8E; - } - } - - p { - color: #3A3A3A; - - } - } -} -// oder page css end here - -// responsive order page css start here -@media all and (max-width: 480px) { - - .order { - margin-left: 0%; - - .order-section-head { - display: none; - } - - .order-section-head-small { - display: block; - margin-top: -15px; - - span { - display:inline-block; - width:33.3%; - } - - .icon { - float: left; - - img { - margin-top: 11px; - } - } - - .order-number { - text-align: center; - letter-spacing: -0.38px; - text-align: center; - margin-top: 13px; - margin-bottom: 13px; - } - - .cancel { - float: right; - text-align: right; - font-size: 17px; - color: $brand-color; - letter-spacing: -0.11px; - margin-top: 13px; - margin-bottom: 13px; - } - - .horizon-rule { - border: .5px solid $border-color; - width: 150%; - margin-left: -10%; - margin-right: -10%; - } - } - - .payment-place { - color: $profile-content-color; - margin-top: 4%; - - .placed-on { - display: flex; - flex-direction: column; - - .place-text { - width:100%; - - span { - font-size: 14px; - } - - .processing { - display: block; - float: right; - background: #2ED04C; - height: 25px; - border-radius: 100px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - width: 110px; - text-align: center; - padding-top: 3.5px; - padding-left: 5px; - margin-top: 3px; - } - } - - .place-date{ - margin-top: -5px; - } - } - - .payment-status { - display: flex; - flex-direction: column; - - .payment-text { - - span { - font-size: 14px; - } - } - - .status { - margin-top: 2px; - } - } - - .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: $border-color; - } - } - - .order-details{ - display: none; - } - - .total { - margin-top: 5%; - height: 130px; - - .calculate { - width: 100%; - float: left; - - .sub-total { - - .left { - margin-left: 0px; - width:100px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .ship-handle { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .discount { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .grand-total { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .due { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - } - } - - .horizontal-rule { - display: none; - } - - .table { - display:none; - } - - .product-config { - border: 1px solid $border-color; - height: 19%; - width:100%; - margin-top: 10px; - display: block; - - .product-attribute { - display: flex; - flex-direction: row; - - .product-property { - width: 30%; - margin-top: 10px; - margin-left: 5px; - - span { - font-size: 14px; - color: #5E5E5E; - letter-spacing: -0.11px; - } - } - - .property-name { - margin-top: 10px; - width:50%; - - span { - color: #5E5E5E; - letter-spacing: -0.11px; - } - } - } - - } - - .order-information { - flex-direction: column; - - .order-address-method { - width : 250px; - } - - .order-address-method:nth-child(3) { - margin-top: 10px; - } - - .order-address-method:nth-child(2) { - margin-top: 10px; - } - - .order-address-method:nth-child(4) { - margin-top: 10px; - } - - } - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - - .order { - margin-left: 0%; - - .order-section-head { - display: none; - } - - .order-section-head-small { - display: block; - margin-top: -15px; - - span { - display:inline-block; - width:33.3%; - } - - .icon { - float: left; - - img { - margin-top: 11px; - } - } - - .order-number { - text-align: center; - letter-spacing: -0.38px; - text-align: center; - margin-top: 13px; - margin-bottom: 13px; - } - - .cancel { - float: right; - text-align: right; - font-size: 17px; - color: $brand-color; - letter-spacing: -0.11px; - margin-top: 13px; - margin-bottom: 13px; - } - - .horizon-rule { - border: .5px solid $border-color; - width: 150%; - margin-left: -10%; - margin-right: -10%; - } - } - - .payment-place { - color: $profile-content-color; - margin-top: 4%; - - .placed-on { - display: flex; - flex-direction: column; - - .place-text { - width:100%; - - span { - font-size: 14px; - } - - .processing { - display: block; - float: right; - background: #2ED04C; - height: 25px; - border-radius: 100px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - width: 110px; - text-align: center; - padding-top: 3.5px; - padding-left: 5px; - margin-top: 3px; - } - } - - .place-date{ - margin-top: -5px; - } - } - - .payment-status { - display: flex; - flex-direction: column; - - .payment-text { - - span { - font-size: 14px; - } - } - - .status { - margin-top: 2px; - } - } - - .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: $border-color; - } - } - - .order-details{ - display: none; - } - - .total { - margin-top: 5%; - height: 130px; - - .calculate { - width: 100%; - float: left; - - .sub-total { - - .left { - margin-left: 0px; - width:100px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .ship-handle { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .discount { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .grand-total { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - - .due { - - .left { - margin-left: 0px; - } - - .middle { - display: none; - } - - .right { - float:right; - width:25%; - } - } - } - } - - .horizontal-rule { - display: none; - } - - .table { - display:none; - } - - .product-config { - border: 1px solid $border-color; - height: 19%; - width:100%; - margin-top: 10px; - display: block; - - .product-attribute { - display: flex; - flex-direction: row; - - .product-property { - width: 30%; - margin-top: 10px; - margin-left: 5px; - - span { - font-size: 14px; - color: #5E5E5E; - letter-spacing: -0.11px; - } - } - - .property-name { - margin-top: 10px; - width:50%; - - span { - color: #5E5E5E; - letter-spacing: -0.11px; - } - } - } - - } - - .order-information { - flex-direction: column; - - .order-address-method { - width : 250px; - } - - .order-address-method:nth-child(3) { - margin-top: 10px; - } - - .order-address-method:nth-child(2) { - margin-top: 10px; - } - - .order-address-method:nth-child(4) { - margin-top: 10px; - } - - } - } - -} -// responsive order css end here -//<=======Need to be removed - - - - // review page start here section.review { color: $font-color; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss new file mode 100644 index 000000000..c530f9745 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss @@ -0,0 +1,57 @@ +// product card, requires no changes for responsiveness. +.product-card { + + .product-image { + max-height: 350px; + max-width: 280px; + margin-bottom: 10px; + background: #F2F2F2; + + img { + display: block; + width: 100%; + } + } + + .product-name { + margin-bottom: 14px; + width: 100%; + color: $font-color; + + a { + color: $font-color; + } + } + + .product-description { + margin-bottom: 14px; + display: none; + } + + .product-ratings { + width: 100%; + margin-bottom: 14px; + + .icon { + width: 16px; + height: 16px; + } + + .total-reviews { + display: none; + } + } + + .cart-fav-seg { + display: inline-flex; + width: 100%; + align-items: center; + + .addtocart { + border-radius: 0px; + margin-right: 10px; + text-transform: uppercase; + white-space: nowrap; + } + } +} \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss new file mode 100644 index 000000000..d3e70d2c1 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss @@ -0,0 +1,69 @@ +body { + margin: 0; + padding: 0; + font-weight: 500; + max-width: 100%; + width: auto; + color: $font-color; + font-size: $font-size-base; +} + +* { + font-family: "Montserrat", sans-serif; +} + +.btn.btn-primary{ + border-radius: 0px; +} + +.mb-10 { + margin-bottom: 10px; +} + +.mb-15 { + margin-bottom: 15px; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mb-25 { + margin-bottom: 25px; +} + +.mb-30 { + margin-bottom: 30px; +} + +.mb-35 { + margin-bottom: 35px; +} + +.mb-40 { + margin-bottom: 40px; +} + +.mb-45 { + margin-bottom: 45px; +} + +.mb-50 { + margin-bottom: 50px; +} + +.mb-60 { + margin-bottom: 60px; +} + +.mb-70 { + margin-bottom: 70px; +} + +.mb-80 { + margin-bottom: 80px; +} + +.mb-90 { + margin-bottom: 90px; +} \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/views/home/featured-products.blade.php b/packages/Webkul/Shop/src/Resources/views/home/featured-products.blade.php index 31ea188d9..9e7815d0c 100644 --- a/packages/Webkul/Shop/src/Resources/views/home/featured-products.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/home/featured-products.blade.php @@ -4,7 +4,7 @@ _____ -
+
diff --git a/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php b/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php index a6d56c3b1..9b6eadc15 100644 --- a/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php @@ -4,7 +4,7 @@ _____
-
+
diff --git a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php index 2ccb1f27c..cd241620d 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php @@ -2,46 +2,54 @@ @section('content-wrapper') - @include ('shop::products.list.layered-navigation') +@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository') -
+
- @inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository') +
+ @include ('shop::products.list.layered-navigation') - findAllByCategory($category->id); ?> +
- @include ('shop::products.list.toolbar') +
+ +
- @inject ('toolbarHelper', 'Webkul\Product\Product\Toolbar') + findAllByCategory($category->id); ?> - @if ($toolbarHelper->getCurrentMode() == 'grid') -
+ @include ('shop::products.list.toolbar') - @foreach ($products as $product) + @inject ('toolbarHelper', 'Webkul\Product\Product\Toolbar') - @include ('shop::products.list.card', ['product' => $product]) + @if ($toolbarHelper->getCurrentMode() == 'grid') +
- @endforeach + @foreach ($products as $product) + @include ('shop::products.list.card', ['product' => $product]) + + @endforeach + +
+ @else +
+ + @foreach ($products as $product) + + @include ('shop::products.list.card', ['product' => $product]) + + @endforeach + +
+ @endif + +
+ + {{ $products->appends(request()->input())->links() }} + +
- @else -
- - @foreach ($products as $product) - - @include ('shop::products.list.card', ['product' => $product]) - - @endforeach - -
- @endif - -
- - {{ $products->appends(request()->input())->links() }} -
-
@stop diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php index 352acda1d..6c4d13906 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php @@ -22,9 +22,7 @@
-
-
diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php index d59588a42..6ca4305e3 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php @@ -1,6 +1,6 @@ @inject ('toolbarHelper', 'Webkul\Product\Product\Toolbar') -
+
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index 18c6e0e45..56120a142 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -85,6 +85,341 @@ body { border-radius: 0px; } +.mb-10 { + margin-bottom: 10px; +} + +.mb-15 { + margin-bottom: 15px; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mb-25 { + margin-bottom: 25px; +} + +.mb-30 { + margin-bottom: 30px; +} + +.mb-35 { + margin-bottom: 35px; +} + +.mb-40 { + margin-bottom: 40px; +} + +.mb-45 { + margin-bottom: 45px; +} + +.mb-50 { + margin-bottom: 50px; +} + +.mb-60 { + margin-bottom: 60px; +} + +.mb-70 { + margin-bottom: 70px; +} + +.mb-80 { + margin-bottom: 80px; +} + +.mb-90 { + margin-bottom: 90px; +} + +.product-card .product-image { + max-height: 350px; + max-width: 280px; + margin-bottom: 10px; + background: #F2F2F2; +} + +.product-card .product-image img { + display: block; + width: 100%; +} + +.product-card .product-name { + margin-bottom: 14px; + width: 100%; + color: #242424; +} + +.product-card .product-name a { + color: #242424; +} + +.product-card .product-description { + margin-bottom: 14px; + display: none; +} + +.product-card .product-ratings { + width: 100%; + margin-bottom: 14px; +} + +.product-card .product-ratings .icon { + width: 16px; + height: 16px; +} + +.product-card .product-ratings .total-reviews { + display: none; +} + +.product-card .cart-fav-seg { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.product-card .cart-fav-seg .addtocart { + border-radius: 0px; + margin-right: 10px; + text-transform: uppercase; + white-space: nowrap; +} + +.main-container-wrapper { + max-width: 90%; + width: auto; + margin-left: auto; + margin-right: auto; +} + +.main-container-wrapper .content-container { + display: block; +} + +.main-container-wrapper .product-grid-4 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; +} + +.main-container-wrapper .product-grid-3 { + display: grid; + grid-template-columns: repeat(3, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; +} + +.main-container-wrapper .product-list .product-card { + width: 100%; + display: inline-block; + margin-bottom: 20px; +} + +.main-container-wrapper .product-list .product-card .product-image { + float: left; + width: 30%; + height: 350px; +} + +.main-container-wrapper .product-list .product-card .product-image img { + height: 100%; +} + +.main-container-wrapper .product-list .product-card .product-information { + float: right; + width: 70%; + padding-left: 30px; +} + +.main-container-wrapper .product-list .product-card:last-child { + margin-bottom: 0; +} + +.main-container-wrapper section.featured-products { + display: block; + margin-bottom: 5%; +} + +.main-container-wrapper section.featured-products .featured-heading { + width: 100%; + text-align: center; + text-transform: uppercase; + font-size: 18px; + margin-bottom: 20px; +} + +.main-container-wrapper section.featured-products .featured-heading .featured-separator { + color: lightgray; +} + +.main-container-wrapper section.news-update { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + margin-bottom: 5%; +} + +.main-container-wrapper section.news-update .news-update-grid { + display: grid; + grid-template-columns: 58.5% 40%; + grid-gap: 20px; +} + +.main-container-wrapper section.news-update .news-update-grid .block1 { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.main-container-wrapper section.news-update .news-update-grid .block1 img { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + width: 100%; +} + +.main-container-wrapper section.news-update .news-update-grid .block2 { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: grid; + grid-template-rows: repeat(2, minmax(50%, 1fr)); + grid-row-gap: 20px; +} + +.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block1 { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block1 img { + width: 100%; +} + +.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block2 { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block2 img { + width: 100%; +} + +.main .category-block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; +} + +.main .category-block .category-block { + width: 100%; + display: block; +} + +.main .category-block .category-block .hero-image { + border: 1px solid green; +} + +.main .category-block .category-block .hero-image img { + width: 100%; + height: 400px; +} + +.main .top-toolbar { + width: 100%; + display: inline-block; +} + +.main .top-toolbar .page-info { + float: left; + color: #242424; + line-height: 45px; +} + +.main .top-toolbar .page-info span:first-child { + display: inline; +} + +.main .top-toolbar .page-info span:last-child { + display: none; +} + +.main .top-toolbar .pager { + float: right; +} + +.main .top-toolbar .pager label { + margin-right: 5px; +} + +.main .top-toolbar .pager select { + background: #FFFFFF; + border: 1px solid #C7C7C7; + border-radius: 3px; + color: #242424; + padding: 10px; +} + +.main .top-toolbar .pager .view-mode { + display: inline-block; + margin-right: 20px; +} + +.main .top-toolbar .pager .view-mode a, .main .top-toolbar .pager .view-mode span { + display: inline-block; + vertical-align: middle; +} + +.main .top-toolbar .pager .view-mode a.grid-view, .main .top-toolbar .pager .view-mode span.grid-view { + margin-right: 10px; +} + +.main .top-toolbar .pager .view-mode .sort-filter { + display: none; +} + +.main .top-toolbar .pager .sorter { + display: inline-block; + margin-right: 10px; +} + +.main .top-toolbar .pager .limiter { + display: inline-block; +} + +.main .reponsive-sorter-limiter { + display: none; +} + +.main .bottom-toolbar { + display: block; + margin-top: 40px; + margin-bottom: 40px; + text-align: center; +} + .header { margin-top: 16px; margin-bottom: 21px; @@ -421,274 +756,6 @@ body { right: 10px; } -@media all and (max-width: 480px) { - .header { - margin-top: 16px; - margin-bottom: 21px; - } - .header .header-top { - margin-bottom: 16px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin-left: auto; - margin-right: auto; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - .header .header-top div.left-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - .header .header-top div.left-content ul.logo-container { - margin-right: 12px; - } - .header .header-top div.left-content ul.logo-container li { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - } - .header .header-top div.left-content ul.search-container li.search-group { - display: none; - } - .header .header-top div.right-content { - display: none; - } - .header .header-top .right-responsive { - display: inherit; - } - .header .search-suggestion { - display: none; - } - .header .search-suggestion .search-content { - border-top: 1px solid #E8E8E8; - border-bottom: 1px solid #E8E8E8; - height: 48px; - } - .header .search-suggestion .search-content .icon.search-icon { - margin-left: 15px; - margin-top: 12px; - } - .header .search-suggestion .search-content span { - margin-bottom: -7px; - margin-left: 5px; - } - .header .search-suggestion .search-content .right { - float: right; - margin-right: 15px; - } - .header .search-suggestion .suggestion { - margin-top: 14px; - height: 32px; - margin-bottom: 14px; - border-bottom: 1px solid #E8E8E8; - } - .header .search-suggestion .suggestion span { - margin-left: 48px; - } - .header .header-bottom { - height: 200px; - margin-left: auto; - margin-right: auto; - border-top: none; - border-bottom: none; - display: none; - /* submenu positioning*/ - } - .header .header-bottom ul.nav { - width: 100%; - height: 100px; - } - .header .header-bottom .nav > li { - float: none; - border-bottom: 1px solid #E8E8E8; - } - .header .header-bottom .nav > li a { - margin-left: 10px; - } - .header .header-bottom .nav > li .dropdown-right-icon { - float: right; - margin-top: 5px; - margin-right: 5px; - } - .header .header-bottom .nav > li:first-child { - border-top: 1px solid #E8E8E8; - } - .header .header-bottom .nav > li:last-child { - float: none; - } - .header .header-bottom .nav > li:last-child span { - color: #FF6472; - letter-spacing: -0.38px; - } - .header .header-bottom .nav > li:last-child img { - margin-left: 20px; - } - .header .header-bottom .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color: white; - z-index: 1; - left: -99999em; - } - .header .header-bottom .nav > li:hover > ul { - left: auto; - min-width: 100%; - } - .header .header-bottom .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -1px; - } - .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top: -5px; - } - .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px; - } - .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - .header { - margin-top: 16px; - margin-bottom: 21px; - } - .header .header-top { - margin-bottom: 16px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin-left: auto; - margin-right: auto; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - .header .header-top div.left-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - .header .header-top div.left-content ul.logo-container { - margin-right: 12px; - } - .header .header-top div.left-content ul.logo-container li { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - } - .header .header-top div.left-content ul.search-container li.search-group { - display: none; - } - .header .header-top div.right-content { - display: none; - } - .header .header-top .right-responsive { - display: inherit; - } - .header .search-suggestion { - display: none; - } - .header .header-bottom { - height: 200px; - margin-left: auto; - margin-right: auto; - border-top: none; - border-bottom: none; - display: none; - /* submenu positioning*/ - } - .header .header-bottom ul.nav { - width: 100%; - height: 100px; - } - .header .header-bottom .nav > li { - float: none; - border-bottom: 1px solid #E8E8E8; - } - .header .header-bottom .nav > li a { - margin-left: 10px; - } - .header .header-bottom .nav > li .dropdown-right-icon { - float: right; - margin-top: 5px; - margin-right: 5px; - } - .header .header-bottom .nav > li:first-child { - border-top: 1px solid #E8E8E8; - } - .header .header-bottom .nav > li:last-child { - float: none; - } - .header .header-bottom .nav > li:last-child span { - color: #FF6472; - letter-spacing: -0.38px; - } - .header .header-bottom .nav > li:last-child img { - margin-left: 20px; - } - .header .header-bottom .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color: white; - z-index: 1; - left: -99999em; - } - .header .header-bottom .nav > li:hover > ul { - left: auto; - min-width: 100%; - } - .header .header-bottom .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -1px; - } - .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top: -5px; - } - .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px; - } - .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; - } -} - section.slider-block { display: block; margin-left: auto; @@ -850,422 +917,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { background-image: url("../images//arrow-up.svg") !important; } -.main-container-wrapper { - max-width: 80%; - width: auto; - margin-left: auto; - margin-right: auto; -} - -.main-container-wrapper .content-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} - -.main-container-wrapper .product-grid { - display: grid; - grid-gap: 30px; -} - -.main-container-wrapper .product-grid.max-2-col { - grid-template-columns: repeat(2, minmax(auto, 1fr)); -} - -.main-container-wrapper .product-grid.max-3-col { - grid-template-columns: repeat(3, minmax(auto, 1fr)); -} - -.main-container-wrapper .product-grid.max-4-col { - grid-template-columns: repeat(4, minmax(auto, 1fr)); -} - -.main-container-wrapper .product-card .product-image { - margin-bottom: 10px; - background: #F2F2F2; -} - -.main-container-wrapper .product-card .product-image img { - -ms-flex-item-align: center; - align-self: center; - max-width: 100%; - width: auto; - margin-bottom: 14px; -} - -.main-container-wrapper .product-card .product-name { - margin-bottom: 14px; - width: 100%; - color: #242424; -} - -.main-container-wrapper .product-card .product-name a { - color: #242424; -} - -.main-container-wrapper .product-card .product-description { - margin-bottom: 14px; - display: none; -} - -.main-container-wrapper .product-card .product-ratings { - width: 100%; - margin-bottom: 14px; -} - -.main-container-wrapper .product-card .product-ratings .icon { - width: 16px; - height: 16px; -} - -.main-container-wrapper .product-card .product-ratings .total-reviews { - display: none; -} - -.main-container-wrapper .product-card .cart-fav-seg { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - width: 100%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.main-container-wrapper .product-card .cart-fav-seg .addtocart { - border-radius: 0px; - margin-right: 10px; - text-transform: uppercase; - white-space: nowrap; -} - -.main-container-wrapper .product-list .product-card { - width: 100%; - display: inline-block; - margin-bottom: 20px; -} - -.main-container-wrapper .product-list .product-card .product-image { - float: left; - width: 30%; - height: 350px; -} - -.main-container-wrapper .product-list .product-card .product-image img { - height: 100%; -} - -.main-container-wrapper .product-list .product-card .product-information { - float: right; - width: 70%; - padding-left: 30px; -} - -.main-container-wrapper .product-list .product-card:last-child { - margin-bottom: 0; -} - -.main-container-wrapper .top-toolbar { - width: 100%; - display: inline-block; - margin-bottom: 25px; -} - -.main-container-wrapper .top-toolbar .page-info { - float: left; - color: #242424; - line-height: 45px; -} - -.main-container-wrapper .top-toolbar .page-info span:first-child { - display: inline; -} - -.main-container-wrapper .top-toolbar .page-info span:last-child { - display: none; -} - -.main-container-wrapper .top-toolbar .pager { - float: right; -} - -.main-container-wrapper .top-toolbar .pager label { - margin-right: 5px; -} - -.main-container-wrapper .top-toolbar .pager select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; -} - -.main-container-wrapper .top-toolbar .pager .view-mode { - display: inline-block; - margin-right: 20px; -} - -.main-container-wrapper .top-toolbar .pager .view-mode a, .main-container-wrapper .top-toolbar .pager .view-mode span { - display: inline-block; - vertical-align: middle; -} - -.main-container-wrapper .top-toolbar .pager .view-mode a.grid-view, .main-container-wrapper .top-toolbar .pager .view-mode span.grid-view { - margin-right: 10px; -} - -.main-container-wrapper .top-toolbar .pager .view-mode .sort-filter { - display: none; -} - -.main-container-wrapper .top-toolbar .pager .sorter { - display: inline-block; - margin-right: 10px; -} - -.main-container-wrapper .top-toolbar .pager .limiter { - display: inline-block; -} - -.main-container-wrapper .reponsive-sorter-limiter { - display: none; -} - -.main-container-wrapper .bottom-toolbar { - display: block; - margin-top: 40px; - margin-bottom: 40px; - text-align: center; -} - -.main-container-wrapper section.featured-products { - display: block; - margin-bottom: 5%; -} - -.main-container-wrapper section.featured-products .featured-heading { - width: 100%; - text-align: center; - text-transform: uppercase; - font-size: 18px; - margin-bottom: 20px; -} - -.main-container-wrapper section.featured-products .featured-heading .featured-separator { - color: lightgray; -} - -.main-container-wrapper section.news-update { - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - margin-bottom: 5%; -} - -.main-container-wrapper section.news-update .news-update-grid { - display: grid; - grid-template-columns: 58.5% 40%; - grid-gap: 20px; -} - -.main-container-wrapper section.news-update .news-update-grid .block1 { - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.main-container-wrapper section.news-update .news-update-grid .block1 img { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 100%; - width: 100%; -} - -.main-container-wrapper section.news-update .news-update-grid .block2 { - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: grid; - grid-template-rows: repeat(2, minmax(50%, 1fr)); - grid-row-gap: 20px; -} - -.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block1 { - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block1 img { - width: 100%; -} - -.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block2 { - display: block; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.main-container-wrapper section.news-update .news-update-grid .block2 .sub-block2 img { - width: 100%; -} - -@media all and (max-width: 480px) { - .main-container-wrapper .content-container { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } - .main-container-wrapper .layered-filter-wrapper { - display: none; - } - .main-container-wrapper .main { - width: 92%; - margin-left: 4%; - } - .main-container-wrapper .product-grid.max-2-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-grid.max-3-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-grid.max-4-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-card .product-ratings .total-reviews { - display: none; - } - .main-container-wrapper .product-card .cart-fav-seg .addtocart { - font-size: 12px; - } - .main-container-wrapper .top-toolbar { - border-bottom: 1px solid #E8E8E8; - margin-bottom: 10px; - } - .main-container-wrapper .top-toolbar .page-info span:first-child { - display: none; - } - .main-container-wrapper .top-toolbar .page-info span:last-child { - display: inline; - font-size: 18px; - } - .main-container-wrapper .top-toolbar .pager .view-mode { - margin-right: 0px; - } - .main-container-wrapper .top-toolbar .pager .view-mode a, .main-container-wrapper .top-toolbar .pager .view-mode span { - display: none; - } - .main-container-wrapper .top-toolbar .pager .view-mode a.grid-view, .main-container-wrapper .top-toolbar .pager .view-mode span.grid-view { - display: none; - } - .main-container-wrapper .top-toolbar .pager .view-mode .sort-filter { - margin-top: 15px; - display: inline-block; - } - .main-container-wrapper .top-toolbar .pager .sorter { - display: none; - } - .main-container-wrapper .top-toolbar .pager .limiter { - display: none; - } - .main-container-wrapper .reponsive-sorter-limiter { - display: none; - } - .main-container-wrapper .reponsive-sorter-limiter select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; - } - .main-container-wrapper .bottom-toolbar { - margin-bottom: 80px; - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - .main-container-wrapper .content-container { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } - .main-container-wrapper .layered-filter-wrapper { - display: none; - } - .main-container-wrapper .main { - width: 92%; - margin-left: 4%; - } - .main-container-wrapper .product-grid.max-2-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-grid.max-3-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-grid.max-4-col { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - .main-container-wrapper .product-card .product-ratings .total-reviews { - display: none; - } - .main-container-wrapper .product-card .cart-fav-seg .addtocart { - font-size: 12px; - } - .main-container-wrapper .top-toolbar { - border-bottom: 1px solid #E8E8E8; - margin-bottom: 10px; - } - .main-container-wrapper .top-toolbar .page-info span:first-child { - display: none; - } - .main-container-wrapper .top-toolbar .page-info span:last-child { - display: inline; - font-size: 18px; - } - .main-container-wrapper .top-toolbar .pager .view-mode { - margin-right: 0px; - } - .main-container-wrapper .top-toolbar .pager .view-mode a, .main-container-wrapper .top-toolbar .pager .view-mode span { - display: none; - } - .main-container-wrapper .top-toolbar .pager .view-mode a.grid-view, .main-container-wrapper .top-toolbar .pager .view-mode span.grid-view { - display: none; - } - .main-container-wrapper .top-toolbar .pager .view-mode .sort-filter { - margin-top: 15px; - display: inline-block; - } - .main-container-wrapper .top-toolbar .pager .sorter { - display: none; - } - .main-container-wrapper .top-toolbar .pager .limiter { - display: none; - } - .main-container-wrapper .reponsive-sorter-limiter { - display: none; - } - .main-container-wrapper .reponsive-sorter-limiter select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; - } - .main-container-wrapper .bottom-toolbar { - margin-bottom: 80px; - } -} - .product-price { margin-bottom: 14px; width: 100%; @@ -1799,104 +1450,6 @@ section.product-detail div.layouter form .details .attributes { border-bottom: solid 1px rgba(162, 162, 162, 0.2); } -@media all and (max-width: 480px) { - section.product-detail div.category-breadcrumbs { - display: none; - } - section.product-detail div.layouter form { - display: block; - } - section.product-detail div.layouter form div.product-image-group { - margin-right: 0px; - } - section.product-detail div.layouter form div.product-image-group div { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list { - height: 140px; - margin-top: 5px; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - overflow-x: scroll; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img { - height: 100%; - width: auto; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control { - display: none; - } - section.product-detail div.layouter form div.product-image-group div .product-hero-image { - width: 100%; - } - section.product-detail div.layouter form div.product-image-group div .product-hero-image img { - width: 100%; - } - section.product-detail div.layouter form .details { - width: 100%; - margin-top: 20px; - border-bottom: 1px solid #E8E8E8; - } - section.product-detail div.layouter form .details .attributes { - border-bottom: none; - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - section.product-detail div.category-breadcrumbs { - display: none; - } - section.product-detail div.layouter form { - display: block; - } - section.product-detail div.layouter form div.product-image-group { - margin-right: 0px; - } - section.product-detail div.layouter form div.product-image-group div { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list { - height: 140px; - margin-top: 5px; - width: 100%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - overflow-x: scroll; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img { - height: 100%; - width: auto; - } - section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control { - display: none; - } - section.product-detail div.layouter form div.product-image-group div .product-hero-image { - width: 100%; - } - section.product-detail div.layouter form div.product-image-group div .product-hero-image img { - width: 100%; - } - section.product-detail div.layouter form .details { - width: 100%; - margin-top: 20px; - border-bottom: 1px solid #E8E8E8; - } - section.product-detail div.layouter form .details .attributes { - border-bottom: none; - } -} - .rating-reviews .rating-header { font-weight: 600; padding: 20px 0; @@ -2359,747 +1912,6 @@ section.cart .cart-content .right-side { margin-right: auto; } -@media all and (max-width: 480px) { - .attached-products-wrapper .title .border-bottom { - border-bottom: 1px solid rgba(162, 162, 162, 0.2); - display: inline-block; - width: 100%; - position: initial; - top: 40px; - left: 0%; - margin-left: 0px; - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - .attached-products-wrapper .title .border-bottom { - border-bottom: 1px solid rgba(162, 162, 162, 0.2); - display: inline-block; - width: 100%; - position: initial; - top: 40px; - left: 0%; - margin-left: 0px; - } -} - -.order { - margin-left: 5.5%; - margin-top: 1%; - width: 100%; -} - -.order .order-section-head .order-number { - font-size: 28px; - text-transform: capitalize; - text-align: left; -} - -.order .order-section-head .order-cancel { - font-size: 17px; - margin-top: 1%; - color: #0041FF; - letter-spacing: -0.11px; - float: right; -} - -.order .order-section-head .order-status { - margin-left: 20px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - padding: 5px 5px 5px 10px; - background: #2ED04C; - border-radius: 100px; -} - -.order .order-section-head .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: #E8E8E8; -} - -.order .order-section-head-small { - display: none; -} - -.order .payment-place { - color: #5e5e5e; - margin-top: 1.4%; -} - -.order .payment-place .placed-on { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} - -.order .payment-place .placed-on .place-text { - width: 210px; -} - -.order .payment-place .placed-on .place-text span { - color: #5E5E5E; - letter-spacing: -0.12px; -} - -.order .payment-place .placed-on .place-text .processing { - display: none; -} - -.order .payment-place .placed-on .place-date span { - color: #5E5E5E; - letter-spacing: -0.12px; -} - -.order .payment-place .payment-status { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 22px; -} - -.order .payment-place .payment-status .payment-text { - width: 210px; -} - -.order .payment-place .payment-status .payment-text span { - color: #5E5E5E; - letter-spacing: -0.12px; -} - -.order .payment-place .payment-status .status span { - color: #5E5E5E; - letter-spacing: -0.12px; -} - -.order .payment-place .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: #E8E8E8; -} - -.order .order-details { - width: 100%; - margin-top: 2.5%; - margin-bottom: 2%; -} - -.order .order-details .detail { - font-size: 18px; - color: #8E8E8E; -} - -.order .table tbody tr { - height: 50px; - border-bottom: 1pt solid #e7e7e7; -} - -.order .table tbody td { - padding: 16px; -} - -.order .total { - margin-top: 2%; - height: 130px; -} - -.order .total .calculate { - width: 300px; - float: right; -} - -.order .total .calculate .sub-total span { - font-size: 14px; - font-size: 14px; - color: #3A3A3A; - color: #3A3A3A; -} - -.order .total .calculate .sub-total .left { - margin-left: 109px; -} - -.order .total .calculate .sub-total .middle { - margin-right: 5px; - margin-left: 5px; -} - -.order .total .calculate .ship-handle { - margin-top: 5px; -} - -.order .total .calculate .ship-handle span { - font-size: 14px; - color: #3A3A3A; -} - -.order .total .calculate .ship-handle .left { - margin-left: 24px; -} - -.order .total .calculate .ship-handle .middle { - margin-right: 5px; - margin-left: 5px; -} - -.order .total .calculate .discount { - margin-top: 5px; -} - -.order .total .calculate .discount span { - font-size: 14px; - font-size: 14px; - color: #3A3A3A; -} - -.order .total .calculate .discount .left { - margin-left: 98px; -} - -.order .total .calculate .discount .middle { - margin-right: 5px; - margin-left: 5px; -} - -.order .total .calculate .grand-total { - margin-top: 5px; -} - -.order .total .calculate .grand-total span { - font-size: 14px; - font-size: 14px; - color: #3A3A3A; - font-weight: bold; -} - -.order .total .calculate .grand-total .left { - margin-left: 87px; -} - -.order .total .calculate .grand-total .middle { - margin-right: 5px; - margin-left: 5px; -} - -.order .total .calculate .due { - margin-top: 5px; -} - -.order .total .calculate .due span { - font-size: 14px; - font-size: 14px; - color: #3A3A3A; - font-weight: bold; -} - -.order .total .calculate .due .left { - margin-left: 101px; -} - -.order .total .calculate .due .middle { - margin-right: 5px; - margin-left: 5px; -} - -.order .product-config { - display: none; -} - -.order .horizontal-rule { - width: 100%; - height: 1px; - vertical-align: middle; - background: #E8E8E8; -} - -.order .order-information { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 2.3%; -} - -.order .order-information .order-address-method { - width: 250px; -} - -.order .order-information .order-address-method .address-method { - font-size: 18px; - color: #8E8E8E; -} - -.order .order-information p { - color: #3A3A3A; -} - -@media all and (max-width: 480px) { - .order { - margin-left: 0%; - } - .order .order-section-head { - display: none; - } - .order .order-section-head-small { - display: block; - margin-top: -15px; - } - .order .order-section-head-small span { - display: inline-block; - width: 33.3%; - } - .order .order-section-head-small .icon { - float: left; - } - .order .order-section-head-small .icon img { - margin-top: 11px; - } - .order .order-section-head-small .order-number { - text-align: center; - letter-spacing: -0.38px; - text-align: center; - margin-top: 13px; - margin-bottom: 13px; - } - .order .order-section-head-small .cancel { - float: right; - text-align: right; - font-size: 17px; - color: #0041FF; - letter-spacing: -0.11px; - margin-top: 13px; - margin-bottom: 13px; - } - .order .order-section-head-small .horizon-rule { - border: 0.5px solid #E8E8E8; - width: 150%; - margin-left: -10%; - margin-right: -10%; - } - .order .payment-place { - color: #5e5e5e; - margin-top: 4%; - } - .order .payment-place .placed-on { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .payment-place .placed-on .place-text { - width: 100%; - } - .order .payment-place .placed-on .place-text span { - font-size: 14px; - } - .order .payment-place .placed-on .place-text .processing { - display: block; - float: right; - background: #2ED04C; - height: 25px; - border-radius: 100px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - width: 110px; - text-align: center; - padding-top: 3.5px; - padding-left: 5px; - margin-top: 3px; - } - .order .payment-place .placed-on .place-date { - margin-top: -5px; - } - .order .payment-place .payment-status { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .payment-place .payment-status .payment-text span { - font-size: 14px; - } - .order .payment-place .payment-status .status { - margin-top: 2px; - } - .order .payment-place .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: #E8E8E8; - } - .order .order-details { - display: none; - } - .order .total { - margin-top: 5%; - height: 130px; - } - .order .total .calculate { - width: 100%; - float: left; - } - .order .total .calculate .sub-total .left { - margin-left: 0px; - width: 100px; - } - .order .total .calculate .sub-total .middle { - display: none; - } - .order .total .calculate .sub-total .right { - float: right; - width: 25%; - } - .order .total .calculate .ship-handle .left { - margin-left: 0px; - } - .order .total .calculate .ship-handle .middle { - display: none; - } - .order .total .calculate .ship-handle .right { - float: right; - width: 25%; - } - .order .total .calculate .discount .left { - margin-left: 0px; - } - .order .total .calculate .discount .middle { - display: none; - } - .order .total .calculate .discount .right { - float: right; - width: 25%; - } - .order .total .calculate .grand-total .left { - margin-left: 0px; - } - .order .total .calculate .grand-total .middle { - display: none; - } - .order .total .calculate .grand-total .right { - float: right; - width: 25%; - } - .order .total .calculate .due .left { - margin-left: 0px; - } - .order .total .calculate .due .middle { - display: none; - } - .order .total .calculate .due .right { - float: right; - width: 25%; - } - .order .horizontal-rule { - display: none; - } - .order .table { - display: none; - } - .order .product-config { - border: 1px solid #E8E8E8; - height: 19%; - width: 100%; - margin-top: 10px; - display: block; - } - .order .product-config .product-attribute { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .order .product-config .product-attribute .product-property { - width: 30%; - margin-top: 10px; - margin-left: 5px; - } - .order .product-config .product-attribute .product-property span { - font-size: 14px; - color: #5E5E5E; - letter-spacing: -0.11px; - } - .order .product-config .product-attribute .property-name { - margin-top: 10px; - width: 50%; - } - .order .product-config .product-attribute .property-name span { - color: #5E5E5E; - letter-spacing: -0.11px; - } - .order .order-information { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .order-information .order-address-method { - width: 250px; - } - .order .order-information .order-address-method:nth-child(3) { - margin-top: 10px; - } - .order .order-information .order-address-method:nth-child(2) { - margin-top: 10px; - } - .order .order-information .order-address-method:nth-child(4) { - margin-top: 10px; - } -} - -@media all and (min-width: 481px) and (max-width: 920px) { - .order { - margin-left: 0%; - } - .order .order-section-head { - display: none; - } - .order .order-section-head-small { - display: block; - margin-top: -15px; - } - .order .order-section-head-small span { - display: inline-block; - width: 33.3%; - } - .order .order-section-head-small .icon { - float: left; - } - .order .order-section-head-small .icon img { - margin-top: 11px; - } - .order .order-section-head-small .order-number { - text-align: center; - letter-spacing: -0.38px; - text-align: center; - margin-top: 13px; - margin-bottom: 13px; - } - .order .order-section-head-small .cancel { - float: right; - text-align: right; - font-size: 17px; - color: #0041FF; - letter-spacing: -0.11px; - margin-top: 13px; - margin-bottom: 13px; - } - .order .order-section-head-small .horizon-rule { - border: 0.5px solid #E8E8E8; - width: 150%; - margin-left: -10%; - margin-right: -10%; - } - .order .payment-place { - color: #5e5e5e; - margin-top: 4%; - } - .order .payment-place .placed-on { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .payment-place .placed-on .place-text { - width: 100%; - } - .order .payment-place .placed-on .place-text span { - font-size: 14px; - } - .order .payment-place .placed-on .place-text .processing { - display: block; - float: right; - background: #2ED04C; - height: 25px; - border-radius: 100px; - font-size: 14px; - color: #FFFFFF; - letter-spacing: -0.12px; - width: 110px; - text-align: center; - padding-top: 3.5px; - padding-left: 5px; - margin-top: 3px; - } - .order .payment-place .placed-on .place-date { - margin-top: -5px; - } - .order .payment-place .payment-status { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .payment-place .payment-status .payment-text span { - font-size: 14px; - } - .order .payment-place .payment-status .status { - margin-top: 2px; - } - .order .payment-place .horizontal-rule { - margin-top: 1.1%; - width: 100%; - height: 1px; - vertical-align: middle; - background: #E8E8E8; - } - .order .order-details { - display: none; - } - .order .total { - margin-top: 5%; - height: 130px; - } - .order .total .calculate { - width: 100%; - float: left; - } - .order .total .calculate .sub-total .left { - margin-left: 0px; - width: 100px; - } - .order .total .calculate .sub-total .middle { - display: none; - } - .order .total .calculate .sub-total .right { - float: right; - width: 25%; - } - .order .total .calculate .ship-handle .left { - margin-left: 0px; - } - .order .total .calculate .ship-handle .middle { - display: none; - } - .order .total .calculate .ship-handle .right { - float: right; - width: 25%; - } - .order .total .calculate .discount .left { - margin-left: 0px; - } - .order .total .calculate .discount .middle { - display: none; - } - .order .total .calculate .discount .right { - float: right; - width: 25%; - } - .order .total .calculate .grand-total .left { - margin-left: 0px; - } - .order .total .calculate .grand-total .middle { - display: none; - } - .order .total .calculate .grand-total .right { - float: right; - width: 25%; - } - .order .total .calculate .due .left { - margin-left: 0px; - } - .order .total .calculate .due .middle { - display: none; - } - .order .total .calculate .due .right { - float: right; - width: 25%; - } - .order .horizontal-rule { - display: none; - } - .order .table { - display: none; - } - .order .product-config { - border: 1px solid #E8E8E8; - height: 19%; - width: 100%; - margin-top: 10px; - display: block; - } - .order .product-config .product-attribute { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .order .product-config .product-attribute .product-property { - width: 30%; - margin-top: 10px; - margin-left: 5px; - } - .order .product-config .product-attribute .product-property span { - font-size: 14px; - color: #5E5E5E; - letter-spacing: -0.11px; - } - .order .product-config .product-attribute .property-name { - margin-top: 10px; - width: 50%; - } - .order .product-config .product-attribute .property-name span { - color: #5E5E5E; - letter-spacing: -0.11px; - } - .order .order-information { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .order .order-information .order-address-method { - width: 250px; - } - .order .order-information .order-address-method:nth-child(3) { - margin-top: 10px; - } - .order .order-information .order-address-method:nth-child(2) { - margin-top: 10px; - } - .order .order-information .order-address-method:nth-child(4) { - margin-top: 10px; - } -} - section.review { color: #242424; } From 45ed88c4e6a216f6c8b74cc7746ec34a02e0a470 Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Mon, 1 Oct 2018 12:36:59 +0530 Subject: [PATCH 3/4] re-merge --- packages/Webkul/Checkout/src/Cart.php | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/Webkul/Checkout/src/Cart.php b/packages/Webkul/Checkout/src/Cart.php index ff0914f58..bf7306a77 100644 --- a/packages/Webkul/Checkout/src/Cart.php +++ b/packages/Webkul/Checkout/src/Cart.php @@ -371,8 +371,6 @@ class Cart { if($data['is_configurable'] == "true") { $parent = $cart->items()->create($itemData['parent']); - $this->canAddOrUpdate($parent->child->id, $parent->quantity); - $itemData['child']['parent_id'] = $parent->id; // $this->canAddOrUpdate($parent->child->id, $parent->quantity); @@ -506,10 +504,7 @@ class Cart { $data = []; foreach($item->product->super_attributes as $attribute) { - dd($item->child); - dd($attribute->options); $option = $attribute->options()->where('id', $item->child->{$attribute->code})->first(); - $data['attributes'][$attribute->code] = [ 'attribute_name' => $attribute->name, 'option_label' => $option->label, From 8d9adb32d38692aaecb5901f12bdde4f46fd4627 Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Mon, 1 Oct 2018 13:17:15 +0530 Subject: [PATCH 4/4] SASS structurization --- .../Shop/src/Resources/assets/sass/app.scss | 2 - .../src/Resources/assets/sass/components.scss | 89 +++++++++++- .../src/Resources/assets/sass/override.scss | 58 +++++++- public/themes/default/assets/css/shop.css | 134 ++++++++++++++++++ 4 files changed, 279 insertions(+), 4 deletions(-) diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 0ebf9eaad..8a9d1a9cf 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -5,8 +5,6 @@ @import "override"; @import "components"; - - //main store front layouting .main-container-wrapper { max-width: 90%; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss index c530f9745..2f4b93592 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss @@ -54,4 +54,91 @@ white-space: nowrap; } } -} \ No newline at end of file +} + +//layered filter wrapper styles +.layered-filter-wrapper { + width: 25%; + float: left; + padding-right: 20px; + min-height: 1px; + + .filter-title { + border-bottom: 1px solid $border-color; + color: $font-color; + padding: 10px 0; + } + + .filter-attributes { + .filter-attributes-item { + border-bottom: 1px solid $border-color; + padding-bottom: 10px; + + .filter-attributes-title { + padding: 10px 40px 0 10px; + color: #5E5E5E; + cursor: pointer; + position: relative; + + .remove-filter-link { + font-weight: 400; + color: $brand-color; + margin-right: 10px; + } + + .icon { + background-image: url('../images/arrow-down.svg') !important; + width: 10px; + height: 10px; + position: absolute; + right: 15px; + top: 14px; + } + } + + .filter-attributes-content { + padding: 10px; + display: none; + + ol.items { + padding: 0; + margin: 0; + list-style: none none; + + li.item { + padding: 8px 0; + color: #5E5E5E; + + .checkbox { + margin: 0; + + .checkbox-view { + height: 16px; + width: 16px; + background-image: url("../images/checkbox.svg"); + } + + input:checked + .checkbox-view { + background-image: url("../images/checkbox-checked.svg"); + } + } + } + } + + .price-range-wrapper { + margin-top: 21px; + } + } + + &.active { + .filter-attributes-content { + display: block; + } + + .filter-attributes-title .icon { + background-image: url('../images//arrow-up.svg') !important; + } + } + } + } +} diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss index d3e70d2c1..832350426 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss @@ -16,6 +16,7 @@ body { border-radius: 0px; } +//margin bottom classes .mb-10 { margin-bottom: 10px; } @@ -66,4 +67,59 @@ body { .mb-90 { margin-bottom: 90px; -} \ No newline at end of file +} + + +//margin-top +.mt-10 { + margin-top: 10px; +} + +.mt-15 { + margin-top: 15px; +} + +.mt-20 { + margin-top: 20px; +} + +.mt-25 { + margin-top: 25px; +} + +.mt-30 { + margin-top: 30px; +} + +.mt-35 { + margin-top: 35px; +} + +.mt-40 { + margin-top: 40px; +} + +.mt-45 { + margin-top: 45px; +} + +.mt-50 { + margin-top: 50px; +} + +.mt-60 { + margin-top: 60px; +} + +.mt-70 { + margin-top: 70px; +} + +.mt-80 { + margin-top: 80px; +} + +.mt-90 { + margin-top: 90px; +} + diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index 56120a142..aa3a21e79 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -137,6 +137,58 @@ body { margin-bottom: 90px; } +.mt-10 { + margin-top: 10px; +} + +.mt-15 { + margin-top: 15px; +} + +.mt-20 { + margin-top: 20px; +} + +.mt-25 { + margin-top: 25px; +} + +.mt-30 { + margin-top: 30px; +} + +.mt-35 { + margin-top: 35px; +} + +.mt-40 { + margin-top: 40px; +} + +.mt-45 { + margin-top: 45px; +} + +.mt-50 { + margin-top: 50px; +} + +.mt-60 { + margin-top: 60px; +} + +.mt-70 { + margin-top: 70px; +} + +.mt-80 { + margin-top: 80px; +} + +.mt-90 { + margin-top: 90px; +} + .product-card .product-image { max-height: 350px; max-width: 280px; @@ -195,6 +247,88 @@ body { white-space: nowrap; } +.layered-filter-wrapper { + width: 25%; + float: left; + padding-right: 20px; + min-height: 1px; +} + +.layered-filter-wrapper .filter-title { + border-bottom: 1px solid #E8E8E8; + color: #242424; + padding: 10px 0; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item { + border-bottom: 1px solid #E8E8E8; + padding-bottom: 10px; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title { + padding: 10px 40px 0 10px; + color: #5E5E5E; + cursor: pointer; + position: relative; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link { + font-weight: 400; + color: #0041FF; + margin-right: 10px; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon { + background-image: url("../images/arrow-down.svg") !important; + width: 10px; + height: 10px; + position: absolute; + right: 15px; + top: 14px; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content { + padding: 10px; + display: none; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items { + padding: 0; + margin: 0; + list-style: none none; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item { + padding: 8px 0; + color: #5E5E5E; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox { + margin: 0; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view { + height: 16px; + width: 16px; + background-image: url("../images/checkbox.svg"); +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view { + background-image: url("../images/checkbox-checked.svg"); +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper { + margin-top: 21px; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content { + display: block; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { + background-image: url("../images//arrow-up.svg") !important; +} + .main-container-wrapper { max-width: 90%; width: auto;