GDL - Global Design Language

notification: Infos 

<div class="c-notification c-notification--infos 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.",
  "modifier": "infos"
}
  • 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};
  }
}
script[type="text/blackstone+encrypted"][data-encrypted--error]::before{
  --notification-background: #{rgba($color-red, .2)};
  --notification-border: #{$color-red};
  font-size: 0.875rem !important;
  line-height: calc(1em + 4px);
  font-family: var(--font-sans-grotesk);
  font-weight: 400;
  background-color: var(--notification-background);
  border-left: 3px solid var(--notification-border);
  padding: 1rem;
  display: block;
  color: var(--body-color) !important;
}
  • URL: /components/raw/notification/_notification.scss
  • Filesystem Path: src/lib/components/notification/_notification.scss
  • Size: 1.5 KB

No notes defined.