Aeroporto di Bologna - Design System

Starters: Logout 

<div class="c-starter c-starter--simple c-starter--logout ">
    <p>Hai effettuato l'accesso all'area riservata.</p>
    <form class="c-form">
        <button type="submit" class="c-button c-button--ghost">

            Esci

        </button>
    </form>
</div>
 
<div class="c-starter c-starter--simple c-starter--logout {{ modifier }}">
  <p>Hai effettuato l'accesso all'area riservata.</p>
  <form class="c-form">
    {{> @button logout-btn }}
  </form>
</div>
 
{
  "logout-btn": {
    "type": "submit",
    "text": "Esci",
    "modifier": "c-button--ghost"
  }
}
  • Content: 
    .c-starter {

  margin-bottom: remify(16px);
  padding-bottom: remify(16px);
  
  &.c-starter--padding {
    padding: remify(24px);
  }

  .c-title-trend & {
    box-shadow: none;
    padding: 0;
  }

  .c-canvas--map & {
    margin-bottom: 0;
  }

}

.c-starter__title {
  text-transform: uppercase;
  color: primary(night, 100);
  font-weight: fw(bold);
  margin-bottom: remify(16px);

  .c-title-trend & {
    color: primary(night, 80);
  }

}

.c-starter li {
  margin-bottom: remify(8px);

  &:last-child {
    margin-bottom: 0;
  }

}

.c-starter li ul {
  margin-top: remify(8px);
  padding-left: remify(20px);
}

.c-starter li ul li {
  list-style-type: disc;
}

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

.c-starter__map {
}

.c-starter__footer {
  margin-top: remify(-16px);
  display: flex;
  align-items: center;
  border-bottom-right-radius: remify(6px);
  border-bottom-left-radius: remify(6px);
  color: secondary(page, 100);
  background-color: primary(sky, 120);
  padding: remify(16px);
  font-size: remify(14px);
  
  @include min-screen (bp(tablet-p)) {
    padding: remify(32px) remify(24px);
    font-size: remify(16px);
  }
    
  p {
    margin: 0 0 remify(16px) remify(24px);
    font-weight: fw(bold);
  }
  
  a {
    margin-left: remify(24px);
    color: secondary(page, 100);
  }
  
}

/*------------------------------------*\
  Simple modifier
\*------------------------------------*/

.c-starter--simple {
  background-color: #fff;
}

/*------------------------------------*\
  Folder Icon modifier
\*------------------------------------*/
.c-starter--folders {
  padding: remify(16px);
 li a {
   padding-left: remify(32px);
}
li.has-icon > a {
  background-image: url(../../images/svgs/folders.svg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
 }
}


/*------------------------------------*\
  Login modifier
\*------------------------------------*/

.c-starter--login {
  .c-form .c-button--submit {
    display: block;
    margin-top: remify(16px);
  }
}

/*------------------------------------*\
  Inverted modifier
\*------------------------------------*/

.c-starter--inverted {
  background-color: primary(night, 80);
  color: #fff;
  border-radius: remify(16px);
  margin-bottom: remify(32px);
  
  .c-starter__title,
  a {
    color: currentColor;
  }

}

/*------------------------------------*\
  Archive modifier
\*------------------------------------*/

.c-starter--archive {

  li.is-nested {
    margin-top: remify(16px);
    padding: remify(12px) remify(16px);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }

  .c-starter__input-toggle,
  .c-starter__target  {
    display: none;
  }
  .u-chkbx-toggle:checked ~ .c-starter__target {
    display: block;
  }

  .c-starter__toggle {
    position: relative;
    display: block;
  }

  .c-starter__toggle:after {
    content: '\276F';
    color: #fff;
    display: block;
    position: absolute;
    top: remify(0px);
    font-size: remify(16px);
    right: remify(0px);
    transform: rotate(90deg);
  }

  .u-chkbx-toggle:checked ~ .c-starter__toggle:after {
    transform: rotate(-90deg);
    color: primary(sun, 120);
  }

}

/*------------------------------------*\
  Textual modifier
\*------------------------------------*/

.c-starter--textual {

  h3 {
    font-size: 125%;
    font-weight: fw(regular);
    margin-bottom: remify(8px);

    @include min-screen(bp(tablet)) {
      font-size: 150%;
    }
  }

  .c-link {
    margin-bottom: remify(24px);
  }

}


/*------------------------------------*\
  Feed modifier
\*------------------------------------*/

.c-starter--feed {
  padding: remify(24px);
  border-radius: remify(16px);
  @include shadow(medium);
  background-color: secondary(soft, 100);
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  border: 2px solid primary(night,10);

  @include min-screen (bp(tablet-p)) {
    ul { max-width: remify(250px); }
  }

}

/*------------------------------------*\
  Alert modifier
\*------------------------------------*/

.c-starter--alert {
  border: 2px solid status(negative);
  
}

/*------------------------------------*\
  Identity modifier
\*------------------------------------*/

.c-starter--identity {


  .identity-image {
    display: inline-block;
    @include shadow(medium);
    padding: remify(16px);
    border-radius: remify(16px);
    margin-bottom: remify(24px);
    margin-right: remify(24px);


    img {
      max-width: remify(110px);
    }

  }

  .fulltext p,
  .less {
    display: none;
  }

  .fulltext:target p,
  .fulltext:target .less {
    display: block;
  }

  .fulltext:target .more {
    display: none;
  }

}

  .c-starter__app-links {
    p {
      margin-bottom: remify(16px);
    }

    li {
      display: inline-block;
      margin-right: remify(16px);
    }
  }
  • URL: /components/raw/starter/_starter.scss
  • Filesystem Path: src/views/02-molecules/starter/_starter.scss
  • Size: 4.9 KB

No notes defined.