ecabs-components 2.0.0-alpha.1 → 2.0.0-alpha.10

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

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

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

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

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

@@ -1,4 +1,8 @@
-@import "../../scss/utilities/index";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 
 div {
   .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
@@ -58,9 +62,9 @@ div {
 
     &.leaflet-control-zoom-in,
     &.leaflet-control-zoom-out {
-      @include fontSize(28px);
+      @include mixins.fontSize(28px);
 
-      font-weight: $font-weight-thin;
+      font-weight: fonts.$font-weight-thin;
     }
   }
 
@@ -115,13 +119,13 @@ div {
 
 .pac-container {
   &.pac-logo {
-    box-shadow: $box-shadow-default;
-    border-bottom-right-radius: $border-radius-base;
-    border-bottom-left-radius: $border-radius-base;
+    box-shadow: variables.$box-shadow-default;
+    border-bottom-right-radius: variables.$border-radius-base;
+    border-bottom-left-radius: variables.$border-radius-base;
 
     .pac-item {
-      border-color: var(--color-gray-200);
-      padding: calc-rem(6px) calc-rem(12px);
+      border-color: var(--color-gray-50);
+      padding: functions.calc-rem(6px) functions.calc-rem(12px);
 
       .pac-icon.pac-icon-marker {
         display: none;
@@ -138,3 +142,84 @@ div {
     }
   }
 }
+
+/**
+* Custom map markers
+*/
+
+.marker {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.rounded-rectangle {
+  @include mixins.fontSize(12px);
+
+  position: relative;
+  box-shadow: variables.$box-shadow-default;
+  border-radius: 20px;
+  display: flex;
+  width: 100%;
+  min-width: functions.calc-rem(96px);
+  height: functions.calc-rem(36px);
+  padding-left: functions.calc-rem(6px);
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  color: var(--color-brand-dark);
+  font-weight: fonts.$font-weight-semibold;
+  line-height: 1.5;
+  text-align: center;
+  z-index: 99;
+}
+
+.straight-line {
+  position: absolute;
+  border-radius: 2px;
+  top: functions.calc-rem(30px);
+  left: 50%;
+  width: functions.calc-rem(3px);
+  height: functions.calc-rem(48px);
+  background-color: var(--color-brand-dark);
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.map-circle-point {
+  position: absolute;
+  width: functions.calc-rem(16px);
+  height: functions.calc-rem(16px);
+  background-color: var(--color-brand-light);
+  border-radius: 50%;
+  top: functions.calc-rem(70px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.inner-circle {
+  width: functions.calc-rem(8px);
+  height: functions.calc-rem(8px);
+  background-color: var(--color-white);
+  border-radius: 50%;
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.custom-point {
+  .map-circle-point {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: unset;
+    left: unset;
+    transform: unset;
+  }
+
+  .inner-circle {
+    width: 50%;
+    height: 50%;
+  }
+}

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

@@ -0,0 +1,52 @@
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
+.action-menu {
+  @include mixins.e(trigger) {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  @include mixins.e(trigger-icon) {
+    --action-menu-trigger-icon-size: #{functions.calc-rem(16px)};
+    --action-menu-trigger-icon-color: var(--color-gray-400);
+    --action-menu-trigger-icon-color-hover: var(--color-brand-dark);
+
+    width: var(--action-menu-trigger-icon-size);
+    height: var(--action-menu-trigger-icon-size);
+    font-size: var(--action-menu-trigger-icon-size);
+    line-height: var(--action-menu-trigger-icon-size);
+    color: var(--action-menu-trigger-icon-color);
+  }
+}
+
+.action-menu-item {
+  --action-menu-item-color: var(--color-gray-700);
+  --action-menu-item-icon-size: #{functions.calc-rem(16px)};
+  --action-menu-item-icon-gap: #{functions.calc-rem(8px)};
+
+  display: flex;
+  align-items: center;
+  color: var(--action-menu-item-color);
+
+  @include mixins.m(destructive) {
+    --action-menu-item-color: var(--color-error);
+  }
+
+  @include mixins.e(icon) {
+    flex: none;
+
+    margin-right: var(--action-menu-item-icon-gap);
+    width: var(--action-menu-item-icon-size);
+    height: var(--action-menu-item-icon-size);
+    font-size: var(--action-menu-item-icon-size);
+    line-height: var(--action-menu-item-icon-size);
+    color: inherit;
+  }
+
+  @include mixins.e(label) {
+    @include mixins.fontSize(fonts.$font-size-md);
+  }
+}

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

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

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

@@ -1,38 +1,32 @@
-@import "../../scss/utilities/index";
+@use "../utilities/functions";
+@use "../utilities/variables";
 
 .ecabs-phone {
-  .iti {
-    border-radius: $border-radius-base;
-    border: 1px solid var(--color-gray-500);
+  .ecabs-tel-input-container {
+    position: relative;
+    border-radius: variables.$border-radius-base;
+    border: 1px solid var(--color-gray-300);
 
-    .iti__tel-input {
-      position: relative;
-      border-radius: $border-radius-base;
-      padding: calc-rem(8) calc-rem(8) calc-rem(8) calc-rem(105px) !important;
+    .ecabs-tel-input-input {
+      padding: functions.calc-rem(8px 8px 8px 105px) !important;
+      color: var(--color-black);
     }
 
-    .iti__arrow {
-      border: solid var(--color-gray-500);
-      border-width: 0 2px 2px 0;
-      display: inline-block;
-      margin-top: -.4rem;
-      padding: calc-rem(3px);
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
+    .country-selector {
+      opacity: 1 !important;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K");
+      background-size: functions.calc-rem(12px 7.41px);
+      padding-right: .36rem;
     }
 
-    .iti__flag {
+    .country-selector-flag.flag {
       filter: unset;
     }
   }
 
   .error {
-    .iti {
+    .ecabs-tel-input-container {
       border: 1px solid var(--color-error);
     }
   }
-
-  .disabled-field {
-    background-color: var(--color-white-opacity-05) !important;
-  }
 }

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

@@ -1,15 +1,19 @@
-@import '../utilities/index';
+@use '../utilities/index';
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
 
 $border-radius: 0.25rem;
 
 .select {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   border-radius: $border-radius;
-  border: 1px solid var(--color-gray-500);
-  padding: calc-rem(8) calc-rem(16) calc-rem(8) calc-rem(16);
+  border: 1px solid var(--color-gray-300);
+  padding: functions.calc-rem(8) functions.calc-rem(16) functions.calc-rem(8) functions.calc-rem(16);
   color: var(--color-black);
-  line-height: $base-line-height;
+  line-height: fonts.$base-line-height;
 
   &:focus {
     border-color: var(--color-brand-dark);

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

@@ -1,31 +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-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);
-}
+.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);
+}

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

@@ -1,3 +1,5 @@
+@use "../utilities/fonts";
+
 .tab-group {
   .tab-labels {
     .tab-label {
@@ -5,7 +7,7 @@
       font-size: 1rem;
       border-bottom-width: 2px;
       opacity: 1;
-      font-weight: $font-weight-regular;
+      font-weight: fonts.$font-weight-regular;
 
       &.tab-label-active {
         color: var(--color-brand-dark);

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

@@ -1,15 +1,26 @@
+@use "../utilities/helpers";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .table-ui {
   text-align: left;
 
   /* #Wrapper */
-  @include m(wrapper) {
+  @include mixins.m(wrapper) {
     position: relative;
-    box-shadow: $box-shadow-default;
-    border-radius: $border-radius-base * 2;
+    box-shadow: variables.$box-shadow-default;
+    border-radius: variables.$border-radius-base * 2;
     width: 100%;
-    padding: calc-rem(24);
+    padding: functions.calc-rem(24px);
     background-color: var(--color-white);
 
+    // A listing on a phone needs its width more than desktop's breathing room.
+    @include mixins.media-q(small) {
+      padding: functions.calc-rem(12px);
+    }
+
     &.loading:after {
       @extend %pseudos;
 
@@ -18,7 +29,7 @@
       width: 100%;
       height: 100%;
 
-      background-color: var(--color-gray-200);
+      background-color: var(--color-gray-50);
       opacity: 0.5;
       z-index: 999;
     }
@@ -38,8 +49,8 @@
   }
 
   /* #Nested */
-  @include e(nested) {
-    @include m(header) {
+  @include mixins.e(nested) {
+    @include mixins.m(header) {
       tr {
         th, td {
           border-bottom: 0;
@@ -54,7 +65,7 @@
   }
 
   thead {
-    @include fontSize($font-size-xs);
+    @include mixins.fontSize(fonts.$font-size-xs);
 
     color: var(--color-gray-500);
   }
@@ -63,20 +74,20 @@
   th {
     border-bottom: 1px solid var(--color-gray-400);
     color: var(--color-gray-500);
-    padding: calc-rem(14) calc-rem(14) calc-rem(14) 0;
-    font-weight: $font-weight-regular;
+    padding: functions.calc-rem(14) functions.calc-rem(14) functions.calc-rem(14) 0;
+    font-weight: fonts.$font-weight-regular;
 
     &:first-of-type {
-      padding-left: calc-rem(14);
+      padding-left: functions.calc-rem(14);
     }
 
     &:last-of-type {
-      padding-right: calc-rem(14);
+      padding-right: functions.calc-rem(14);
     }
   }
 
   td {
-    padding: calc-rem(14);
+    padding: functions.calc-rem(14);
   }
 
   a {
@@ -89,7 +100,7 @@
   }
 
   /* #Bordered */
-  @include e(bordered) {
+  @include mixins.e(bordered) {
     td,
     th {
       border-bottom: 1px solid var(--color-gray-200);
@@ -97,10 +108,10 @@
   }
 
   /* #Paginator */
-  @include e(paginator) {
+  @include mixins.e(paginator) {
     margin-top: 1.2rem;
 
-    @include m(wrapper) {
+    @include mixins.m(wrapper) {
       .table-ui__bordered & {
         border-bottom: 0;
         padding-bottom: 0;
@@ -111,19 +122,19 @@
       }
     }
 
-    @include m(sizer) {
+    @include mixins.m(sizer) {
       float: right;
     }
   }
 
   /* #Header */
-  @include e(header) {
+  @include mixins.e(header) {
     margin-bottom: 1.2rem;
   }
 
   /* #Progress */
-  @include e(progress) {
-    border-radius: $border-radius-base;
+  @include mixins.e(progress) {
+    border-radius: variables.$border-radius-base;
     position: absolute;
     top: 0;
     left: 0.12rem;