Vechtsport Online Components for Magento 2

Select: Super Attribute 

<div class="select ">
    <label class="label select__label--super_attribute super-attribute-select" for="field-id">

    </label>
    <select id="field-id" class="select__field select__field--super_attribute super-attribute-select " name="field-name">
        <option value="Selecteer maat">
            Selecteer maat
        </option>
        <option value="XS">
            XS
        </option>
        <option value="S">
            S
        </option>
        <option value="M">
            M
        </option>
        <option value="L">
            L
        </option>
        <option value="XL">
            XL
        </option>
        <option value="XXL">
            XXL
        </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": "",
    "class": "select__label--super_attribute super-attribute-select"
  },
  "field": {
    "id": "field-id",
    "name": "field-name",
    "class": "select__field--super_attribute super-attribute-select",
    "attributes": ""
  },
  "options": [
    {
      "value": "Selecteer maat",
      "text": "Selecteer maat"
    },
    {
      "value": "XS",
      "text": "XS"
    },
    {
      "value": "S",
      "text": "S"
    },
    {
      "value": "M",
      "text": "M"
    },
    {
      "value": "L",
      "text": "L"
    },
    {
      "value": "XL",
      "text": "XL"
    },
    {
      "value": "XXL",
      "text": "XXL"
    }
  ]
}
  • 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.