Select

<label class="u-label-04 u-color-base u-inline-block" for="">Label default</label>

<select class=" u-block u-size-full" name="select-name" id="select-id">

    <option>option 1</option>

    <option>option 2</option>

    <option>option 3</option>

    <option>option 4</option>

</select>
{% if label %}
<label class="{% if small %}u-label-03{% else %}u-label-04{% endif %} u-color-base u-inline-block" for="">{{label}}</label>
{% endif %}

<select class="{% if small %}c-form-size--small{% endif %} u-block u-size-full" {% if disabled %}disabled{% endif %} name="select-name" id="select-id">
  {% for i in range(0,4) %}
  <option>option {{i+1}}</option>
  {% endfor %}
</select>

{% if helper %}
<span class="c-form-helper">{{helper}}</span>
{% endif %}
/* No context defined. */
  • Content:
    // Name:            Select
    // Description:     Select in website's forms
    //
    // Component:       `c-form-select`
    //
    // ========================================================================
    
    // Variables
    // ========================================================================
    
    $select-icon-size: 16px;
    
    // ========================================================================
    
    select {
      padding-right: $padding-xlarge;
      background-image: var(--form-select-icon); 
      background-repeat: no-repeat;
      background-position: center right $padding-small;
      background-size: $select-icon-size;
      color: var(--body-color);
      @include appearance(none);
      @include user-select(none);
    
      option {
        @include type(label-03);
      }
    
      &:focus {
        --form-input-bg: inherit;
        box-shadow: 0;
      }
    }
    
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/lib/components/forms/select/select.scss
  • Size: 796 Bytes

No notes defined.