Parking Price

<div class="c-parking-price">
    <p class="c-parking-price__text">Totale per 1 giorno solo pagando online</p>
    <div class="c-parking-price__values">
        <p class="c-parking-price__old">€ 15,00</p>
        <p class="c-parking-price__current">€ 12,00</p>
    </div>
</div>
<div class="c-parking-price">
  <p class="c-parking-price__text">{{{defaultValue fare.text 'Totale per 1 giorno solo pagando online'}}}</p>
  {{#if fare.price}}
  <div class="c-parking-price__values">
    {{#if fare.old-price}}
      <p class="c-parking-price__old">{{defaultValue fare.old-price '€ 15,00'}}</p>
    {{/if}}
    <p class="c-parking-price__current">{{defaultValue fare.price '€ 12,00'}}</p>
  </div>
  {{/if}}
</div>
{
  "fare": {
    "old-price": "€ 15,00",
    "price": "€ 12,00"
  }
}
  • Content:
    .c-parking-price {
      // @include min-screen(bp(phablet)) {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
      // }
    }
    
    .c-parking-price__text {
      @include font-scale(level-1);
      color: primary(night, 80);
    }
    
    .c-parking-price__values {
      display: flex;
      flex-direction: column;
      align-items: baseline;
    
      @include min-screen(remify(400px)) {
        gap: remify(8px);
        flex-direction: row;
      }
    }
    
    .c-parking-price__old {
      @include font-scale(level-1-5);
      text-decoration: line-through;
      
      @include min-screen(bp(phablet)) {
        @include font-scale(level-2);
      }
    }
    
    .c-parking-price__current {
      @include font-scale(level-4, bold);
    
      @include min-screen(bp(phablet)) {
        @include font-scale(level-5, bold);
      }
    }
  • URL: /components/raw/parking-price/_parking-price.scss
  • Filesystem Path: src/views/01-atoms/parking-price/_parking-price.scss
  • Size: 742 Bytes

No notes defined.