<div class="c-voucher-partial-form">

    <div class="c-voucher-partial-form__fieldset c-form">
        <p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
        <div grid="grid">
            <div grid="6@sm">
                <div class="c-voucher-partial-form__control">
                    <label for="input-departure-date" class="is-datepicker" aria-label="Scegli la data di partenza del volo">

                        Data di partenza <span class="required-marker" aria-hidden="true">*</span>

                        <input id="input-departure-date" type="date" class="" placeholder="" value="">

                    </label>

                </div>
            </div>
            <div grid="6@sm">
                <div class="c-voucher-partial-form__control">
                    <label for="input-flight-number" class="" aria-label="">

                        Numero volo <span class="required-marker" aria-hidden="true">*</span>

                        <input id="input-flight-number" type="text" class="" placeholder="" value="">

                    </label>

                </div>
            </div>
        </div>
        <p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
    </div>

    <div class="c-voucher-partial-form__selection">
        <p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
        <div grid="grid">
            <div grid="6@md">
                <div class="c-voucher-partial-form__selection-item">

                    <div class="c-selection c-selection--responsive">
                        <div class="c-selection__img-block">
                            <img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
                        </div>
                        <div class="c-selection__text">
                            <strong>Voucher elettronico parcheggi</strong>
                            <p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
                        </div>
                        <input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-20">
                        <label class="c-selection__label" for="voucher-20">
                            <span class="u-visuallyhidden">&lt;strong&gt;Voucher elettronico parcheggi&lt;/strong&gt;</span>
                        </label>
                        <div class="c-selection__input"></div>
                    </div>
                </div>
            </div>
            <div grid="6@md">
                <div class="c-voucher-partial-form__selection-item">

                    <div class="c-selection c-selection--responsive">
                        <div class="c-selection__img-block">
                            <img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
                        </div>
                        <div class="c-selection__text">
                            <strong>Riaccredito su [Carta di Credito]</strong>
                            <p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
                        </div>
                        <input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-44">
                        <label class="c-selection__label" for="credit-back-44">
                            <span class="u-visuallyhidden">&lt;strong&gt;Riaccredito su [Carta di Credito]&lt;/strong&gt;</span>
                        </label>
                        <div class="c-selection__input"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="c-voucher-partial-form{{#if modifier}} {{ modifier }}{{/if}}">

  {{!-- FIELDSET --}}
  <div class="c-voucher-partial-form__fieldset c-form">
    <p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
    <div grid="grid">
      <div grid="6@sm">
        <div class="c-voucher-partial-form__control">
          {{> @input--date input-departure-date }}
        </div>
      </div>
      <div grid="6@sm">
        <div class="c-voucher-partial-form__control">
          {{> @input--default input-flight-number }}
        </div>
      </div>
    </div>
    <p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
  </div>
  {{!-- END FIELDSET --}}

  {{!-- SELECTION --}}
  <div class="c-voucher-partial-form__selection">
    <p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
    <div grid="grid">
      <div grid="6@md">
        <div class="c-voucher-partial-form__selection-item">
          {{> @selection selection-voucher }}
        </div>
      </div>
      <div grid="6@md">
        <div class="c-voucher-partial-form__selection-item">
          {{> @selection selection-credit-back }}
        </div>
      </div>
    </div>
  </div>
  {{!-- END SELECTION --}}
  
</div>
{
  "selection-voucher": {
    "modifier": "c-selection--responsive",
    "text": "<strong>Voucher elettronico parcheggi</strong>",
    "extra-text": "(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)",
    "img": {
      "src": "/images/svgs/stk-voucher.svg",
      "alt": "Voucher digitale"
    },
    "input": {
      "id": "voucher",
      "name": "refund-option"
    }
  },
  "selection-credit-back": {
    "modifier": "c-selection--responsive",
    "text": "<strong>Riaccredito su [Carta di Credito]</strong>",
    "extra-text": "(Accredito entro 60 giorni dalla richiesta)",
    "img": {
      "src": "/images/svgs/stk-richiesta-rimborso.svg",
      "alt": "Riaccredito"
    },
    "input": {
      "id": "credit-back",
      "name": "refund-option"
    }
  },
  "input-departure-date": {
    "name": "input-departure-date",
    "label_id": "input-departure-date",
    "label_message": "Data di partenza",
    "label_class": "is-datepicker",
    "atom-input": {
      "id": "input-departure-date",
      "type": "date",
      "class": "",
      "placeholder": null,
      "required": true,
      "hasNote": false
    },
    "screen-reader-text": "Scegli la data di partenza del volo"
  },
  "input-flight-number": {
    "name": "input-flight-number",
    "label_id": "input-flight-number",
    "label_message": "Numero volo",
    "label_class": "",
    "atom-input": {
      "id": "input-flight-number",
      "type": "text",
      "class": "",
      "placeholder": "",
      "required": true,
      "hasNote": false
    }
  }
}
  • Content:
    .c-voucher-partial-form__fieldset {
      background-color: primary(sky, 10);
      color: primary(night, 120);
      padding: remify(24px) remify(16px);
      border-radius: remify(12px);
    }
    
    .c-voucher-partial-form__selection-item {
      height: 100%;
    
      & > .c-selection {
        height: 100%;
      }
    
    }
  • URL: /components/raw/voucher-partial-form/_voucher-partial-form.scss
  • Filesystem Path: src/views/03-organisms/voucher-partial-form/_voucher-partial-form.scss
  • Size: 280 Bytes

No notes defined.