Aeroporto di Bologna - Design System

Parking 

<div class="c-parking">

    <div class="c-parking__header">
        <div class="c-parking__name">
            <div class="c-parking_name">
                <img src="/images/svgs/parking-p1-icon.svg" alt="" class="c-parking_name__img">
                <p class="c-parking_name__title">Terminal</p>
            </div>
        </div>
        <div class="c-parking__fare">
            <div class="price-info">
                <p class="fare-text">Prezzo per 3 giorni</p>
                <p class="fare-price">€ 12,00</p>
            </div>
            <div class="button"><button type="" class="c-button c-button--submit">

                    Aggiungi

                </button></div>
        </div>
    </div>

    <div class="c-parking__body">
        <div class="c-parking__features">
            <ul class="c-parking__features-list">
                <li>
                    <span class="feature-icon">
                        <svg class="c-icon c-icon--24" role="presentation">
                            <use xlink:href="#ic-covered-parking-black-24px"></use>
                        </svg> </span>
                    <div class="feature-text">Coperto</div>
                </li>
                <li>
                    <span class="feature-icon">
                        <svg class="c-icon c-icon--24" role="presentation">
                            <use xlink:href="#ic_place_black_24px"></use>
                        </svg> </span>
                    <div class="feature-text">
                        <p>Di fronte al Terminal.</p>
                        <p>1 min. a piedi.</p>
                    </div>
                </li>
                <li>
                    <span class="feature-icon">
                        <img src="/images/svgs/telepass-unipol.svg" alt="" />
                    </span>
                    <div class="feature-text">Telepedaggio</div>
                </li>
                <li>
                    <span class="feature-icon">
                        <svg class="c-icon c-icon--24" role="presentation">
                            <use xlink:href="#ic-accessible-black-24px"></use>
                        </svg> </span>
                    <div class="feature-text">Posti riservati</div>
                </li>
            </ul>
        </div>
    </div>

</div>
 
<div class="c-parking{{#if modifier}} {{modifier}}{{/if}}">
  
  {{!-- HEADER --}}
  <div class="c-parking__header">
    <div class="c-parking__name">{{> @parking-name parking-name}}</div>
    <div class="c-parking__fare">
      <div class="price-info">
        <p class="fare-text">{{{defaultValue fare.text 'Prezzo per 3 giorni'}}}</p>
        {{#if fare.price}}
          <p class="fare-price">{{defaultValue fare.price '€ 12,00'}}</p>
        {{/if}}
      </div>
      <div class="button">{{> @button main-btn }}</div>
    </div>
  </div>
  {{!-- END HEADER --}}
  
  {{!-- BODY --}}
  <div class="c-parking__body">
    <div class="c-parking__features">
      <ul class="c-parking__features-list">
        {{#each features}}
        <li>
          <span class="feature-icon">
            {{#if feature.img}}
              <img src="{{ feature.img.src }}" alt="{{ feature.img.alt }}" />
            {{else}}
              {{> @icon feature.icon }}
            {{/if}}
          </span>
          <div class="feature-text">{{{ feature.text }}}</div>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
  {{!-- END BODY --}}

</div>
 
{
  "parking-name": {
    "title": "Terminal",
    "img": {
      "src": "/images/svgs/parking-p1-icon.svg"
    }
  },
  "fare": {
    "price": "€ 12,00"
  },
  "main-btn": {
    "text": "Aggiungi",
    "modifier": "c-button--submit"
  },
  "features": [
    {
      "feature": {
        "icon": {
          "class": "c-icon c-icon--24",
          "symbol": "ic-covered-parking-black-24px"
        },
        "text": "Coperto"
      }
    },
    {
      "feature": {
        "icon": {
          "class": "c-icon c-icon--24",
          "symbol": "ic_place_black_24px"
        },
        "text": "<p>Di fronte al Terminal.</p><p>1 min. a piedi.</p>"
      }
    },
    {
      "feature": {
        "img": {
          "src": "/images/svgs/telepass-unipol.svg"
        },
        "text": "Telepedaggio"
      }
    },
    {
      "feature": {
        "icon": {
          "class": "c-icon c-icon--24",
          "symbol": "ic-accessible-black-24px"
        },
        "text": "Posti riservati"
      }
    }
  ]
}
  • Content: 
    .c-parking {
  border: 1px solid primary(night,20);
  border-radius: remify(8px);
  overflow: hidden;
  background-color: secondary(basic-white, 100);
}

.c-parking__header {
  background-color: secondary(soft, 100);
  padding: remify(12px) remify(16px);
  display: flex;
  align-items: center;
  gap: remify(8px);
  justify-content: space-between;
}

.c-parking .c-parking_name__title {
  display: none;
  @include min-screen(bp(phablet)) {
    display: block;
  }
}

.c-parking__fare {
  display: flex;
  align-items: center;
  gap: remify(16px);
  justify-content: space-between;

  @include min-screen(bp(phablet)) {
    justify-content: initial;
    flex-grow: initial;
  }

  .price-info {
    @include min-screen(bp(phablet)) {
      display: flex;
      align-items: flex-end;
      flex-direction: column;
      flex-basis: remify(210px);
    }
  }

  .fare-text {
    @include font-scale(level-1);
    color: primary(night, 80);
  }

  .fare-price {
    @include font-scale(level-5, bold);
  }

}

.c-parking__body {
  padding: remify(16px);
}

.c-parking__features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: remify(8px);

  @include min-screen(bp(phablet)) {
    grid-template-columns: repeat(auto-fill, minmax(remify(140px), 1fr));
  }
}

.c-parking__features .feature-icon {
  color: primary(night, 100);
}

.c-parking__features .feature-text {
  @include font-scale(level-1);
  color: primary(night, 120);

  a {
    color: currentColor;
  }
}

.c-parking__features .feature-value {
  font-weight: fw(bold);
}

.c-parking__footer {
  padding: remify(16px);
}

/*------------------------------------*\
  Compact modifier
\*------------------------------------*/
.c-parking--compact {
  
  .c-parking__features-list {
    grid-template-columns: repeat(2, 1fr);
    gap: remify(8px);
  }

  .c-parking__features .feature-text {
    display: flex;
    flex-direction: column;
    gap: remify(4px);
  }

  .c-parking__footer {
    @include font-scale(level-1);
    padding-top: 0;
  }

}

/*------------------------------------*\
  Tall modifier
\*------------------------------------*/
.c-parking--tall {
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);

  .c-parking__features-list {
    display: flex;
    flex-direction: column;
    gap: remify(16px);
  }

  .feature-text {
    display: flex;
    flex-direction: column;
    gap: remify(2px);
  }

  .c-parking__body {
    padding-top: 0;
  }

  .c-parking__footer {
    border-top: remify(1px) solid primary(night, 20);

    .c-button--submit {
      width: 100%;
    }
  }

}
  • URL: /components/raw/parking/_parking.scss
  • Filesystem Path: src/views/02-molecules/parking/_parking.scss
  • Size: 2.6 KB

No notes defined.