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

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

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

// List
.dropdown-menu {

    display: inline-block;
    min-width: 160px;
    padding: 0.5rem 0;
    margin: 0;
    position: relative;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 12px rgba(0,0,0,0.175);
    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: 20px;
        height: 20px;
        background: #fff;
        transform: rotate(45deg);
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.175);
        z-index: -1;
    } // :after
} // %triangle

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

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

.dropdown-menu {

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

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

    &.triangle-top-right {
        @extend %triangle-top;
        &:before {
            right: 2rem;
        }
        &:after {
            right: 2rem;
        }
    } // &.triangle-top-right

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

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

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

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

    &:not(.divider):hover,
    &:not(.divider):focus {
        background: #f6f6f6;
    }
} // .dropdown-item

// Divider
.dropdown-menu .divider {
    display: block;
    padding: 0;
    margin: 0.9rem 0;
    height: 1px;
    width: 100%;
    position: relative;
    background: #eee;
    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