site/_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss

//
// Position basics
//
.select-select {
    display: none;
    pointer-events: none;
    position: absolute;
    opacity: 0;
}

.select-element {
    position: absolute;
    display: none;

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    &.select-open {
        display: block;
    }
}


//
// Actual theme
//
.select-theme-bigchaindb {
    user-select: none;
    box-shadow: none;

    .select-content {
        border-radius: $border-radius;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        background: $gray-dark;
        color: $input-color;
        font-family: inherit;
        overflow: auto;
        max-width: 20rem;
        min-width: 20rem;
        max-height: 20rem;
        -webkit-overflow-scrolling: touch;

        @media (max-width: 27rem), (max-height: 27rem) {
            max-width: 11.25rem;
            max-height: 11.25rem;
        }
    }

    .select-options {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        margin: 0;
        padding: 0;
    }

    .select-option {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        position: relative;
        list-style: none;
        margin: 0;
        line-height: 1;
        padding: $input-padding-x 1em $input-padding-x 2.5em;
        display: block;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.select-option-selected:before {
            content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$input-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$input-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
            position: absolute;
            left: 1em;
            top: 0;
            bottom: 0.2em;
            height: 1em;
            width: 1em;
            margin: auto;
        }

        &.select-option-highlight,
        &:hover {
            background: $component-active-bg;
            color: $component-active-color;

            // the checkmark
            &.select-option-selected:before {
                content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
            }
        }

        &:first-child {
            border-radius: $border-radius $border-radius 0 0;

            // assume first item is always the placeholder
            color: $input-color-placeholder;
            border-bottom: 1px solid $gray;
            pointer-events: none;

            &:before {
                display: none !important;
            }

            &.select-option-highlight,
            &:hover {
                background: inherit !important;
                color: inherit !important;
            }
        }

        &:last-child {
            border-radius: 0 0 $border-radius $border-radius;
        }
    }

    &.select-target {
        display: block;
        vertical-align: middle;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        position: relative;
        padding: $input-padding-x 3em $input-padding-x 0;
        background: transparent;
        border-bottom: 2px solid $input-border-color;
        cursor: pointer;
        color: $input-color-placeholder;
        text-decoration: none;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;

        &.select-target-focused,
        &.select-target-focused:focus {
            color: $input-color;
            border-color: $input-border-focus;
            outline: none;
        }

        // dropdown indicator
        b {
            position: absolute;
            right: .25em;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 1.25rem;
            width: 2em;

            &:before,
            &:after {
                content: "";
                display: block;
                position: absolute;
                margin: auto;
                right: 0;
                height: 0;
                width: 0;
                border: 0.263em solid transparent;
            }

            &:before {
                top: 0;
                border-bottom-color: inherit;
            }

            &:after {
                bottom: 0;
                border-top-color: inherit;
            }
        }
    }

    + .form-label {
        visibility: hidden;
    }
}