<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--left">
  <span class="tooltip__error"></span> ERROR message
</span>
  • Content:
    /*------------------------------------*\
        #MESSAGING INLINE
    \*------------------------------------*/
    
    // Check Tooltip CSS
    // Check Contextual Menu CSS
    
    .tooltip__error {
      background-color: $background-error;
      height: calc(100% + 2px);
      display: block;
      width: 30px;
      position: absolute;
      top: -1px;
    }
    
    .tooltip--right .tooltip__error,
    .tooltip--top .tooltip__error,
    .tooltip--bottom .tooltip__error,
    .tooltip--top-right .tooltip__error,
    .tooltip--bottom-right .tooltip__error {
      left: 0;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }
    
    .tooltip--right.tooltip--error,
    .tooltip--top.tooltip--error,
    .tooltip--bottom.tooltip--error,
    .tooltip--top-right.tooltip--error,
    .tooltip--bottom-right.tooltip--error {
      border-left: none;
      padding-left: 35px;
    }
    
    .tooltip--left .tooltip__error,
    .tooltip--top-left .tooltip__error,
    .tooltip--bottom-left .tooltip__error {
      right: 0;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
    
    .tooltip--left.tooltip--error,
    .tooltip--top-left.tooltip--error,
    .tooltip--bottom-left.tooltip--error {
      border-right: none;
      padding-right: 35px;
    }
    
    .tooltip__error:after {
      content: "\00d7";
      border-radius: $radius-circle;
      background-color: $background-default;
      color: $color-error;
      font-size: 20px;
      font-weight: 900;
      display: block;
      top: calc(50% - 7px);
      position: absolute;
      left: calc(50% - 7px);
      padding: 7px 0 6px 1px;
      line-height: 0;
    }
    
    .tooltip--error.tooltip--top:after,
    .tooltip--error.tooltip--top-left:after,
    .tooltip--error.tooltip--top-right:after {
      border-color: $border-error transparent transparent;
    }
    
    .tooltip--error.tooltip--top:before,
    .tooltip--error.tooltip--top-left:before,
    .tooltip--error.tooltip--top-right:before {
      border-color: $border-error transparent transparent;
    }
    
    .tooltip--error.tooltip--right:after {
      border-color: transparent $border-error transparent transparent;
    }
    
    .tooltip--error.tooltip--right:before {
      border-color: transparent $border-error transparent transparent;
    }
    
    .tooltip--error.tooltip--bottom:after,
    .tooltip--error.tooltip--bottom-left:after,
    .tooltip--error.tooltip--bottom-right:after {
      border-color: transparent transparent $border-error;
    }
    
    .tooltip--error.tooltip--bottom:before,
    .tooltip--error.tooltip--bottom-left:before,
    .tooltip--error.tooltip--bottom-right:before {
      border-color: transparent transparent $border-error;
    }
    
    .tooltip--error.tooltip--left:after {
      border-color: transparent transparent transparent $border-error;
    }
    
    .tooltip--error.tooltip--left:before {
      border-color: transparent transparent transparent $border-error;
    }
    
    .tooltip--error.tooltip--left:after,
    .tooltip--error.tooltip--right:after {
      top: 8px;
    }
    
    .tooltip--error.tooltip--left:before,
    .tooltip--error.tooltip--right:before {
      top: 7px;
    }
    
    .tooltip--error.tooltip--top:after,
    .tooltip--error.tooltip--top-right:after,
    .tooltip--error.tooltip--bottom:after,
    .tooltip--error.tooltip--bottom-right:after {
      left: 10px;
    }
    
    .tooltip--error.tooltip--top:before,
    .tooltip--error.tooltip--top-right:before,
    .tooltip--error.tooltip--bottom:before,
    .tooltip--error.tooltip--bottom-right:before {
      left: 9px;
    }
    
    .tooltip--error.tooltip--top-left:after,
    .tooltip--error.tooltip--bottom-left:after {
      right: 10px;
    }
    
    .tooltip--error.tooltip--top-left:before,
    .tooltip--error.tooltip--bottom-left:before {
      right: 9px;
    }
    
  • URL: /components/raw/messaging-inline/messaging-inline.scss
  • Filesystem Path: components/02-atoms/20-messaging-inline/messaging-inline.scss
  • Size: 3.4 KB