Cannot Find - Collapse on xs - SCSS
Thu May 08 2025 11:33:46 GMT+0000 (Coordinated Universal Time)
Saved by @vishalsingh21
// Cannot Find - Collapse on xs
.cannot-find-section{
padding: _res-m(22) 0;
@include screen-sm-min{
padding: _res(58) 0;
}
@include section-padding;
}
.Advanced-Inventory-Search_1-0-2{
.advanced-inventory-search.collapse-on-xs{
padding: 0;
.row-flex{
@include screen-xs{
flex-direction: column;
gap: _res-m(10);
}
@include screen-sm-min{
flex-wrap: nowrap;
gap: _res(28);
}
.column-auto{
&.title-container{
padding: 0;
@include screen-xs{
width: 100% !important;
}
@include screen-sm-min{
flex-basis: 12% !important;
padding-right: _res(50);
}
h3{
font-size: _res-m(16);
font-weight: 500;
text-align: left !important;
margin: 0;
@include _flex($halign: space-between);
@include screen-sm-min{
font-size: _res(41);
font-weight: bold;
white-space: wrap;
justify-content: flex-start;
}
&::after{
background: url("#{$img-path}/hero-txt-arrow.png") no-repeat center/80%;
color: transparent;
transform: rotate(45deg);
transition: all .3s ease-in-out;
}
&.icon::after{
transform: rotate(225deg);
}
}
}
&.collapse{
padding: 0;
@include screen-xs{
width: 100% !important;
}
select{
border: none;
height: _res-m(35);
font-size: _res-m(10);
margin: 0;
padding: 0 _res-m(15);
@include screen-sm-min{
border-radius: _res(12);
height: _res(30,60);
font-size: _res(10,16);
padding: 0 _res(20);
}
}
&.column-btn{
@include screen-sm-min{
flex-grow: 0;
}
#viewResults{
@include btn-style;
width: 100%;
font-size: 0;
&::before{
content: "Search";
font-size: _res-m(14);
}
@include screen-sm-min{
font-size: 0;
&::before{
font-size: _res(10,18);
}
}
}
}
&:nth-child(5), &:last-child{
display: none !important;
}
}
}
}
}
}



Comments