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/telepass.svg" alt="Telepass" height="" width="130">
    <div class="c-media__body o-media__body">
        <strong>Attenzione se hai un Telepass</strong><br>Se hai un Telepass a bordo non utilizzare il varco dedicato, oppure, assicurati di oscurare il tuo dispositivo per non farlo leggere all’ingresso. In caso di utilizzo del dispositivo Telepass, la prenotazione che hai appena fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<br><a href="#">Leggi di più</a>
    </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 dialog-toggler}}
      <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="{{ dialog-controller }}">{{{ dialog-toggler }}}</button>
    {{/if}}
  </div>
</div>


        
            
            {
  "img-src": "/images/svgs/telepass.svg",
  "img-alt": "Telepass",
  "img-width": "130",
  "body": "<strong>Attenzione se hai un Telepass</strong><br>Se hai un Telepass a bordo non utilizzare il varco dedicato, oppure, assicurati di oscurare il tuo dispositivo per non farlo leggere all’ingresso. In caso di utilizzo del dispositivo Telepass, la prenotazione che hai appena fatto non potrà essere riconosciuta e verrà applicata la tariffa ordinaria.<br><a href=\"#\">Leggi di più</a>",
  "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);
    font-size: 75%;
    line-height: 1.333;

    @include min-screen (bp(tablet)) {
      padding: 0;
      font-size: 100%;
      line-height: 1.5;
    }

  }

}

/*------------------------------------*\
  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.6 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.