ecabs-components 2.0.0-alpha.3 → 2.0.0-alpha.6

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

@@ -1,3 +1,9 @@
+@use "../utilities/helpers";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 $form-input-icon-size: 18px;
 
 .form,
@@ -6,8 +12,8 @@ form {
     margin-bottom: 1rem;
     position: relative;
     // #Label
-    @include e(label) {
-      @include fontSize($font-size-xs);
+    @include mixins.e(label) {
+      @include mixins.fontSize(fonts.$font-size-xs);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -16,17 +22,17 @@ form {
 
 
       .icon {
-        @include fontSize($font-size-base);
+        @include mixins.fontSize(fonts.$font-size-base);
 
         display: inline;
         vertical-align: middle;
-        margin-left: calc-rem(6px);
+        margin-left: functions.calc-rem(6px);
       }
     }
 
     // #Label Note
-    @include e(label-note) {
-      @include fontSize($font-size-sm);
+    @include mixins.e(label-note) {
+      @include mixins.fontSize(fonts.$font-size-md);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -35,59 +41,135 @@ form {
     }
 
     // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
+    @include mixins.e(input) {
+      @include mixins.fontSize(fonts.$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);
+      padding: functions.calc-rem(8px 16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
-      line-height: $base-line-height;
+      line-height: fonts.$base-line-height;
 
       &:focus {
         border-color: var(--color-brand-dark);
       }
 
-      @include m(wrapper) {
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include mixins.m(wrapper) {
         // wrapper
         display: flex;
         position: relative;
         line-height: 1;
+
+        @include mixins.m(fluid) {
+          width: fit-content;
+          max-width: 100%;
+          margin-left: auto; // pin the right edge, grow leftward
+          align-items: stretch;
+          overflow: hidden;
+          border: 1px solid var(--color-gray-300);
+          border-radius: variables.$border-radius-medium;
+          background-color: var(--color-white, #fff);
+
+          &:focus-within {
+            border-color: var(--color-brand-dark);
+          }
+
+          .form-field__input {
+            width: auto;
+            min-width: 0;
+            flex: 0 0 auto;
+            box-sizing: border-box;
+            border: 0;
+            border-radius: 0;
+            padding-right: 0;
+            text-align: right;
+            background-color: transparent;
+
+            &:focus {
+              border-color: transparent;
+            }
+          }
+
+          .form-field__input--suffix {
+            position: static !important;
+            top: auto;
+            right: auto;
+            flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            transform: none;
+            margin-left: functions.calc-rem(4px); // gap between the value and the symbol
+            padding-right: functions.calc-rem(16px);
+            white-space: nowrap;
+            pointer-events: none;
+
+            &,
+            i,
+            .mat-icon {
+              @include mixins.fontSize(fonts.$font-size-base);
+
+              width: auto;
+              height: auto;
+            }
+          }
+        }
+      }
+
+      @include mixins.m(sizer) {
+        @include mixins.fontSize(fonts.$font-size-base);
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 0;
+        padding: 0 0 0 functions.calc-rem(16px);
+        border: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+        white-space: pre;
+        line-height: fonts.$base-line-height;
       }
 
-      @include m(suffix) {
+      @include mixins.m(suffix) {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.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 mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
         }
       }
 
-      @include m(prefix) {
+      @include mixins.m(prefix) {
         // prefix
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: functions.calc-rem(16px);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
 
-      @include m(invalid) {
+      @include mixins.m(invalid) {
         // invalid
         border-color: var(--color-error);
         color: var(--color-error);
@@ -95,71 +177,146 @@ form {
     }
 
     // #Textarea
-    @include e(textarea) {
-      @include fontSize($font-size-base);
+    @include mixins.e(textarea) {
+      @include mixins.fontSize(fonts.$font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      padding: functions.calc-rem(16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
-      line-height: $base-line-height;
+      line-height: fonts.$base-line-height;
 
       &:focus {
         border-color: var(--color-brand-dark);
       }
 
-      @include m(wrapper) {
+      @include mixins.m(wrapper) {
         // wrapper
         display: flex;
         position: relative;
         line-height: 1;
       }
 
-      @include m(suffix) {
+      @include mixins.m(suffix) {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.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 mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
         }
       }
 
-      @include m(prefix) {
+      @include mixins.m(prefix) {
         // prefix
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: functions.calc-rem(16px);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    // #Range
+    @include mixins.e(range) {
+      @include mixins.fontSize(fonts.$font-size-base);
+      display: block;
+      width: 100%;
+      padding: functions.calc-rem(8px 16px);
+      color: var(--color-black);
+      line-height: fonts.$base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include mixins.m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: functions.calc-rem(variables.$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 mixins.m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include mixins.m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: functions.calc-rem(16px);
+      }
+
+      @include mixins.m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include mixins.m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
       }
     }
 
     // #Invalid
-    @include m(invalid) {
+    @include mixins.m(invalid) {
       &,
       .form-field__input,
-      .form-field__textarea {
+      .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) {
+    @include mixins.m(required) {
       .form-field__label {
         &:after {
           @extend %required;
@@ -168,11 +325,13 @@ form {
     }
 
     // #Validation
-    @include e(validation) {
+    @include mixins.e(validation) {
+      @include mixins.fontSize(fonts.$font-size-xs);
+
       padding-top: 0.5rem;
-      @include fontSize($font-size-xs);
       color: var(--color-error);
-      @include m(item) {
+
+      @include mixins.m(item) {
         padding-bottom: 0.6rem;
 
         &:last-of-type {
@@ -182,20 +341,14 @@ form {
     }
 
     // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
+    @include mixins.e(subscript) {
+      @include mixins.m(wrapper) {
         @extend %pseudos;
 
         margin-top: 1.2rem;
       }
     }
 
-    &.disabled input,
-    &.disabled textarea {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-
     .spinner {
       position: absolute;
       right: 0.25rem;
@@ -205,7 +358,7 @@ form {
     .hint {
       font-size: 10px;
       text-align: right;
-      margin-right: calc-rem(17px);
+      margin-right: functions.calc-rem(17px);
       transform: translateY(-1rem);
       margin-bottom: -1rem;
     }

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

@@ -1,3 +1,7 @@
+@use "../utilities/helpers";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .icon {
   color: var(--color-gray-500);
 
@@ -5,14 +9,14 @@
     color: var(--color-brand-light);
   }
 
-  @include e(bordered) {
+  @include mixins.e(bordered) {
     @extend .icon;
 
     &:after {
       @extend %pseudos;
 
       border: 1px solid var(--color-gray-400);
-      border-radius: $border-radius-base;
+      border-radius: variables.$border-radius-base;
       width: calc(100% + 0.8rem);
       height: calc(100% + 0.8rem);
       top: -0.4rem;

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,9 @@
-@import "../../scss/utilities/index";
+@use "../../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 +63,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 +120,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;
@@ -150,21 +155,21 @@ div {
 }
 
 .rounded-rectangle {
-  @include fontSize(12px);
+  @include mixins.fontSize(12px);
 
   position: relative;
-  box-shadow: $box-shadow-default;
+  box-shadow: variables.$box-shadow-default;
   border-radius: 20px;
   display: flex;
   width: 100%;
-  min-width: calc-rem(96px);
-  height: calc-rem(36px);
-  padding-left: calc-rem(6px);
+  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: $font-weight-semibold;
+  font-weight: fonts.$font-weight-semibold;
   line-height: 1.5;
   text-align: center;
   z-index: 99;
@@ -173,10 +178,10 @@ div {
 .straight-line {
   position: absolute;
   border-radius: 2px;
-  top: calc-rem(30px);
+  top: functions.calc-rem(30px);
   left: 50%;
-  width: calc-rem(3px);
-  height: calc-rem(48px);
+  width: functions.calc-rem(3px);
+  height: functions.calc-rem(48px);
   background-color: var(--color-brand-dark);
   transform: translateX(-50%);
   z-index: 1;
@@ -184,18 +189,18 @@ div {
 
 .map-circle-point {
   position: absolute;
-  width: calc-rem(16px);
-  height: calc-rem(16px);
+  width: functions.calc-rem(16px);
+  height: functions.calc-rem(16px);
   background-color: var(--color-brand-light);
   border-radius: 50%;
-  top: calc-rem(70px);
+  top: functions.calc-rem(70px);
   left: 50%;
   transform: translateX(-50%);
 }
 
 .inner-circle {
-  width: calc-rem(8px);
-  height: calc-rem(8px);
+  width: functions.calc-rem(8px);
+  height: functions.calc-rem(8px);
   background-color: var(--color-white);
   border-radius: 50%;
   position: absolute;

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

@@ -1,26 +1,24 @@
-@import "../../scss/utilities/index";
+@use "../utilities/functions";
+@use "../utilities/variables";
 
 .ecabs-phone {
   .ecabs-tel-input-container {
     position: relative;
-    border-radius: $border-radius-base;
-    border: 1px solid var(--color-gray-500);
+    border-radius: variables.$border-radius-base;
+    border: 1px solid var(--color-gray-300);
 
     .ecabs-tel-input-input {
-      padding: calc-rem(8) calc-rem(8) calc-rem(8) calc-rem(105px) !important;
+      padding: functions.calc-rem(8px 8px 8px 105px) !important;
     }
 
-    .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;
     }
   }