Aeroporto di Bologna - Design System

Prodotti nel carrello 

<div class="c-folding">

    <div class="c-folding__item">
        <div class="c-product c-product--recap c-product--park-recap">

            <div class="c-product__info">

                <div class="c-product__type">
                    <img src="/images/svgs/p1-2.svg" alt="Parcheggio P1 e P2">
                    <div class="c-product__park-infos">
                        <button type="button" class="c-button c-button--icon-square js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-map">
                            <svg class="svg-16">
                                <use xlink:href="#ic-pin-map"></use>
                            </svg></button>
                        <button type="button" class="c-button c-button--icon-square is-pale js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-info">
                            <svg class="svg-16">
                                <use xlink:href="#ic_info_black_24px"></use>
                            </svg></button>
                    </div>
                </div>
                <div class="c-product__features">
                    <ul class="c-icon-list" aria-label="Caratteristiche parcheggio P1 e P2">
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-covered-parking-black-24px"></use>
                            </svg> <span class="c-icon-list__text">Coperto</span>
                        </li>
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic-accessible-black-24px"></use>
                            </svg> <span class="c-icon-list__text">Posti riservati</span>
                        </li>
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_place_black_24px"></use>
                            </svg> <span class="c-icon-list__text">Fronte aerostazione</span>
                        </li>
                        <li class="c-icon-list__item ">
                            <svg class="c-icon c-icon--24">
                                <use xlink:href="#ic_directions_walk_black_24px"></use>
                            </svg> <span class="c-icon-list__text">1 min. a piedi</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="c-product__schedule">

                <div class="c-product__labels">
                    <span class="c-rounded-label c-rounded-label--positive" aria-label="Stato della prenotazione: Pagato">

                        Pagato
                    </span> <span class="c-rounded-label c-rounded-label--grey" aria-label="">

                        CODICE <strong>1102935</strong>
                    </span> <span class="c-rounded-label c-rounded-label--dark" aria-label="Nome Cliente Mario Rossi">

                        Mario Rossi
                    </span>
                </div>

                <div class="c-product__time">
                    <div class="c-time-detail c-time-detail--product">
                        <div class="c-time-detail__span">
                            <div class="u-color-sky-120"><strong>Entrata</strong></div>
                            <div>Dal
                                <strong>
                                    <time datetime=2018/04/10>
                                        10/04/2018
                                    </time>
                                </strong>
                            </div>
                            <div>Ore <strong><time>20:30</time></strong></div>
                        </div>

                    </div>
                    <div class="c-time-detail c-time-detail--product">
                        <div class="c-time-detail__span">
                            <div class="u-color-sky-120"><strong>Uscita</strong></div>
                            <div>Dal
                                <strong>
                                    <time datetime=2018/04/20>
                                        20/04/2018
                                    </time>
                                </strong>
                            </div>
                            <div>Ore <strong><time>20:30</time></strong></div>
                        </div>

                    </div>
                </div>

                <div class="c-product__further">
                    <div class="c-product__further-item">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-print-black-24px"></use>
                        </svg>
                        <div class="js-product__print">
                            <button onclick="showLoadingPanel()" aria-label="Stampa la ricevuta del parcheggio" type="button">Stampa</button>
                        </div>
                    </div>
                </div>

            </div>

            <div class="c-product__fare">
                <div class="c-product__price">
                    <div class="c-product__price-value">
                        <span class="barred" aria-hidden="true">€ 92,00</span>
                        <strong class="c-product__value">€ 84,00</strong>
                    </div>
                    <div class="discount-text">
                        Tariffa totale per <strong>3 giorni</strong>
                    </div>
                </div>

            </div>

        </div>

        <div class="c-dialog c-dialog--parking-map js-fr-dialogmodal " id="">
            <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="-">
                <div role="document">
                    <p class="c-dialog__title" id="-"></p>

                    <div class="c-dialog__map">
                        <img src="https://maps.googleapis.com/maps/api/staticmap?center=&zoom=&size=x&markers=&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">

                        <div class="js-dialog-map" tabindex="-1">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1422.1440324056696!2d11.291909658337978!3d44.52973399477526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMxJzQ3LjAiTiAxMcKwMTcnMzQuOCJF!5e0!3m2!1sit!2sit!4v1518606203435" style="border:0" allowfullscreen></iframe>
                        </div>

                    </div>

                    <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                        <svg class="c-icon c-icon--32">
                            <use xlink:href="#ic_close_black_24px"></use>
                        </svg> </button>
                </div>
            </div>
        </div>
    </div>
    <div class="c-folding__item">
        <div class="c-product ">

            <div class="c-product__info">

                <div class="c-product__type">
                    <img src="" alt="">
                    <button type="" class="c-button ">

                    </button> <button type="" class="c-button ">

                    </button>
                </div>
                <div class="c-product__features">
                    <ul class="c-icon-list" aria-label="">
                    </ul>
                </div>
                <div class="c-product__schedule">
                    <div class="c-product__time c-product__time--desktop">
                        <div class="c-time-detail ">
                            <span class="c-time-detail__icon">
                                <svg class="">
                                    <use xlink:href="#"></use>
                                </svg> </span>
                            <span>
                        </div>
                        <div class="c-time-detail ">
                            <span class="c-time-detail__icon">
                                <svg class="">
                                    <use xlink:href="#"></use>
                                </svg> </span>
                            <span>
                        </div>
                    </div>
                </div>
                <div class="c-product__price c-product__price--mobile">
                    <span>Totale vip lounge</span>
                    <span class="barred" aria-hidden="true"></span>
                    <strong class="c-product__value"></strong>
                </div>
                <div class="c-product__remove">
                    <button type="" class="c-button ">

                    </button>
                </div>
            </div>

            <div class="c-product__time c-product__time--mobile">
                <div class="c-time-detail ">
                    <span class="c-time-detail__icon">
                        <svg class="">
                            <use xlink:href="#"></use>
                        </svg> </span>
                    <span>
                </div>
                <div class="c-time-detail ">
                    <span class="c-time-detail__icon">
                        <svg class="">
                            <use xlink:href="#"></use>
                        </svg> </span>
                    <span>
                </div>
            </div>

            <div class="c-product__fare">
                <div class="c-product__price c-product__price--desktop">
                    <span>Totale vip lounge</span>
                    <span class="barred" aria-hidden="true"></span>
                    <strong class="c-product__value"></strong>
                    <button type="" class="c-button ">

                    </button>
                </div>
            </div>

        </div>
    </div>

</div>
 
<div class="c-folding">

  {{#each items}}
  <div class="c-folding__item">
    {{render (lookup . "componentName") }}
  </div>
  {{/each}}

</div>
 
{
  "items": [
    {
      "componentName": "@product--park-recap"
    },
    {
      "componentName": "@product--vip-lounge-recap"
    }
  ]
}
  • Content: 
    $folding-item-zindex: 10;

.c-folding {

  z-index: $zIndex-folding;

  main & {
    // grid-column: full;

    // @include min-screen( $base-page-width ) {
      grid-column: main;
    // }
    
  }

}

.c-folding__item {
  position: relative;
  margin-bottom: 1rem;
  border-radius: remify(16px);

  .print-button-flight {
    display: none;

    @include min-screen( $base-page-width ) {
      display: block;
      position: absolute;
      right: remify(-28px);
      top: 50%;
      transform: translateY(-50%);
    }
    
  }

}

@for $i from 1 through 10 {

  .c-folding__item:nth-child( #{$i} ) {
    z-index: #{$folding-item-zindex - $i};
  }

}
  • URL: /components/raw/folding/_folding.scss
  • Filesystem Path: src/views/03-organisms/folding/_folding.scss
  • Size: 655 Bytes

No notes defined.