my_tests/assets/css/components/_search-tab.scss

$main-font-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif;
$main-color:#EE7800;

body{
    &.active{
        background-color: transparent;
    }
}

// ###################  search-tab desktop  ###################//
.search-tab{
    
    font-family: $main-font-family;

    small{
        font-size: 16px;
        span{
            font-size: 20px;
        }
    }
    
    .nav-item{
        border-right: 3px solid #fff;
    }
    .nav-link{
        color:#43484C;
        background-color: #F4F4F4;
        box-shadow: 3px 1px 3px #AAAAAA;
        font-weight: bold;
    }

    .bottom-line{
        border-bottom: 2px solid $main-color;
    }

    .btn{
        &.btn-original{
            background-color: #fff;
            font-weight: bold;
            border-color: #dbdbdb;
            &:visited, &:active, &:hover{
                color: $main-color;
                border-color: $main-color;
            }
        }
        &.btn-original-ckecked{
            color: $main-color;
            border-color: $main-color;
        }
    }

    .tab-content{
        // 原局框樣式
        // border:2px solid $main-color;
        box-shadow: 5px 3px 1px -3px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);

        .dropdown-menu{
            max-height:300px;
            overflow-y: auto;
            transform: none !important;
            top: 38px !important;
        }
        //複選下拉選單格子內容對齊，因改為單欄選取，該css隱藏
        // .list-group .list-group-item{
        //     width:-webkit-fill-available;
        // }
        a{
            color: #000;
            &:hover{
                text-decoration: none;
            }
        }
        // 方案二 input轉為圖示切換
        .radio-btn{
            color: #909090;
        }
        .form-check-label:hover{
            cursor: pointer;
        }
    }


    .search-tab-filter{
        
        .divider:before{
            content: '';
            border: .5px solid #AAAAAA;
        }

        a{
            color: #000;
            &:hover, &:active{
                text-decoration: none;
                color: $main-color;
            }
            &.active{
                color: $main-color;
            }
        }

        .deep-textColor{
            color: #000;
        }

        .dropdown-origin-width{
            min-width: 5rem;
        }

        .dropdown-px{
            padding-left: 0.8rem;
            padding-right: 0.8rem;
        }
    }

    .search-tab-itemResult{
        span{
            font-size: 14px;
        }
        img:hover{
            cursor: pointer;
        }
        a{
            color: #000;
            &:hover{
                text-decoration: none;
            }
        }
    }

    // .budget, .footage, .style, .type, .status{
    //     display: none;
    // }
}


// ################### search-tab mobile ###################//

.st-mobile{
    font-family: $main-font-family;
    display: block;
    margin-top: 5rem;

    small{
        font-size: 14px;
        span{
            font-size: 14px;
        }
    }

    .bottom-line{
        border-bottom: 2px solid $main-color;
    }
    .st-mobile-itemList{
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width:none; /*Firefox*/
    }

    .st-mobile-itemList::-webkit-scrollbar {
        display: none; /*Chrome Safari*/
        -ms-overflow-style: none;
    }

    .st-mobile-wrapper{
        width: 100%;
        display: -webkit-inline-box;
        // display: inline-flex;
        justify-content: space-between;
    }
    .st-mobile-wrapper-v2{
        width: 100%;
        display: -webkit-inline-box;
        justify-content: start;
    }
    ul{
        list-style-type: none;
        margin-block-start: 0;
        margin-block-end: 0;
        li{  //active效果刪除
            background-color: #F4F4F4;
            border-top-left-radius:0.25rem ;
            border-top-right-radius:0.25rem ;
            margin-right: 5px;
            font-weight: bold;
            box-shadow: 3px 1px 3px #AAAAAA;
        }
        a{
            font-size: 14px;
            color: #43484C;
            display: block;
            padding: 1rem 1rem;
        &:active, &.active{
            color: #FFF; 
            text-decoration: none;
            background-color: #EE7800;
            }
        }

    }

    .st-mobile-button::-webkit-scrollbar {
        display: none; /*Chrome Safari*/
        -ms-overflow-style: none;
    }

    .st-mobile-button{
        background-color: #FFF;
        box-shadow: 5px 3px 1px -3px rgba(0,0,0,.2), 0 0 2px 1px rgba(0,0,0,.14), 0 0 5px 0.5px rgba(0,0,0,.12);
        // border: 2px solid $main-color;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width:none; /*Firefox*/
        .st-mobile-button-wrapper{
            width: max-content;
            overflow-x: auto;
            overflow-y: hidden;
        }
        button.btn-original{
            font-weight: bold;
            border-color: #dbdbdb;
            background-color: #fff;
            font-size: 14px;
            margin-right: 10px;
            padding-top: px;
            padding-bottom: px;
            &:visited, &:active, &:hover{
                color: initial;
                border-color: #dbdbdb;
            }
            &.btn-original-ckecked{
                color: $main-color;
                border-color: $main-color; 
            }
        }

        #mb-select{
            display: block;
            &.active{
                display: none;
            }
        }

        #mb-video, #mb-designer, #mb-goods{
            display: none;
            &.active{
                display: block;
            }
        }
    }
    .st-mobile-itemResult{
        span{
            margin-left: 0.25rem;
            display: inline-flex;
            align-items: center;
            color: $main-color;
            font-size: 14px;
        }
        img{
            margin-left: 0.25rem;
        }

        a{
            color: #000;
            &:hover{
                text-decoration: none;
            }
        }
    }

    .st-mobile-filter{
        .btn-outline-secondary:focus{
            box-shadow: none !important;
            background-color: #fff !important;
        }
        .btn-outline-secondary:hover{
            background-color: none;
            border-color: none;
        }
        //iphone 背景色權重問題，因此custom
        .btn-outline-custom{
            border-color: #AAAAAA;
        }
        .deep-textColor{
            color: #000;
        }
        .dropdown-menu{
            min-width: 100%;
        }
    }
}

//search-tab dropdown mobile 

.st-mobile-overlay{
    position: relative;
    bottom: 0;

    .st-mobile-mask{
        width: 100%;
        height: 100%;
    }

    &.active .st-mobile-dropdown{
        bottom: 0;
    }
    &.active .st-mobile-mask{
        display: block;
    }
}

.st-mobile-mask{
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.7);
}

.st-mobile-dropdown{
    background: #fff;
    color: #000;
    width: 100%;
    position: absolute;
    // bottom: 0;
    bottom: -100%;
    transition: bottom 1s ease;
    height: 45vh;
    overflow-y: scroll;
    z-index: 5;
    // &.active{
    //     bottom: -100%;
    // }
    a{
        color: #000;
    }
    .st-mobile-selection{
        position: relative;
        .st-mobile-close{
            color: #EE7800;
            font-weight: bold;
            position: absolute;
            right: 5%;
            bottom:30%;
        }
    }
    .st-mobile-title{
        font-weight: bold;
        color: #43484C;
    }
    .list-group-wrapper{
        height: 30vh;
        overflow-y: scroll;
    }
}

//searchall dropdown mobile

.searchall{

    &.searchall-overlay{
        width: 100%; 
        z-index: 1030;
        // position: relative;
        position: fixed;
        top: 0;  

        &.active .searchall-box{
            // top: 0;
            display: block;
        }
        &.active .searchall-mask{
            display: block;
        }
    }

    .searchall-mask{
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        top: 0;
    }

    .searchall-box{
        width: 100%;
        position: relative;
        background-color: #fff;
        display: none;
        // top: -100%;
        .searchall-block{
            z-index: 1040;
        }
        .searchall-keywords-link{
            color: #000;
            margin-bottom: 10px;
            &:hover{
                text-decoration: none;
            }
        }
    }


    .dropdown-toggle::after{
        display: none;
    }

    .dropdown-origin-width{
        min-width: 5rem;
    }
    

    .input-group-search {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #727679;
        text-align: center;
        white-space: nowrap;
        border-radius: 0.25rem;
    }
    
    .searchall-wrapper{
        border: 2px solid #aaaaaa;
    }
    
    .searchall-keywords{
        padding: 1rem;
        background-color: #F4F4F4;
        &:active{
            color: #fff;
            background-color: $main-color;
        }
    }

    .searchall-input{
        flex: 1 1 auto;
    }

}