From 1a1d9d2c260d3705d1942afa0a5e8b302822caa6 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Thu, 6 Jul 2023 17:49:59 -0500
Subject: [PATCH] update category page sectioon

---
 ecommerce/fashion_website/pages/page.css | 171 ++++++++++++++++++++++-
 1 file changed, 165 insertions(+), 6 deletions(-)

diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css
index 7f94992..9aa2bc0 100644
--- a/ecommerce/fashion_website/pages/page.css
+++ b/ecommerce/fashion_website/pages/page.css
@@ -166,7 +166,7 @@ nav.menu .sub-menu li{
 .list-inline a:hover{
     color: var(--based-color);
 }
-.header-left .list-inline{
+.header-left .list-inline, .sidebar .widget input[type="checkbox"]{
     display: none;
 }
 :where(.header-left, .header-right) li{
@@ -1233,15 +1233,21 @@ input.checking:checked::after{
 .cart-menu .product-list >.wrapper{
     max-height: 400px;
 }
-
-
-
 /*--------- scroll --------*/
+.scrollto .wrapper:not(.initial){
+    --display:grid;
+    padding: 0;
+    overflow: unset;
+    scroll-snap-type: unset;
+    overscroll-behavior-inline: unset;
+}
+.scrollto .wrapper .item{
+    width: unset;
+}
 .scrollto > .wrapper{
     overflow-x: auto;
     overscroll-behavior-inline: contain;
     scroll-snap-type: inline mandatory;
-    overflow-y: hidden;
 }
 .scrollto .wrapper::-webkit-scrollbar{
     width: 12px;
@@ -1256,6 +1262,151 @@ input.checking:checked::after{
 .scrollto .wrapper::-webkit-scrollbar-thumb{
     background-color: lightgray;
 }
+/*---------------------------------------- page-category ----------------------------------------*/
+/*---------- sidebar ----------*/
+.section .title{
+    text-align: center;
+}
+.sidebar-title{
+    font-size: 24px;
+}
+.sidebar .widget{
+    margin: 20px 0;
+}
+.sidebar label, .sidebar .price-range{
+    justify-content: space-between;
+    display: flex;
+    cursor: pointer;
+}
+.sidebar label span{
+    font-weight: 600;
+}
+.sidebar label i{
+    font-size: 24px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--trabsition-transform);
+}
+.sidebar .list-block ul{
+    padding-left: 15px;
+    margin-top: 20px;
+    height: 230px;
+}
+.sidebar .price-range{
+    font-size: 16px;
+}
+.sidebar .widget .accord{
+    padding-right: 15px;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+.sidebar .widget input:checked ~ div{
+    max-height: 1000px;
+    opacity: 1;
+    visibility: visible;
+}
+.sidebar .widget input:checked ~ label i{
+    transform: rotate(180deg);
+}
+.sidebar .widget :where(.accord >div, .range-track){
+    padding-top: 20px;
+}
+/*---------- category content ----------*/
+.sort-list .wrap{
+    position: relative;
+    cursor: pointer;
+}
+.sort-list .wrap ul{
+    position: absolute;
+    text-align: left;
+    top: 50px;
+    left: 0;
+    right: 0;
+    background-color: var(--white-color);
+    box-shadow: var(--shadow);
+    z-index: 10;
+    display: none;
+    animation: var(--fade);
+}
+.sort-list .wrap ul.show{
+    display: block;
+}
+.sort-list ul li a{
+    display: block;
+    padding: 5px 20px;
+    transition: var(--transition-background), var(--transition-color);
+}
+.sort-list ul li a:hover, .sort-list ul li.active a{
+    background-color: var(--dark-color);
+    color: var(--white-color);
+}
+.category-content .button .primary-btn{
+    border-radius: 0;
+}
+.category-content .button{
+    margin: 60px 0 100px;
+    text-align: center;
+}
+.category-content :where(.sorter, .right){
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.category-content .sorter{
+    margin: 0 0 30px;
+}
+.category-content .sorter > a{
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40;
+    background-color: var(--dark-color);
+    color: var(--white-color);
+    border-radius: 50%;
+    top: calc(50% -20px);
+    left: 0;
+    opacity: 0.5;
+    z-index: 10;
+    transition: opacity 0.3s, var(--trabsition-transform);
+}
+.category-content .sorter > a:hover{
+    transform: scale(1.2);
+    opacity: 1;
+}
+.category-content .opt-trigger{
+    gap: 5px;
+    margin-right: 15px;
+    line-height: 1.5;
+}
+.category-content .opt-trigger span{
+    font-size: 14px;
+    font-weight: 600;
+}
+.category-content .right .list-inline a{
+    display: flex;
+    padding: 7px;
+    background-color: whitesmoke;
+    margin-left: 10px;
+}
+.category-content .sort-list ul{
+    width: 180px;
+}
+.category-content .left span{
+    display: none;
+}
+.category-content .dotgrid .wrapper{
+    --grid-col:220px;
+}
+
+
 
 
 
@@ -1302,9 +1453,12 @@ input.checking:checked::after{
     .product nav ul{
         justify-content: center;
     }
+    .category-content .left span{
+        display: block;
+    }
 }
 @media(min-width: 992px){
-    .menu-trigger{
+    .menu-trigger, .sidebar .close-trigger, .category-content .sorter >a{
         display: none;
     }
     .header-center nav{
@@ -1347,6 +1501,11 @@ input.checking:checked::after{
     nav.menu .sub-menu li{
         padding: 5px 30px;
     }
+    .page-category .content{
+        display: grid;
+        grid-template-columns: 1fr 4fr;
+        gap: 60px;
+    }
 }
 
 @media(min-width: 1200px){