ecabs-components 2.0.0-alpha.2 → 2.0.0-alpha.5

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

@@ -1,23 +1,28 @@
+@use "../utilities/variables";
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+
 .card {
-  box-shadow: $box-shadow-default;
+  box-shadow: variables.$box-shadow-default;
 
-  @include m(subtitle) {
-    @include fontSize($font-size-sm);
+  @include mixins.m(subtitle) {
+    @include mixins.fontSize(fonts.$font-size-sm);
 
     color: var(--color-gray-500);
   }
 
-  @include m(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.m(title) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
 
     margin: 0;
     padding-top: 2rem;
     padding-left: 1.5rem;
     color: var(--color-brand-dark);
-    font-weight: $font-weight-semibold;
+    font-weight: fonts.$font-weight-semibold;
   }
 
-  @include e(content) {
-    padding: calc-rem(32 24);
+  @include mixins.e(content) {
+    padding: functions.calc-rem(32 24);
   }
 }

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

@@ -1,53 +1,57 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/variables";
+@use "../utilities/functions";
+
 .chip {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
-  border-radius: $border-radius-base;
+  border-radius: variables.$border-radius-base;
   display: flex;
   width: fit-content;
-  padding: calc-rem(6px 8px);
+  padding: functions.calc-rem(6px 8px);
   align-items: center;
   justify-content: center;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-200) !important;
   color: var(--color-gray-500);
-  font-weight: $font-weight-regular;
+  font-weight: fonts.$font-weight-regular;
 
   // #Info
-  @include m(info) {
-    background-color: rgba(var(--color-info-rgb), .06);
+  @include mixins.m(info) {
+    background-color: rgba(var(--color-info-rgb), .06) !important;
     color: var(--color-info);
   }
 
   // #Warn
-  @include m(warn) {
-    background-color: rgba(var(--color-warn-rgb), .06);
+  @include mixins.m(warn) {
+    background-color: rgba(var(--color-warn-rgb), .06) !important;
     color: var(--color-warn);
   }
 
   // #Danger
-  @include m(danger) {
-    background-color: rgba(var(--color-error-rgb), .06);
+  @include mixins.m(danger) {
+    background-color: rgba(var(--color-error-rgb), .06) !important;
     color: var(--color-error);
   }
 
   // #Success
-  @include m(success) {
-    background-color: rgba(var(--color-success-rgb), .06);
+  @include mixins.m(success) {
+    background-color: rgba(var(--color-success-rgb), .06) !important;
     color: var(--color-success);
   }
 
   // #Selected
-  @include m(selected) {
+  @include mixins.m(selected) {
+    background-color: var(--color-brand-light) !important;
     &, * {
       color: var(--color-white);
       border-color: var(--color-brand-light);
-    }
-
-    background-color: var(--color-brand-light);
+    }    
   }
 
-  @include m(not-selected) {
+  @include mixins.m(not-selected) {
     border: 1px solid var(--color-gray-300);
-    background-color: var(--color-white);
+    background-color: var(--color-white) !important;
     color: var(--color-black);
   }
 }

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

@@ -1,7 +1,10 @@
-@import "../utilities/index";
+@use "../utilities/index";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
 
 .datepicker-ui {
-  @include e(toggle) {
+  @include mixins.e(toggle) {
     position: absolute !important;
     right: 0;
     line-height: 1.25;
@@ -27,7 +30,7 @@ ecabs-date-picker {
       flex: 1;
       padding-left: 10px;
       vertical-align: top;
-      max-width: calc-rem(160);
+      max-width: functions.calc-rem(160);
 
       ecabs-timepicker .timeInputWrapper {
         display: block;
@@ -89,7 +92,7 @@ ecabs-date-picker {
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
       background-position: center center;
       background-repeat: no-repeat;
-      background-size: calc-rem(22);
+      background-size: functions.calc-rem(22);
 
       &.disabled {
         cursor: not-allowed;

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

@@ -1,15 +1,19 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/variables";
+
 .dialog {
-  @include e(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.e(title) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
 
-    font-weight: $font-weight-semibold;
+    font-weight: fonts.$font-weight-semibold;
     color: var(--color-brand-dark);
-    line-height: $base-line-height;
+    line-height: fonts.$base-line-height;
   }
 
-  @include m(maps) {
+  @include mixins.m(maps) {
     padding: 1px;
-    border-radius: $border-radius-base * 2;
+    border-radius: variables.$border-radius-base * 2;
     background: #9cc0f9;
   }
 }

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

@@ -1,3 +1,8 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/variables";
+
 $form-input-icon-size: 18px;
 
 .form,
@@ -6,8 +11,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 +21,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-sm);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -35,59 +40,59 @@ 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;
+      padding: functions.calc-rem(8) functions.calc-rem(16);
+      border-radius: variables.$border-radius-base;
       border: 1px solid var(--color-gray-500);
       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);
+        right: functions.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 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(16);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
         border-color: transparent;
       }
 
-      @include m(invalid) {
+      @include mixins.m(invalid) {
         // invalid
         border-color: var(--color-error);
         color: var(--color-error);
@@ -95,53 +100,53 @@ 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;
+      padding: functions.calc-rem(16);
+      border-radius: variables.$border-radius-base;
       border: 1px solid var(--color-gray-500);
       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);
+        right: functions.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 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(16);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
         border-color: transparent;
@@ -149,7 +154,7 @@ form {
     }
 
     // #Invalid
-    @include m(invalid) {
+    @include mixins.m(invalid) {
       &,
       .form-field__input,
       .form-field__textarea {
@@ -159,20 +164,20 @@ form {
     }
 
     // #Required
-    @include m(required) {
+    @include mixins.m(required) {
       .form-field__label {
         &:after {
-          @extend %required;
+          @extend %required !optional;
         }
       }
     }
 
     // #Validation
-    @include e(validation) {
+    @include mixins.e(validation) {
       padding-top: 0.5rem;
-      @include fontSize($font-size-xs);
+      @include mixins.fontSize(fonts.$font-size-xs);
       color: var(--color-error);
-      @include m(item) {
+      @include mixins.m(item) {
         padding-bottom: 0.6rem;
 
         &:last-of-type {
@@ -182,9 +187,9 @@ form {
     }
 
     // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
-        @extend %pseudos;
+    @include mixins.e(subscript) {
+      @include mixins.m(wrapper) {
+        @extend %pseudos !optional;
 
         margin-top: 1.2rem;
       }
@@ -205,7 +210,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,6 @@
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .icon {
   color: var(--color-gray-500);
 
@@ -5,14 +8,14 @@
     color: var(--color-brand-light);
   }
 
-  @include e(bordered) {
+  @include mixins.e(bordered) {
     @extend .icon;
 
     &:after {
-      @extend %pseudos;
+      @extend %pseudos !optional;
 
       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,9 +1,14 @@
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/variables";
+
 .legend {
-  @include fontSize($font-size-sm);
+  @include mixins.fontSize(fonts.$font-size-sm);
   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 {
@@ -11,52 +16,52 @@
   }
 
   &:before {
-    @extend %pseudos;
+    @extend %pseudos !optional;
 
-    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);
     }
   }
 
-  @include e(item) {
-    @include m(count) {
-      margin-right: 2.4rem;
-    }
+  @include mixins.e(item) {
+    padding: functions.calc-rem(20 0);
 
-    padding: calc-rem(20 0);
+    @include mixins.m(count) {
+      margin-right: 2.4rem;
+    }    
   }
 }

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

@@ -1,4 +1,7 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/variables";
+@use "../../scss/utilities/functions";
 
 div {
   .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
@@ -58,9 +61,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 +118,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);
+      padding: functions.calc-rem(6px) functions.calc-rem(12px);
 
       .pac-icon.pac-icon-marker {
         display: none;
@@ -150,21 +153,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 +176,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 +187,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,13 +1,14 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/variables";
 
 .ecabs-phone {
   .ecabs-tel-input-container {
     position: relative;
-    border-radius: $border-radius-base;
+    border-radius: variables.$border-radius-base;
     border: 1px solid var(--color-gray-500);
 
     .ecabs-tel-input-input {
-      padding: calc-rem(8) calc-rem(8) calc-rem(8) calc-rem(105px) !important;
+      padding: functions.calc-rem(8) functions.calc-rem(8) functions.calc-rem(8) functions.calc-rem(105px) !important;
     }
 
     .iti__arrow {
@@ -15,7 +16,7 @@
       border-width: 0 2px 2px 0;
       display: inline-block;
       margin-top: -.4rem;
-      padding: calc-rem(3px);
+      padding: functions.calc-rem(3px);
       transform: rotate(45deg);
       -webkit-transform: rotate(45deg);
     }