ecabs-components 1.1.69 → 1.1.71

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

@@ -1,42 +1,42 @@
-.autocomplete-ui {
-  position: relative;
-
-  @include e(container) {
-    width: 100%;
-    background-color: var(--color-white);
-    box-shadow: $box-shadow-default;
-    border-radius: calc-rem($border-radius-large);
-    z-index: 1000;
-  }
-
-  @include m(item) {
-    @include fontSize(14px);
-
-    position: relative;
-    background-color: var(--color-white);
-    width: 100%;
-    padding: calc-rem(12px);
-    color: var(--color-black);
-    cursor: pointer;
-
-    &::after {
-      @extend %pseudos;
-
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background-color: var(--color-gray-50);
-    }
-
-    &:last-of-type {
-      &:after {
-        background-color: transparent;
-      }
-    }
-
-    &.active {
-      background-color: var(--color-brand-light2)
-    }
-  }
-}
+.autocomplete-ui {
+  position: relative;
+
+  @include e(container) {
+    width: 100%;
+    background-color: var(--color-white);
+    box-shadow: $box-shadow-default;
+    border-radius: calc-rem($border-radius-large);
+    z-index: 1000;
+  }
+
+  @include m(item) {
+    @include fontSize(14px);
+
+    position: relative;
+    background-color: var(--color-white);
+    width: 100%;
+    padding: calc-rem(12px);
+    color: var(--color-black);
+    cursor: pointer;
+
+    &::after {
+      @extend %pseudos;
+
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background-color: var(--color-gray-50);
+    }
+
+    &:last-of-type {
+      &:after {
+        background-color: transparent;
+      }
+    }
+
+    &.active {
+      background-color: var(--color-brand-light2)
+    }
+  }
+}

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

@@ -1,272 +1,272 @@
-.btn {
-  @include fontSize($font-size-base);
-
-  border: 0;
-  min-width: calc-rem(111px);
-  min-height: calc-rem(42px);
-  width: max-content;
-  padding: calc-rem(8px 24px);
-  font-weight: $font-weight-regular;
-  line-height: $base-line-height;
-
-  &:after {
-    @extend %pseudos;
-
-    border: 1px solid transparent;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: $border-radius-base;
-  }
-
-  &:hover {
-    transition: filter $trans-duration-style;
-  }
-
-  // #Basic
-  @include m(basic) {
-    background-color: transparent;
-    color: var(--color-gray-500);
-
-    &:hover {
-      background-color: transparent;
-      color: color-mix(in srgb, var(--color-gray-500), black 30%);
-    }
-
-    @include m(outline) {
-      background-color: transparent;
-      border-color: var(--color-gray-500);
-      color: var(--color-gray-500);
-
-      &:after {
-        border-color: var(--color-gray-500);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-        color: color-mix(in srgb, var(--color-gray-500), black 30%);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn--basic--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  // #Primary
-  @include m(primary) {
-    background-color: var(--color-brand-dark);
-    color: var(--color-white);
-
-    &:hover {
-      background-color: rgba(var(--color-brand-dark-rgb), .88);
-    }
-
-    @include m(outline) {
-      background-color: transparent;
-      border-color: var(--color-brand-dark);
-      color: var(--color-brand-dark);
-
-      &:after {
-        border-color: var(--color-brand-dark);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn--primary--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-      }
-    }
-  }
-
-  /* #Secondary */
-  @include m(secondary) {
-    background-color: var(--color-brand-light);
-    color: var(--color-white);
-
-    &:hover {
-      background-color: rgba(var(--color-brand-light-rgb), .88);
-    }
-
-    @include m(outline) {
-      background-color: transparent;
-      border-color: var(--color-brand-light);
-      color: var(--color-brand-light);
-
-      &:after {
-        border-color: var(--color-brand-light);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn--secondary--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-    }
-  }
-
-  /* #Warn */
-  @include m(warn) {
-    background-color: var(--color-error);
-    color: var(--color-white);
-
-    &:hover {
-      background-color: rgba(var(--color-error-rgb), .88);
-    }
-
-    @include m(outline) {
-      background-color: transparent;
-      border-color: var(--color-error);
-      color: var(--color-error);
-
-      &:after {
-        border-color: var(--color-error);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn--warn--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-    }
-  }
-
-  /* #Success */
-  @include m(success) {
-    background-color: var(--color-success--opacity);
-    color: var(--color-success);
-
-    &:hover {
-      background-color: rgba(var(--color-success-rgb), .88);
-    }
-
-    @include m(outline) {
-      background-color: transparent;
-      border-color: var(--color-success);
-      color: var(--color-success);
-
-      &:after {
-        border-color: var(--color-success);
-      }
-
-      &:hover {
-        background-color: var(--color-gray-50);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn--warn--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-    }
-  }
-
-  /* #Group */
-  @include e(group) {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    column-gap: 1rem;
-
-    @include media-q(small) {
-      display: flex;
-      flex-direction: column;
-      gap: 1.2rem;
-    }
-
-    margin-top: 1.2rem;
-
-    // Button group
-    @include m(item) {
-      @include media-q(small) {
-        width: 100%;
-        margin-right: 0;
-      }
-
-      min-width: calc-rem(100);
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-
-  /* #Disabled */
-  @include e(disabled) {
-    background-color: var(--color-gray-300);
-    color: var(--color-gray-400);
-    cursor: not-allowed;
-    pointer-events: none;
-    user-select: none;
-
-    @include m(outline) {
-      @extend .btn__disabled;
-
-      background-color: transparent;
-
-      &:after {
-        border-color: var(--color-gray-300);
-      }
-    }
-  }
-
-  /* prevent hover state from persisting when disabled */
-  &:disabled:hover,
-  &.loading:hover {
-    background-color: var(--color-gray-300);
-    color: var(--color-gray-400);
-    box-shadow: none;
-  }
-
-  /* #Icon */
-  @include e(with-icon) {
-    @include m(wrapper) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      i, .mat-icon {
-        display: inline-block;
-        margin-right: .6rem;
-      }
-    }
-  }
-
-  /* #Large */
-  @include m(lg) {
-    padding: calc-rem(16 24);
-  }
-}
+.btn {
+  @include fontSize($font-size-base);
+
+  border: 0;
+  min-width: calc-rem(111px);
+  min-height: calc-rem(42px);
+  width: max-content;
+  padding: calc-rem(8px 24px);
+  font-weight: $font-weight-semibold;
+  line-height: $base-line-height;
+
+  &:after {
+    @extend %pseudos;
+
+    border: 1px solid transparent;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: $border-radius-large;
+  }
+
+  &:hover {
+    transition: filter $trans-duration-style;
+  }
+
+  // #Basic
+  @include m(basic) {
+    background-color: transparent;
+    color: var(--color-gray-500);
+
+    &:hover {
+      background-color: transparent;
+      color: color-mix(in srgb, var(--color-gray-500), black 30%);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-gray-500);
+      color: var(--color-gray-500);
+
+      &:after {
+        border-color: var(--color-gray-500);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+        color: color-mix(in srgb, var(--color-gray-500), black 30%);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--basic--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  // #Primary
+  @include m(primary) {
+    background-color: var(--color-brand-dark);
+    color: var(--color-white);
+
+    &:hover {
+      background-color: rgba(var(--color-brand-dark-rgb), .88);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-brand-dark);
+      color: var(--color-brand-dark);
+
+      &:after {
+        border-color: var(--color-brand-dark);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--primary--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
+
+  /* #Secondary */
+  @include m(secondary) {
+    background-color: var(--color-brand-light);
+    color: var(--color-white);
+
+    &:hover {
+      background-color: rgba(var(--color-brand-light-rgb), .88);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-brand-light);
+      color: var(--color-brand-light);
+
+      &:after {
+        border-color: var(--color-brand-light);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--secondary--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+    }
+  }
+
+  /* #Warn */
+  @include m(warn) {
+    background-color: var(--color-error);
+    color: var(--color-white);
+
+    &:hover {
+      background-color: rgba(var(--color-error-rgb), .88);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-error);
+      color: var(--color-error);
+
+      &:after {
+        border-color: var(--color-error);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--warn--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+    }
+  }
+
+  /* #Success */
+  @include m(success) {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
+
+    &:hover {
+      background-color: rgba(var(--color-success-rgb), .88);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-success);
+      color: var(--color-success);
+
+      &:after {
+        border-color: var(--color-success);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--warn--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+    }
+  }
+
+  /* #Group */
+  @include e(group) {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    column-gap: 1rem;
+
+    @include media-q(small) {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2rem;
+    }
+
+    margin-top: 1.2rem;
+
+    // Button group
+    @include m(item) {
+      @include media-q(small) {
+        width: 100%;
+        margin-right: 0;
+      }
+
+      min-width: calc-rem(100);
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+  /* #Disabled */
+  @include e(disabled) {
+    background-color: var(--color-gray-300);
+    color: var(--color-gray-400);
+    cursor: not-allowed;
+    pointer-events: none;
+    user-select: none;
+
+    @include m(outline) {
+      @extend .btn__disabled;
+
+      background-color: transparent;
+
+      &:after {
+        border-color: var(--color-gray-300);
+      }
+    }
+  }
+
+  /* prevent hover state from persisting when disabled */
+  &:disabled:hover,
+  &.loading:hover {
+    background-color: var(--color-gray-300);
+    color: var(--color-gray-400);
+    box-shadow: none;
+  }
+
+  /* #Icon */
+  @include e(with-icon) {
+    @include m(wrapper) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i, .mat-icon {
+        display: inline-block;
+        margin-right: .6rem;
+      }
+    }
+  }
+
+  /* #Large */
+  @include m(lg) {
+    padding: calc-rem(16 24);
+  }
+}