Aeroporto di Bologna - Design System

Suggerimento riconoscimento e-mail 

<div class="c-detective">

    <p>Ciao Mario, sembra esistere già un tuo account collegato a questo indirizzo e-mail.</p>
    <p>
        <strong>Accedi ora</strong> per prenotare senza inserire nuovamente i tuoi dati.
    </p>
    <div class="c-detective__input">
        <label for="password">
            Password
            <span aria-hidden="true">*</span>
        </label>
        <input type="password" id="password" placeholder="Inserisci la tua password"> <button type="submit" class="c-button c-button--submit">

            Accedi

        </button>
    </div>
    <a href="/components/preview/insert-email">Non ricordi la tua password?</a>

</div>

<a href="/components/preview/page-funnel-email" class="c-detective__changemail">oppure cambia e-mail</a>
 
<div class="c-detective">

  <p>Ciao Mario, sembra esistere già un tuo account collegato a questo indirizzo e-mail.</p>
  <p>
    <strong>Accedi ora</strong> per prenotare senza inserire nuovamente i tuoi dati.</p>
  <div class="c-detective__input">
    <label for="password">
      Password
      <span aria-hidden="true">*</span>
    </label>
    <input type="password" id="password" placeholder="Inserisci la tua password"> {{> @button btn-login }}
  </div>
  <a href="{{ lost-password.url }}">{{ lost-password.text }}</a>

</div>

<a href="{{ change-email.url }}" class="c-detective__changemail">{{ change-email.text }}</a>
 
{
  "lost-password": {
    "text": "Non ricordi la tua password?",
    "url": "/components/preview/insert-email"
  },
  "change-email": {
    "text": "oppure cambia e-mail",
    "url": "/components/preview/page-funnel-email"
  },
  "btn-login": {
    "name": "submit",
    "type": "submit",
    "text": "Accedi",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-detective {
  background-color: primary(night, 80);
  border-radius: remify(4px);
  padding: remify(16px) remify(24px);
  color: #fff;

  a {
    color: #fff;
  }

  // Visually hidden
  label {
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    padding: 0; 
    border: 0; 
  }

  input {

    padding: remify(16px);
    border: remify(1px) solid primary(night, 20);
    border-radius: remify(4px);
    flex-grow: 1;
    margin-right: remify(8px);
    margin-bottom: remify(8px);

    @include placeholder {
      color: secondary(text, 100);
      font-size: remify(16px);
      font-style: italic;
      font-weight: fw(regular);
    }

  }

  button {
    margin-bottom: remify(8px);
    .c-form--tight & {
      margin: 0 0 remify(8px);
    }
  }

}

.c-detective__input {
  display: flex;
  flex-wrap: wrap;
  margin-top: remify(24px);
}

.c-detective__changemail {
  display: block;
  text-align: center;
  margin-top: remify(24px);
  color: primary(night, 100);
}
  • URL: /components/raw/detective/_detective.scss
  • Filesystem Path: src/views/02-molecules/detective/_detective.scss
  • Size: 1.1 KB

No notes defined.