Aeroporto di Bologna - Design System

Box errore form 

<div class="c-road-signs ">
    <p>Sono stati riscontrati i seguenti errori:</p>
    <ul>
        <li><a href="#field-email">E-mail</a>: L'indirizzo e-mail sembra non essere scritto correttamente.</li>
        <li><a href="#field-psw">Password</a>: La password deve essere di almeno 8 caratteri.</li>
    </ul>
    <ul>
        <li><input type="checkbox" id="subscribeNews" name="subscribe" class="u-visuallyhidden " role="group" aria-label="subscribeNews">

            <label for="subscribeNews" class="">
                Iscrivimi alla newsletter<span class="required-marker" aria-hidden="true"> *</span>
            </label>
        </li>
        <li><input type="radio" id="radio-choice" name="choice" value="yes" class="js-fr-dialogmodal-open u-visuallyhidden" aria-controls="dialog-button">
            <label class="" for="radio-choice">Radio label text</label>
        </li>
    </ul>
</div>
 
<div class="c-road-signs {{ modifier }}">
  {{#> @partial-block }}
  <p>Sono stati riscontrati i seguenti errori:</p>
  <ul>
    <li><a href="#field-email">E-mail</a>: L'indirizzo e-mail sembra non essere scritto correttamente.</li>
    <li><a href="#field-psw">Password</a>: La password deve essere di almeno 8 caratteri.</li>
  </ul>
  <ul>
    <li>{{ render "@checkbox" }}</li>
    <li>{{ render "@radiobutton" }}</li>
  </ul>
  {{/ @partial-block }}
</div>
 
/* No context defined. */
  • Content: 
    .c-road-signs {
  border-radius: remify(4px);
  background-color: status(negative);
  padding: remify(16px);
  color: #fff;
  margin-bottom: remify(88px);

  main & {
    grid-column: main;
    margin: 0 auto;
    width: 100%;
    max-width: remify(640px);
  }

  .c-form--sticker & {
    margin-bottom: remify(24px);

    @include min-screen( bp(tablet-p) ) {
      max-width: remify(660px);
      margin-right: 0;
    }

  }

  p, a {
    font-weight: fw(bold);

    .c-form--sticker & {
      color: currentColor;
    }

  }

  p {
    margin-bottom: remify(16px);
  }

  a {
    color: currentColor;
    text-transform: uppercase;
  }

  li + li {
    margin-top: remify(4px);
  }

  ul + ul {
    margin-top: remify(16px);
  }

  input[type="checkbox"] ~ label,
  input[type="radio"] ~ label {
    color: currentColor;
    
    .required-marker {
      color: currentColor;
    }

  }

}

.c-road-signs--raw,
main .c-road-signs--raw {
  margin: 0;
  max-width: initial;

  p, a {
    font-weight: fw(regular);
    text-transform: initial;
  }

}
  • URL: /components/raw/road-signs/_road-signs.scss
  • Filesystem Path: src/views/02-molecules/road-signs/_road-signs.scss
  • Size: 1.1 KB

No notes defined.