GDL - Global Design Language

Select: Select -- small 

<label class="u-label-03 u-color-base u-inline-block" for="">Label small</label>

<select class="c-form-size--small 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 %}
 
{
  "label": "Label small",
  "small": true
}
  • 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.