Foehn Design System

Login Form: Logged Off 

<button id="login-button" type="button" class="btn btn-primary fs-6" data-bs-toggle="collapse" data-bs-target="#login-form-collapse" aria-expanded="false" aria-controls="login-form-collapse">
    Se connecter <span class="fas fa-chevron-down text-white ms-1" id="login-button-icon"></span>
</button>

<div id="login-form-collapse" class="collapse shadow border p-3">
    <div class="d-flex flex-column mb-5">
        <div class="d-flex flex-row justify-content-between mb-2">
            <div class="p-2">
                <span class="h4">Particuliers et professionnels</span>
            </div>
            <div class="p-2">
                <a href="#">
                    <span class="fas fa-question-circle"></span>
                </a>
            </div>
        </div>
        <div class="p-2 mb-3">
            <a class="btn btn-primary text-center w-100 py-2" href="#">
                <span class="fas fa-external-link-alt me-1 text-white"></span>
                Portail prestations
            </a>
        </div>
        <div class="p-2">
            <a href="#" class="text-decoration-none">
                Vous n'avez pas encore assez au portail ?
            </a>
        </div>
        <div class="px-2">
            <a href="#" class="btn btn-outline-primary text-center w-100 py-2">
                Demander l'accès
            </a>
        </div>
    </div>
    <div class="px-2 mb-5">
        <hr class="opacity-25">
    </div>
    <div class="d-flex flex-column">
        <div class="d-flex flex-row justify-content-between mb-2">
            <div class="p-2">
                <span class="h4">Collaborateurs-trices et partenaires</span>
            </div>
            <div class="p-2">
                <a href="#">
                    <span class="fas fa-question-circle"></span>
                </a>
            </div>
        </div>
        <div class="p-2">
            <a class="btn btn-secondary text-center w-100 py-2" href="#">
                <span class="fas fa-external-link-alt me-1 text-white"></span>
                Portail IAM
            </a>
        </div>
    </div>
</div>
 
<button
  id="login-button"
  type="button"
  class="btn btn-primary fs-6"
  data-bs-toggle="collapse"
  data-bs-target="#login-form-collapse"
  aria-expanded="false"
  aria-controls="login-form-collapse"
>
  Se connecter <span class="fas fa-chevron-down text-white ms-1" id="login-button-icon"></span>
</button>

<div id="login-form-collapse" class="collapse shadow border p-3">
  <div class="d-flex flex-column mb-5">
    <div class="d-flex flex-row justify-content-between mb-2">
      <div class="p-2">
        <span class="h4">Particuliers et professionnels</span>
      </div>
      <div class="p-2">
        <a href="#">
          <span class="fas fa-question-circle"></span>
        </a>
      </div>
    </div>
    <div class="p-2 mb-3">
      <a class="btn btn-primary text-center w-100 py-2" href="#">
        <span class="fas fa-external-link-alt me-1 text-white"></span>
        Portail prestations
      </a>
    </div>
    <div class="p-2">
      <a href="#" class="text-decoration-none">
        Vous n'avez pas encore assez au portail ?
      </a>
    </div>
    <div class="px-2">
      <a href="#" class="btn btn-outline-primary text-center w-100 py-2">
        Demander l'accès
      </a>
    </div>
  </div>
  <div class="px-2 mb-5">
    <hr class="opacity-25">
  </div>
  <div class="d-flex flex-column">
    <div class="d-flex flex-row justify-content-between mb-2">
      <div class="p-2">
        <span class="h4">Collaborateurs-trices et partenaires</span>
      </div>
      <div class="p-2">
        <a href="#">
          <span class="fas fa-question-circle"></span>
        </a>
      </div>
    </div>
    <div class="p-2">
      <a class="btn btn-secondary text-center w-100 py-2" href="#">
        <span class="fas fa-external-link-alt me-1 text-white"></span>
        Portail IAM
      </a>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    @charset "UTF-8";

#login-form-collapse {
  position: absolute;
  z-index: 99;
  background-color: $white;
  margin-right: 1rem !important;
  margin-top: 5rem !important;
}

@include media-breakpoint-up(md) {
  #login-form-collapse {
    margin-right: 0 !important;
    margin-top: 3rem !important;
  }
}
  • URL: /components/raw/login-form/_login-form.scss
  • Filesystem Path: src/components/02-molecules/login-form/_login-form.scss
  • Size: 305 Bytes

No notes defined.