Suggestion

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-suggestion ">

    <img src="../../images/svgs/stk_informazioni.svg" alt="Attiva le convenzioni">

    <div class="c-suggestion__text">
        <strong>Hai una convenzione?</strong>
        <p>
            Viaggi con un Tour Operator? Sei socio ACI, Coop oppure cliente Telepass Fleet? Scopri le tariffe di parcheggio riservate a te!
        </p>
        <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-label="Apri la modale per consultare le convenzioni sui parcheggi" aria-controls="dialog-conventions">

            Controlla le convenzioni

        </button>
    </div>

</div>

<div class="c-dialog c-dialog--conventions js-fr-dialogmodal " id="dialog-conventions">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-conventions-dialog-title">
        <div role="document">

            <p class="c-dialog__title" id="dialog-conventions-dialog-title">Hai una convenzione?</p>

            <p class="c-dialog__subtitle">
                Controlla se puoi ottenere dei prezzi dedicati a te.
            </p>

            <div class="c-form">

                <label for="select-conventions" class="" aria-label="">
                    Convenzione:
                    <select id="select-conventions" class="" aria-describedby="select-conventions-note">
                        <option value="" disabled selected>Seleziona l&#x27;accreditamento di cui far parte</option>
                        <option value="option-1">Alba Tour</option>
                        <option value="option-2">Alpitour</option>
                        <option value="option-3">Brixia Viaggi</option>
                        <option value="option-4">Club Med</option>
                        <option value="option-5">Domina Travel</option>
                        <option value="option-6">In Viaggi</option>
                        <option value="option-7">Marsupio Group</option>
                        <option value="option-8">Smeg S.p.A.</option>
                        <option value="option-9">Viaggi Idea</option>
                    </select>
                    <em class="c-field__note u-visuallyhidden" id="select-conventions-note">
                        Seleziona un'opzione dal menù a tendina
                    </em>
                </label>
                <p class="c-dialog__text">
                    <strong>AVVISO IMPORTANTE</strong><br>
                    1) Per avvalersi della convenzione e della tariffa scontata, è indispensabile, al rientro dal viaggio, prima di pagare e di ritirare l'auto, consegnare il voucher del Tour Operator o mostrare la tessera di accreditamento alla cassa del <a href="#"><strong>Presidio Parcheggi</strong></a>.
                    <br><br>
                    2) La mancata o ritardata consegna del voucher o visione della tessera di accreditamento, ovvero dopo aver pagato la sosta alle casse automatiche o alle colonne di uscita, implica la perdita del diritto di avvalersi della tariffa scontata e l'applicazione della tariffa standard senza possibilità di rimborso.
                    <br><br>

                    <input type="checkbox" id="conventions-terms" name="accespt" class="u-visuallyhidden " role="group" aria-label="conventions-terms">

                    <label for="conventions-terms" class="terms-conditions">
                        <strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
                    </label>
                </p>

                <div class="c-dialog__action">
                    <button type="button" class="c-button c-button--submit c-button--large">

                        Attiva convenzione

                    </button>
                </div>

            </div>

            <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 {{ modifier }}">

  <img src="{{ path icon-path }}" alt="{{ icon-alt }}">

  <div class="c-suggestion__text">
    <strong>{{ title }}</strong>
    <p>
      {{{ text }}}      
    </p>
    {{#if conventions }}
      {{> @button conventions }}
    {{/if }}
  </div>

</div>

{{render "@dialog--conventions" dialog-conventions merge=true }}


        
            
            {
  "title": "Hai una convenzione?",
  "text": "Viaggi con un Tour Operator? Sei socio ACI, Coop oppure cliente Telepass Fleet? Scopri le tariffe di parcheggio riservate a te!",
  "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?"
  }
}

File:

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

Handle: @suggestion
Preview:
- With layout
- Component only
Filesystem Path: src/views/02-molecules/suggestion/suggestion.hbs
References (2): @button, @dialog--conventions
Referenced by (38): @airport-map, @airport-map--search-results, @airport-map--category-selected, @airport-map--detail, @airport-map--empty-state, @airport-map--area, @airport-map--area-parcheggi, @airport-map--area-dettaglio, @canvas, @postcard, @page-parking-payed, @page-parking-confirmed, @page-profile, @page-profile--alert, @page-billing-info, @page-split-payment, @page-privacy-landing, @page-privacy-settings, @page-reservation-detail, @page-reservation-detail--unactive, @page-reservation-detail--telepass, @page-reclaims-form, @page-meet-greet, @page-form-area-meeting, @page-form-youfirst, @page-mbl-payed, @page-mbl-confirmed, @page-routes-prm, @page-routes-prm-services, @page-routes-documents, @page-routes-luggage, @page-new-reclaim, @page-new-reclaim-info, @page-new-reclaim-login, @page-new-reclaim-assistance, @page-voucher-assistance, @page-voucher-assistance--mbl, @page-parking-confirm-pdf

No notes defined.