Aeroporto di Bologna - Design System

Canvas: Default 

<div class="c-canvas " id="" grid="grid">

    <div class="c-canvas__picture" grid="4@md">
        <img src="../../images/svgs/routes/ill-animali-veterinario.svg" alt="Veterinario">
    </div>

    <div class="c-canvas__paper" grid="6@md offset-6@md">

        <h2>Titolo blocco</h2>
        <h3>Sottotitolo paragrafo</h3>
        <p>Le operazioni di check-in vengono controllati:</p>
        <ul class="c-list--bulleted">
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
        </ul>
        <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
            fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
            error!</p>
        <a href="#" class="c-link c-link--primary">
            <span>Link</span>
            <svg class="svg-24">
                <use xlink:href="#ic_chevron_right_black_24px"></use>
            </svg></a>
        <h3>Sottotitolo paragrafo</h3>
        <ol>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
        </ol>
        <div class="c-collapsible--simple o-collapsible ">
            <p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="organism-canvas">Element title</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.</p>
        </div>

        <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
            fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
            error!</p>
        <div class="c-media o-media ">
            <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Mappa parcheggi" height="" width="32">
            <div class="c-media__body o-media__body">
                <a href="#"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb
            </div>
        </div>
        <div class="c-snapshot " aria-hidden="true">
            <div class="c-snapshot__thumbnail">
                <img src="../../images/amsterdam.jpg" alt="Amsterdam" class="u-OF-cover">
                <a href="#" class="c-snapshot__download-link">
                    <span class="u-visuallyhidden">Download gallery</span>
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic-download-24px"></use>
                    </svg> </a>
                <button class="c-snapshot__button js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                    <span class="u-visuallyhidden">Apri la gallery</span>
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic-zoom-24px"></use>
                    </svg> </button>
            </div>
            <p>Amsterdam</p>
        </div>

        <div class="c-dialog c-dialog--gallery js-fr-dialogmodal " id="dialog-gallery">
            <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-gallery-dialog-title">
                <div role="document">
                    <p class="c-dialog__title u-visuallyhidden" id="dialog-gallery-dialog-title" aria-hidden="true">Titolo della gallery</p>
                    <section class="c-carousel c-carousel--big-gallery c-carousel--big-gallery c-carousel--top-nav" aria-hidden="true">

                        <div class="jsInstance owl-carousel">
                            <div class="c-carousel__item">
                                <img src="https://picsum.photos/800/533" alt="">
                                <p class="img-desc">Image description 1</p>
                            </div>
                            <div class="c-carousel__item">
                                <img src="https://picsum.photos/300/533" alt="">
                                <p class="img-desc">Image description 2</p>
                            </div>
                            <div class="c-carousel__item">
                                <img src="https://picsum.photos/800/533" alt="">
                                <p class="img-desc">Image description 3</p>
                            </div>
                            <div class="c-carousel__item">
                                <img src="https://picsum.photos/800/533" alt="">
                                <p class="img-desc">Image description 4</p>
                            </div>
                            <div class="c-carousel__item">
                                <img src="https://picsum.photos/800/533" alt="">
                                <p class="img-desc">Image description 5</p>
                            </div>
                        </div>

                    </section> <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                        <svg class="c-icon c-icon--32">
                            <use xlink:href="#ic_close_black_24px"></use>
                        </svg> </button>
                </div>
            </div>
        </div>
        <div class="c-suggestion c-suggestion--simple ">

            <img src="../../images/svgs/stk_informazioni.svg" alt="" aria-hidden="true">

            <div class="c-suggestion__text">
                <strong>I nostri consigli</strong>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
            </div>

        </div>
        <div class="c-highlight ">
            <h3>Title</h3>
            <h4>Subtitle</h4>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam quia <strong>laborum impedit ipsum</strong> culpa asperiores nulla. Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla consequuntur illo optio neque.</p>
        </div>
        <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
            fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
            error!</p>
    </div>

</div>
 
<div class="c-canvas {{ modifier }}" id="{{ canvas-id }}" grid="grid">

  <div class="c-canvas__picture" grid="4@md">
    {{#if illustration }}
    <img src="{{ path illustration.path }}" alt="{{ illustration.alt }}">
    {{/if}}
  </div>

  <div class="c-canvas__paper" grid="6@md offset-6@md">

    {{!-- partial-block defined page by page --}}
    {{#> @partial-block }}
    <h2>Titolo blocco</h2>
    <h3>Sottotitolo paragrafo</h3>
    <p>Le operazioni di check-in vengono controllati:</p>
    <ul class="c-list--bulleted">
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
    </ul>
    <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
      fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
      error!</p>
    {{ render "@link--primary" }}
    <h3>Sottotitolo paragrafo</h3>
    <ol>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
    </ol>
    {{> @collapsible--default accordion }}
    <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
      fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
      error!</p>
    {{> @media pdf-map }}
    {{ render "@snapshot" }}
    {{> @suggestion--simple suggestion }}
    {{ render "@highlight" }}
    <p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui
      fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum
      error!</p>
    {{/ @partial-block }}
    {{!-- end partial-block --}}
  </div>

</div>
 
{
  "illustration": {
    "path": "/images/svgs/routes/ill-animali-veterinario.svg",
    "alt": "Veterinario"
  },
  "pdf-map": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "Mappa parcheggi",
    "img-width": "32",
    "body": "<a href=\"#\"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb"
  },
  "suggestion": {
    "text": "<strong>I nostri consigli</strong><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>",
    "hasImage": true,
    "img-src": "/images/svgs/stk_informazioni.svg",
    "img-alt": ""
  },
  "accordion": {
    "title": "Element title",
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.",
    "id": "organism-canvas"
  },
  "documents": {
    "title": "2022",
    "pdf": [
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Gennaio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Gennaio</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Febbraio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Febbraio</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Marzo 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Marzo</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Aprile 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Aprile</strong></a><br>PDF, 577 kb"
      },
      {
        "img-src": "/images/svgs/pdf.svg",
        "img-alt": "Maggio 2022",
        "img-width": "32",
        "body": "<a href=\"#\"><strong>Maggio</strong></a><br>PDF, 577 kb"
      }
    ]
  }
}
  • Content: 
    .c-canvas {
  margin-bottom: remify(40px);
  padding-top: remify(40px);

  main & {
    grid-column: main;
  }

}

.c-canvas__picture {
  text-align: right;
  flex: 1 1 40%;
  display: none;

  @include min-screen(bp(tablet-p)) {
    display: block;
  }

  img {
    max-height: remify(710px);
    position: relative;
    right: -4vw;
    top: remify(48px);
    // z-index: 0;
    // top: 50%;
    // transform: translateY(-50%);

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      width: 100%;
    }

  }

}

.c-canvas__paper {
  position: relative;
  z-index: 1;
  // padding: remify(24px);
  // background-color: #fff;
  // border-radius: remify(4px);
  // @include shadow(medium);
  // flex: 1 1 100%;

  @include min-screen(bp(tablet)) {
    // padding: remify(32px);
  }

  @include min-screen(bp(tablet-p)) {
    // flex: 0 1 60%;
    // padding: remify(56px);
  }

  & .o-collapsible__content p {
    margin-bottom: remify(32px);
  }

  & .o-collapsible__content p:last-child {
    margin-bottom: 0;
  }
}

.c-canvas__paper h2,
.c-canvas__paper h3 {
  color: primary(night, 100);
}

.c-canvas__paper h2 {
  font-weight: fw(light);
  margin-bottom: remify(24px);
  background-color: #fff;
}

.c-canvas__paper h3 {
  font-weight: fw(semibold);
  margin-bottom: remify(8px);

  &.is-positive,
  &.is-negative {
    display: flex;
    align-items: center;
  }

  &.is-positive {
    color: status(positive);
  }

  &.is-negative {
    color: status(negative);
  }

  svg {
    margin-right: remify(8px);
    * {
      fill: currentColor;
    }
  }

}

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

.c-canvas__paper > p {
  margin-bottom: remify(32px);
}
.c-canvas__paper p {
  line-height: 1.8;
}

// The following lines has been added because of this:
// https://bitbucket.org/GnvPartners/adb/issues/198/comandi-in-linea-float-left-float-right
.c-canvas__paper > p a img {
  max-width: remify(190px);
  padding: 0 16px 16px 16px;
}

.c-canvas__paper > img {
  margin-bottom: remify(32px);
}

.c-canvas__paper ul,
.c-canvas__paper ol {
  margin-top: remify(8px);
  margin-bottom: remify(32px);
}

.c-canvas__paper .spaced > li {
  margin-bottom: remify(16px);
}

.c-canvas__paper hr {
  display: block;
  height: remify(1px);
  border: 0;
  border-top: remify(1px) solid #ccc;
  margin: remify(16px) 0;
  padding: 0; 
}

.c-canvas__paper .c-media {
  margin-bottom: remify(32px);
}

.c-canvas__paper .c-collapsible__content .c-media {
  margin-bottom: remify(16px);
}

.c-canvas__paper .c-suggestion {
  margin-bottom: remify(40px);
  position: relative;
  // @include min-screen(bp(tablet-p)) {
  //   left: remify(-100px);
  // }
}

.c-canvas__paper .c-collapsible--simple {
  margin-top: remify(32px);
  margin-bottom: remify(32px);
}

.c-canvas__paper .c-snapshot,
.c-canvas__paper .c-highlight {
  margin-bottom: remify(32px);
}

.c-canvas__paper {
  & > * {
    &:last-child {
      margin-bottom: 0;
    }
  }
  & > img:last-child {
    margin-bottom: remify(32px);
  }
}



.c-canvas__sidebar {
  // flex: 1 1 100%;
  // margin-top: remify(24px);

  // & > * {
  //   margin-bottom: remify(16px);
  //   padding-bottom: remify(16px);

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

  // }

  @include min-screen(bp(tablet-p)) {
    // flex: 0 1 35%;
    // position: relative;
    // right: remify(-40px);
    // margin-top: 0;
  }

  @include min-screen(remify(1400px)) {
    // right: remify(-70px);
  }

}


/*------------------------------------*\
  Content template modifier
\*------------------------------------*/

.c-canvas--content-template {
  position: relative;
}


/*------------------------------------*\
  Map modifier
\*------------------------------------*/

.c-canvas--map {
  padding: 0;

  .c-canvas__paper {
    min-height: remify(280px);
    height: auto;
    padding: 0;
    margin-bottom: 0;

    @include min-screen(bp(tablet-p)) {
      flex: 1 1 100%;
      height: remify(935px);
    }

    .g-map {
      width: 100%;
      height: 100%;
    }

  }

  .c-canvas__sidebar {

    @include min-screen(bp(tablet-p)) {
      position: absolute;
      z-index: 10;
      right: remify(-20px);
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      max-width: remify(400px);
    }

  }

}

.c-canvas--hasCarousel {

  .c-canvas__paper {
    overflow-x: hidden;
  }

}

/*------------------------------------*\
  Report modifier
\*------------------------------------*/

.c-canvas__report {
  // max-height: 800px;
  // overflow-y: scroll;
  padding: remify(0px) remify(16px);
  
  span {
    display: block;
    font-weight: fw(bold);
    color: primary(night, 80);
    text-transform: uppercase;
    margin-bottom: remify(8px);
  }
  
  h3 {
    font-weight: fw(regular);
    color: primary(night, 100);
    font-size: 150%;
    line-height: 1.4;
    margin-bottom: remify(16px);
    
    @include min-screen(bp(tablet)) {
      font-size: 150%;
      line-height: 1.333;
    }  
  }

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

.c-canvas__report-item {
  margin-bottom: remify(48px);

}
  • URL: /components/raw/canvas/_canvas.scss
  • Filesystem Path: src/views/03-organisms/canvas/_canvas.scss
  • Size: 5.1 KB

No notes defined.