Aeroporto di Bologna - Design System

Cards: Adv 

<div class="c-cards c-cards--adv o-cards ">

    <div class="o-cards__item c-cards__item">
        <img src="../../images/adv-weekend.jpg" alt="Sconto weekend">
    </div>
    <div class="o-cards__item c-cards__item">
        <img src="../../images/adv-discount-mbl.jpg" alt="Sconto 20% mbl">
    </div>
    <div class="o-cards__item c-cards__item">
        <img src="../../images/adv-conventions.jpg" alt="Sconto convenzioni">
    </div>
    <div class="o-cards__item c-cards__item">
        <img src="../../images/adv-ticket-online.jpg" alt="Sconto su biglietti online">
    </div>

</div>
 
<div class="c-cards c-cards--adv o-cards {{ modifier }}">

  {{#each cards}}
    <div class="o-cards__item c-cards__item">
      <img src="{{ path img-path }}" alt="{{ img-alt }}">
    </div>
  {{/each}}

</div>
 
{
  "cards": [
    {
      "img-path": "/images/adv-weekend.jpg",
      "img-alt": "Sconto weekend"
    },
    {
      "img-path": "/images/adv-discount-mbl.jpg",
      "img-alt": "Sconto 20% mbl"
    },
    {
      "img-path": "/images/adv-conventions.jpg",
      "img-alt": "Sconto convenzioni"
    },
    {
      "img-path": "/images/adv-ticket-online.jpg",
      "img-alt": "Sconto su biglietti online"
    }
  ]
}
  • 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.