Lehigh Clutch Style Guide

Forms: Search Name 

<form>
    <div class="search-name">
        <input class="search-name-box" type="text" name="textfield" placeholder="Search by Name" />
        <label class="hidden" for="top-search-submit">Submit Search</label>
        <input id="search-name-submit" class="show" type="submit" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</form>
 
<form>
    <div class="search-name">
    <input class="search-name-box" type="text" name="textfield" placeholder="Search by Name" />
    <label class="hidden" for="top-search-submit">Submit Search</label>
    <input id="search-name-submit" class="show" type="submit" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</form>
 
{
  "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"
    }
  }
}
  • 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;
  }
}

.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: 1.7 KB

Show what the form will look like.