Lehigh Clutch Style Guide

Forms: Dropdown List 

<div class="form-item">
    <label for="select" class="form-item__label form-item__label--textfield">Dropdown List</label>
    <div class="form-item__dropdown">
        <select class="form-item__select">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
            <option>Option 6</option>
            <option>Option 7</option>
        </select>
    </div>
</div>
 
<div class="form-item">
  <label for="select" class="form-item__label form-item__label--textfield">Dropdown List</label>
  <div class="form-item__dropdown">
    <select class="form-item__select">
    {% for drop_item in drop_items %}
      <option>{{ drop_item.type }}</option>
    {% endfor %}
    </select>
  </div>
</div>
 
{
  "legend": "This is the legend",
  "list_items": {
    "1": {
      "key": 1,
      "item": "Option 1"
    },
    "2": {
      "key": 2,
      "checked": "checked",
      "item": "Option 2"
    },
    "3": {
      "key": 3,
      "item": "Option 3"
    },
    "4": {
      "key": 4,
      "checked": "checked",
      "item": "Option 4"
    }
  },
  "drop_items": {
    "1": {
      "type": "Option 1"
    },
    "2": {
      "type": "Option 2"
    },
    "3": {
      "type": "Option 3"
    },
    "4": {
      "type": "Option 4"
    },
    "5": {
      "type": "Option 5"
    },
    "6": {
      "type": "Option 6"
    },
    "7": {
      "type": "Option 7"
    }
  }
}
  • Content: 
    .checkbox-list,
.radiobutton-list{
  @include reset-list-nav;
}

.form-item {
  margin: $spacer 0;

  // &:first-of-type {
  //   margin: 0 0 $spacer 0;
  // }

  // &:last-of-type {
  //   margin: $spacer 0 0 0;
  // }
}

.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
  font-size: 1rem;
}

.search-name {
  position: relative;

  .search-name-box {
    min-width: 300px;
    background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
    background-size: 25px auto;
    height: 30px;

    .color-scheme-dark & {
      color: $white;
    }
  }

  #search-name-submit {
    -webkit-appearance: none;
    box-sizing: inherit;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;
    border-image: none;
    color: transparent;
    position: absolute;
    left: 250px;
    top: 1px;
    width: 55px;
    height: 30px;
    background-color: transparent;
  }
}

form {
  .hidden {
    visibility: hidden;
  }
}

.form-login {
  .color-scheme-dark & {
    background-color: $dark_mode_grey !important;
  }
}

.user-login-form {
  .custom-control-label {
    &::before,
    &::after {
      content: unset !important;
    }
  }

  .custom-control {
    padding-left: 0;
  }
}

.js-form-item {
  padding: 0 !important;

  label {
    &::before,
    &::after {
      content: unset !important; // remove the bootstrap box before form items
    }
  }

  .form-required {
    padding: 0 0 0 $spacer;

    &::before {
      content: '*' !important;
      color: $red;
      font-size: 1.25rem;
      position: relative;
      top: $spacer;
      left: $space_neg_one;
      border: 0;
      box-shadow: unset;
      background-color: unset;
    }
  }

  &.js-form-type-checkbox,
  &.form-type-radio {
    padding: 0 0 0 $space_and_half !important;

    .form-checkbox {
      opacity: 1;
    }
  }

  input {
    &[type="radio"] {
      height: auto;
      box-shadow: unset;
      position: relative;
      top: 15px;
      left: -20px;
      width: unset;
    }
  }
}

.webform-scale {
  .form-type-radio {
    border-top: 0;

    &:last-of-type {
      border-bottom: 0;
      padding: 0 !important;
    }
  }
}

.webform-button--submit {
  margin: $spacer 0 0 0;
}

.draggable {
  a {
    &.tabledrag-handle {
      border-bottom: none;

      .handle {
        width: 25px;
        height: 25px;
      }
    }
  }
}

.custom-range {
  height: unset;
}

.form-type-range {
  .form-type-number {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.form-wrapper {
  summary {
    &::before {
      content: unset;
    }
  }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: bits/02-general/forms/forms.scss
  • Size: 2.7 KB

Show a dropdown list.