GDL - Global Design Language

Promotion: App 

<a href="#" aria-label="Promozione per app" class="c-promotion c-promotion--app u-p-base u-my-base  u-gap-base u-items-center u-justify-between u-size-full">
    <p class="u-m-none u-uppercase u-label-02"><strong>Scarica l’APP</strong> DI ROMATODAY e ricevi le notizie dalLA TUA CITTà</p>
    <svg aria-hidden="true" class="o-icon o-icon--sm c-promotion__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
    </svg>
</a>
 
<a 
  href="#" 
  aria-label="Promozione per {{modifier}}" 
  {% if modifier=="source" %}data-random--selected{% endif %}
  class="c-promotion {% if modifier %}c-promotion--{{modifier}}{% endif %} u-p-base u-my-base  u-gap-base u-items-center u-justify-between u-size-full">
  <p class="u-m-none u-uppercase u-label-02">{{ promo | safe }}</p>
  <svg aria-hidden="true" class="o-icon o-icon--sm c-promotion__icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
  </svg>
</a>
 
{
  "name": "default",
  "promo": "<strong>Scarica l’APP</strong> DI ROMATODAY e ricevi le notizie dalLA TUA CITTà",
  "modifier": "app"
}
  • Content: 
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;

.c-promotion {
  --_promo-accent: var(--theme-color);
  --_promo-text: var(--body-color);
  --_promo-bg: var(--background-color);
  --_promo-display: none;
  border-left: 4px solid var(--_promo-accent);
  color: var(--_promo-text);
  background-color: var(--_promo-bg);
  display: var(--_promo-display);
  text-decoration: none;

  &[data-random--selected]{
    --_promo-display: flex;
  }
 
  strong{
    color: var(--_promo-accent);
  }
  
  &__icon{
    stroke: var(--_promo-accent);
  }

  &--whatsapp{
    --_promo-accent: #{$social-whatsapp};
  }
  &--vision{
    --_promo-accent: #0076D1;
    --_promo-bg: #F4F6FB;
    
    [data-color-scheme*="dark"] & {
      --_promo-accent: #0076D1;
      --_promo-bg: #20213C;
      --_promo-text: #{$ui-01};
    }
  }
  &--dossier{
    --_promo-accent: #FFFF00;
    --_promo-bg: #{$ui-07};
    --_promo-text: #{$ui-01};
;
  }
  &--subscription{
    --_promo-accent: #{$interactive-01};
     [data-premium--no-ad] &{
      &[data-random--selected]{
        --_promo-display: none;
      }
    }
  }
}
  • URL: /components/raw/promotion/_promotion.scss
  • Filesystem Path: src/lib/components/promotion/_promotion.scss
  • Size: 1.3 KB

No notes defined.