<!-- Notification starts -->
<div class="c-notification c-notification--deploy-development">
    <p>Welcome! You´re on the development environment!</p>
</div>
<!-- Notification ends -->
<!-- Notification starts -->
<div class="c-notification c-notification--deploy-{{environment}}">
  <p>Welcome! You´re on the {{environment}} environment!</p>
</div>
<!-- Notification ends -->
{
  "environment": "development"
}
  • Content:
    .c-notification {
      position: sticky;
      top: 0;
      margin: 0 -#{$space-xl};
      padding: $space-xxs $space-xl;
      background-color: $color-brand-primary-100;
      color: $color-brand-primary-700;
      z-index: 100;
      animation: 0.8s slidein--top;
    }
    
      .c-notification--deploy-staging {
        background-color: lighten($color-order-history, 10%);
        color: darken($color-order-history, 30%);
      }
    
      .c-notification--deploy-development {
        background-color: $color-reporting;
        color: $color-white;
      }
    
  • URL: /components/raw/notification/_notification.scss
  • Filesystem Path: components/_code-components/notification/_notification.scss
  • Size: 494 Bytes

There are no notes for this item.