<div class="messages messages--status">
    <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper
        euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
</div>
<div class="messages {{ modifier }}">
  <p>{{ text }}</p>
</div>
{
  "text": "Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus."
}
  • Content:
    .messages {
      max-width: 40rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding: .5rem 1rem;
      border: 1px solid $color-light-blue;
      border-radius: $radius-2;
      background-color: $color-white;
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    
      &::before {
        @extend %icon-base-css;
        @extend %icon-info-circle;
        display: block;
        margin-right: .5rem;
        margin-bottom: .5rem;
      }
    
      &.messages--status {
        border-left: 1rem solid darken($color-green, 10%);
        color: darken($color-green, 10%);
    
        &::before {
          @extend %icon-info-circle;
        }
      }
    
      &.messages--error {
        border-left: 1rem solid darken($color-red, 10%);
        color: darken($color-red, 10%);
    
        &::before {
          @extend %icon-error;
        }
      }
    
      &.messages--warning {
        border-left: 1rem solid darken($color-orange, 10%);
        color: darken($color-orange, 20%);
    
        &::before {
          @extend %icon-alert;
        }
      }
    
      a {
        color: inherit;
      }
    }
    
  • URL: /components/raw/status-message/_status-message.scss
  • Filesystem Path: components/31-molecules/status-message/_status-message.scss
  • Size: 940 Bytes

There are no notes for this item.