update category page sectioon

This commit is contained in:
JSriwongsa 2023-07-06 17:49:59 -05:00
parent dd2c1f40e6
commit 1a1d9d2c26

View file

@ -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){