Ghost/ghost/admin/assets/sass/components/dropdowns.scss

//
// Dropdown Styles
// --------------------------------------------------

// Wrapper
// Does nothing yet...
.dropdown {}

// List
.dropdown-menu {
    position: relative;
    display: inline-block;
    min-width: 160px;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    background: #fff;
    border: #B0BEC4 1px solid;
    box-shadow: rgba(0,0,0,0.175) 0 2px 6px;
    border-radius: 2px;

    // Item Resets - This means we can use any element
    li {
        list-style: none;
    }
} // .dropdown-menu

// Triangle & positioning placeholders
%triangle {
    &:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: #fff transparent;
        display: block;
        width: 0;
    } // :before

    &:after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: #fff;
        transform: rotate(45deg);
        box-shadow: #B0BEC4 0 0 0 1px;
        z-index: -1;
    } // :after
} // %triangle

%triangle-top {
    @extend %triangle;

    &:before {
        border-width: 0 6px 6px 6px;
        top: -6px;
    }
    &:after {
        top: -5px;
    }
} // %triangle-top

%triangle-bottom {
    @extend %triangle;

    &:before {
        border-width: 6px 6px 0 6px;
        bottom: -6px;
    }
    &:after {
        bottom: -5px;
    }
} // %triangle-bottom

.dropdown-menu {

    &.triangle-top {
        @extend %triangle-top;

        &:before {
            left: 50%;
            margin-left: -6px;
        }
        &:after {
            left: 50%;
            margin-left: -6px;
        }
    } // &.triangle-top

    &.triangle-top-left {
        @extend %triangle-top;

        &:before {
            left: 1.2rem;
        }
        &:after {
            left: 1.2rem;
        }
    } // &.triangle-top-left

    &.triangle-top-right {
        @extend %triangle-top;

        &:before {
            right: 1.2rem;
        }
        &:after {
            right: 1.2rem;
        }
    } // &.triangle-top-right

    &.triangle-bottom {
        @extend %triangle-bottom;
        &:before {
            left: 50%;
            margin-left: -6px;
        }
        &:after {
            left: 50%;
            margin-left: -6px;
        }
    } // &.triangle-bottom

    &.triangle-bottom-left {
        @extend %triangle-bottom;
        &:before {
            left: 1.2rem;
        }
        &:after {
            left: 1.2rem;
        }
    } // &.triangle-bottom-left

    &.triangle-bottom-right {
        @extend %triangle-bottom;
        &:before {
            right: 1.2rem;
        }
        &:after {
            right: 1.2rem;
        }
    } // &.triangle-bottom-right
} // .dropdown-menu

// List Item
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.8rem 2rem;
    font-size: 1.4rem;
    line-height: 1;
    color: #000;

    &:not(.divider):hover,
    &:not(.divider):focus {
        color: #fff;
        background: $blue;
    }
} // .dropdown-item

// Divider
.dropdown-menu .divider {
    display: block;
    padding: 0;
    margin: 0.9rem 0;
    height: 1px;
    width: 100%;
    position: relative;
    background: #D0DADE;
    overflow: hidden;
} // .dropdown-menu .divider

// Icons
.dropdown-with-icons {
    .dropdown-item:not(.divider) {
        padding: 0.6rem 3rem;
        &[class*='icon-'] {
            position: relative;
            &:before {
                position: absolute;
                top: 50%;
                left: 1rem;
                font-size: 1.2rem;
                line-height: 1;
                margin-top: -0.6rem;
            }
        } // &[class*='icon-']
    } // .dropdown-item
} // .dropdown-with-icons