update category page sectioon
This commit is contained in:
JSriwongsa
parent
dd2c1f40e6
commit
1a1d9d2c26
1 changed files with 165 additions and 6 deletions
|
|
@ -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){
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue