GDL - Global Design Language

Switcher 

<div class="c-switcher">

    <input id="other" class="u-none" type="radio" name="switcher" value="other">

    <input id="month" class="u-none" type="radio" name="switcher" value="month" checked="checked">

    <input id="year" class="u-none" type="radio" name="switcher" value="year">

    <div class="c-switcher__options u-p-small u-size-fit u-flex u-justify-between u-gap-small u-relative u-m-auto">

        <div class="c-switcher__label u-label-02 u-uppercase u-color-inverse u-px-xsmall u-py-xxsmall u-radius-small u-absolute">Maggior risparmio</div>

        <label for="other" data-option-value="other" class="c-switcher__option u-cursor-pointer u-py-small u-px-base u-block u-relative u-z-base u-overflow-hidden">
            Altro
        </label>

        <label for="month" data-option-value="month" class="c-switcher__option u-cursor-pointer u-py-small u-px-base u-block u-relative u-z-base u-overflow-hidden">
            Mensile
        </label>

        <label for="year" data-option-value="year" class="c-switcher__option u-cursor-pointer u-py-small u-px-base u-block u-relative u-z-base u-overflow-hidden">
            Annuale
        </label>

    </div>

    <div class="c-switcher__panel u-py-large" data-time="other">
        <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
            <div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base


c-subscription--recomended">

                <div class="c-subscription__recomended u-size-full u-py-small u-px-xsmall u-text-center u label-05 u">La più scelta da voi</div>

                <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
                    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">AgrigentoNotizie Plus</h2>
                    <ul class="c-subscription__features u-body-04 u-list-none">

                        <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Sintesi della settimana via e-mail</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Dossier: Tutti gli approfondimenti della tua città</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

                    </ul>

                    <div class="c-subscription__price o-bg-base u-p-base u-radius-base u-flex u-column u-items-center u-gap-medium u-size-full u-relative u-justify-center">

                        <div class="c-subscription__promo u-label-02 u-uppercase u-color-inverse u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-top">Risparmi il 20%</div>

                        <div class="u-flex u-column u-items-center ">
                            <h3 class="u-heading-09 u-m-none">1€<span class="u-caption-01">/mese</span></h3>

                            <span class="u-block u-caption-01">per i primi 3 mesi poi 3,99 mese</span>

                        </div>

                        <button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  
    u-size-full u-justify-center c-btn--large u-label-04
  

  
    u-label-04
   

  " true>

                            Attiva subito

                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="c-switcher__panel u-py-large" data-time="month">
        <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
            <div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base

c-subscription--selected 
">

                <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
                    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">Basic</h2>
                    <ul class="c-subscription__features u-body-04 u-list-none">

                        <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Sintesi della settimana via e-mail</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Dossier: Tutti gli approfondimenti della tua città</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

                    </ul>

                    <div class="u-p-base u-flex u-column u-items-center u-border-divider u-border-1 u-border-solid u-relative u-size-full u-radius-base">
                        <div class="c-subscription__promo u-label-02 u-uppercase u-color-negative u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-whitespace u-top">Il tuo piano</div>
                        <div class="u-py-base">
                            <h3 class="u-title-05 u-m-none">1€<span class="u-caption-01">/mese</span></h3>
                        </div>
                        <div class="u-px-base l-list-border u-size-full">
                            <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                                <span>Data di attivazione </span>
                                <strong>24/05/2024</strong>
                            </div>
                            <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                                <span>Prossimo rinnovo</span>
                                <strong>24/05/2024</strong>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base


c-subscription--recomended">

                <div class="c-subscription__recomended u-size-full u-py-small u-px-xsmall u-text-center u label-05 u">La più scelta da voi</div>

                <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
                    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">AgrigentoNotizie Plus</h2>
                    <ul class="c-subscription__features u-body-04 u-list-none">

                        <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Sintesi della settimana via e-mail</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Dossier: Tutti gli approfondimenti della tua città</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

                    </ul>

                    <div class="c-subscription__price o-bg-base u-p-base u-radius-base u-flex u-column u-items-center u-gap-medium u-size-full u-relative u-justify-center">

                        <div class="c-subscription__promo u-label-02 u-uppercase u-color-inverse u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-top">Risparmi il 20%</div>

                        <div class="u-flex u-column u-items-center ">
                            <h3 class="u-heading-09 u-m-none">1€<span class="u-caption-01">/mese</span></h3>

                            <span class="u-block u-caption-01">per i primi 3 mesi poi 3,99 mese</span>

                        </div>

                        <button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  
    u-size-full u-justify-center c-btn--large u-label-04
  

  
    u-label-04
   

  " true>

                            Attiva subito

                        </button>
                    </div>

                </div>
            </div>
            <div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base


">

                <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
                    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">Full</h2>
                    <ul class="c-subscription__features u-body-04 u-list-none">

                        <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Sintesi della settimana via e-mail</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Dossier: Tutti gli approfondimenti della tua città</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

                    </ul>

                    <div class="c-subscription__price o-bg-base u-p-base u-radius-base u-flex u-column u-items-center u-gap-medium u-size-full u-relative u-justify-center">

                        <div class="u-flex u-column u-items-center ">
                            <h3 class="u-title-05 u-m-none">36€<span class="u-caption-01">/mese</span></h3>

                        </div>

                        <button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  
    u-size-full u-justify-center c-btn--large u-label-04
  

  
    u-label-04
   

  " true>

                            Attiva subito

                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="c-switcher__panel u-py-base" data-time="year">
        <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
            <div class="o-bg-gray u-p-base u-flex u-column u-gap-small u-items-center u-justify-center u-radius-base u-flex-one u-shadow-bottom u-mb-base" style="min-width: 320px;">
                <span class="u-heading-08 u-text-center u-block">
                    Ci dispiace, non sono disponibili nuovi abbonamenti per il tuo account
                </span>

                <button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
  
    c-btn--rounded
   
 
  

  
    u-label-04
   

  " true>

                    Vedi i tuoi abbonamenti

                </button>
            </div>
            <div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base

c-subscription--selected 
">

                <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
                    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">AgrigentoNotizie Plus</h2>
                    <ul class="c-subscription__features u-body-04 u-list-none">

                        <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Sintesi della settimana via e-mail</li>

                        <li class="c-subscription__feature u-mb-small u-relative">Dossier: Tutti gli approfondimenti della tua città</li>

                        <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

                    </ul>

                    <div class="u-p-base u-flex u-column u-items-center u-border-divider u-border-1 u-border-solid u-relative u-size-full u-radius-base">
                        <div class="c-subscription__promo u-label-02 u-uppercase u-color-negative u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-whitespace u-top">Il tuo piano</div>
                        <div class="u-py-base">
                            <h3 class="u-title-05 u-m-none">36€<span class="u-caption-01">/mese</span></h3>
                        </div>
                        <div class="u-px-base l-list-border u-size-full">
                            <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                                <span>Data di attivazione </span>
                                <strong>24/05/2024</strong>
                            </div>
                            <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                                <span>Prossimo rinnovo</span>
                                <strong>24/05/2024</strong>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
 
<div class="c-switcher">
  
  
  {% for option in options %}
    <input id="{{option.value}}" class="u-none" type="radio" name="switcher" value="{{option.value}}" {% if option.checked %}checked="checked"{% endif %}>
  {% endfor %}
  
  <div class="c-switcher__options u-p-small u-size-fit u-flex u-justify-between u-gap-small u-relative u-m-auto">
    {% if label %}
      <div class="c-switcher__label u-label-02 u-uppercase u-color-inverse u-px-xsmall u-py-xxsmall u-radius-small u-absolute">{{label}}</div>
    {% endif %}
    {% for option in options %}
      <label for="{{option.value}}" data-option-value="{{option.value}}" class="c-switcher__option u-cursor-pointer u-py-small u-px-base u-block u-relative u-z-base u-overflow-hidden">
        {{option.item}}
      </label>
    {% endfor %}
  </div>

  <div class="c-switcher__panel u-py-large" data-time="other">
    <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
        {% render "@subscription--plus" %} 
    </div>
  </div>
  <div class="c-switcher__panel u-py-large" data-time="month">
    <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
      {% render "@subscription--default", {selected: true}, true %}
        {% render "@subscription--plus" %}
        {% render "@subscription--full",{price: "36€"}, true %}  
    </div>
  </div>
  <div class="c-switcher__panel u-py-base" data-time="year">
    <div class="u-flex  u-overflow-x-auto u-justify-center@lg">
      <div class="o-bg-gray u-p-base u-flex u-column u-gap-small u-items-center u-justify-center u-radius-base u-flex-one u-shadow-bottom u-mb-base" style="min-width: 320px;">
        <span class="u-heading-08 u-text-center u-block">
          Ci dispiace, non sono disponibili nuovi abbonamenti per il tuo account
        </span>
        {% render "@button--primary", {label:'Vedi i tuoi abbonamenti', rounded: true}, true %}
      </div>
      {% render "@subscription--plus",{ selected: true, price: "36€"}, true %}
       
    </div>
  </div>
</div>
 
{
  "label": "Maggior risparmio",
  "options": [
    {
      "item": "Altro",
      "value": "other"
    },
    {
      "item": "Mensile",
      "checked": true,
      "value": "month"
    },
    {
      "item": "Annuale",
      "value": "year"
    }
  ]
}
  • Content: 
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/tools/v7/typography' as * ;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;

$radius: 3rem;

@keyframes selection {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}

@keyframes popup {
  0% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0%);
  }
}

.c-switcher {
  &__options {
    background-color: var(--background-color-gray);
    border-radius: #{$radius};
  }
  &__option{
    & {
      transition: font-weight .3s ease-in;
      width: fit-content;
      &::after{
        content: '';
        position: absolute;
        bottom: 50%;
        left: 50%;
        translate: -50% 50%;
        width: 40px;
        height: 40px;
        opacity: 0;
        border-radius: #{$radius};
        background-color: var(--background-color);
        @include z(underneath);
      }
    }
    @include type(label-11);
  }

  input[value="month"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="month"],
  input[value="year"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="year"],
  input[value="other"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="other"] {
    &::after{
      animation: selection 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
    }
    @include type(label-04);
  }

  &__label {
    background-color: $color-green;
    top: -1rem;
    right: 1rem;
  }

  input[value="month"]:checked ~ .c-switcher__panel[data-time="month"],
  input[value="year"]:checked ~ .c-switcher__panel[data-time="year"],
  input[value="other"]:checked ~ .c-switcher__panel[data-time="other"] {
    height: auto;
    opacity: 1;
    display: block;
    > * {
      animation: popup .6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
    }
  }

  &__panel {
    height: 0;
    opacity: 0;
    transition: height .9s ease-in-out, display .3s ease-in-out allow-discrete;
    overflow-y: hidden;
    display: none;
  }
}
  • URL: /components/raw/switcher/_switcher.scss
  • Filesystem Path: src/lib/components/switcher/_switcher.scss
  • Size: 2.1 KB

No notes defined.