GDL - Global Design Language

notification: Default 

<div class="c-notification  u-p-base u-my-base">
    Proseguendo dichiari di accettare le condizioni particolari del servizio richiesto e, salvo disdetta il rinnovo automatico dello stesso.
</div>
 
<div class="c-notification {% if modifier %}c-notification--{{modifier}}{% endif %} u-p-base u-my-base">
  {{text}}
</div>
 
{
  "name": "default",
  "text": "Proseguendo dichiari di accettare le condizioni particolari del servizio richiesto e, salvo disdetta il rinnovo automatico dello stesso."
}
  • Content: 
    @use "sass:color";
@use "../../../assets/sass/tools/v7/typography" as *;
@use "../../../assets/sass/settings/v7/colors.tokens" as *;

.c-notification {
  --notification-background: var(--background-color);
  --notification-border: var(--divider-color);
  &:empty,
  &:has(input[type="hidden"]:only-child){
    display: none;
  }
  &{
    background-color: var(--notification-background);
    border-left: 3px solid var(--notification-border);
  }
  ul > li::marker {
    color: var(--notification-border);
  }
  @include type(body-04);
  &--infos {
    --notification-background: #{rgba($color-blue, .2)};
    --notification-border: #{$color-blue};
  }
  &--warning {
    --notification-background: #{rgba($color-warning, .4)};;
    --notification-border: #{$color-warning};
  }
  &--error {
    --notification-background: #{rgba($color-red, .2)};
    --notification-border: #{$color-red};
  }
  &--success {
    --notification-background: #{rgba($color-green, .3)};
    --notification-border: #{$color-green};
  }
}
  • URL: /components/raw/notification/_notification.scss
  • Filesystem Path: src/lib/components/notification/_notification.scss
  • Size: 1 KB

No notes defined.