Aeroporto di Bologna - Design System

Starters: Identity 

<div class="c-starter c-starter--simple c-starter--textual c-starter--identity ">

    <div class="o-flexgrid-inline o-flexgrid--nowrap">
        <div class="identity-image">
            <img src="../../images/aeronautica-militare-shopping.jpg" alt="Aeronautica militare">
        </div>
        <div class="identity-details">
            <h3>Informazioni di dettaglio</h3>
            <p>
                <strong>Aperto tutti i giorni</strong> dalle <strong>05:00</strong> alle <strong>20:45</strong>
            </p>
            <p>
                <strong>E-mail</strong> bologna@cristianodithiene.com<br>
                <strong>Telefono</strong> +39 051 6472080
            </p>
            <p>
                <a href="#">www.cristianodithiene.com</a>
            </p>
        </div>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum repellat sint, ea aliquam beatae cupiditate, earum velit dolorum fugiat nesciunt similique eos laudantium ut? Ipsum ea ullam cupiditate laboriosam nulla.</p>
    <div class="fulltext" id="more-1">

        <p>lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi dolore aliquam nostrum minima, praesentium repellendus accusamus enim recusandae saepe debitis corporis odio distinctio veniam hic, laudantium, officia dolores incidunt mollitia!</p>

        <a class="more" href="#more-1">Leggi di più</a>
        <a class="less" href="#less-1">Leggi di meno</a>

    </div>

</div>

<div class="c-starter c-starter__app-links">
    <p><strong>Trova il negozio scaricando l'app</strong></p>
    <ul>
        <li>
            <a href="#">
                <img src="../../images/svgs/badge_appstore_it.svg" height="40" alt="Scarica su App Store">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../../images/svgs/Google_Play_Store_badge_IT.svg" height="40" alt="Disponibile su Google Play">
            </a>
        </li>
    </ul>
</div>

<div class="c-starter c-starter__map">
    <a href="../preview/page-airport-maps.html">
        <img width="900" src="https://maps.googleapis.com/maps/api/staticmap?center=44.529759,+11.293465&zoom=20&scale=1&size=600x300&maptype=roadmap&markers=color:red%7Clabel:C%7C44.529759,11.293465&key=AIzaSyDKoPcInAFouTf1rUVkZR0yGtrc1rEUUyE" alt="Google Map of 44.529759, 11.293465">
    </a>
</div>
 
<div class="c-starter c-starter--simple c-starter--textual c-starter--identity {{ modifier }}">
  
  <div class="o-flexgrid-inline o-flexgrid--nowrap">
    <div class="identity-image">
      <img src="{{ path '/images/aeronautica-militare-shopping.jpg' }}" alt="Aeronautica militare">
    </div>
    <div class="identity-details">
      <h3>Informazioni di dettaglio</h3>
      <p>
        <strong>Aperto tutti i giorni</strong> dalle <strong>05:00</strong> alle <strong>20:45</strong>
      </p>
      <p>
        <strong>E-mail</strong> bologna@cristianodithiene.com<br>
        <strong>Telefono</strong> +39 051 6472080
      </p>
      <p>
        <a href="#">www.cristianodithiene.com</a>
      </p>
    </div>
  </div>
  

  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum repellat sint, ea aliquam beatae cupiditate, earum velit dolorum fugiat nesciunt similique eos laudantium ut? Ipsum ea ullam cupiditate laboriosam nulla.</p>
  <div class="fulltext" id="more-1">

    <p>lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi dolore aliquam nostrum minima, praesentium repellendus accusamus enim recusandae saepe debitis corporis odio distinctio veniam hic, laudantium, officia dolores incidunt mollitia!</p>

    <a class="more" href="#more-1">Leggi di più</a>
    <a class="less" href="#less-1">Leggi di meno</a>

  </div>

</div>

<div class="c-starter c-starter__app-links">
  <p><strong>Trova il negozio scaricando l'app</strong></p>
  <ul>
    <li>
      <a href="#">
        <img src="{{ path "/images/svgs/badge_appstore_it.svg" }}" height="40" alt="Scarica su App Store">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="{{ path "/images/svgs/Google_Play_Store_badge_IT.svg" }}" height="40" alt="Disponibile su Google Play">
      </a>
    </li>
  </ul>
</div>

<div class="c-starter c-starter__map">
  {{!-- Google maps static image --}}
  <a href="{{ path '/components/preview/page-airport-maps' }}">
    <img width="900" src="https://maps.googleapis.com/maps/api/staticmap?center=44.529759,+11.293465&zoom=20&scale=1&size=600x300&maptype=roadmap&markers=color:red%7Clabel:C%7C44.529759,11.293465&key=AIzaSyDKoPcInAFouTf1rUVkZR0yGtrc1rEUUyE" alt="Google Map of 44.529759, 11.293465">
  </a>
</div>

{{!-- <div class="c-starter__footer">
  <img src="{{ path '/images/svgs/ic_iphone.svg' }}" aria-hidden="true">
  <div>
    <p>Vuoi raggiungere questo punto?</p>
    <a href="#">Raggiungi questo punto →</a>
  </div>
</div> --}}
 
/* No context defined. */
  • 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.