Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Select 

<!-- Default -->
<div class=" select ">
    <select>
        <option value="value">
            Option 1
        </option>
        <option value="value">
            Option 2
        </option>
    </select>
</div>


<!-- Disabled -->
<div class=" select ">
    <select disabled="">
        <option value="value">
            Option 1
        </option>
        <option value="value">
            Option 2
        </option>
    </select>
</div>


<!-- Invalid Or Required -->
<div class=" select -invalid">
    <select>
        <option value="value">
            Option 1
        </option>
        <option value="value">
            Option 2
        </option>
    </select>
</div>


<!-- Country Selector -->
<div class="footer__country-selector select -country-selector">
    <select>
        <option value="Germany">
            Germany
        </option>
        <option value="Lithuania">
            Lithuania
        </option>
    </select>
</div>


<div  class="{{ mixes }} select {{ modifiers }}">
  <select
    {{# id }} id="{{ id }}"{{/ id }}
    {{# name }} name="{{ name }}"{{/ name }}
    {{# disabled }} disabled=""{{/ disabled }}
  >
    {{#each options }}
      <option
        value="{{ value }}"
        {{# selected }} selected=""{{/ selected }}
      >
        {{ label }}
      </option>
    {{/ each }}
  </select>
</div>
 
/* Default */
{
  "options": [
    {
      "value": "value",
      "label": "Option 1"
    },
    {
      "value": "value",
      "label": "Option 2"
    }
  ]
}


/* Disabled */
{
  "options": [
    {
      "value": "value",
      "label": "Option 1"
    },
    {
      "value": "value",
      "label": "Option 2"
    }
  ],
  "disabled": true
}


/* Invalid Or Required */
{
  "options": [
    {
      "value": "value",
      "label": "Option 1"
    },
    {
      "value": "value",
      "label": "Option 2"
    }
  ],
  "modifiers": "-invalid"
}


/* Country Selector */
{
  "options": [
    {
      "value": "Germany",
      "label": "Germany"
    },
    {
      "value": "Lithuania",
      "label": "Lithuania"
    }
  ],
  "mixes": "footer__country-selector",
  "modifiers": "-country-selector"
}
  • Content: 
    .select {
  $size: 4.2rem;

  &.-country-selector {
    $symbol: map-get($icons, 'caret-down');

    display: flex;
    border: 0;

    select {
      flex-grow: 1;
      width: auto;
      padding: 0;
      padding-right: 2.6rem;
      appearance: none;

      &::-ms-expand {
        display: none;
      }
    }

    &::after {
      @include icon-content-extended($symbol, null, $size);

      display: inline-block;
      justify-content: flex-end;
      width: $size/2;
      margin-left: -$size/2;
      pointer-events: none;
      cursor: pointer;
    }
  }

  &:not(.-country-selector) {
    $symbol: map-get($icons, 'chevron-down');

    position: relative;
    height: 4.4rem;
    max-height: 4.4rem;
    border-width: 0.1rem;

    &::after {
      @include icon-content-extended($symbol, inline-block, $size);

      position: absolute;
      top: 0;
      right: 0;
      width: $size;
      height: $size + 0.02rem;
      text-align: center;
      pointer-events: none;
    }
  }

  & &-wrapper {
    background-color: $white;

    .label {
      padding-right: 5.2rem;
      padding-bottom: 0.2rem;
      overflow: hidden;
      font-size: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ul {
      position: relative;
      z-index: 9999;
      max-height: 20rem;
      margin-right: -1px;
      margin-left: -1px;
      padding: 0;
      overflow-y: auto;
      border: 1px solid $black;
      background-color: $white;
      list-style: none;

      li {
        padding: 0.4rem;

        label {
          width: 100%;
        }

        span {
          width: 100%;
        }
      }
    }
  }
}

select {
  border: 0;
}
  • URL: /components/raw/atoms-select/_select.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/08-form/04-select/_select.scss
  • Size: 1.7 KB

There are no notes for this item.