page: txp5

Core SASS

form: txp5_scss

_messagepane.scss modified 55 days ago


    
      @use "../2-atoms/beam";
.messagepane {
  // &:empty {
  //   display: none;
  // }

}


.messageflash {
  @extend %beam !optional;
  padding: var(--base-unit--s) var(--base-unit);
  font-family: var(--serif);
  overflow: auto;
  strong {
    font-family: var(--sans);
  }
  &.success {
    background-color: var(--clr-success);
    color: var(--white);
  }
  &.warning {
    background-color: var(--clr-warning);
  }

  &.error {
    background-color: var(--clr-error);
    color: var(--white);
  }
}

    

  

Source html

        
          <div class="messagepane" id="messagepane">
  <span class="messageflash success" role="alert" aria-live="assertive">
    <span class="ui-icon ui-icon-check"></span>
    Aestheticism jugendstil <strong>russian</strong> futurism. 
    <button class="close txp-reduced-ui-button" title="Close">
       <span class="ui-icon ui-icon-close">Close</span>
    </button>
  </span>
</div>

<div class="messagepane" id="messagepane">
  <span class="messageflash warning" role="alert" aria-live="assertive">
    <span class="ui-icon ui-icon-info"></span>
    Neo-expressionism abstract expressionism, superstroke aestheticism postmodern art avant-garde photorealism, secularism caravaggisti.  land art tonalism caravaggisti.
    <button class="close txp-reduced-ui-button" title="Close">
       <span class="ui-icon ui-icon-close">Close</span>
    </button>
  </span>
</div>

<div class="messagepane" id="messagepane">
  <span class="messageflash error" role="alert" aria-live="assertive">
    <span class="ui-icon ui-icon-alert"></span>
    Orphism synthetism conceptual art structuralism minimalism.
<button class="close txp-reduced-ui-button" title="Close">
       <span class="ui-icon ui-icon-close">Close</span>
    </button>
  </span>
</div>