Media object: Warning

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-media o-media c-media--warning">
    <img class="c-media__figure o-media__figure" src="../../images/svgs/tolls.svg" alt="Telepedaggi Telepass e UnipolMove" height="" width="110">
    <div class="c-media__body o-media__body">
        <strong>Viaggi con un dispositivo per il telepedaggio?</strong><br>Se hai un Telepass o un UnipolMove a bordo non entrare nei varchi d'ingresso dedicato, oppure, disattiva il servizio parcheggi attraverso le specifiche app. In caso di utilizzo del dispositivo, la prenotazione che hai fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<div><a href="#">Maggiori informazioni su Telepass</a></div>
        <div><a href="#">Maggiori informazioni su UnipolMove</a></div>
    </div>
</div>


        <div class="c-media o-media {{ modifier }}">
  <img class="c-media__figure o-media__figure" src="{{ path img-src }}" alt="{{ img-alt }}" height="{{ img-height }}" width="{{ img-width }}">
  <div class="c-media__body o-media__body">
    {{{ body }}}
    {{#if cta}}
      <a href="{{cta.url}}">{{cta.text}}</a>
    {{/if}} 
    {{#if btn-dialog-toggler}}
      <div>
        <button type="button" class="c-button {{ btn-dialog-toggler.class }} js-fr-dialogmodal-open" aria-controls="{{ btn-dialog-toggler.dialog-id }}">{{{ btn-dialog-toggler.text }}}</button>
      </div>
    {{/if}}
  </div>
</div>


        
            
            {
  "img-src": "/images/svgs/tolls.svg",
  "img-alt": "Telepedaggi Telepass e UnipolMove",
  "img-width": "110",
  "body": "<strong>Viaggi con un dispositivo per il telepedaggio?</strong><br>Se hai un Telepass o un UnipolMove a bordo non entrare nei varchi d'ingresso dedicato, oppure, disattiva il servizio parcheggi attraverso le specifiche app. In caso di utilizzo del dispositivo, la prenotazione che hai fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<div><a href=\"#\">Maggiori informazioni su Telepass</a></div><div><a href=\"#\">Maggiori informazioni su UnipolMove</a></div>",
  "modifier": "c-media--warning"
}

File:

Content:


                                /*------------------------------------*\
  Object CSS
\*------------------------------------*/

.o-media {
  display: flex;
  align-items: flex-start;

  .c-product--payed &,
  .c-privacy-prefs__motivation &,
  .c-advantages &,
  .c-helpdesk--contacts &,
  .c-canvas__paper & {
    align-items: center;
  }

  .c-identity & {
    margin-top: remify(40px);
  }

  .c-advantages & {
    margin-bottom: remify(40px);
  }

  .c-privacy-prefs__motivation & {
    margin-bottom: remify(24px);
  }

}

.o-media__figure {
  margin-right: remify(16px);

  .c-identity & {
    margin-right: remify(16px);
  }

  .c-product--payed &,
  .c-privacy-prefs__motivation &,
  .c-advantages & {
    display: none;
    @include min-screen (bp(tablet)) {
      display: block;
    }
  }

  .c-media--complex & {
    display: none;

    @include min-screen (bp(tablet-p)) {
      display: block;
      margin-right: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -70px;
    }

  }

}

.o-media__body {
  flex: 1 1 auto;
}

.o-media--matryoshka {
  display: block;

  main & {
    grid-column: main;
    margin-top: remify(24px);
    margin-bottom: remify(24px);
  }

  @include min-screen ($booking-info-second-breakpoint) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  & > .o-media__figure {
    margin-bottom: remify(16px);
    margin-right: 0;

    @include min-screen ($booking-info-second-breakpoint) {
      margin-right: remify(16px);
      margin-bottom: 0;
    }

  }

  .o-media--nephew {
    align-items: flex-start;
    margin-bottom: remify(16px);
    flex: 1 0 remify(200px);

    .o-media__figure {
      display: none;

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

    }

    @include min-screen (bp(tablet-p)) {
      margin-right: remify(16px);
      margin-bottom: 0;
    }

  }

}

.c-form--outstanding + .o-media--matryoshka {
  margin-top: remify(100px);

  @include min-screen (bp(tablet)) {
    margin-top: remify(160px);
  }

}

/*------------------------------------*\
  UI component CSS
\*------------------------------------*/

.c-media {

  .c-helpdesk--contacts & {
    h4 {
      font-size: 200%;
    }
  }

}

/*------------------------------------*\
  Discover modifier
\*------------------------------------*/

.c-media--discover {
 
  background-color: #fff;
  border-radius: remify(4px);

  @include min-screen (bp(tablet)) {
    border-radius: remify(50px);
  }

  &.o-media {
    align-items: center;
  }

  .c-media__figure {
    border-radius: remify(50px) 0 0 remify(50px);
    display: none;

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

  }

  .c-media__body {
    padding: remify(16px);
    @include font-scale(level-1);

    @include min-screen (bp(tablet)) {
      padding: 0;
    }

  }

}

/*------------------------------------*\
  Warning modifier
\*------------------------------------*/

.o-media.c-media--warning {

  padding: remify(24px);
  background-color: primary(sun, 10);
  align-items: center;

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

  .o-media__figure {
    @include max-screen (bp(tablet)) {
      margin-bottom: remify(16px);
      margin-right: 0;
    }
  }

}

/*------------------------------------*
  Warning sky modifier
*------------------------------------*/
.o-media.c-media--warning.c-media--warning-sky {
  background-color: primary(sky, 10);
}

/*------------------------------------*\
  Booked item modifier
\*------------------------------------*/

.o-media.c-media--booked-item {
  @include shadow(high);
  padding: remify(16px);
  border-radius: remify(4px);
  align-items: center;
  position: relative;
  background-color: #fff;
  padding-inline: remify(12px) !important;

  &:after {
    content: '\276f';
    color: primary(sky, 120);
    position: relative;
    right: remify(-8px);
  }

}

/*------------------------------------*\
  Complex modifier
\*------------------------------------*/

.c-media--complex {
  position: relative;
  @include shadow(medium);
  background-color: #fff;
  padding: remify(24px);
  border-radius: remify(24px);
  max-width: remify(840px);
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;

  @include min-screen (bp(tablet)) {
    padding: remify(24px) remify(48px);
    flex-wrap: nowrap;
    align-items: center;
  }

  & + & {
    margin-top: remify(16px);
  }

  &:last-child {
    margin-bottom: remify(48px);
  }

  .intruder {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: remify(16px);

    @include min-screen (bp(tablet)) {
      flex: 1 0 remify(300px);
    }

    & > * + * {
      display: block;
      margin-top: remify(16px);
    }

    .title {
      text-transform: uppercase;
      color: primary(night, 100);
    }

    .is-big {
      font-size: 200%;
      line-height: 1;
    }

  }

}

/*------------------------------------*\
  Sticker modifier
\*------------------------------------*/

.c-media--sticker {
  padding: remify(8px);
  
  &:first-of-type {
    // border-top: 1px solid primary(sky, 20);
    padding-top: remify(20px);
  }

  .c-media__body {
    color: primary(night, 100);
    padding-right: remify(8px);
  }

  img {
    width: 80px;
    height: 80px;
  }

  .c-button:not(.c-dialog__close) {
    margin: 0;
  }
}

/*------------------------------------*\
  Warning modifier
\*------------------------------------*/

.o-media--smart-link {
  background-color: primary(sky, 120);
  color: secondary(page, 100);
  padding: remify(24px);
  border-radius: remify(16px);
  align-items: center;
  position: relative;
  display: inline-flex;
  
  @include min-screen ($booking-info-second-breakpoint) {
    display: flex;
  }
 
  a {
    color: secondary(page, 100);
  }

  img {
    transform: rotate(-10deg);
  }

  
}

/*------------------------------------*
  Titled modifier
*------------------------------------*/
.c-media--titled {
  
  .c-media__body {
    color: primary(night, 80);
  }

  .c-media__title {
    @include font-scale(level-6, bold);
    margin-bottom: remify(8px);

    @include max-screen(bp(phablet)) {
      margin-top: remify(16px);
    }

  }

  @include max-screen(bp(phablet)) {
    display: block;
    text-align: center;
  }

}

.c-media--titled-small {

  .c-media__title {
    @include font-scale(level-4, bold);
  }

}

/*------------------------------------*
  Vertically centered
*------------------------------------*/
.c-media--vertically-centered {
  align-items: center;
}

URL: /components/raw/media/_media.scss
Filesystem Path: src/views/02-molecules/media/_media.scss
Size: 6.5 KB

Handle: @media--warning
Preview:
- With layout
- Component only
Filesystem Path: src/views/02-molecules/media/media.hbs
Referenced by (3): @warnings, @warnings--telepass, @warnings--sky

No notes defined.