ecabs-components 1.1.75 → 1.1.77

package/src/assets/styles/scss/modules/_form.scss

@@ -1,312 +1,312 @@
-$form-input-icon-size: 18px;
-
-.form,
-form {
-  &-field {
-    margin-bottom: 1rem;
-    position: relative;
-    // #Label
-    @include e(label) {
-      @include fontSize($font-size-xs);
-
-      display: inline-block;
-      margin-bottom: 0.25rem;
-      color: var(--color-gray-500);
-      cursor: pointer;
-
-
-      .icon {
-        @include fontSize($font-size-base);
-
-        display: inline;
-        vertical-align: middle;
-        margin-left: calc-rem(6px);
-      }
-    }
-
-    // #Label Note
-    @include e(label-note) {
-      @include fontSize($font-size-md);
-
-      display: inline-block;
-      margin-bottom: 0.25rem;
-      color: var(--color-gray-400);
-      cursor: pointer;
-    }
-
-    // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8px 16px);
-      border-radius: $border-radius-medium;
-      border: 1px solid var(--color-gray-300);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      &:focus-visible {
-        outline: none;
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-300);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-
-      @include m(invalid) {
-        // invalid
-        border-color: var(--color-error);
-        color: var(--color-error);
-      }
-    }
-
-    // #Textarea
-    @include e(textarea) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(16px);
-      border-radius: $border-radius-medium;
-      border: 1px solid var(--color-gray-300);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-100);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-    }
-
-    // #Range
-    @include e(range) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8px 16px);
-      color: var(--color-black);
-      line-height: $base-line-height;
-      border: none;
-
-      &:focus-visible {
-        outline: none;
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        border-radius: calc-rem($border-radius-large);
-        border: 1px solid var(--color-gray-300);
-        align-items: center;
-        line-height: 1;
-        background-color: var(--color-white);
-
-        &:focus-within {
-          border-color: var(--color-brand-dark);
-        }
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-100);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__range--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-
-      @include m(invalid) {
-        // invalid
-        border-color: var(--color-error) !important;
-        color: var(--color-error) !important;
-      }
-    }
-
-    // #Invalid
-    @include m(invalid) {
-      &,
-      .form-field__input,
-      .form-field__textarea,
-      .form-field__range {
-        color: var(--color-error);
-        border-color: var(--color-error);
-      }
-
-      &,
-      .form-field__range--wrapper {
-        border-color: var(--color-error);
-      }
-    }
-
-    // #Required
-    @include m(required) {
-      .form-field__label {
-        &:after {
-          @extend %required;
-        }
-      }
-    }
-
-    // #Validation
-    @include e(validation) {
-      @include fontSize($font-size-xs);
-
-      padding-top: 0.5rem;
-      color: var(--color-error);
-
-      @include m(item) {
-        padding-bottom: 0.6rem;
-
-        &:last-of-type {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
-        @extend %pseudos;
-
-        margin-top: 1.2rem;
-      }
-    }
-
-    .spinner {
-      position: absolute;
-      right: 0.25rem;
-      top: 1.85rem;
-    }
-
-    .hint {
-      font-size: 10px;
-      text-align: right;
-      margin-right: calc-rem(17px);
-      transform: translateY(-1rem);
-      margin-bottom: -1rem;
-    }
-  }
-
-  // ==========================================================================
-  // #OVERRIDES
-  // ==========================================================================
-  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-
-  .mat-mdc-form-field-infix {
-    border-top: 0;
-  }
-
-  .mat-mdc-form-field .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-}
-
-.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
-  width: auto;
-}
-
-.mat-mdc-text-field-wrapper {
-  padding-bottom: 0;
-}
+$form-input-icon-size: 18px;
+
+.form,
+form {
+  &-field {
+    margin-bottom: 1rem;
+    position: relative;
+    // #Label
+    @include e(label) {
+      @include fontSize($font-size-xs);
+
+      display: inline-block;
+      margin-bottom: 0.25rem;
+      color: var(--color-gray-500);
+      cursor: pointer;
+
+
+      .icon {
+        @include fontSize($font-size-base);
+
+        display: inline;
+        vertical-align: middle;
+        margin-left: calc-rem(6px);
+      }
+    }
+
+    // #Label Note
+    @include e(label-note) {
+      @include fontSize($font-size-md);
+
+      display: inline-block;
+      margin-bottom: 0.25rem;
+      color: var(--color-gray-400);
+      cursor: pointer;
+    }
+
+    // #Input
+    @include e(input) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8px 16px);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-300);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-300);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error);
+        color: var(--color-error);
+      }
+    }
+
+    // #Textarea
+    @include e(textarea) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(16px);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-300);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    // #Range
+    @include e(range) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8px 16px);
+      color: var(--color-black);
+      line-height: $base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: calc-rem($border-radius-large);
+        border: 1px solid var(--color-gray-300);
+        align-items: center;
+        line-height: 1;
+        background-color: var(--color-white);
+
+        &:focus-within {
+          border-color: var(--color-brand-dark);
+        }
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
+      }
+    }
+
+    // #Invalid
+    @include m(invalid) {
+      &,
+      .form-field__input,
+      .form-field__textarea,
+      .form-field__range {
+        color: var(--color-error);
+        border-color: var(--color-error);
+      }
+
+      &,
+      .form-field__range--wrapper {
+        border-color: var(--color-error);
+      }
+    }
+
+    // #Required
+    @include m(required) {
+      .form-field__label {
+        &:after {
+          @extend %required;
+        }
+      }
+    }
+
+    // #Validation
+    @include e(validation) {
+      @include fontSize($font-size-xs);
+
+      padding-top: 0.5rem;
+      color: var(--color-error);
+
+      @include m(item) {
+        padding-bottom: 0.6rem;
+
+        &:last-of-type {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    // #Subscript
+    @include e(subscript) {
+      @include m(wrapper) {
+        @extend %pseudos;
+
+        margin-top: 1.2rem;
+      }
+    }
+
+    .spinner {
+      position: absolute;
+      right: 0.25rem;
+      top: 1.85rem;
+    }
+
+    .hint {
+      font-size: 10px;
+      text-align: right;
+      margin-right: calc-rem(17px);
+      transform: translateY(-1rem);
+      margin-bottom: -1rem;
+    }
+  }
+
+  // ==========================================================================
+  // #OVERRIDES
+  // ==========================================================================
+  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
+    padding-top: 0;
+  }
+
+  .mat-mdc-form-field-infix {
+    border-top: 0;
+  }
+
+  .mat-mdc-form-field .mat-mdc-form-field-flex {
+    padding-top: 0;
+  }
+}
+
+.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.mat-mdc-text-field-wrapper {
+  padding-bottom: 0;
+}

package/src/assets/styles/scss/modules/_statuses.scss

@@ -1,36 +1,36 @@
-.pending {
-  background-color: var(--color-gray-300);
-  color: var(--color-gray-400);
-}
-
-.reserved {
-  background-color: rgba(var(--color-warn-rgb), .05);
-  color: var(--color-warn);
-}
-
-.scheduled, .ended {
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-500);
-}
-
-.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
-.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
-}
-
-.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
-  background-color: var(--color-success--opacity);
-  color: var(--color-success);
-}
-
-.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
-  background-color: var(--color-error-opacity);
-  color: var(--color-error);
-}
-
-
-.archived {
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-600);
-}
+.pending {
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-400);
+}
+
+.reserved {
+  background-color: var(--color-warning-opacity);
+  color: var(--color-warning);
+}
+
+.scheduled, .ended {
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-500);
+}
+
+.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
+.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
+  background-color: rgba(var(--color-info-rgb), .05);
+  color: var(--color-info);
+}
+
+.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
+  background-color: var(--color-success--opacity);
+  color: var(--color-success);
+}
+
+.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
+  background-color: var(--color-error-opacity);
+  color: var(--color-error);
+}
+
+
+.archived {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-600);
+}