Washington State Auditor's Office Communication and Design System

Dropdown: Inverted

Error rendering component

(unknown path) Error: Could not render component '@dropdown--labeled' - component not found.

 
<div class="u-background-color-neutral-lighter u-padding">
    {% render '@dropdown--labeled', { label: label, inverted: inverted, options: options } %}
</div>
 
{
  "options": [
    "One",
    "Two",
    "Three",
    "Four"
  ],
  "inverted": "true",
  "label": "Inverted dropdown for dark backgrounds:"
}
  • Content: 
    .c-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: $spacing-tiny $spacing-large $spacing-tiny $spacing-small;
    background-color: $color-neutral-lightest;
    background-image: url('/assets/images/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right;
    border: $border-width-base solid $color-neutral-lightest;
    border-radius: $border-radius-base;
    width: 100%;

    &:focus {
        border-color: $color-neutral-light;
        outline: none;
    }

    &--inverted {
        color: $color-neutral-white;
        background-color: $color-neutral-base;
        border-color: $color-neutral-lighter;
    }

    // Fix for IE
    &::-ms-expand {
        display: none;
    }
}

// Fix for IE 9
@media screen and (min-width:0\0) {
    .c-dropdown {
        background: none\9;
        padding: 5px\9;
    }
}
  • URL: /components/raw/dropdown/dropdown.scss
  • Filesystem Path: src/Components/dropdown/dropdown.scss
  • Size: 942 Bytes

When used

Selecting a single option from a short list of options