Aeroporto di Bologna - Design System

Cards: Default 

<div class="c-cards o-cards " role="radiogroup" aria-label="">

    <label for="private">
        <input type="radio" name="user-type" id="private" class="u-visuallyhidden js-inverse-hover-input-toggle" aria-checked="false">
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card " aria-label="">

                <img src="../../images/svgs/personal-data.svg" class="o-card__img" alt="Utente privato" aria-hidden="true">

                <p class="c-card__text o-card__text">
                    Privato
                </p>

            </div>
        </div>
    </label>
    <label for="business">
        <input type="radio" name="user-type" id="business" class="u-visuallyhidden js-inverse-hover-input-toggle" aria-checked="false">
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card " aria-label="">

                <img src="../../images/svgs/business-user.svg" class="o-card__img" alt="Azienda o libero professionista" aria-hidden="true">

                <p class="c-card__text o-card__text">
                    Azienda o libero professionista
                </p>

            </div>
        </div>
    </label>
    <label for="agency">
        <input type="radio" name="user-type" id="agency" class="u-visuallyhidden js-inverse-hover-input-toggle" aria-checked="false">
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card " aria-label="">

                <img src="../../images/svgs/travel-agency.svg" class="o-card__img" alt="Agenzia viaggi" aria-hidden="true">

                <p class="c-card__text o-card__text">
                    Agenzia viaggi
                </p>

            </div>
        </div>
    </label>
    <label for="admin">
        <input type="radio" name="user-type" id="admin" class="u-visuallyhidden js-inverse-hover-input-toggle" aria-checked="false">
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card " aria-label="">

                <img src="../../images/svgs/public-amministration.svg" class="o-card__img" alt="Pubblica amministrazione" aria-hidden="true">

                <p class="c-card__text o-card__text">
                    Pubblica amministrazione
                </p>

            </div>
        </div>
    </label>

</div>
 
<div class="c-cards o-cards {{ modifier }}" role="radiogroup" aria-label="{{ aria-label }}">

  {{#each cards}}
    <label for="{{ id }}">
      <input type="radio" name="user-type" id="{{ id }}" class="u-visuallyhidden js-inverse-hover-input-toggle" 
      {{#if isChecked}}
        aria-checked="true"
      {{else}}
        aria-checked="false"
      {{/if}}
      {{#if isChecked}}checked{{/if}}
      >
      <div class="c-cards__item js-inverse-hover-item">
          {{> @card }}
      </div>
    </label>
  {{/each}}

</div>
 
{
  "cards": [
    {
      "id": "private",
      "img-path": "/images/svgs/personal-data.svg",
      "img-alt": "Utente privato",
      "text": "Privato"
    },
    {
      "id": "business",
      "img-path": "/images/svgs/business-user.svg",
      "img-alt": "Azienda o libero professionista",
      "text": "Azienda o libero professionista"
    },
    {
      "id": "agency",
      "img-path": "/images/svgs/travel-agency.svg",
      "img-alt": "Agenzia viaggi",
      "text": "Agenzia viaggi"
    },
    {
      "id": "admin",
      "img-path": "/images/svgs/public-amministration.svg",
      "img-alt": "Pubblica amministrazione",
      "text": "Pubblica amministrazione"
    }
  ]
}
  • Content: 
    .c-cards {

  &:hover .c-cards__item:not(:hover) {
    @include min-screen( bp(tablet-l) ) {
      opacity: .3;
    }
  }

  &:hover .c-cards__item--selected:not(:hover) {
    @include min-screen( bp(tablet-l) ) {
      opacity: 1;
    }
  }

  label {
    padding: 0;
    text-transform: initial;
    font-weight: initial;
    box-shadow: initial;
  }

  &.is-inInvestor {
    max-width: remify(1016px);
    margin-left: auto;
    margin-right: auto;
  }

}

.c-cards__item {
  transition: opacity .3s ease;
  position: relative;
  height: 100%;

  .c-form--youfirst & {
    height: auto;
    display: flex;
    flex-direction: column;

    & > .o-card {
      flex: 1 1 auto;
    }

  }

  .c-cards--geeky & {
    height: auto;
  }

}

.c-cards__item--selected {
  opacity: 1;
}

.c-cards__item--unselected {
  opacity: 0.3;
}

.c-cards__item--selected,
.c-cards input[type="radio"]:checked ~ .c-cards__item {

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: remify(-1px);
    width: remify(8px);
    height: 100%;
    border-radius: 0 remify(12px) remify(12px) 0;
    background-color: status(positive);
  }

}

/*------------------------------------*\
  Remove hover effect
\*------------------------------------*/

.c-cards--helpdesk,
.c-cards--geeky,
.c-cards--adv {

  &:hover .c-cards__item:not(:hover) {
    opacity: 1;
  }

}

/*------------------------------------*\
  Geeky modifier
\*------------------------------------*/

.c-cards--geeky {

  main & {
    grid-column: main;
  }

  .c-main--home-society &,
  .c-main--landing-golive & {
    margin-bottom: remify(80px);
  }



}

/*------------------------------------*\
  Adv modifier
\*------------------------------------*/

.c-cards--adv {

  main & {
    grid-column: main;
  }

}
  • URL: /components/raw/cards/_cards.scss
  • Filesystem Path: src/views/03-organisms/cards/_cards.scss
  • Size: 1.8 KB

No notes defined.