category block

Author: Prestarocket

_dev/css/components/categories.scss

@@ -44,4 +44,31 @@
 
 .active_filters{
   background-color: $bg-dark;
+}
+
+//block categories
+.block-categories a{
+  color:$body-color;
+}
+.category-sub__item{
+  display: block;
+  width: 100%;
+}
+.category-sub__item--0{
+  border-bottom: 1px solid $border-color;
+  padding: $spacer/4 0;
+}
+.category-sub__item:not(.category-sub__item--0):not(.category-sub__item--1) {
+  padding-left: $spacer/4;
+}
+.block-categories .collapse-icons .remove {
+  display: none;
+}
+.block-categories .collapse-icons[aria-expanded=true] {
+  &.remove{
+  display: block;
+  }
+  &.add{
+    display: none;
+  }
 }

_dev/css/components/utilities.scss

@@ -3,4 +3,7 @@ img[data-lazy] {
 }
 .text-underline{
   text-decoration: underline;
+}
+.cursor-pointer{
+  cursor: pointer;
 }

_dev/css/partials/_commons.scss

@@ -324,4 +324,5 @@ custom-file-label.selected:after{
 //home content spacing
 .page-home > *{
   margin-bottom: $spacer * .75;
-}
+}
+

_dev/css/partials/custom_variables.scss

@@ -38,7 +38,7 @@ $product-thumb-wrap-height:     $product-thumb-height + $product-thumb-margin *
 //prices
 $regular-price-font-size:       $font-size-base * .875;
 $regular-price-font-weight:       700;
-$regular-price-color:           $gray-600;
+$regular-price-color:           $gray-700;
 $price-color:                   $black;
 $product-price-discount-color:           $tertiary;
 $product-regular-price-font-size:       $font-size-base * 1.25;
@@ -53,7 +53,7 @@ $social-share-bg-color:         $gray-300;
 
 //main menu
 $menu-topitem-font-size:            $font-size-base;
-$menu-topitem-color:            #7a7a7a;
+$menu-topitem-color:            $gray-800;
 $menu-item-padding:             $spacer/2;
 $menu-item-border-color:        $border-color;
 $menu-sub-mobile-bg-color:      $wrapper-bg;

assets/css/theme.css

@@ -28,26 +28,23 @@
     {if $nodes|count}
       <ul class="category-sub-menu">
         {foreach from=$nodes item=node}
-          <li data-depth="{$depth}">
+          <li data-depth="{$depth}" class="category-sub__item category-sub__item--{$depth}{if $depth===0} clearfix{/if}">
             {if $depth===0}
-              <a href="{$node.link}">{$node.name}</a>
+              <a href="{$node.link}" {if $node.children}class="float-left"{/if}>{$node.name}</a>
               {if $node.children}
-                <div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
+                <div class="float-right navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
                   <i class="material-icons add">&#xE145;</i>
                   <i class="material-icons remove">&#xE15B;</i>
                 </div>
-                <div class="collapse" id="exCollapsingNavbar{$node.id}">
+                <div class="collapse float-left clearfix w-100" id="exCollapsingNavbar{$node.id}">
                   {categories nodes=$node.children depth=$depth+1}
                 </div>
               {/if}
             {else}
               <a class="category-sub-link" href="{$node.link}">{$node.name}</a>
               {if $node.children}
-                <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
-                  <i class="material-icons arrow-right">&#xE315;</i>
-                  <i class="material-icons arrow-down">&#xE313;</i>
-                </span>
-                <div class="collapse" id="exCollapsingNavbar{$node.id}">
+                <i class="material-icons icon-collapse cursor-pointer" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">&#xE313;</i>
+                <div class="collapse float-left clearfix w-100" id="exCollapsingNavbar{$node.id}">
                   {categories nodes=$node.children depth=$depth+1}
                 </div>
               {/if}
@@ -61,7 +58,8 @@
 
 <div class="block-categories d-none d-md-block">
   <ul class="category-top-menu">
-    <li><a class="text-uppercase h6" href="{$categories.link nofilter}">{$categories.name}</a></li>
+    <li><a class="text-uppercase h5" href="{$categories.link nofilter}">{$categories.name}</a></li>
     <li>{categories nodes=$categories.children}</li>
   </ul>
+    <div class="clearfix"></div>
 </div>