<div class="c-convention c-convention--telepass" role="radiogroup" aria-label="Scegli se usare il telepass oppure no">

    <img src="../../images/svgs/telepass.svg" alt="logo telepass" class="c-convention__logo">

    <p class="c-convention__title">Vuoi pagare con Telepass per questa prenotazione?</p>
    <p class="c-convention__description"></p>

    <input type="radio" id="radio_telepass_loggedin" name="check_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
    <label class="c-convention__choice-input" for="radio_telepass_loggedin"><strong></strong>, pago con Telepass in aerostazione<br><span class='u-typo-level-1-5'>Tariffa standard <strong>128,90€</strong></span></label> <input type="radio" id="radio_no_telepass" name="check_telepass" value="" class="is-block u-visuallyhidden">
    <label class="c-convention__choice-input" for="radio_no_telepass"><strong>No</strong>, continuo senza Telepass<br><span class='u-typo-level-1-5'>Tariffa scontata se pago online <strike>128,90</strike><strong>€ 100,90€</strong></span></label>
    <div class="c-convention__content u-chkbx-toggleReceiver">
        <p class="c-convention__subtitle">Con quale dispositivo vuoi pagare?</p>

        <div class="u-mb-space-16">

            <input type="radio" id="radio_telepass_registered" name="choose_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
            <label class="c-convention__choice-input" for="radio_telepass_registered">N° dispositivo telepass <strong>00981537645</strong></label>

            <div class="c-convention__subcontent c-convention__subcontent--registered-telepass u-chkbx-toggleReceiver">
                <input type="checkbox" id="confirm_telepass" name="confirm_telepass" class="u-visuallyhidden " role="group" aria-label="confirm_telepass">

                <label for="confirm_telepass" class="is-block">
                    Confermo che il numero del dispositivo è corretto e corrisponde all’apparato che intendo usare per questa prenotazione
                </label>
            </div>

        </div>

        <div class="u-mb-space-16">

            <input type="radio" id="radio_telepass_new" name="choose_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
            <label class="c-convention__choice-input" for="radio_telepass_new">Un nuovo telepass</label>

            <div class="c-convention__subcontent c-convention__subcontent--new-telepass u-chkbx-toggleReceiver">

                <label for="field-telepass-number" class="" aria-label="">

                    N° del Telepass <span class="required-marker" aria-hidden="true">*</span>

                    <input id="field-telepass-number" type="text" class="" placeholder="" value="" aria-describedby="telepass-number-note">

                    <p class="c-field__note " id="telepass-number-note">
                        Inserisci il codice identificativo
                    </p>

                </label>

                <input type="checkbox" id="confirm_registered_telepass" name="confirm_registered_telepass" class="u-visuallyhidden " role="group" aria-label="confirm_registered_telepass">

                <label for="confirm_registered_telepass" class="is-block">
                    Confermo il mio numero di Telepass
                </label>
                <div class="c-media o-media c-media--sticker">
                    <img class="c-media__figure o-media__figure" src="../../images/svgs/stk_telepass-app-120px.svg" alt="Numero dispositivo Telepass" height="" width="">
                    <div class="c-media__body o-media__body">
                        Puoi trovare il tuo n° dispositivo Telepass <strong>dalla tua area riservata del sito telepass.it o dall’App Telepass</strong>.
                        <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="">Apri foto di esempio</button>
                    </div>
                </div>
                <div class="c-media o-media c-media--sticker">
                    <img class="c-media__figure o-media__figure" src="../../images/svgs/stk_telepass-code-120px.svg" alt="Numero dispositivo Telepass" height="" width="">
                    <div class="c-media__body o-media__body">
                        Puoi trovare il tuo n° dispositivo Telepass anche sul retro del tuo dispositivo (10 cifre).
                        <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-controller">Apri foto di esempio</button>
                    </div>
                </div>
                <div class="c-alert c-alert--lightinfo c-alert--full-rounded">

                    <div class="c-alert__icon">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_info_black_24px"></use>
                        </svg>
                    </div>

                    <p class="c-alert__message">
                        Fai attenzione, il codice cliente <strong>non è</strong> il numero di dispositivo Telepass. Affinché la prenotazione ti venga riconosciuta, presta attenzione ad inserire il numero corretto.
                    </p>

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

    </div>

</div>
<div class="c-convention {{ modifier }}" role="radiogroup" aria-label="Scegli se usare il telepass oppure no">

  <img src="{{ path logo }}" alt="{{ alt }}" class="c-convention__logo">

  <p class="c-convention__title">{{{ title }}}</p>
  <p class="c-convention__description">{{{ description }}}</p>
  
  {{#each radiobuttons }}
    {{> @radiobutton }}
  {{/each}}

  <div class="c-convention__content u-chkbx-toggleReceiver">
    <p class="c-convention__subtitle">Con quale dispositivo vuoi pagare?</p>

    {{!-- opzione 1: telepass già registrato --}}

    <div class="u-mb-space-16">

      <input type="radio" id="radio_telepass_registered" name="choose_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
      <label class="c-convention__choice-input" for="radio_telepass_registered">N° dispositivo telepass <strong>00981537645</strong></label>

      {{!-- questo div appare quando seleziono il telepass registrato --}}

      <div class="c-convention__subcontent c-convention__subcontent--registered-telepass u-chkbx-toggleReceiver">
        {{> "@checkbox--default" checkboxConfirmTelepass}}
      </div>

    </div>

    {{!-- opzione 2: inserisco nuovo telepass --}}

    <div class="u-mb-space-16">

      <input type="radio" id="radio_telepass_new" name="choose_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
      <label class="c-convention__choice-input" for="radio_telepass_new">Un nuovo telepass</label>

      {{!-- questo div appare quando seleziono "un nuovo telepass" --}}

      <div class="c-convention__subcontent c-convention__subcontent--new-telepass u-chkbx-toggleReceiver">

        
        {{> @input input }}
        
        {{> @checkbox checkboxConfirm }}

        {{> @media telepassApp }}
        {{> @media telepassCode }}

        {{> "@alert--light-info" alertLightinfo }}
  
      </div>
    </div>

  </div>

</div>
{
  "modifier": "c-convention--telepass",
  "logo": "/images/svgs/telepass.svg",
  "alt": "logo telepass",
  "title": "Vuoi pagare con Telepass per questa prenotazione?",
  "text-info-input": "<strong>Dove posso trovare il mio n° di apparato Telepass?</strong><br>Il codice identificativo lo trovi sotto il codice a barre presente a lato del tuo apparato Telepass.",
  "input": {
    "label_id": "field-telepass-number",
    "label_message": "N° del Telepass",
    "atom-input": {
      "id": "field-telepass-number",
      "type": "text",
      "class": "",
      "required": true,
      "hasNote": true,
      "describedby": "telepass-number-note"
    },
    "note_id": "telepass-number-note",
    "note_message": "Inserisci il codice identificativo"
  },
  "radiobuttons": [
    {
      "input-class": "is-block u-chkbx-toggle",
      "id": "radio_telepass_loggedin",
      "name": "check_telepass",
      "text": "<strong>Sì</strong>, pago con Telepass in aerostazione<br><span class='u-typo-level-1-5'>Tariffa standard <strong>128,90€</strong></span>",
      "label-class": "c-convention__choice-input"
    },
    {
      "input-class": "is-block",
      "id": "radio_no_telepass",
      "name": "check_telepass",
      "text": "<strong>No</strong>, continuo senza Telepass<br><span class='u-typo-level-1-5'>Tariffa scontata se pago online <strike>128,90</strike><strong>€ 100,90€</strong></span>",
      "label-class": "c-convention__choice-input"
    }
  ],
  "checkboxConfirm": {
    "class": "is-block",
    "id": "confirm_registered_telepass",
    "name": "confirm_registered_telepass",
    "text": "Confermo il mio numero di Telepass",
    "checkbox-class": null
  },
  "checkboxConfirmTelepass": {
    "class": "is-block",
    "id": "confirm_telepass",
    "name": "confirm_telepass",
    "text": "Confermo che il numero del dispositivo è corretto e corrisponde all’apparato che intendo usare per questa prenotazione",
    "checkbox-class": null
  },
  "telepassApp": {
    "modifier": "c-media--sticker",
    "img-src": "/images/svgs/stk_telepass-app-120px.svg",
    "img-alt": "Numero dispositivo Telepass",
    "body": "Puoi trovare il tuo n° dispositivo Telepass <strong>dalla tua area riservata del sito telepass.it o dall’App Telepass</strong>.",
    "ariaLabel": "Puoi trovare il tuo n° dispositivo Telepass dalla tua area riservata del sito telepass.it o dall’App Telepass.",
    "dialog-toggler": "Apri foto di esempio"
  },
  "telepassCode": {
    "modifier": "c-media--sticker",
    "img-src": "/images/svgs/stk_telepass-code-120px.svg",
    "img-alt": "Numero dispositivo Telepass",
    "body": "Puoi trovare il tuo n° dispositivo Telepass anche sul retro del tuo dispositivo (10 cifre).",
    "ariaLabel": "Puoi trovare il tuo n° dispositivo Telepass anche sul retro del tuo dispositivo (10 cifre).",
    "dialog-toggler": "Apri foto di esempio",
    "dialog-controller": "dialog-controller"
  },
  "alertLightinfo": {
    "modifier": "c-alert--lightinfo c-alert--full-rounded",
    "icon": {
      "class": "c-icon c-icon--24",
      "symbol": "ic_info_black_24px"
    },
    "message": "Fai attenzione, il codice cliente <strong>non è</strong> il numero di dispositivo Telepass. Affinché la prenotazione ti venga riconosciuta, presta attenzione ad inserire il numero corretto."
  }
}
  • Content:
    .c-convention__title {
      @include font-scale(level-6, light);
      color: primary(night, 100);
      margin-bottom: remify(24px);
    }
    
    .c-convention__subtitle {
      @include font-scale(level-3, light);
      color: primary(night, 100);
      margin-bottom: remify(24px);
    }
    
    .c-convention__description {
      @include font-scale(level-2);
      color: secondary(text, 100);
      margin-bottom: remify(24px);
    }
    
    .c-convention__logo {
      width: remify(120px);
      margin-bottom: remify(12px);
    }
    
    .c-convention__choice-input ~ .c-convention__choice-input {
      margin-top: remify(16px);
    }
    
    .c-form .c-convention__choice-input {
      width: 100%;
    }
    
    .c-convention__content {
      margin-top: remify(24px);
      padding: remify(24px);
      background-color: #fff;
      border: remify(1px) solid primary(sky, 20);
      border-radius: 0 remify(48px) remify(48px) remify(48px);
      @include shadow(small);
    }
    
    .c-convention__subcontent--registered-telepass.u-chkbx-toggleReceiver,
    .c-convention__subcontent--new-telepass.u-chkbx-toggleReceiver {
      display: none;
    }
    
    .u-chkbx-toggle:checked ~ .c-convention__content--registered-telepass.u-chkbx-toggleReceiver,
    .u-chkbx-toggle:checked ~ .c-convention__content--new-telepass.u-chkbx-toggleReceiver {
      display: block !important;
    }
    
    .c-convention__subcontent {
      padding: remify(16px) remify(26px);
    
    }
    
    
    /*------------------------------------*
      Telepass
    *------------------------------------*/
    
    .c-convention--telepass {
      
      .c-alert {
        position: initial;
        transform: initial;
        width: 100%;
        margin: remify(24px) 0;
      }
    
    }
  • URL: /components/raw/convention/_convention.scss
  • Filesystem Path: src/views/02-molecules/convention/_convention.scss
  • Size: 1.5 KB

No notes defined.