PDJ Brandbox

select 

<div class="select select--small">
    <select name="" class="select__input">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>

    <div class="select__trigger">
        <span class="select__symbol">
            <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
            </svg>

        </span>
    </div>
</div>
 
<div class="select{{#if small}} select--small{{/if}}">
  <select name="{{name}}" class="select__input{{#if class}} {{class}}{{/if}}"{{#if disabled}} disabled{{/if}}{{#if required}} required{{/if}}>
    {{#each options}}
    <option value="{{this.value}}"{{#if disabled}} disabled{{/if}}{{#if selected}} selected{{/if}}>{{this.label}}</option>
    {{/each}}
  </select>

  <div class="select__trigger">
    <span class="select__symbol">
      {{render '@icon-chevron' }}
    </span>
  </div>
</div>
 
small: true
name: ''
required: false
disabled: false
options:
  - value: 10
    label: 10
  - value: 20
    label: 20
  - value: 50
    label: 50
  • Content: 
    .select {
  position: relative;
}

.select__input {
  display: block;
  width: 100%;
  height: var(--atom-height);
  padding: 0 var(--gap--10) 0 var(--gap--4);
  border: 1px solid var(--color--neutrals-10);
  border-radius: 0 !important;
  background-color: transparent;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
  font-size: var(--p--1);

  .select--small & {
    height: var(--atom-height--small);
    padding: 0 var(--gap--8) 0 var(--gap--2);
    border: 1px solid #C1C1C1;
    font-size: var(--p--2);
  }

  &[disabled]:not([disabled="false"]) {
    border: 1px solid var(--color--disabled);
    color: var(--color--disabled);
    cursor: not-allowed;
  }
}

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

select[multiple] option {
  white-space: normal;
}

.select__trigger {
  transition: transform 250ms;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-right: var(--gap--3);
  pointer-events: none;

  .select__input[disabled]:not([disabled="false"]) + & {
    color: var(--color--neutrals-3);
  }
}

.select__symbol {
  transform: rotate(90deg);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.select__symbol svg {
  width: 100%;
  height: 100%;
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: ../src/02_atoms/select/select.scss
  • Size: 1.3 KB

No notes defined.