There are no notes for this item.

<div class="form">
    <label for="name" class="input-box__label">Label of box</label>
    <input type="text" name="name" value="Value" class="input-box input-box--error">
    <p class="form__hint print-fine">Hint text</p>
    <span class="tooltip tooltip--contextual tooltip--error tooltip--large tooltip--top">
    <span class="tooltip__error"></span> ERROR message
    </span>
    <button type="button" class="contextual-menu contextual-menu--default">
    <span class="icon__info"></span>
    <span class="tooltip tooltip--large tooltip--contextual tooltip--top">
      Information about the item of the left of the icon
    </span>
  </button>

    <script>
        var triggerContextual = document.getElementsByClassName("contextual-menu");
        var triggerContextualOne = triggerContextual[0];
        var triggerContextualTwo = triggerContextual[1];
        var triggerContextualThree = triggerContextual[2];
        var triggerContextualFour = triggerContextual[3];
        triggerContextualOne.onclick = function() {
            this.classList.toggle("contextual-menu--active");
        };
        triggerContextualTwo.onclick = function() {
            this.classList.toggle("contextual-menu--active");
        };
        triggerContextualThree.onclick = function() {
            this.classList.toggle("contextual-menu--active");
        };
        triggerContextualFour.onclick = function() {
            this.classList.toggle("contextual-menu--active");
        };
    </script>
</div>
  • Content:
    /*------------------------------------*\
        #FORM ELEMENT
    \*------------------------------------*/
    
    // Check Inputbox CSS
    // Check Tooltip CSS
    // Check Contextual Menu CSS
    // Check Messagging Inline  CSS
    
    .form {
      position: relative;
      float: left;
    }
    
    .form__hint {
      position: absolute;
      color: inherit;
      margin: -10px 5px 0;
    }
    
    .input-box--error:focus ~ .tooltip--error,
    .input-box--error[checked] ~ .tooltip--error {
      display: block;
      position: absolute;
      bottom: 75%;
      left: 80%;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip,
    .input-box--error[checked] ~ .contextual-menu .tooltip {
      bottom: inherit;
      top: 25px;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip:before,
    .input-box--error[checked] ~ .contextual-menu .tooltip:before {
      border-width: 0 6px 8px 6px;
      border-color: transparent transparent $border-tooltip;
      bottom: inherit;
      top: -8px;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip:after,
    .input-box--error[checked] ~ .contextual-menu .tooltip:after {
      border-width: 0 5px 7px 5px;
      border-color: transparent transparent $border-tooltip-inner;
      bottom: inherit;
      top: -7px;
    }
    
  • URL: /components/raw/form-element/form-element.scss
  • Filesystem Path: components/03-molecules/04-form-element/form-element.scss
  • Size: 1.1 KB