<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"
}
]
}
$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;
}
}
}
There are no notes for this item.