PSI Software SE Design Library

Select

No notes defined.

<!-- Default -->
<span class="select">

    <select id="field-select">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <hr />
        <option value="-1">
            Show all
        </option>
        <hr />
        <option value="1">
            Option 1
        </option>
        <option value="2">
            Option 2
        </option>
        <option value="3">
            Option 3
        </option>
        <option value="4" disabled="disabled">
            Unavailable option
        </option>
    </select>

</span>


<!-- With Groups -->
<span class="select">

    <select id="field-select">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <optgroup label="Group 1">
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </optgroup>
    </select>

</span>


<!-- Required -->
<span class="select">

    <select id="field-uniqueID-required" required="">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <hr />
        <option value="-1">
            Show all
        </option>
        <hr />
        <option value="1">
            Option 1
        </option>
        <option value="2">
            Option 2
        </option>
        <option value="3">
            Option 3
        </option>
        <option value="4" disabled="disabled">
            Unavailable option
        </option>
    </select>

</span>


<!-- Valid -->
<span class="select">

    <select id="field-uniqueID-valid" required="" aria-invalid="false">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <option value="1">
            Option 1
        </option>
        <option value="2" selected="selected">
            Option 2
        </option>
        <option value="3">
            Option 3
        </option>
    </select>

</span>


<!-- Invalid -->
<span class="select">

    <select id="field-uniqueID-invalid" required="" aria-invalid="true">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <hr />
        <option value="-1">
            Show all
        </option>
        <hr />
        <option value="1">
            Option 1
        </option>
        <option value="2">
            Option 2
        </option>
        <option value="3">
            Option 3
        </option>
        <option value="4" disabled="disabled">
            Unavailable option
        </option>
    </select>

</span>


<!-- Disabled -->
<span class="select" data-disabled="true">

    <select id="field-uniqueID-disabled" disabled="disabled">
        <option value="" disabled="disabled" selected="selected">Please select</option>
        <hr />
        <option value="-1">
            Show all
        </option>
        <hr />
        <option value="1">
            Option 1
        </option>
        <option value="2">
            Option 2
        </option>
        <option value="3">
            Option 3
        </option>
        <option value="4" disabled="disabled">
            Unavailable option
        </option>
    </select>

</span>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <span class="select">

        <select id="field-select">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <hr />
            <option value="-1">
                Show all
            </option>
            <hr />
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </select>

    </span>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">With Groups</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <span class="select">

        <select id="field-select">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <optgroup label="Group 1">
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </optgroup>
        </select>

    </span>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Required</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[required]</li>
            </ul>
        </div>

    </header>

    <span class="select">

        <select id="field-uniqueID-required" required="">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <hr />
            <option value="-1">
                Show all
            </option>
            <hr />
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </select>

    </span>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Valid</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[data-invalid="false"]</li>
            </ul>
        </div>

    </header>

    <span class="select">

        <select id="field-uniqueID-valid" required="" aria-invalid="false">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <option value="1">
                Option 1
            </option>
            <option value="2" selected="selected">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
        </select>

    </span>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Invalid</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[data-invalid="true"]</li>
            </ul>
        </div>

    </header>

    <span class="select">

        <select id="field-uniqueID-invalid" required="" aria-invalid="true">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <hr />
            <option value="-1">
                Show all
            </option>
            <hr />
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </select>

    </span>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Disabled</h2>

        <div class="doc-variant-configuration">
            <ul data-label="State">
                <li>[disabled]</li>
            </ul>
        </div>

    </header>

    <span class="select" data-disabled="true">

        <select id="field-uniqueID-disabled" disabled="disabled">
            <option value="" disabled="disabled" selected="selected">Please select</option>
            <hr />
            <option value="-1">
                Show all
            </option>
            <hr />
            <option value="1">
                Option 1
            </option>
            <option value="2">
                Option 2
            </option>
            <option value="3">
                Option 3
            </option>
            <option value="4" disabled="disabled">
                Unavailable option
            </option>
        </select>

    </span>

</section>


<!-- Default -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- With Groups -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- Required -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- Valid -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- Invalid -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- Disabled -->
<span class="select"
    {{~#if is-disabled}} data-disabled="true"{{/if~}}
>

    <select
        {{~#id}} id="field-{{.}}"{{/id~}}
        {{~#name}} name="{{.}}"{{/name~}}
        {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        {{~#is-required}} required=""{{/is-required~}}
        {{~#if is-valid}} aria-invalid="false"{{/if~}}
        {{~#if is-invalid}} aria-invalid="true"{{/if~}}
    >
            {{#placeholder}}
        <option value="" disabled="disabled" selected="selected">{{{.}}}</option>
            {{/placeholder}}
            {{#options}}
                {{#if label}}
        <option value="{{value}}"
            {{~#is-selected}} selected="selected"{{/is-selected~}}
            {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
        >
                {{{label}}}
        </option>
                {{else}}
        <hr/>
                {{/if}}
            {{/options}}
        {{#optiongroups}}
            <optgroup label="{{label}}">
                    {{#options}}
                        {{#if value}}
                <option value="{{value}}"
                    {{~#is-selected}} selected="selected"{{/is-selected~}}
                    {{~#is-disabled}} disabled="disabled"{{/is-disabled~}}
                >
                        {{{label}}}
                </option>
                        {{else}}
                <hr/>
                        {{/if}}
                    {{/options}}
            </optgroup>
        {{/optiongroups}}
    </select>

</span>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if states}}
            <ul data-label="State">
                    {{#states}}
                <li>{{{.}}}</li>
                    {{/states}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@select' (contextData '@select' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "id": "select",
  "placeholder": "Please select",
  "options": [
    {
      "label": null
    },
    {
      "label": "Show all",
      "value": -1
    },
    {
      "label": null
    },
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2
    },
    {
      "label": "Option 3",
      "value": 3
    },
    {
      "label": "Unavailable option",
      "value": 4,
      "is-disabled": true
    }
  ]
}


/* With Groups */
{
  "id": "select",
  "placeholder": "Please select",
  "options": null,
  "optiongroups": [
    {
      "label": "Group 1",
      "options": [
        {
          "label": "Option 1",
          "value": 1
        },
        {
          "label": "Option 2",
          "value": 2
        },
        {
          "label": "Option 3",
          "value": 3
        },
        {
          "label": "Unavailable option",
          "value": 4,
          "is-disabled": true
        }
      ]
    },
    {
      "label": "Group 2",
      "options": [
        {
          "label": "Option 1",
          "value": 1
        },
        {
          "label": "Option 2",
          "value": 2
        },
        {
          "label": "Option 3",
          "value": 3
        },
        {
          "label": "Unavailable option",
          "value": 4,
          "is-disabled": true
        }
      ]
    }
  ]
}


/* Required */
{
  "id": "uniqueID-required",
  "placeholder": "Please select",
  "options": [
    {
      "label": null
    },
    {
      "label": "Show all",
      "value": -1
    },
    {
      "label": null
    },
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2
    },
    {
      "label": "Option 3",
      "value": 3
    },
    {
      "label": "Unavailable option",
      "value": 4,
      "is-disabled": true
    }
  ],
  "is-required": true
}


/* Valid */
{
  "id": "uniqueID-valid",
  "placeholder": "Please select",
  "options": [
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2,
      "is-selected": true
    },
    {
      "label": "Option 3",
      "value": 3
    }
  ],
  "is-required": true,
  "is-valid": true
}


/* Invalid */
{
  "id": "uniqueID-invalid",
  "placeholder": "Please select",
  "options": [
    {
      "label": null
    },
    {
      "label": "Show all",
      "value": -1
    },
    {
      "label": null
    },
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2
    },
    {
      "label": "Option 3",
      "value": 3
    },
    {
      "label": "Unavailable option",
      "value": 4,
      "is-disabled": true
    }
  ],
  "is-required": true,
  "is-invalid": true
}


/* Disabled */
{
  "id": "uniqueID-disabled",
  "placeholder": "Please select",
  "options": [
    {
      "label": null
    },
    {
      "label": "Show all",
      "value": -1
    },
    {
      "label": null
    },
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2
    },
    {
      "label": "Option 3",
      "value": 3
    },
    {
      "label": "Unavailable option",
      "value": 4,
      "is-disabled": true
    }
  ],
  "is-disabled": true
}


/* Doc Only */
{
  "id": "select",
  "placeholder": "Please select",
  "options": [
    {
      "label": null
    },
    {
      "label": "Show all",
      "value": -1
    },
    {
      "label": null
    },
    {
      "label": "Option 1",
      "value": 1
    },
    {
      "label": "Option 2",
      "value": 2
    },
    {
      "label": "Option 3",
      "value": 3
    },
    {
      "label": "Unavailable option",
      "value": 4,
      "is-disabled": true
    }
  ],
  "variants": [
    {
      "title": "Default",
      "samples": {
        "id": "select",
        "placeholder": "Please select",
        "options": [
          {
            "label": null
          },
          {
            "label": "Show all",
            "value": -1
          },
          {
            "label": null
          },
          {
            "label": "Option 1",
            "value": 1
          },
          {
            "label": "Option 2",
            "value": 2
          },
          {
            "label": "Option 3",
            "value": 3
          },
          {
            "label": "Unavailable option",
            "value": 4,
            "is-disabled": true
          }
        ]
      }
    },
    {
      "title": "With Groups",
      "samples": {
        "id": "select",
        "placeholder": "Please select",
        "options": null,
        "optiongroups": [
          {
            "label": "Group 1",
            "options": [
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ]
          },
          {
            "label": "Group 2",
            "options": [
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ]
          }
        ]
      }
    },
    {
      "title": "Required",
      "states": "[required]",
      "samples": {
        "id": "uniqueID-required",
        "placeholder": "Please select",
        "options": [
          {
            "label": null
          },
          {
            "label": "Show all",
            "value": -1
          },
          {
            "label": null
          },
          {
            "label": "Option 1",
            "value": 1
          },
          {
            "label": "Option 2",
            "value": 2
          },
          {
            "label": "Option 3",
            "value": 3
          },
          {
            "label": "Unavailable option",
            "value": 4,
            "is-disabled": true
          }
        ],
        "is-required": true
      }
    },
    {
      "title": "Valid",
      "states": "[data-invalid=\"false\"]",
      "samples": {
        "id": "uniqueID-valid",
        "placeholder": "Please select",
        "options": [
          {
            "label": "Option 1",
            "value": 1
          },
          {
            "label": "Option 2",
            "value": 2,
            "is-selected": true
          },
          {
            "label": "Option 3",
            "value": 3
          }
        ],
        "is-required": true,
        "is-valid": true
      }
    },
    {
      "title": "Invalid",
      "states": "[data-invalid=\"true\"]",
      "samples": {
        "id": "uniqueID-invalid",
        "placeholder": "Please select",
        "options": [
          {
            "label": null
          },
          {
            "label": "Show all",
            "value": -1
          },
          {
            "label": null
          },
          {
            "label": "Option 1",
            "value": 1
          },
          {
            "label": "Option 2",
            "value": 2
          },
          {
            "label": "Option 3",
            "value": 3
          },
          {
            "label": "Unavailable option",
            "value": 4,
            "is-disabled": true
          }
        ],
        "is-required": true,
        "is-invalid": true
      }
    },
    {
      "title": "Disabled",
      "states": "[disabled]",
      "samples": {
        "id": "uniqueID-disabled",
        "placeholder": "Please select",
        "options": [
          {
            "label": null
          },
          {
            "label": "Show all",
            "value": -1
          },
          {
            "label": null
          },
          {
            "label": "Option 1",
            "value": 1
          },
          {
            "label": "Option 2",
            "value": 2
          },
          {
            "label": "Option 3",
            "value": 3
          },
          {
            "label": "Unavailable option",
            "value": 4,
            "is-disabled": true
          }
        ],
        "is-disabled": true
      }
    }
  ]
}
  • Content: 
    @import "_select.settings.psi";

@import "_select.settings";
@import "_select.styles";

%select {

    select {
        padding-top: calc(#{list.nth($field_padding, 1)} + #{math.floor(math.div(list.nth($field_border-width, 3), 2))});
        padding-bottom: calc(#{list.nth($field_padding, 1)} + #{math.ceil(math.div(list.nth($field_border-width, 3), 2))});
    }

}
  • URL: /components/raw/select/_select.scss
  • Filesystem Path: components/02-elements/select/_select.scss
  • Size: 367 Bytes
  • Content: 
    $select_marker_icon_stroke-width: 2 !default;
$select_marker_icon: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$select_marker_icon_stroke-width}" xmlns="http://www.w3.org/2000/svg"><path d="M11.255 13.4451L16 18.5551L20.745 13.4451"/></svg>' !default;
$select_marker_width: (1em * $_line-height) + (2 * list.nth($field_padding, 1)) !default;

// FIXME: Styles have to be independent from element "field" (maybe there could be a base component defining boxes).

$select_styles: $field_styles !default;
$select_states: $field_states !default;
  • URL: /components/raw/select/_select.settings.scss
  • Filesystem Path: components/02-elements/select/_select.settings.scss
  • Size: 594 Bytes
  • Content: 
    %select {
    @include stack-spacing();

    display: block;
    width: 100%;

    position: relative;

    user-select: none;

    &-marker {
        position: absolute;
        top: 50%; right: 0;

        transform: translateY(-50%);

        display: block;
        height: 100%;
        width: $select_marker_width;

        @include tinted-svg($select_marker_icon);

        pointer-events: none;
    }

    &::after {
        content: "";
        color: inherit;

        @extend %select-marker;
    }

    &[data-disabled="true"],
    &:has(select[disabled]) {
        color: $_disabled-color;
    }

    select {
        margin: 0;

        font-family: inherit;
        font-size: inherit;

        line-height: inherit;

        width: 100%;
        padding: $field_padding;
        padding-right: $select_marker_width;

        outline: transparent;

        -webkit-appearance: none;
        -moz-appearance: none;

        @include styles($select_styles);
        @include action-states($select_states);

        &:hover:not([disabled]) {
            cursor: pointer;
        }

            // IE10 Hack
        &::-ms-expand {
            display: none;
        }

        &[aria-invalid="false"] {

            &:not(:focus) {
                @include state-styles($select_states, valid);
            }

        }

        &[aria-invalid="true"] {

            &:not(:focus) {
                @include state-styles($select_states, invalid);
            }

        }

        &[disabled] {
            @include state-styles($select_states, disabled);
            cursor: default;
        }

    }

    option { // Fix for non-readable text in themed components on Windows
        background-color: $_PAGE-COLOR;
        color: $_TEXT-COLOR;
    }

}

.select {
    @extend %select;

    &-marker {
        @extend %select-marker;
    }

}
  • URL: /components/raw/select/_select.styles.scss
  • Filesystem Path: components/02-elements/select/_select.styles.scss
  • Size: 1.9 KB