Aeroporto di Bologna - Design System

Starters: Archive 

<div class="c-starter c-starter--inverted c-starter--archive c-starter--padding ">

    <p class="c-starter__title">Archivio per anni</p>
    <ul>
        <li class="">
            <a href="#">2022</a>
        </li>
        <li>
            <a href="#">2021</a>
        </li>
        <li>
            <a href="#">2020</a>
        </li>
        <li class="is-nested">
            <input type="checkbox" id="c-starter-toggle-1" name="cart-toggle" class="u-chkbx-toggle c-starter__input-toggle" aria-controls="starter-target-1" aria-label="Espandi per le informazioni del parcheggio" role="switch">
            <label for="c-starter-toggle-1" class='c-starter__toggle c-starter__toggle--open'>
                Anni precedenti
            </label>
            <ul class="c-starter__target" id="starter-target-1">
                <li class="">
                    <a href="#">2019</a>
                </li>
                <li>
                    <a href="#">2018</a>
                </li>
                <li>
                    <a href="#">2017</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
 
<div class="c-starter c-starter--inverted c-starter--archive c-starter--padding {{ modifier }}">
  
  <p class="c-starter__title">{{{ title }}}</p>
  <ul>
    <li class="">
      <a href="#">2022</a>
    </li>
    <li>
      <a href="#">2021</a>
    </li>
    <li>
      <a href="#">2020</a>
    </li>
    {{#if hasNested}}
    <li class="is-nested">
      <input type="checkbox" id="c-starter-toggle-1" name="cart-toggle" class="u-chkbx-toggle c-starter__input-toggle"
        aria-controls="starter-target-1" aria-label="Espandi per le informazioni del parcheggio" role="switch">
      <label for="c-starter-toggle-1" class='c-starter__toggle c-starter__toggle--open'>
        {{{ nested.title }}}
      </label>
      <ul class="c-starter__target" id="starter-target-1">
        <li class="">
          <a href="#">2019</a>
        </li>
        <li>
          <a href="#">2018</a>
        </li>
        <li>
          <a href="#">2017</a>
        </li>
      </ul>
    </li>
    {{else}}
    {{/if}}
  </ul>
</div>
 
{
  "title": "Archivio per anni",
  "hasNested": true,
  "nested": {
    "title": "Anni precedenti"
  }
}
  • 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.