Maui Jim Style Guide

Input: Text (tooltip drawer) 

<div class="form-item form-item--text-tooltip form-item--form-example-sku">
    <label for="form-example-sku" class="label label--text-tooltip">Product SKU</label>
    <button class="form-item__tooltip js-tooltip-drawer-open-link">
    <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
    <input type="text-tooltip" id="form-example-sku" name="product-sku" class="input input--text-tooltip">
</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-sku",
  "name": "product-sku",
  "type": "text-tooltip",
  "label": "Product SKU",
  "tooltip-drawer": true
}
  • 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.