Aeroporto di Bologna - Design System

Convention 

<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" name="check_telepass" value="" class="is-block u-chkbx-toggle u-visuallyhidden">
    <label class="c-convention__choice-input" for="radio_telepass"><strong>Sì</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">

        <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_telepass" name="confirm_telepass" class="u-visuallyhidden " role="group" aria-label="confirm_telepass">

        <label for="confirm_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 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">
    
    {{> @input input }}
    
    {{> @checkbox checkboxConfirm }}

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

    {{> "@alert--light-info" alertLightinfo }}
  
  </div>
</div>
 
/* No context defined. */
  • 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.