Aeroporto di Bologna - Design System

Fare: Stopover 

<div class="c-fare c-fare--stopover ">

    <div class="c-fare__header">
        <p class="c-fare__name">Promotional</p>
        <p class="c-fare__price">148,00€</p>
        <div class="c-fare__route">
            <div class="c-fare-route ">
                <div class="c-fare-route__detail">
                    <div class="c-fare-route__disclosure">
                        <div class="c-collapsible o-collapsible o-collapsible--raw">
                            <p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="">Dettaglio scali</p>
                            <p class="c-fare-route__type">Andata</p>
                            <ul class="c-fare-route__list">
                                <li>Bologna BLQ - Sofia IST</li>
                                <li>Sofia IST- SHARM EL SHEIKH / MARSA ALAM</li>
                            </ul>
                            <p class="c-fare-route__type">Ritorno</p>
                            <ul class="c-fare-route__list">
                                <li>SHARM EL SHEIKH / MARSA ALAM - Sofia IST</li>
                                <li>Sofia IST- Bologna BLQ</li>
                            </ul>
                        </div>

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

    <div class="c-fare__body">
        <div class="c-fare__item">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--positive">
                    <use xlink:href="#ic-confirm-24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">Bagaglio da stiva</div>
                <div class="c-fare__item-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>
                </div>
            </div>
        </div>
        <div class="c-fare__item unavailable">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--negative">
                    <use xlink:href="#ic_cancel_black_24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">
                    <p>Cambio biglietto</p>
                    <p class='not-available-txt'>(Non disponibile)</p>
                </div>
                <div class="c-fare__item-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>
                </div>
            </div>
        </div>
        <div class="c-fare__item unavailable">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--negative">
                    <use xlink:href="#ic_cancel_black_24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">
                    <p>Rimborso biglietto</p>
                    <p class='not-available-txt'>(Non disponibile)</p>
                </div>
                <div class="c-fare__item-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="c-fare__footer">
        <button type="button" class="c-button c-button--submit">

            Seleziona e continua

        </button>
    </div>
</div>
 
<div class="c-fare c-fare--stopover {{ modifier }}">

  <div class="c-fare__header">
    <p class="c-fare__name">Promotional</p>
    <p class="c-fare__price">148,00€</p>
    <div class="c-fare__route">
      {{ render "@fare-route" }}
    </div>
  </div>

  <div class="c-fare__body">
    {{#each items}}
    <div class="c-fare__item{{#if class}} {{class}}{{/if}}">
      <div class="c-fare__item-icon">
        {{> @icon fare-item-icon }}
      </div>
      <div class="c-fare__item-content">
        <div class="c-fare__item-title">{{{ title }}}</div>
        <div class="c-fare__item-body">{{{ body }}}</div>
      </div>
    </div>
    {{/each}}
  </div>

  <div class="c-fare__footer">
    {{> @button btn-submit }}
  </div>
</div>
 
{
  "fare-route-round": {
    "type": "Andata",
    "route-name": "Promotional: BLQ - IST",
    "disclosure": {
      "modifier": "o-collapsible--raw",
      "title": "Dettaglio scali",
      "other-route-name": "Flexible: IST - JFK"
    }
  },
  "fare-route-trip": {
    "type": "Ritorno",
    "route-name": "Business: JFK - IST",
    "disclosure": {
      "modifier": "o-collapsible--raw",
      "title": "Dettaglio scali",
      "other-route-name": "Executive: IST - BLQ"
    }
  },
  "items": [
    {
      "fare-item-icon": {
        "symbol": "ic-confirm-24px",
        "class": "c-icon c-icon--24 c-icon--positive"
      },
      "title": "Bagaglio da stiva",
      "body": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>"
    },
    {
      "class": "unavailable",
      "fare-item-icon": {
        "symbol": "ic_cancel_black_24px",
        "class": "c-icon c-icon--24 c-icon--negative"
      },
      "title": "<p>Cambio biglietto</p><p class='not-available-txt'>(Non disponibile)</p>",
      "body": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>"
    },
    {
      "class": "unavailable",
      "fare-item-icon": {
        "symbol": "ic_cancel_black_24px",
        "class": "c-icon c-icon--24 c-icon--negative"
      },
      "title": "<p>Rimborso biglietto</p><p class='not-available-txt'>(Non disponibile)</p>",
      "body": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores saepe molestiae vel, natus autem, qui similique doloremque rem adipisci.</p>"
    }
  ],
  "btn-submit": {
    "modifier": "c-button--submit",
    "type": "button",
    "text": "Seleziona e continua"
  }
}
  • Content: 
    .c-fare {
  --fare-padding: #{remify(24px)};
  display: flex;
  flex-direction: column;
  border-radius: remify(12px);
  overflow: hidden;
  @include shadow(high);
  background-color: secondary(soft, 100);
}

.c-fare__header {
  background-color: primary(night, 100);
  color: secondary(basic-white, 100);
  padding: var(--fare-padding);
}

.c-fare__route {
  border-top: remify(1px) solid primary(night, 40);
  padding-top: remify(16px);
  margin-top: remify(16px);
}

.c-fare__name {
  @include font-scale(level-2);
  text-align: center;
}

.c-fare__price {
  @include font-scale(level-6);
  font-weight: fw(bold);
  text-align: center;
}

.c-fare__body {
  padding: var(--fare-padding);
}

.c-fare__item {
  display: flex;
  gap: remify(8px);
  color: primary(night, 100);
}

.c-fare__item + .c-fare__item {
  margin-top: remify(16px);
}

.c-fare__item-title {
  @include font-scale(level-2);
  font-weight: fw(semibold);
  margin-bottom: remify(4px);

  .not-available-txt {
    @include font-scale(level-1);
    font-weight: fw(regular);
    margin-left: remify(4px);
  }

  * {
    display: inline-block;
  }

}

.c-fare__item-body {
  @include font-scale(level-1-5);
}

.c-fare__footer {
  padding-inline: var(--fare-padding);
  padding-bottom: var(--fare-padding);
  text-align: center;
  margin-top: auto;
}
  • URL: /components/raw/fare/_fare.scss
  • Filesystem Path: src/views/02-molecules/fare/_fare.scss
  • Size: 1.3 KB

No notes defined.