<div class="select ">
    <label class="label select__label" for="field-id">
        Label text
    </label>
    <select id="field-id" class="select__field select__field--red " name="field-name">
        <option value="option1">
            Option 1
        </option>
        <option value="option2">
            Option 2
        </option>
        <option value="option3" disabled>
            Option 3
        </option>
    </select>
</div>
<div class="select {{ class }}" {{{ attributes }}}>
    <label
        class="label {{ label.class }}"
        for="{{ field.id }}"
        {{{ label.attributes }}}
    >
        {{ label.text }}
    </label>
    <select
        id="{{ field.id }}"
        class="select__field {{ field.class }} {{ customClass }}"
        name="{{ field.name }}"
        {{{ field.attributes }}}
    >
        {{#each options}}
            <option value="{{ value }}" {{ attributes }}>
                {{text}}
            </option>
        {{/each}}
    </select>
</div>
{
  "label": {
    "attributes": "",
    "text": "Label text",
    "class": "select__label"
  },
  "field": {
    "id": "field-id",
    "name": "field-name",
    "class": "select__field--red",
    "attributes": ""
  },
  "options": [
    {
      "value": "option1",
      "text": "Option 1"
    },
    {
      "value": "option2",
      "text": "Option 2"
    },
    {
      "value": "option3",
      "text": "Option 3",
      "attributes": "disabled"
    }
  ]
}
  • Content:
    $select__margin-bottom                   : $spacer--medium !default;
    $select__padding                         : 0 $spacer--extra-large 0 $spacer--medium !default;
    $select__border                          : $form-elements-border !default;
    $select__height                          : 48px !default;
    $select__min-width                       : 72px !default;
    $select__border-radius                   : $form-elements-radius !default;
    $select__line-height                     : $select__height !default;
    $select__font-family                     : $font-family-base !default;
    $select__input-border-color              : $form-elements-border-color !default;
    $select__field-background                : $white !default;
    $select__field-color                     : $font-color-base !default;
    $select__field-list-border-radius--single: $form-elements-radius !default;
    $select__field-font-size                 : $font-size-base !default;
    $select__label-color-focus               : $color-primary !default;
    $select__transition                      : $transition-base !default;
    $select__background-disabled             : $gray-light !default;
    $select__white-space--inline             : nowrap !default;
    
    $select__label-margin--inline            : 0 $spacer--medium 0 0 !default;
    
    //native
    $select__field-bg-image--native          : none !default;
    $select__field-bg-repeat--native         : no-repeat !default;
    $select__field-bg-position--native       : calc(100% - #{$spacer}) center !default;
    
    // Select 2
    $select__option-list-shadow              : none !default;
    $select__border-radius                   : 0 !default;
    $select__field-padding                   : 0 $spacer--extra-large 0 $spacer--medium !default;
    $select__arrow-position-top              : 0 !default;
    $select__arrow-position-right            : $spacer--small !default;
    $select__arrow-padding                   : $spacer--extra-small !default;
    $select__arrow-bg-color                  : $color-primary !default;
    $select__arrow-border-width              : 0 2px 2px 0 !default;
    $select__arrow-margin-top                : -7px !default;
    $select__arrow-transform                 : rotate(45deg) !default;
    $select__arrow-transform--open           : rotate(225deg) !default;
    $select__arrow-transition                : $transition-base !default;
    $select__option-padding                  : 0 $spacer--medium !default;
    $select__option-font-size                : $font-size-base !default;
    $select__option-color--highlighted       : $color-primary !default;
    $select__option-bg-color--highlighted    : $gray-light !default;
    $select__option-selected-bg              : $white !default;
    $select__option-overflow                 : hidden !default;
    $select__option-text-overflow            : ellipsis !default;
    $select__option-white-space              : nowrap !default;
    $select__dropdown-border-width           : 0 1px 1px 1px !default;
    
    .select {
        margin-bottom: $spacer--medium;
    
        &__label {
            &--super_attribute {
                font-family: $font-family-saira;
                font-size: $font-size-medium;
                font-weight: $font-weight-bold;
                color: $black;
            }
        }
    
        &__field {
            appearance: none;
            outline: 0;
            border: 0;
    
            position: relative;
    
            padding: 0 3rem 0 1rem;
            height: 47px;
    
            background-color: $form-select-background;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00LjU0MDM4IDUuOTU5MTdDNC43OTQyMiA2LjIxMzAxIDUuMjA1NzggNi4yMTMwMSA1LjQ1OTYyIDUuOTU5MTdMOS41OTYxOSAxLjgyMjU5QzkuODUwMDMgMS41Njg3NSA5Ljg1MDAzIDEuMTU3MTkgOS41OTYxOSAwLjkwMzM1NEM5LjM0MjM1IDAuNjQ5NTEzIDguOTMwOCAwLjY0OTUxMyA4LjY3Njk2IDAuOTAzMzU0TDUgNC41ODAzMUwxLjMyMzA1IDAuOTAzMzU0QzEuMDY5MiAwLjY0OTUxMyAwLjY1NzY0NyAwLjY0OTUxMyAwLjQwMzgwNiAwLjkwMzM1NEMwLjE0OTk2NiAxLjE1NzE5IDAuMTQ5OTY1IDEuNTY4NzUgMC40MDM4MDYgMS44MjI1OUw0LjU0MDM4IDUuOTU5MTdaTTQuMzUgNUw0LjM1IDUuNDk5NTVMNS42NSA1LjQ5OTU1TDUuNjUgNUw0LjM1IDVaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
            background-repeat: no-repeat;
            background-position: right 1rem top 50%, 0 0;
            background-size: auto, auto;
    
            border-radius: $form-select-radius;
    
            font-family: $font-family-saira;
            font-size: $font-size-medium;
            color: $black;
    
    
            @include mq($screen-m) {
                height: 36px;
            }
    
            &--gray {
                background-color: $form-select-background--gray;
                background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00LjU0MDM4IDYuMTExODFDNC43OTQyMiA2LjM2NTY1IDUuMjA1NzggNi4zNjU2NSA1LjQ1OTYyIDYuMTExODFMOS41OTYxOSAxLjk3NTIzQzkuODUwMDMgMS43MjEzOSA5Ljg1MDAzIDEuMzA5ODMgOS41OTYxOSAxLjA1NTk5QzkuMzQyMzUgMC44MDIxNTMgOC45MzA4IDAuODAyMTUzIDguNjc2OTYgMS4wNTU5OUw1IDQuNzMyOTVMMS4zMjMwNCAxLjA1NTk5QzEuMDY5MiAwLjgwMjE1MiAwLjY1NzY0NyAwLjgwMjE1MiAwLjQwMzgwNiAxLjA1NTk5QzAuMTQ5OTY1IDEuMzA5ODMgMC4xNDk5NjUgMS43MjEzOSAwLjQwMzgwNiAxLjk3NTIzTDQuNTQwMzggNi4xMTE4MVpNNC4zNSA1TDQuMzUgNS42NTIxOUw1LjY1IDUuNjUyMTlMNS42NSA1TDQuMzUgNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K');
                color: rgba(0, 0, 0, 0.8);
                height: 47px;
            }
    
            &--red {
                background-color: $form-select-background--gray;
                background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00LjU0MDM4IDYuMTExODFDNC43OTQyMiA2LjM2NTY1IDUuMjA1NzggNi4zNjU2NSA1LjQ1OTYyIDYuMTExODFMOS41OTYxOSAxLjk3NTIzQzkuODUwMDMgMS43MjEzOSA5Ljg1MDAzIDEuMzA5ODMgOS41OTYxOSAxLjA1NTk5QzkuMzQyMzUgMC44MDIxNTMgOC45MzA4IDAuODAyMTUzIDguNjc2OTYgMS4wNTU5OUw1IDQuNzMyOTVMMS4zMjMwNCAxLjA1NTk5QzEuMDY5MiAwLjgwMjE1MiAwLjY1NzY0NyAwLjgwMjE1MiAwLjQwMzgwNiAxLjA1NTk5QzAuMTQ5OTY1IDEuMzA5ODMgMC4xNDk5NjUgMS43MjEzOSAwLjQwMzgwNiAxLjk3NTIzTDQuNTQwMzggNi4xMTE4MVpNNC4zNSA1TDQuMzUgNS42NTIxOUw1LjY1IDUuNjUyMTlMNS42NSA1TDQuMzUgNVoiIGZpbGw9IiNFMzA2MTMiLz4KPC9zdmc+Cg==');
                color: rgba(0, 0, 0, 0.8);
                height: 47px;
            }
    
            &--super_attribute {
                background-color: #ecf5f4;
                color: rgba(0, 0, 0, 0.5);
                height: 47px;
                width: 100%;
                font-size: 12px;
    
                @include mq($screen-l) {
                    font-size: 16px;
                }
            }
    
            &--native {
                width: 100%;
                height: 40px;
                padding: 0 $spacer--medium 0 $spacer--medium;
                border: 1px solid $form-elements-border-color;
                border-radius: 4px;
                appearance: none;
                transition: $transition-base;
    
                &:focus {
                    @include focus-input();
                }
            }
        }
        &--native {
            select {
                position: relative;
                width: 100%;
                min-width: $select__min-width;
                height: $select__height;
                padding: $select__padding;
                border: $select__border;
                border-radius: $select__border-radius;
                appearance: none;
                transition: $select__transition;
                font-family: $select__font-family;
                line-height: $select__line-height;
                font-size: $select__field-font-size;
                background: $select__field-background;
                background-image: $select__field-bg-image--native;
                background-repeat: $select__field-bg-repeat--native;
                background-position: $select__field-bg-position--native;
                cursor: pointer;
    
                &:disabled {
                    background-color: $select__background-disabled;
                    cursor: not-allowed;
                }
    
                &.focus-visible {
                    @include focus-input();
                }
            }
        }
        &__field-item {
            position: relative;
            height: 40px;
            line-height: 40px;
            padding: 0 $spacer--medium 0 $spacer--medium;
            cursor: pointer;
            font-size: $font-size-base;
        }
    
        &__field-list {
            &--single {
                height: 40px;
                line-height: 40px;
                padding: 0;
                border: 1px solid $form-elements-border-color;
                border-radius: 20px;
            }
        }
    
        &__field-input {
            transition: $transition-base;
    
            &:focus {
                outline: none;
            }
        }
    }
    
  • URL: /components/raw/select/_select.scss
  • Filesystem Path: build/components/02-elements/form/select/_select.scss
  • Size: 8.5 KB

There are no notes for this item.