Aeroporto di Bologna - Design System

Suggestion: Simple 

<div class="c-suggestion c-suggestion--simple ">

    <div class="c-suggestion__text">
        <strong>Title</strong>
        <p>Body text</p>
    </div>

</div>
 
<div class="c-suggestion c-suggestion--simple {{ modifier }}">

  {{#if hasImage}}
    <img src="{{ path img-src }}" alt="{{ img-alt }}" aria-hidden="true" >
  {{/if}}

  <div class="c-suggestion__text">
    {{{ text }}}
  </div>

</div>
 
{
  "title": "Hai una convenzione?",
  "text": "<strong>Title</strong><p>Body text</p>",
  "icon-path": "/images/svgs/stk_informazioni.svg",
  "icon-alt": "Attiva le convenzioni",
  "modifier": "",
  "conventions": {
    "type": "button",
    "text": "Controlla le convenzioni",
    "modifier": "c-button--as-link js-fr-dialogmodal-open",
    "opens-dialog": "dialog-conventions",
    "aria-label": "Apri la modale per consultare le convenzioni sui parcheggi"
  },
  "dialog-conventions": {
    "modifier": "",
    "id": "dialog-conventions",
    "dialog-labelledby": "dialog-title",
    "title": "Hai una convenzione?"
  }
}
  • Content: 
    .c-suggestion {
  background-color: primary(sky, 120);
  padding: remify(16px);
  display: flex;
  align-items: center;
  // max-width: remify(569px);
  border-radius: remify(16px);
  text-align: center;
  @include shadow(medium);

  @include min-screen( bp(tablet) ) {
    padding: remify(16px) remify(32px);
    text-align: left;
    border-radius: remify(100px);
  }

  .c-parkings & {
    position: relative;
    top: initial;
    right: initial;
    grid-column: 1/-1;

    @include min-screen( bp(tablet-p) ) {
      width: 25vw;
      position: absolute;
      top: remify(-90px);
      right: remify(24px);
      border-radius: 4vw 3.5vw 0.5vw 4vw;
      z-index: $zIndex-suggestion;
    }

  }

  .c-postcard & {
    position: relative;
    top: initial;
    right: initial;
    margin-left: auto;

    // @include min-screen( bp(tablet-l) ) {
    //   position: absolute;
    //   top: remify(-90px);
    //   right: remify(24px);
    //   z-index: $zIndex-suggestion;
    // }

  }

}

.c-suggestion img {
  display: none;

  @include min-screen( bp(tablet) ) {
    display: block;
    width: remify(60px);
    height: remify(60px);
    margin-right: remify(16px);
  }

}

.c-suggestion__text p {
  color: #fff;
  font-size: 75%;
  line-height: 1.5;

  a {
    color: currentColor;
  }

}

.c-suggestion__text {

  & > * {
    display: block;
    margin-bottom: remify(8px);
  }

  .active & p:last-child {
    position: relative;
    padding-left: remify(16px);

    &::before {
      content: '';
      display: block;
      width: remify(10px);
      height: remify(10px);
      background-color: parking(p3);
      position: absolute;
      top: remify(4px); 
      left: 0;
      border-radius: 50%;
    }
  }

  @include min-screen( bp(tablet) ) {
    font-size: 100%;
  }

}

.c-suggestion__text strong {
  font-size: 100%;
  color: #fff;
}

/*------------------------------------*\
  Simple modifier
\*------------------------------------*/

.c-suggestion--simple {

  .c-form--outstanding & {

    @include min-screen( bp(tablet) ) {
      position: absolute;
      top: remify(-100px);
      left: 50%;
      transform: translateX(-50%);
      width: remify(680px);
    }

  }

  .c-suggestion__text strong {
    font-size: 75%;
    line-height: 1.5;

    @include min-screen( bp(tablet) ) {
      font-size: 100%;
    }

    .c-canvas & {
      font-size: 100%;
      line-height: inherit;
    }

  }

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

/*------------------------------------*\
  Tutorial roommate modifier
\*------------------------------------*/

.c-suggestion--tutorial-roommate {
  grid-column: main;
  z-index: 1;

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

.c-launches + .c-suggestion--tutorial-roommate {
  position: relative;
  margin-top: remify(16px);
  
  @include min-screen( bp(tablet-p) ) {
    margin-right: remify(80px);
  }
}

/*------------------------------------*\
  Minimal modifier
\*------------------------------------*/

.c-suggestion--minimal {
  background-color: #fff;
 
  .c-suggestion__text p,
  .c-suggestion__text strong {
    color: secondary(text, 100);
  }

}

/*------------------------------------*\
  Pale modifier
\*------------------------------------*/

.c-suggestion--pale {
  background-color: primary(sky, 20);

  .c-suggestion__text p,
  .c-suggestion__text strong {
    color: secondary(text, 100);
  }

}

/*------------------------------------*\
  Telepass modifier
\*------------------------------------*/

.c-suggestion--telepass {

  img {
    display: none;
  
    @include min-screen( bp(tablet) ) {
      display: block;
      width: remify(100px);
      height: remify(48px);
      margin-right: remify(24px);
    }
  }
}


/*------------------------------------*\
  Telepass modifier
\*------------------------------------*/

.c-suggestion--geolocation {
  //display: none;
  display: flex;
  position: absolute;  
  top: remify(64px);
  left: remify(12px);
  right: auto;
  padding: remify(12px);
  width: remify(220px);
  z-index: $zIndex-body;
  text-align: left;
  border-radius: remify(10px) remify(100px) remify(100px) remify(100px);

  @include max-screen (bp(phone-p)) {
    .c-suggestion__text {
      line-height: 1.1;
    }
    .c-suggestion__text p {
      line-height: 1.4;
    }
  }

  @include min-screen (bp(phone-p)) {
    width: remify(300px);
  }

  @include min-screen (bp(tablet-p)) {
    width: remify(380px);
    left: auto;
    right: remify(12px);
    border-radius: remify(100px) remify(80px) remify(8px) remify(100px);

    .c-suggestion__text {
      color: primary(sky, 120);
      
      
      & > * {
        margin-bottom: 0;
      }  
    }
    
    &.active {
      background-color: secondary(page, 100);
      
      .c-suggestion__text {
        
        & > * {
          color: primary(sky, 120);
        }  
      }
    }
  }

  @include max-screen(bp(tablet-p)) {
    top: remify(8px);
  }
  
  & img {
    display: block;
    width: remify(48px);
    height: remify(48px);
    margin-right: remify(12px); 

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

}
  • URL: /components/raw/suggestion/_suggestion.scss
  • Filesystem Path: src/views/02-molecules/suggestion/_suggestion.scss
  • Size: 5.2 KB

No notes defined.