ecabs-components 1.1.69 → 1.1.71

package/src/assets/styles/material/overrides/_chip.scss

@@ -1,240 +1,240 @@
-.mdc-evolution-chip {
-  &,
-  &.mat-mdc-standard-chip {
-    @extend .chip;
-    --mdc-chip-elevated-disabled-container-color: var(--color-gray-300);
-
-    &.chip__standard {
-      @extend .chip__standard;
-    }
-
-    &.draft {
-      background-color: var(--color-gray-50);
-      color: var(--color-gray-500);
-    }
-
-    &.published {
-      @extend .published;
-    }
-
-    &.archived {
-      background-color: #F0F0F0;
-      color: #676767;
-    }
-
-    &.chip--info, &.pending_review {
-      @extend .chip--info;
-    }
-
-    &.chip--success, &.active {
-      @extend .chip--success;
-    }
-
-
-    &.chip--warn, &.pending_data {
-      @extend .chip--warn;
-    }
-
-    &.chip--danger, &.inactive, &.expired {
-      @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, &.done {
-      @extend .completed;
-    }
-
-    &.dispatched {
-      @extend .dispatched;
-    }
-
-    &.in_progress {
-      @extend .in_progress;
-    }
-
-    &.dropped_off {
-      @extend .dropped_off;
-    }
-
-    &.no_show {
-      @extend .no_show;
-    }
-
-    &.pending {
-      @extend .pending;
-    }
-
-    &.rejected, &.suspended,
-    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, &.failed {
-      @extend .rejected;
-    }
-
-    &.reserved, &.scheduled, &.ended {
-      @extend .reserved;
-    }
-
-    &.trip_ended {
-      @extend .trip_ended;
-    }
-
-    &.trip_ongoing {
-      @extend .trip_ongoing;
-    }
-
-    &.trip_started, &.started {
-      @extend .trip_started;
-    }
-
-    &.blacklisted {
-      background-color: var(--color-gray-500);
-      color: var(--color-white);
-    }
-
-    &[mat-ripple-loader-disabled] {
-      &:hover .mat-mdc-chip-focus-overlay {
-        opacity: 0;
-      }
-    }
-
-    .mdc-evolution-chip__cell--primary {
-      flex-basis: unset;
-    }
-  }
-
-  .mat-icon {
-    &,
-    &:hover {
-      color: inherit;
-    }
-  }
-
-  &.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
-    color: inherit;
-  }
-
-  &.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.mdc-evolution-chip.mat-mdc-standard-chip[ng-reflect-disable-ripple]:not(.mdc-evolution-chip--disabled):active {
-  box-shadow: none;
-}
-
-//V2 styles
-ecabs-chip-group {
-  .mat-mdc-chip-listbox {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc-rem(8px);
-
-    .mat-mdc-chip {
-      --mdc-chip-elevated-container-color: var(--color-white);
-      --mdc-chip-label-text-color: var(--color-gray-600);
-      --mdc-chip-label-text-size: #{$font-size-sm};
-      --mdc-chip-label-text-weight: #{$font-weight-medium};
-      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
-      --mdc-chip-selected-label-text-color: var(--color-white);
-
-      border-radius: calc-rem($border-radius-medium);
-      border: 1px solid var(--color-gray-200);
-      color: var(--mdc-chip-label-text-color);
-
-      &:hover {
-        border-color: var(--color-gray-300);
-      }
-    }
-
-    .mat-mdc-chip.mdc-evolution-chip--selected {
-      border-color: transparent;
-
-      .mdc-evolution-chip__action {
-        color: var(--mdc-chip-selected-label-text-color);
-      }
-    }
-
-    .mat-mdc-chip.mdc-evolution-chip--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .mat-mdc-chip .mat-mdc-chip-graphic {
-      display: none;
-    }
-
-    .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary {
-      padding: 0;
-
-      &:after {
-        @extend %pseudos;
-
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-      }
-    }
-
-    .mat-mdc-chip .mdc-chip__ripple,
-    .mat-mdc-chip .mat-ripple {
-      display: none;
-    }
-  }
-}
-
-ecabs-chip-autocomplete {
-  .mat-mdc-chip-grid {
-    .mat-mdc-chip {
-      --mdc-chip-elevated-container-color: var(--color-gray-100);
-      --mdc-chip-label-text-color: var(--color-gray-600);
-      --mdc-chip-label-text-size: #{$font-size-xs};
-      --mdc-chip-label-text-weight: #{$font-weight-medium};
-      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
-      --mdc-chip-selected-label-text-color: var(--color-white);
-      --mdc-chip-container-height: #{calc-rem(28px)};
-      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--color-gray-600);
-      --mdc-chip-with-avatar-avatar-shape-radius: 0;
-
-      border-radius: calc-rem($border-radius-medium);
-      padding-left: unset;
-      padding-right: unset;
-    }
-  }
-
-  .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing {
-    width: calc-rem(14px);
-    height: calc-rem(14px);
-  }
-
-  .mdc-evolution-chip-set .mdc-evolution-chip {
-    margin-top: 0;
-  }
-}
+.mdc-evolution-chip {
+  &,
+  &.mat-mdc-standard-chip {
+    @extend .chip;
+    --mdc-chip-elevated-disabled-container-color: var(--color-gray-300);
+
+    &.chip__standard {
+      @extend .chip__standard;
+    }
+
+    &.draft {
+      background-color: var(--color-gray-50);
+      color: var(--color-gray-500);
+    }
+
+    &.published {
+      @extend .published;
+    }
+
+    &.archived {
+      background-color: #F0F0F0;
+      color: #676767;
+    }
+
+    &.chip--info, &.pending_review {
+      @extend .chip--info;
+    }
+
+    &.chip--success, &.active {
+      @extend .chip--success;
+    }
+
+
+    &.chip--warn, &.pending_data {
+      @extend .chip--warn;
+    }
+
+    &.chip--danger, &.inactive, &.expired {
+      @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, &.done {
+      @extend .completed;
+    }
+
+    &.dispatched {
+      @extend .dispatched;
+    }
+
+    &.in_progress {
+      @extend .in_progress;
+    }
+
+    &.dropped_off {
+      @extend .dropped_off;
+    }
+
+    &.no_show {
+      @extend .no_show;
+    }
+
+    &.pending {
+      @extend .pending;
+    }
+
+    &.rejected, &.suspended,
+    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, &.failed {
+      @extend .rejected;
+    }
+
+    &.reserved, &.scheduled, &.ended {
+      @extend .reserved;
+    }
+
+    &.trip_ended {
+      @extend .trip_ended;
+    }
+
+    &.trip_ongoing {
+      @extend .trip_ongoing;
+    }
+
+    &.trip_started, &.started {
+      @extend .trip_started;
+    }
+
+    &.blacklisted {
+      background-color: var(--color-gray-500);
+      color: var(--color-white);
+    }
+
+    &[mat-ripple-loader-disabled] {
+      &:hover .mat-mdc-chip-focus-overlay {
+        opacity: 0;
+      }
+    }
+
+    .mdc-evolution-chip__cell--primary {
+      flex-basis: unset;
+    }
+  }
+
+  .mat-icon {
+    &,
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
+    color: inherit;
+  }
+
+  &.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.mdc-evolution-chip.mat-mdc-standard-chip[ng-reflect-disable-ripple]:not(.mdc-evolution-chip--disabled):active {
+  box-shadow: none;
+}
+
+//V2 styles
+ecabs-chip-group {
+  .mat-mdc-chip-listbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc-rem(8px);
+
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-white);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{$font-size-sm};
+      --mdc-chip-label-text-weight: #{$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+
+      border-radius: calc-rem($border-radius-medium);
+      border: 1px solid var(--color-gray-200);
+      color: var(--mdc-chip-label-text-color);
+
+      &:hover {
+        border-color: var(--color-gray-300);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--selected {
+      border-color: transparent;
+
+      .mdc-evolution-chip__action {
+        color: var(--mdc-chip-selected-label-text-color);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .mat-mdc-chip .mat-mdc-chip-graphic {
+      display: none;
+    }
+
+    .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary {
+      padding: 0;
+
+      &:after {
+        @extend %pseudos;
+
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    .mat-mdc-chip .mdc-chip__ripple,
+    .mat-mdc-chip .mat-ripple {
+      display: none;
+    }
+  }
+}
+
+ecabs-chip-autocomplete {
+  .mat-mdc-chip-grid {
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-gray-100);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{$font-size-xs};
+      --mdc-chip-label-text-weight: #{$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+      --mdc-chip-container-height: #{calc-rem(28px)};
+      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--color-gray-600);
+      --mdc-chip-with-avatar-avatar-shape-radius: 0;
+
+      border-radius: calc-rem($border-radius-medium);
+      padding-left: unset;
+      padding-right: unset;
+    }
+  }
+
+  .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing {
+    width: calc-rem(14px);
+    height: calc-rem(14px);
+  }
+
+  .mdc-evolution-chip-set .mdc-evolution-chip {
+    margin-top: 0;
+  }
+}