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

// search-bar

.search-bar{
    position: relative;
    font-family: $main-font-family;

    .container-searchbar{
        max-width: 990px;
    }

    &.search-bar-mt{
        margin-top: 70px;
    }

    //取消IE edge 瀏覽器輸入框輸入會有x的圖示
    input::-ms-clear{
        display: none;
    }

    ul{
        list-style: none;
        margin-block-end: 0;
        li{
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
        }
        a{
            color: #43484C;
            font-weight: bold;
            box-shadow: 3px 0px 3px #AAAAAA;
            &:hover, &.active{
                color: #fff;
                background-color: #EE7800;
                text-decoration: none;
             }
        }
    }

    .search-bar-keywordItem{
        a{
            color: #000;
            &:hover{
                text-decoration: none;
            }
        }
    }

    .search-bar-aside{
        position: fixed;
        top: calc(336px + 72px + 82px); //刊頭 + nav + 剩餘高度
        z-index: 999;
        transform: translateX(0%);
        transition: transform 300ms ease-in-out;

        &.is-hidden{
            transform: translateX(-90%);
        }


        .search-bar-block{
            padding: 0 8px 8px 0;
            transform: translateX(0%);
            transition: transform 300ms ease-in-out;
            background: rgba(255,255,255,0.75);

            &.is-hidden{
                transform: translateX(-90%);
            }
        }

        .search-bar-aside-text{
            position: absolute;
            top: -24px;
            color: #444;
            background: rgba(255,255,255,0.75);
            padding: 0 5px;
            width: 100%;
            text-align: right;
            cursor: pointer;
        }

        .search-bar-aside-arrow{
            transition: transform 300ms ease-in-out;
            cursor: pointer;

            &.is-rotate{
                transform: rotate(180deg);
            }
        }
    }

}