Cannot Find - Collapse on xs - SCSS

PHOTO EMBED

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;
                    }
                }
            }
        }
    }
}
content_copyCOPY