Aeroporto di Bologna - Design System

Payment 

<div class="c-payment">
    <div class="c-payment__header">
        <img src="../../images/svgs/stk-coupon.svg" alt="Paga online" class="c-payment__header-img">
        <p class="c-payment__title"><strong>Paga online</strong> - Risparmia 27€<br>(tariffa valida solo fino a 24 ore dall’inizio della sosta)</p>
    </div>
    <ul class="c-payment__list c-form">
        <li class="c-payment__list-item">
            <div class="radio"><input type="radio" id="credit-cart" name="online-methods" value="" class=" u-visuallyhidden">
                <label class="" for="credit-cart">Carta di credito</label>
            </div>
            <div class="c-payment__pics">
                <img src="/images/svgs/visa2.svg" alt="Visa" class="c-payment__pic">
                <img src="/images/svgs/mastercard2.svg" alt="Mastercard" class="c-payment__pic">
                <img src="/images/svgs/jcb.svg" alt="JCB" class="c-payment__pic">
            </div>
        </li>
        <li class="c-payment__list-item">
            <div class="radio"><input type="radio" id="satispay" name="online-methods" value="" class=" u-visuallyhidden">
                <label class="" for="satispay">Satispay</label>
            </div>
            <div class="c-payment__pics">
                <img src="/images/svgs/satispay.svg" alt="Satispay" class="c-payment__pic">
            </div>
        </li>
    </ul>
    <div class="c-payment__info"><button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-online-payment-methods">

            Più informazioni

        </button></div>
</div>
 
<div class="c-payment{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-payment__header">
    {{#if header.img}}
    <img src="{{ path header.img.src }}" alt="{{ header.img.alt }}" class="c-payment__header-img">
    {{/if}}
    <p class="c-payment__title">{{{ header.title }}}</p>
  </div>
  <ul class="c-payment__list c-form">
    {{#each payment-items}}
    <li class="c-payment__list-item">
      <div class="radio">{{> @radiobutton radio }}</div>
      {{#if this.pics}}
      <div class="c-payment__pics">
        {{#each this.pics }}
        <img src="{{ this.src }}" alt="{{ this.alt }}" class="c-payment__pic">
        {{/each}}
      </div>
      {{/if}}
    </li>
    {{/each}}
  </ul>
  <div class="c-payment__info">{{> @button btn-info }}</div>
</div>
 
{
  "header": {
    "title": "<strong>Paga online</strong> - Risparmia 27€<br>(tariffa valida solo fino a 24 ore dall’inizio della sosta)",
    "img": {
      "src": "/images/svgs/stk-coupon.svg",
      "alt": "Paga online"
    }
  },
  "payment-items": [
    {
      "radio": {
        "id": "credit-cart",
        "name": "online-methods",
        "text": "Carta di credito"
      },
      "pics": [
        {
          "src": "/images/svgs/visa2.svg",
          "alt": "Visa"
        },
        {
          "src": "/images/svgs/mastercard2.svg",
          "alt": "Mastercard"
        },
        {
          "src": "/images/svgs/jcb.svg",
          "alt": "JCB"
        }
      ]
    },
    {
      "radio": {
        "id": "satispay",
        "name": "online-methods",
        "text": "Satispay"
      },
      "pics": [
        {
          "src": "/images/svgs/satispay.svg",
          "alt": "Satispay"
        }
      ]
    }
  ],
  "btn-info": {
    "type": "button",
    "text": "Più informazioni",
    "modifier": "c-button--as-link js-fr-dialogmodal-open",
    "opens-dialog": "dialog-online-payment-methods"
  }
}
  • Content: 
    .c-payment {
  background-color: secondary(soft, 100);
  border-radius: remify(16px);
  border: remify(1px) solid primary(night, 20);
  padding: remify(16px);
}

.c-payment__header {
  display: flex;
  align-items: center;
}

.c-payment__header-img {
  margin-right: remify(8px);
  width: remify(40px);
}

.c-payment__title {
 @include font-scale(level-2);
}

.c-payment__list {
  margin-top: remify(24px);
}

.c-payment__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: remify(8px);
  padding-bottom: remify(8px);

  @include min-screen(bp(tablet)) {
    padding-left: remify(12px);
    padding-right: remify(12px);
  }
}

// .c-payment__list-item + .c-payment__list-item {
//   margin-top: remify(12px);
// }

.c-payment__pic + .c-payment__pic {
  @include min-screen(bp(tablet)) {
    margin-left: remify(16px);
  }
}

.c-payment__info {
  margin-top: remify(24px);

  button {
    cursor: pointer;
  }

  @include min-screen(bp(tablet)) {
    padding-left: remify(24px);
  }

}

.c-payment__info .c-button {
  color: primary(night, 120);
 @include font-scale(level-2, semibold);
}

.c-payment__list-item.is-selected {
  background-color: primary(sky, 10);
}
  • URL: /components/raw/payment/_payment.scss
  • Filesystem Path: src/views/03-organisms/payment/_payment.scss
  • Size: 1.2 KB

No notes defined.