<div class="form-item form-item--password form-item--form-example-password form-item--required">
    <label for="form-example-password" class="label label--password label--required">Password</label>
    <input type="password" id="form-example-password" name="password" class="input input--password" autocomplete="current-password">
</div>
<div class="form-item form-item--{{type}} form-item--{{id}}{{#if required}} form-item--required{{/if}}{{#if error}} form-item--error{{/if}}{{#each inputContainerClasses}} {{this}}{{/each}}">
  {{> @label required=required value=label id=id }}
  {{#if helpAnchor}}
  <a class="form-item__help-anchor" href="{{helpAnchor.path}}">{{helpAnchor.label}}</a>
  {{/if}}
  {{#if tooltip}}
  <button class="form-item__tooltip js-tooltip-open-link">
    {{render '@icons--question-mark-circle'}}
  </button>
  {{> @tooltip tooltip}}
  {{/if}}
  {{#if tooltip-drawer}}
  <button class="form-item__tooltip js-tooltip-drawer-open-link">
    {{render '@icons--question-mark-circle'}}
  </button>
  {{/if}}
  <input type="{{type}}" id="{{id}}"{{#if name}} name="{{name}}"{{/if}} class="input input--{{type}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if autocomplete}} autocomplete="{{autocomplete}}"{{/if}} {{#if disabled}} disabled{{/if}}{{#if value}} value="{{value}}"{{/if}}>
  {{#if error}}
  <span class="input-error">{{error}}</span>
  {{/if}}
</div>
{
  "id": "form-example-password",
  "name": "password",
  "type": "password",
  "label": "Password",
  "required": true,
  "autocomplete": "current-password"
}
  • Content:
    .form-item {
      position: relative;
      margin: 10px 0 15px;
    }
    
    .form-item__help-anchor {
      position: absolute;
      top: 0;
      right: 0;
      color: $color-primary;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-decoration: none;
    }
    
    .form-item__tooltip {
      @include reset-button;
      position: absolute;
      top: 3px;
      right: 0;
      fill: $color-medium-dark;
    
      .icon {
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-md) {
        right: $gutter-width-half;
      }
    }
    
    .form-item--disabled {
      opacity: .3;
    }
    
    .input,
    .textarea {
      display: block;
      width: 100%;
      min-height: 50px;
      padding: 10px 20px;
      border: 1px solid $color-medium-dark;
      border-radius: 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.8rem;
      box-sizing: border-box;
      -webkit-appearance: none;
    
      &:active,
      &:focus {
        border-color: $color-primary;
        outline: none;
      }
    
      .form-item--error & {
        margin-bottom: $gutter-width / 2;
        border-color: $color-error;
      }
    }
    
    .input-error {
      display: block;
      margin-top: 14px;
      clear: both;
      color: $color-error;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
    }
    
    .form-item--text-tooltip {
      position: relative;
    
      .tooltip {
        display: none;
        position: absolute;
        top: -6px;
        right: 25px;
        margin-left: 15px;
    
        &:before {
          top: 5px;
          right: -5px;
          left: auto;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 5px solid $color-primary;
          border-right-style: none;
        }
      }
    
      .js-tooltip--open {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        .js-tooltip--open {
          right: 35px;
        }
      }
    }
    
    .form-item--button-input {
      @include clearfix;
      margin: 0;
    }
    
    .subscribe-form__input,
    .button-input__input {
      @include text-label($color-darkest);
      display: block;
      width: calc(100% - 40px);
      height: 40px;
      padding-left: 10px;
      float: left;
      border: 1px solid $color-medium-dark;
      letter-spacing: 1px;
      box-sizing: border-box;
    
      &:focus {
        border-color: $color-primary;
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        flex: 1 0 8em;
        height: 50px;
      }
    }
    
    .subscribe-form__submit,
    .button-input__submit {
      width: 40px;
      height: 40px;
      padding: 2px 0;
      float: right;
      line-height: normal;
    
      .icon {
        fill: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        flex: 0 0 auto;
        width: auto;
        height: 50px;
        padding: 2px 10px 0;
    
        .icon {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 0 20px;
      }
    }
    
    .subscribe-form__submit-label,
    .button-input__submit-label {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        .button-input:not(.button-input--mini) & {
          display: inline;
        }
      }
    }
    
    .subscribe-form__small-submit-label,
    .button-input__small-submit-label {
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .form-item--zip-geolocate {
      @include clearfix;
      display: flex;
      height: auto;
    
      .icon--search {
        width: 20px;
        height: 20px;
        margin: 15px;
        padding: 0;
        fill: $color-white;
    
        @include breakpoint($breakpoint-xl) {
          display: none;
        }
      }
    }
    
    .zip-geolocate__input {
      display: block;
      flex: 1 0 auto;
      width: auto;
      margin: 0;
      float: left;
    }
    
    .zip-geolocate__submit-label {
      display: none;
      line-height: 50px;
    
      @include breakpoint($breakpoint-xl) {
        display: inline;
      }
    }
    
    .zip-geolocate__button {
      display: block;
      position: relative;
      float: left;
    }
    
    .zip-geolocate--zip {
      flex: 0 0 auto;
      width: 50px;
      height: 50px;
      margin-left: 0;
      padding: 0;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        margin-left: 20px;
        padding: 0 20px;
      }
    
      &:before {
        position: absolute;
        top: 10px;
        left: -16px;
        width: 0;
        height: 30px;
        border-right: 1px solid $color-light;
        content: ' ';
      }
    }
    
    .zip-geolocate--reset {
      display: none;
    
      .js-zip-geolocate--active & {
        display: block;
        position: absolute;
        top: 0;
        left: calc(100% - 100px);
        width: 50px;
        height: 50px;
        padding: 0;
    
        .icon {
          width: 14px;
          height: 14px;
          margin: 18px;
          fill: $color-medium-dark;
        }
    
        @include breakpoint($breakpoint-xl) {
          display: none;
        }
      }
    }
    
    .zip-geolocate--input-error {
      margin: 0 10px;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 11px;
      }
    }
    
  • URL: /components/raw/input/input.scss
  • Filesystem Path: src/components/01-elements/form-items/input/input.scss
  • Size: 4.4 KB

There are no notes for this item.