ecabs-components 1.0.15 → 1.0.17

package/styles/material/overrides/_button.scss

@@ -0,0 +1,81 @@
+button.mdc-button,
+a {
+  &.mdc-button,
+  &.mdc-button--outlined,
+  &.mdc-button--raised,
+  &.mdc-button--unelevated {
+    @extend .btn;
+
+    &.btn__group--item,
+    &.btn {
+      @extend .btn__group--item;
+    }
+
+    .mat-icon {
+      color: inherit;
+    }
+  }
+
+  &.mdc-button.mat-primary,
+  &.mdc-button--unelevated.mat-primary {
+    @extend .btn__primary;
+  }
+
+  &.mdc-button--outlined.mat-primary {
+    @extend .btn__primary--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-accent,
+  &.mdc-button--unelevated.mat-accent {
+    @extend .btn__secondary;
+  }
+
+  &.mdc-button--outlined.mat-accent {
+    @extend .btn__secondary--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button.mat-warn {
+    @extend .btn__warn;
+  }
+
+  &.mdc-button.mat-success {
+    @extend .btn__success;
+  }
+
+  &.mdc-button--outlined.mat-warn {
+    @extend .btn__warn--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button--outlined.mat-success {
+    @extend .btn__success--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button:disabled {
+    @extend .btn__disabled;
+  }
+
+  &.mdc-button--outlined:disabled {
+    @extend .btn__disabled--outline;
+  }
+
+  .mat-button-wrapper {
+    @extend .btn__with-icon--wrapper;
+  }
+
+  &.mat-mdc-icon-button .mat-button-wrapper .mat-icon {
+    margin-right: 0;
+  }
+
+  &.mdc-button.mat-mdc-icon-button {
+    min-width: auto;
+    padding: calc-rem(8);
+  }
+}

package/styles/material/overrides/_card.scss

@@ -0,0 +1,17 @@
+.mat-card {
+  &.mat-card:not([class*=mat-elevation-z]) {
+    @extend .card;
+  }
+
+  .mat-card-subtitle {
+    @extend .card--subtitle;
+  }
+
+  .mat-card-title {
+    @extend .card--title;
+  }
+
+  .mat-card-content {
+    @extend .card__content;
+  }
+}

package/styles/material/overrides/_chip.scss

@@ -0,0 +1,108 @@
+.mat-chip {
+  &,
+  &.mat-standard-chip {
+    @extend .chip;
+
+    &.chip--info {
+      @extend .chip--info;
+    }
+
+    &.chip--success {
+      @extend .chip--success;
+    }
+
+    &.chip--warn {
+      @extend .chip--warn;
+    }
+
+    &.chip--danger {
+      @extend .chip--danger;
+    }
+
+    &.chip--selected {
+      @extend .chip--selected;
+    }
+
+    &.chip--not-selected {
+      @extend .chip--not-selected;
+    }
+
+    &.accepted {
+      @extend .accepted;
+    }
+
+    &.cab_arrived_at_dropoff, &.cashed_in {
+      @extend .cab_arrived_at_dropoff;
+    }
+
+    &.cab_arrived_at_intermediary_waypoint {
+      @extend .cab_arrived_at_intermediary_waypoint;
+    }
+
+    &.cab_arrived_at_pickup {
+      @extend .cab_arrived_at_pickup;
+    }
+
+    &.cancelled {
+      @extend .cancelled;
+    }
+
+    &.completed {
+      @extend .completed;
+    }
+
+    &.dispatched {
+      @extend .dispatched;
+    }
+
+    &.dropped_off {
+      @extend .dropped_off;
+    }
+
+    &.no_show {
+      @extend .no_show;
+    }
+
+    &.pending {
+      @extend .pending;
+    }
+
+    &.rejected, &.suspended,
+    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, {
+      @extend .rejected;
+    }
+
+    &.reserved, &.scheduled, &.ended {
+      @extend .reserved;
+    }
+
+    &.trip_ended {
+      @extend .trip_ended;
+    }
+
+    &.trip_ongoing {
+      @extend .trip_ongoing;
+    }
+
+    &.trip_started, &.started {
+      @extend .trip_started;
+    }
+
+    &[ng-reflect-disable-ripple] {
+      &::after {
+        background: transparent;
+      }
+    }
+  }
+
+  .mat-icon {
+    &,
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+
+.mat-chip.mat-standard-chip[ng-reflect-disable-ripple]:not(.mat-chip-disabled):active {
+  box-shadow: none;
+}

package/styles/material/overrides/_datepicker.scss

@@ -0,0 +1,169 @@
+@import "../../scss/utilities/index.scss";
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 0.5em;
+}
+
+.header-label {
+  flex: 1;
+  height: 1em;
+  font-weight: 500;
+  text-align: center;
+}
+
+.select-date-label {
+  color: var(--color-brand-dark);
+  padding-top: 1.6rem;
+  padding-left: 1.6rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.grid-picker-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-right: 0.5rem;
+}
+
+.ml-0 {
+  margin-left: 0rem;
+}
+
+.w-full {
+  width: 100% !important;
+}
+
+.mat-calendar-table {
+  .mat-calendar-body {
+    tr:first-child[aria-hidden='true'] {
+      display: none;
+    }
+  }
+}
+
+.mat-datepicker-toggle {
+  padding-top: 0.75rem;
+  margin-left: -2.25rem;
+}
+
+.mat-calendar-body-label {
+  visibility: hidden;
+}
+
+.mat-calendar-body-cell-content {
+  border-radius: 0.25rem !important;
+}
+
+.mat-calendar-body-active {
+  .mat-calendar-body-today {
+    color: var(--color-brand-light) !important;
+    background-color: var(--color-brand-light2) !important;
+  }
+}
+
+.mat-calendar {
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
+    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+      background-color: var(--color-brand-light2);
+      color: var(--color-black);
+    }
+  }
+
+  .mat-calendar-body-cell.mat-calendar-body-active {
+    &, &:hover {
+      .mat-calendar-body-cell-content.mat-calendar-body-selected {
+        background-color: var(--color-brand-light) !important;
+        color: var(--color-white) !important;
+      }
+    }
+  }
+
+  .mat-calendar-body-selected {
+    background-color: var(--color-brand-light);
+    color: var(--color-white) !important;
+
+    .mat-calendar-body-today {
+      color: var(--color-white) !important;
+    }
+  }
+
+  .mat-calendar-table-header,
+  .mat-calendar-body-label {
+    color: var(--color-gray-500);
+  }
+
+  .mat-calendar-body-cell > .mat-calendar-body-today {
+    opacity: 1;
+  }
+
+  .mat-calendar-body-cell-container:hover .mat-calendar-body-cell.mat-calendar-body-disabled {
+    .mat-calendar-body-cell-content {
+      background-color: transparent !important;
+    }
+  }
+
+  .mat-calendar-body-cell-content,
+  .mat-date-range-input-separator {
+    color: var(--color-black);
+  }
+
+  .mat-calendar-content {
+    padding: 0 1.6rem;
+  }
+
+  .mat-calendar-table-header th {
+    @include fontSize(16px);
+  }
+
+  .mat-calendar-table-header-divider::after {
+    display: none;
+  }
+
+  .mat-calendar-body {
+    @include fontSize(16px);
+  }
+
+  .mat-calendar-body-in-range {
+    &::before {
+      background-color: var(--color-brand-light2);
+    }
+
+    .mat-calendar-body-cell-content {
+      color: var(--color-black) !important;
+    }
+  }
+
+  .mat-calendar-body-range-start, .mat-calendar-body-range-end {
+    .mat-calendar-body-cell-content {
+      color: var(--color-white) !important;
+    }
+  }
+}
+
+.mat-datepicker-popup {
+  .mat-datepicker-content {
+    color: var(--color-black);
+    box-shadow: $box-shadow-large;
+  }
+
+  .mat-datepicker-actions {
+    margin-top: 1rem;
+    padding: 0 1.6rem 1.6rem 1.6rem;
+  }
+
+  .mat-calendar-body-disabled {
+    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+      color: var(--color-gray-300);
+    }
+  }
+}

package/styles/material/overrides/_dialog.scss

@@ -0,0 +1,12 @@
+
+.mat-mdc-dialog-title {
+  @extend .dialog__title;
+}
+
+.dialog--maps .mat-mdc-dialog-container {
+  @extend .dialog--maps;
+}
+
+.mat-mdc-dialog-actions {
+  justify-content: end !important;
+}

package/styles/material/overrides/_divider.scss

@@ -0,0 +1,3 @@
+.mat-divider {
+  @extend .divider;
+}

package/styles/material/overrides/_expansion.scss

@@ -0,0 +1,31 @@
+.example-headers-align .mat-expansion-panel-header-title {
+  @include fontSize($font-heading-xs);
+
+  color: var(--color-brand-dark);
+  font-weight: $font-weight-semibold;
+  line-height: 32px;
+  white-space: nowrap;
+}
+
+.mat-accordion {
+  .mat-expansion-panel {
+    padding: calc-rem(24 24 0 24);
+
+    .mat-expansion-panel-header {
+      padding: calc-rem(0 0 24 0);
+
+      &:hover {
+        background: unset !important;
+      }
+    }
+
+    .mat-expansion-panel-body {
+      padding: calc-rem(0 0 16 0);
+    }
+  }
+
+  .mat-expansion-panel:not([class*=mat-elevation-z]) {
+    box-shadow: $box-shadow-default;
+  }
+
+}

package/styles/material/overrides/_form.scss

@@ -0,0 +1,144 @@
+.mat-mdc-form-field {
+  display: block !important;
+  .mat-mdc-form-field-wrapper {
+    padding: 0;
+    .mat-mdc-form-field-flex {
+      padding: 0;
+    }
+    .mat-mdc-form-field-infix {
+      padding: 0;
+      border: 0;
+    }
+  }
+  &-underline {
+    display: none;
+  }
+
+  &-disabled {
+    .mat-mdc-input-element {
+      @extend .form-field__input--disabled;
+    }
+  }
+
+  &-label {
+    @extend .form-field__label;
+  }
+
+  &-invalid {
+    .mat-mdc-input-element,
+    mat-error,
+    mat-date-range-input {
+      @extend .form-field__input--invalid;
+    }
+  }
+
+  &-suffix,
+  [matsuffix] {
+    @extend .form-field__input--suffix;
+  }
+
+  .mat-mdc-input-element {
+    @extend .form-field__input;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    margin-top: 0;
+  }
+}
+
+.mat-mdc-form-field {
+  display: block !important;
+  .mat-mdc-form-field-wrapper {
+    padding: 0;
+    .mat-mdc-form-field-flex {
+      padding: 0;
+    }
+    .mat-mdc-form-field-infix {
+      padding: 0;
+      border: 0;
+    }
+  }
+  &-underline {
+    display: none;
+  }
+
+  &-disabled {
+    .mat-mdc-input-element {
+      @extend .form-field__input--disabled;
+    }
+  }
+
+  &-label {
+    @extend .form-field__label;
+  }
+
+  &-invalid {
+    .mat-mdc-input-element,
+    mat-error,
+    mat-date-range-input {
+      @extend .form-field__input--invalid;
+    }
+  }
+
+  &-suffix,
+  [matsuffix] {
+    @extend .form-field__input--suffix;
+  }
+
+  .mat-mdc-input-element {
+    @extend .form-field__input;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    margin-top: 0;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    background-color: inherit !important;
+    padding-bottom: 0;
+  }
+
+  .mdc-text-field--outlined .mdc-text-field__input,
+  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
+    // border: 1px solid $color-mono-light !important;
+    line-height: inherit;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  div[class*="mdc-notched-outline__"] {
+    border: unset;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    padding-left: 0;
+    padding-right: 0;
+
+    .mat-mdc-form-field-flex .mat-mdc-floating-label {
+      top: 1.24rem;
+      line-height: $base-line-height;
+    }
+
+    &.mdc-text-field--outlined {
+      .mat-mdc-form-field-infix {
+        border-top: 0.9375em solid transparent;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+    }
+  }
+
+  .mdc-line-ripple {
+    display: none;
+  }
+}
+
+.mdc-text-field{
+  padding: 0rem !important;
+}
+
+.mat-mdc-form-field-focus-overlay {
+  background-color: inherit !important;
+}

package/styles/material/overrides/_icon.scss

@@ -0,0 +1,3 @@
+mat-icon {
+  @extend .icon;
+}

package/styles/material/overrides/_menu.scss

@@ -0,0 +1,3 @@
+.mat-menu-panel.mat-elevation-z4 {
+  box-shadow: $box-shadow-default;
+}

package/styles/material/overrides/_phone.scss

@@ -0,0 +1,32 @@
+ecabs-phone {
+  @extend .ecabs-phone;
+  .ngx-mat-tel-input-container {
+    .mat-mdc-input-element {
+      @extend .ngx-mat-tel-input-input;
+    }
+    .country-selector {
+      @extend .country-selector;
+    }
+  }
+  .form-field.error {
+    .ngx-mat-tel-input-container {
+      @extend .error;
+    }
+  }
+  .disabled {
+    input {
+      @extend .disabled-field;
+    }
+    button {
+      background-color: unset !important;
+    }
+  }
+
+  .mat-mdc-input-element:disabled {
+    color: var(--color-black);
+  }
+
+  .country-selector:disabled {
+    color: var(--color-black) !important;
+  }
+}

package/styles/material/overrides/_select.scss

@@ -0,0 +1,62 @@
+.mat-mdc-select {
+  @extend .select;
+
+  .mat-mdc-select-arrow-wrapper {
+    display: unset;
+    vertical-align: auto;
+    transform: none;
+    padding-top: 0.625rem;
+  }
+
+  &-panel-wrap {
+    .mat-mdc-select-panel,
+    .mat-mdc-select-panel:not([class*='mat-elevation-z']) {
+      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
+
+      min-width: calc(100% + 32px) !important;
+      background-color: var(--color-white);
+
+      &[aria-multiselectable='true'] {
+        transform: translate(1.5rem, 0rem) !important;
+      }
+    }
+  }
+}
+
+ecabs-select .mat-mdc-select .mat-mdc-select-value {
+  font-size: 1rem;
+}
+
+ecabs-select .mat-mdc-select {
+  &, .mat-option {
+    font-size: 1rem;
+  }
+}
+
+.mat-mdc-form-field-underline {
+  display: none;
+}
+
+.mat-mdc-form-field-underline {
+  display: none;
+}
+
+.form-field.error {
+  .mat-mdc-select {
+    border-color: var(--color-error);
+  }
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
+  opacity: 1;
+}
+
+.wide-select {
+  min-width: calc-rem(240px);
+  .mdc-list-item {
+    @include fontSize(12px);
+  }
+}
+.no-title {
+  transform: translateX(calc-rem(-196px)) !important;
+}

package/styles/material/overrides/_tab.scss

@@ -0,0 +1,23 @@
+.mat-tab-group {
+  @extend .tab-group;
+
+  .mat-tab-labels {
+    @extend .tab-labels;
+
+    .mat-tab-label {
+      @extend .tab-label;
+
+      &.mat-tab-label-active {
+        @extend .tab-label-active;
+      }
+    }
+  }
+
+  &.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
+    background-color: var(--color-brand-light) !important;
+  }
+
+  .mat-tab-body {
+    margin-top: 1.2rem;
+  }
+}

package/styles/material/overrides/_table.scss

@@ -0,0 +1,12 @@
+.mat-mdc-table {
+  @extend .table-ui;
+  @extend .table-ui__bordered;
+
+  td.mat-mdc-cell, td.mat-mdc-footer-cell {
+    padding: .36rem .36rem .36rem 0;
+
+    &:first-of-type {
+      padding-left: calc-rem(14);
+    }
+  }
+}