Aeroporto di Bologna - Design System

Order: Car 

<div class="c-order c-order--car ">

    <div class="c-order__el c-order__el--data">
        <strong>Nome autoveicolo</strong>
        <p>Kia Xceed</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Targa</strong>
        <p>EB531LM</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Ordini associati a questo autoveicolo</strong>
        <p><a href="#">Vedi elenco prenotazioni</a></p>
    </div>

    <div class="c-order__el c-order__el--labels">
        <span class="c-rounded-label c-rounded-label--grey" aria-label="">

            <strong>Autoveicolo predefinito</strong>
        </span>
    </div>

    <div class="c-order__el c-order__el--btn">
        <button type="button" class="c-button c-button--danger js-fr-dialogmodal-open" aria-label="Elimina autoveicolo" aria-controls="#">

            Elimina
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-trash"></use>
            </svg>
        </button>
    </div>

</div>
 
<div class="c-order c-order--car {{ modifier }}">

  {{#each datas}}
    <div class="c-order__el c-order__el--data">
      <strong>{{ this.label }}</strong>
      <p>{{{ this.text }}}</p>
    </div>
  {{/each}}

  {{#if multiple-labels}}
  <div class="c-order__el c-order__el--labels">
    {{#each multiple-labels}}
      {{> @rounded-label }}
    {{/each}}
  </div>
  {{/if}}

  {{#if btn }}
  <div class="c-order__el c-order__el--btn">
    {{> @button btn }}
  </div>
  {{/if}}

</div>
 
{
  "label": {
    "modifier": null,
    "text": "In attesa di pagamento",
    "aria-label": null
  },
  "datas": [
    {
      "label": "Nome autoveicolo",
      "text": "Kia Xceed"
    },
    {
      "label": "Targa",
      "text": "EB531LM"
    },
    {
      "label": "Ordini associati a questo autoveicolo",
      "text": "<a href=\"#\">Vedi elenco prenotazioni</a>"
    }
  ],
  "price": "€ 83,40",
  "multiple-labels": [
    {
      "modifier": "c-rounded-label--grey",
      "text": "<strong>Autoveicolo predefinito</strong>",
      "aria-label": null
    }
  ],
  "btn": {
    "name": "default",
    "type": "button",
    "text": "Elimina",
    "svg": {
      "symbol": "ic-trash",
      "class": "c-icon c-icon--24"
    },
    "modifier": "c-button--danger js-fr-dialogmodal-open",
    "opens-dialog": "#",
    "aria-label": "Elimina autoveicolo"
  }
}
  • Content: 
    .c-order {
  display: flex;
  flex-direction: column;
  @include shadow(medium);
  background-color: #fff;
  border-radius: remify(4px);
  padding: remify(16px);
  position: relative;
  gap: remify(16px);

  @include min-screen (bp(tablet)) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: remify(24px);
  }

  main & {
    margin-bottom: remify(16px);

    @supports (display: grid) {
      grid-column: main;
      margin-bottom: 0;
    }
    
  }

  .c-rounded-label {
    display: inline-block;
    @include font-scale(level-1);
  }

  .c-rounded-label + .c-rounded-label {
    margin-top: remify(8px);
  }

}

.c-order__el {
 width: 100%;
//  margin-bottom: remify(16px);

 &:last-child {
   margin-bottom: 0;
 }

  strong, p {
    display: block;
  }

  @include min-screen (remify(1300px)) {
    width: auto;
    // margin-bottom: 0;
  }

  .extra-label-text {
    @include font-scale(level-1-5);
    margin-top: remify(4px);
    
    @include min-screen (remify(1300px)) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: balance;
    }
  }

}

.c-order__el--labels {
  @include min-screen (remify(1300px)) {
    width: remify(200px);
  }
}

.c-order__el--data {
  width: auto;

  // @include min-screen (bp(tablet)) {
  //   width: 25%;
  // }

  // @include min-screen (remify(1300px)) {
  //   width: auto;
  // }

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

}

.c-order__el--total {
  color: primary(night, 100);

  @include min-screen (bp(phablet)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  strong, p {
    display: inline-block;
  }

  p {
    @include font-scale(level-2);
  }

  strong {
    @include font-scale(level-4);
  }

  a.go-to-detail {
    display: block;
    margin-top: remify(16px);

    @include min-screen (remify(640px)) {
      margin-top: 0;
    }
    
    @include min-screen (remify(1300px)) {
      display: none;
    }

  }

}

.c-order__visualCta {
  display: none;
  @include min-screen( remify(1300px) ) {
    display: block;
    position: absolute;
    top: 50%;
    right: remify(-30px);
    transform: translateY(-50%);
  }
}

/*------------------------------------*\
  Collapsible modifier
\*------------------------------------*/

.c-order--collapsible {

  .c-order__el--state {
    @include min-screen (remify(1300px)) {
      margin-right: remify(16px);
    }
  }

  .c-order__el--data {
    @include min-screen (remify(1300px)) {
      flex: 0 1 16.666%;
    }
  }

  .c-order__el--full {
    width: 100%;
    @include min-screen (remify(1300px)) {
      width: auto;
      flex-grow: 1;
    }
  }

  .fulltext p,
  .less {
    display: none;
  }

  .fulltext:target p,
  .fulltext:target .less {
    display: block;
  }

  .fulltext:target .more {
    display: none;
  }

}

/*------------------------------------*\
  Static modifier
\*------------------------------------*/
.c-order--static {
  // justify-content: space-between;
  
  @include min-screen(bp(tablet-l)) {
    justify-content: space-between;
  }
}

/*------------------------------------*\
  Fold modifier
\*------------------------------------*/
.c-order--static,
.c-order--button {
  // justify-content: space-between;
  gap: remify(8px) remify(32px);

  @include min-screen(bp(tablet)) {
    justify-content: initial;
  }

  @include min-screen (bp(tablet-l)) {
    flex-wrap: nowrap;
    gap: remify(8px);
    justify-content: space-between;
  }

  .c-order__el--total {
    width: auto;

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

    @include min-screen (bp(tablet-l)) {
      max-width: remify(200px);
      text-align: right;
      margin-left: initial;
    }
  }

}

/*------------------------------------*\
  Button
\*------------------------------------*/
.c-order--car {
  justify-content: flex-start;

  @include min-screen (remify(1300px)) {
    gap: remify(32px);
  }

  .c-order__el--labels {
    order: -1;

    @include min-screen (remify(1300px)) {
      order: initial;
    }
  }

  .c-order__el--btn {
    margin-left: auto;
  }
}

/*------------------------------------*\
  Highlight
\*------------------------------------*/
.c-order--highlight {
  outline: 3px solid rgba(43, 114, 177, 1); /* The RGBA of sky-120 */
  animation: fadeOutHighlight 10s forwards, pulse 2s 1s 2;
  background-color: primary(sky, 20);
}

@keyframes fadeOutHighlight {
  0% {
    outline-color: rgba(43, 114, 177, 1);
    background-color: primary(sky, 20);
  }
  70% {
    outline-color: rgba(43, 114, 177, 1);
    background-color: primary(sky, 20);
  }
  100% {
    outline-color: rgba(43, 114, 177, 0);
    background-color: #fff;
  }
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(43, 114, 177, 0.7); /* The RGBA of night-120 */
	}

	60% {
		box-shadow: 0 0 0 20px rgba(43, 114, 177, 0);
	}

  80% {
		box-shadow: 0 0 0 15px rgba(43, 114, 177, 0);
	}

  90% {
		box-shadow: 0 0 0 10px rgba(43, 114, 177, 0);
	}

	100% {
		@include shadow(medium);
	}
}
  • URL: /components/raw/order/_order.scss
  • Filesystem Path: src/views/03-organisms/order/_order.scss
  • Size: 5.1 KB

No notes defined.