ecabs-components 1.0.13 → 1.0.15

package/styles/scss/modules/_dialog.scss

@@ -1,14 +0,0 @@
-.dialog {
-  @include e(title) {
-    @include fontSize($font-heading-xs);
-
-    font-weight: $font-weight-semibold;
-    color: var(--color-brand-dark);
-  }
-
-  @include m(maps) {
-    padding: 1px;
-    border-radius: $border-radius-base * 2;
-    background: #9cc0f9;
-  }
-}

package/styles/scss/modules/_divider.scss

@@ -1,3 +0,0 @@
-.divider {
-  border-top-color: var(--color-gray-300);
-}

package/styles/scss/modules/_form.scss

@@ -1,233 +0,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);
-      }
-    }
-
-    // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8) calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
-      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(16);
-        color: var(--color-gray-500);
-        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(16);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        border-color: transparent;
-      }
-
-      @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(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
-      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(16);
-        color: var(--color-gray-500);
-        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(16);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        border-color: transparent;
-      }
-    }
-
-    // #Invalid
-    @include m(invalid) {
-      .form-field__input,
-      .form-field__textarea {
-        color: var(--color-error);
-        border-color: var(--color-error);
-      }
-    }
-
-    // #Required
-    @include m(required) {
-      .form-field__label {
-        &:after {
-          @extend %pseudos;
-
-          content: '*';
-          margin-left: 0.2rem;
-          margin-top: 2px;
-          color: var(--color-error);
-        }
-      }
-    }
-
-    // #Validation
-    @include e(validation) {
-      padding-top: 0.5rem;
-      @include fontSize($font-size-xs);
-      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;
-      }
-    }
-
-    &.disabled input,
-    .disabled textarea {
-      background-color: var(--color-white-opacity-05);
-    }
-
-    .spinner {
-      position: absolute;
-      right: 0.25rem;
-      bottom: 0.5rem;
-    }
-
-    .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-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
-  width: auto;
-}
-
-.mat-mdc-text-field-wrapper {
-  padding-bottom: 0;
-}

package/styles/scss/modules/_icon.scss

@@ -1,30 +0,0 @@
-.icon {
-  color: var(--color-gray-500);
-
-  &:hover {
-    color: var(--color-brand-light);
-  }
-
-  @include e(bordered) {
-    @extend .icon;
-
-    &:after {
-      @extend %pseudos;
-
-      border: 1px solid var(--color-gray-400);
-      border-radius: $border-radius-base;
-      width: calc(100% + 0.8rem);
-      height: calc(100% + 0.8rem);
-      top: -0.4rem;
-      left: -0.4rem;
-    }
-  }
-}
-
-.eyes-icon-label {
-  border-color: var(--color-gray-400);
-  background-color: var(--color-white);
-  color: var(--color-black);
-  padding: 0.125rem;
-  transform: translateY(-1.25rem);
-}

package/styles/scss/modules/_img.scss

@@ -1,32 +0,0 @@
-.aspect-ratio {
-  position: relative;
-  display: inline-block;
-  background-color: inherit;
-  line-height: 1;
-  overflow: hidden;
-
-  // ***************************
-  // #Content
-  // ***************************/
-  &__content { //** Fallback
-    position: absolute;
-    top: 50%;
-    right: 0;
-    bottom: 0;
-    left: 50%;
-    max-width: 100%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-
-    @supports (object-fit: cover) {
-      &--cover { // cover
-        position: static;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        object-fit: cover;
-        transform: none;
-      }
-    }
-  }
-}

package/styles/scss/modules/_legend.scss

@@ -1,64 +0,0 @@
-.legend {
-  @include fontSize($font-size-sm);
-  position: relative;
-  display: inline-block;
-  margin-left: calc-rem(12);
-  padding-left: calc-rem(24);
-  vertical-align: top;
-  
-  &:first-of-type {
-    margin-left: 0;
-  }
-
-  &:before {
-    @extend %pseudos;
-
-    border-radius: $border-radius-base;
-    width: calc-rem(16);
-    height: calc-rem(16);
-    top: calc-rem(3);
-    left: 0;
-  }
-
-  @include m(asap) {
-    &:before {
-      background-color: #eded0d;
-    }
-  }
-
-  @include m(mobile) {
-    &:before {
-      background-color: #feb6e2;
-    }
-  }
-
-  @include m(delivery) {
-    &:before {
-      background-color: #dd9750;
-    }
-  }
-
-  @include m(walkin) {
-    &:before {
-      background-color: #87b5ca;
-    }
-  }
-
-  @include m(concierge) {
-    &:before {
-      background-color: #2be879;
-    }
-  }
-
-  @include m(in-fifteen) {
-    &:before {
-      background-color: #e64c4a;
-    }
-  }
-
-  @include m(standard) {
-    &:before {
-      background-color: #d7d8d3;
-    }
-  }
-}

package/styles/scss/modules/_list.scss

@@ -1,17 +0,0 @@
-.list {
-  list-style-type: none;
-
-  @include m(bordered) {
-    .list__item {
-      border-bottom: 1px solid var(--color-gray-200);
-    }
-  }
-
-  @include e(item) {
-    @include m(count) {
-      margin-right: 2.4rem;
-    }
-
-    padding: calc-rem(20 0);
-  }
-}

package/styles/scss/modules/_map.scss

@@ -1,112 +0,0 @@
-div {
-  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
-    background-image: url('/assets/images/map-polygon-icon.svg');
-    background-position: center center;
-  }
-
-  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
-    background-image: url('/assets/images/map-edit-icon.svg');
-    background-position: center center;
-  }
-
-  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
-    background-image: url('/assets/images/map-delete-icon.svg');
-    background-position: center center;
-  }
-
-  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
-    background-image: url('/assets/images/map-marker-icon.svg');
-    background-position: center center;
-  }
-
-  .leaflet-touch .leaflet-control-zoom.leaflet-bar .leaflet-control-zoom-fullscreen {
-    background-image: url('/assets/images/map-fullscreen-icon.svg');
-    background-position: center center;
-    background-size: 16px;
-
-    &.leaflet-fullscreen-on {
-      background-image: url('/assets/images/map-fullscreen-exit-icon.svg');
-    }
-  }
-
-  .leaflet-control-zoom.leaflet-bar.leaflet-control {
-    display: flex;
-    flex-direction: column;
-
-    .leaflet-control-zoom-fullscreen {
-      order: -1;
-    }
-  }
-
-  .leaflet-touch .leaflet-control-layers,
-  .leaflet-touch .leaflet-bar {
-    border: 0;
-  }
-
-  .leaflet-touch .leaflet-bar a {
-    border: 0;
-    width: 40px;
-    height: 40px;
-    color: var(--color-brand-dark);
-    line-height: 40px;
-
-    &.leaflet-control-zoom-in {
-      line-height: 38px;
-    }
-
-    &.leaflet-control-zoom-in,
-    &.leaflet-control-zoom-out {
-      @include fontSize(28px);
-
-      font-weight: $font-weight-thin;
-    }
-  }
-
-  .leaflet-draw-toolbar a {
-    background-size: unset;
-  }
-
-  .leaflet-touch .leaflet-bar {
-    &.leaflet-draw-toolbar,
-    &.leaflet-control-zoom {
-      a {
-        border-radius: 8px;
-        margin-top: 10px;
-      }
-    }
-  }
-
-  .leaflet-top {
-    bottom: 0;
-    top: unset;
-  }
-
-  .leaflet-top .leaflet-control {
-    margin-top: 0;
-    margin-bottom: 1.2rem;
-    margin-left: 1.2rem;
-  }
-
-  .leaflet-bottom .leaflet-right {
-    .leaflet-control-attribution .leaflet-control {
-      display: none;
-    }
-  }
-
-  .leaflet-bar a.leaflet-disabled {
-    background-color: var(--color-gray-300);
-  }
-
-  .leaflet-draw-actions a {
-    background-color: var(--color-brand-dark);
-    border-left-color: var(--color-white);
-
-    &:hover {
-      background-color: rgba(var(--color-brand-dark-rgb), 0.88);
-    }
-  }
-
-  .leaflet-tooltip {
-    z-index: 999;
-  }
-}

package/styles/scss/modules/_percentage.scss

@@ -1,33 +0,0 @@
-.percentage {
-  &__over-87 {
-    background-color: #25BD3D;
-  }
-
-  &__over-75 {
-    background-color: #87C337;
-  }
-
-  &__over-62 {
-    background-color: #BAC61C;
-  }
-
-  &__over-50 {
-    background-color: #ECC902;
-  }
-
-  &__over-37 {
-    background-color: #EBA70D;
-  }
-
-  &__over-25 {
-    background-color: #E7831B;
-  }
-
-  &__over-12 {
-    background-color: #E35E2A;
-  }
-
-  &__default {
-    background-color: #DF3838;
-  }
-}

package/styles/scss/modules/_phone.scss

@@ -1,29 +0,0 @@
-.ecabs-phone {
-  @include fontSize($font-size-lg);
-  font-size: 1rem;
-
-  .ngx-mat-tel-input-container {
-    position: relative;
-    border-radius: $border-radius-base;
-    border: 1px solid var(--color-gray-500);
-
-    .ngx-mat-tel-input-input {
-      padding: calc-rem(10) calc-rem(10) calc-rem(10) 105px !important;
-    }
-    .country-selector {
-      opacity: 1 !important;
-      padding: 0rem;
-    }
-    .country-selector-code {
-      font-size: 1rem;
-    }
-  }
-  .error {
-    .ngx-mat-tel-input-container {
-      border: 1px solid var(--color-error);
-    }
-  }
-  .disabled-field {
-    background-color: var(--color-white-opacity-05) !important;
-  }
-}

package/styles/scss/modules/_select.scss

@@ -1,41 +0,0 @@
-@import './../utilities/index';
-
-$border-radius: 0.25rem;
-
-.select {
-  @include fontSize($font-size-lg);
-
-  border-radius: $border-radius;
-  border: 1px solid var(--color-gray-500);
-  padding: calc-rem(8) calc-rem(16) calc-rem(8) calc-rem(16);
-  color: var(--color-black);
-  line-height: $base-line-height;
-
-  &:focus {
-    border-color: var(--color-brand-dark);
-  }
-}
-
-.mat-mdc-select-disabled {
-  background-color: var(--color-white-opacity-05);
-
-  mat-select-trigger {
-    color: var(--color-black);
-  }
-}
-
-.mat-mdc-select-placeholder {
-  color: rgba(0, 0, 0, 0.42) !important;
-  -webkit-text-fill-color: rgba(0, 0, 0, 0.42) !important;
-  font-size: 18px !important;
-  line-height: 1.5rem !important;
-  font-family: $font-family-primary;
-}
-
-.mat-mdc-form-field-label{
-  display: none !important;
-}
-
-.mat-mdc-form-field-label{
-  display: none !important;
-}

package/styles/scss/modules/_statuses.scss

@@ -1,31 +0,0 @@
-.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-200);
-  color: var(--color-gray-500);
-}
-
-.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
-.cab_arrived_at_intermediary_waypoint, .trip_ongoing {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
-}
-
-.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in {
-  background-color: rgba(var(--color-success-rgb), .05);
-  color: var(--color-success);
-}
-
-.cancelled, .rejected, .suspended,
-.cancelled, .sick, .no_show, .unable_to_complete, .unavailable, {
-  background-color: rgba(var(--color-error-rgb), .05);
-  color: var(--color-error);
-}

package/styles/scss/modules/_tab.scss

@@ -1,16 +0,0 @@
-.tab-group {
-  .tab-labels {
-    .tab-label {
-      color: var(--color-brand-dark);
-      font-size: 1rem;
-      border-bottom-width: 2px;
-      opacity: 1;
-      font-weight: $font-weight-regular;
-
-      &.tab-label-active {
-        color: var(--color-brand-light);
-        border-color: var(--color-brand-light);
-      }
-    }
-  }
-}