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

$photos-main-color:#6D6D6D;
$photos-second-color:#EE7800;
$light-gray:#9D9D9D;
$photos-main-font-size:18px;
$photos-second-font-size:14px;
$photos-third-font-size:16px;
$photos-mob-main-font-size:16px;
$photos-mob-second-font-size:14px;
$photos-main-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

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

// ###################  search-tab desktop  ###################//
.search-tab{
    
    font-family: $photos-main-family;
    
    // ######## 下拉選單按鈕 ########

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

        &:focus{
            box-shadow: 0 0 0 0.2rem rgba(238, 120, 0, 0.25);
        }
    }

    .dropdown-menu{
        width: 173px;
        max-height: 298px;
        overflow-y: auto;
        transform: none !important;
        top: 40px !important;
    }

    .radio-btn{
        color: $photos-main-color;
    }

    .form-check-label{
        font-size: $photos-third-font-size;
        &:hover{
            cursor: pointer;
        }
    }

    .color-selection{
        width: 16px;
        height: 16px;
        background-color: red;
        display: inline-flex;
        border: 1px solid #ddd;
    }

    .list-group{
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.396);
    }

    .list-group-item{
        // padding: 14px;
        // border: none;
        scrollbar-width:none; /*Firefox*/

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

    .list-group-item::-webkit-scrollbar {
        display: none; /*Chrome Safari*/
        -ms-overflow-style: none;
    }


    // ######## 下拉選單結果 ########

    .search-tab-itemResult-wrapper{

        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;

        span{
            font-size: 14px;
        }
        img{
            &:hover{
                cursor: pointer;
            }
        }
        i{
            &:hover{
                cursor: pointer;
            }
        }
        a{
            color: $photos-main-color;
            &:hover{
                text-decoration: none;
            }
        }
    }

    .search-tab-itemResult-style{
        color: $photos-second-color;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 10px;
        display: -webkit-inline-box;
    }
    
    .clearall{
        font-size: $photos-third-font-size;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .search-tab-total{
        font-size: $photos-third-font-size;
        color: $light-gray;
    }

    .search-tab-filter{
    
        .search-tab-filter-divider:before{
            height: 50%;
            display: inline-block;
            border: .5px solid $light-gray;
        }
    
        a{
            color: $light-gray;
            font-size: $photos-third-font-size;
            border-bottom:1px solid transparent;
            transition: border 300ms ease-in-out;
            &:hover, &:active{
                text-decoration: none;
                color: $photos-second-color;
                border-bottom:1px solid $photos-second-color;
            }
            &.active{
                color: $photos-second-color;
                border-bottom:1px solid $photos-second-color;
            }
        }
    
    }

}


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

.st-mobile{
    margin-top: 5rem;

    // ######## 下拉選單按鈕 ########

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

    .st-mobile-button{
        background-color: #FFF;
        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: $photos-main-color;
            font-family: $photos-main-family;
            background-color: #fff;
            font-size: $photos-mob-main-font-size;
            margin-right: 10px;
            &:visited, &:active{
                color: $photos-second-color;
                border-color: $photos-second-color;
            }
            &.btn-original-ckecked{
                color: $photos-second-color;
                border-color: $photos-second-color; 
            }
            &:focus{
                box-shadow: 0 0 0 0.2rem rgba(238, 120, 0, 0.25);
            }
        }

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

    // ######## 下拉選單結果 ########

    .st-mobile-itemResult{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        span{
            margin-left: 0.25rem;
            display: inline-flex;
            align-items: center;
            color: $photos-second-color;
            font-size: $photos-mob-second-font-size;
        }
        img{
            margin-left: 0.25rem;
        }
        a{
            text-decoration: none;
        }
        .num{
            color: $light-gray;
        }
    }

    .st-mobile-itemResult-items{
        overflow-x: auto;
        overflow-y: hidden;
    }

    .st-mobile-itemResult-style{
        font-family: $photos-main-family;
        align-self: center;
        display: inline-flex;
        align-items: center;
        padding-top: 1px;
        padding-bottom: 2px;
        padding-right: 8px;
        display: -webkit-inline-box;
    }

    .st-mobile-total{
        font-family: $photos-main-family;
        font-size: $photos-mob-second-font-size;
        color: $light-gray;
        padding-left: 8px;
    }

    .st-mobile-filter{
        font-family: $photos-main-family;

        .st-mobile-filter-divider{
            height: 50%;
            display: inline-block;
            border: .5px solid $light-gray;
        }
    
        a{
            color: $light-gray;
            font-size: $photos-mob-second-font-size;
            border-bottom:1px solid transparent;
            transition: border 300ms ease-in-out;
            &:active{
                text-decoration: none;
                color: $photos-second-color;
                border-bottom:1px solid $photos-second-color;
            }
            &.active{
                color: $photos-second-color;
                border-bottom:1px solid $photos-second-color;
            }
        }
    }

    .clearall{
        color: $photos-main-color;
        font-size: $photos-mob-second-font-size;
        font-family: $photos-main-family;
        padding-top: 2px;
        padding-bottom: 3px;
    }

}

//search-tab dropdown mobile 

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

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

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

.st-mobile-mask{
    display: none;
    position: fixed;
    bottom: 57px; //置底選單高度
    z-index: 4;
    background: rgba(0, 0, 0, 0.7);
}

.st-mobile-dropdown{
    background: #fff;
    color: #000;
    width: 100%;
    position: absolute;
    bottom: -9px;
    transition: bottom 1s ease;
    height: 45vh;
    overflow-y: scroll;
    z-index: 5;

    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: fixed;
        top: 0;  

        &.active .searchall-box{
            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;
        .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: $photos-second-color;
        }
    }

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

}