filestash/client/components/dropdown.scss

.component_dropdown{
    position: relative;
    .dropdown_container{display: none; position: absolute; right: 0;}

    .dropdown_button{
        border: 1px solid rgba(0,0,0,0);
        border-radius: 4px;
        padding: 5px;
        min-width: 20px;
        text-align: center;
    }
    .dropdown_container{
        padding-top: 3px;
        z-index: 3;
        ul{
            margin: 0;
            list-style-type: none;
            background: white;
            border: 1px solid var(--bg-color);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            color: var(--emphasis-secondary);
            border-radius: 3px;
            padding: 3px 0px;
            font-size: 0.92em;
            li{
                display: flex;
                > div{
                    width: 150px;
                    padding: 8px 5px 8px 10px;
                }
            }
        }
    }
}

.component_dropdown{
    &.active{
        .dropdown_container{
            display: block;
            li{
                background: white;
                transition: background 0.1s ease-out;
                &:hover{
                    background: var(--bg-color);
                }
            }
        }
        .dropdown_button{
            border-color: var(--bg-color);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
    }
}