TheaterMania Component Library

Select 

<div class="form-input">
    <label class="label label--required">Lorem Ipsum Dolar</label>
    <div class="validation validation--select validation--required">
        <div class="select-icon-container">
            <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
        </div>
        <select name="select" class="select validation-item">
        <option value="pellentesque">Pellentesque eu pretium</option>
        <option value="nam-quam">Nam quam nunc blandit vel</option>
        <option value="donec-sodales">Donec sodales sagittis magna</option>
        <option value="consequat">Sed consequat leo eget</option>
    </select>
    </div>
</div>
 
<div class="form-input">
  {{#if label}}
    {{> @label required=required value=label}}
  {{/if}}
  <div class="validation validation--select{{#if required}} validation--required{{/if}}{{#if error}} validation--error{{/if}}">
    <div class="select-icon-container">
      {{render '@icons--arrow-bottom'}}
    </div>
    <select {{#if id}} id="{{id}}"{{/if}} {{#if name}} name="{{name}}"{{/if}} class="select validation-item">
      {{#each options}}
        <option value="{{key}}"{{#if attributes}} {{attributes}}{{/if}}>{{option}}</option>
      {{/each}}
    </select>
  </div>
  {{#if error}}
  <span class="input-error">{{error}}</span>
  {{/if}}
</div>
 
/* No context defined for this component. */
  • Content: 
    .select-icon-container {
  position: relative;

  .icon {
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }
}

.select {
  padding: 0.5rem;
  width: 100%;
  font-size: $ms-0;
  border: 1px solid $color-border;
  border-radius: $border-radius;
  font-family: $font-body;
  text-indent: 0.25rem;
  color: $color-text;
  background: none;
  appearance: none;

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

  &:hover,
  &:focus {
    cursor: pointer;
    border-color: $color-primary-light;

    .validation--error & {
      border-color: $color-error;
    }
  }
}
  • URL: /components/raw/select/Select.scss
  • Filesystem Path: src/components/01-Units/Form Elements/Select/Select.scss
  • Size: 610 Bytes

There are no notes for this item.