ecabs-components 0.0.15 → 0.0.17

package/styles/material/overrides/_phone.scss

@@ -1,24 +0,0 @@
-ecabs-phone {
-  @extend .ecabs-phone;
-  .ngx-mat-tel-input-container {
-    .mat-input-element {
-      @extend .ngx-mat-tel-input-input;
-    }
-    .country-selector {
-      @extend .country-selector;
-    }
-  }
-  .form-field.error {
-    .ngx-mat-tel-input-container {
-      @extend .error;
-    }
-  }
-  .disabled {
-    input {
-      @extend .disabled-field;
-    }
-    button {
-      background-color: unset !important;
-    }
-  }
-}

package/styles/material/overrides/_select.scss

@@ -1,36 +0,0 @@
-.mat-select {
-  @extend .select;
-
-  .mat-select-arrow-wrapper {
-    display: unset;
-    vertical-align: auto;
-    transform: none;
-    padding-top: 0.375rem;
-  }
-
-  &-panel-wrap {
-    .mat-select-panel,
-    .mat-select-panel:not([class*='mat-elevation-z']) {
-      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
-
-      min-width: calc(100% + 32px) !important;
-
-      &[aria-multiselectable='true'] {
-        transform: translate(1.5rem, 0rem) !important;
-      }
-    }
-  }
-}
-
-.mat-form-field-underline {
-  display: none;
-}
-.form-field.error {
-  .mat-select {
-    border-color: var(--color-error);
-  }
-}
-
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
-  opacity: 1;
-}

package/styles/material/overrides/_tab.scss

@@ -1,23 +0,0 @@
-.mat-tab-group {
-  @extend .tab-group;
-
-  .mat-tab-labels {
-    @extend .tab-labels;
-
-    .mat-tab-label {
-      @extend .tab-label;
-
-      &.mat-tab-label-active {
-        @extend .tab-label-active;
-      }
-    }
-  }
-
-  &.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-    background-color: var(--color-brand-light) !important;
-  }
-
-  .mat-tab-body {
-    margin-top: 1.2rem;
-  }
-}

package/styles/material/overrides/_table.scss

@@ -1,12 +0,0 @@
-.mat-table {
-  @extend .table-ui;
-  @extend .table-ui__bordered;
-
-  td.mat-cell, td.mat-footer-cell {
-    padding: .36rem .36rem .36rem 0;
-
-    &:first-of-type {
-      padding-left: calc-rem(14);
-    }
-  }
-}

package/styles/material/overrides/_toaster.scss

@@ -1,38 +0,0 @@
-// @import 'ngx-toastr/toastr';
-
-// .toast-container {
-//   .ngx-toastr {
-//     @extend .toaster__body;
-//     box-shadow: unset;
-
-//     &.toast-success {
-//       @extend .success;
-//     }
-
-//     &.toast-error {
-//       @extend .error;
-//     }
-
-//     &.toast-warning {
-//       @extend .warning;
-//     }
-
-//     &.toast-info {
-//       @extend .info;
-//     }
-
-//     &:hover {
-//       box-shadow: unset;
-//     }
-
-//     .toast-close-button {
-//       @extend .close-button;
-
-//       span {
-//         display: none;
-//       }
-//     }
-
-//     background-image: unset;
-//   }
-// }

package/styles/material/overrides/_toggle.scss

@@ -1,10 +0,0 @@
-/* #Toggle */
-.mat-slide-toggle {
-  .mat-slide-toggle-bar {
-    background-color: var(--color-gray-300);
-  }
-
-  &.mat-checked.mat-accent .mat-slide-toggle-bar {
-    background-color: rgba(var(--color-brand-dark-rgb), 0.54);
-  }
-}

package/styles/material/overrides/_tooltip.scss

@@ -1,3 +0,0 @@
-.mat-tooltip {
-  @extend .tooltip;
-}

package/styles/material/overrides/index.scss

@@ -1,19 +0,0 @@
-@import "./autocomplete";
-@import "./menu";
-@import './button';
-@import './card';
-@import './chip';
-@import './datepicker';
-@import './dialog';
-@import './divider';
-@import './expansion';
-@import './form';
-@import './icon';
-@import './paginator';
-@import './phone';
-@import './select';
-@import './tab';
-@import './table';
-@import './toaster';
-@import './toggle';
-@import './tooltip';

package/styles/scss/base/_heading.scss

@@ -1,17 +0,0 @@
-.heading {
-  @include m(xs) {
-    @include fontSize($font-heading-xs);
-  }
-
-  @include m(sm) {
-    @include fontSize($font-heading-sm);
-  }
-
-  @include m(base) {
-    @include fontSize($font-heading-base);
-  }
-
-  @include m(lg) {
-    @include fontSize($font-heading-lg);
-  }
-}

package/styles/scss/base/_normalize.scss

@@ -1,78 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: $font-family-fallback;
-
-  &.wf-active {
-    font-family: $font-family-primary;
-  }
-}
-
-html,
-body {
-  height: 100%;
-  color: var(--color-black);
-
-  a {
-    color: var(--color-brand-light);
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--color-brand-dark);
-    }
-  }
-}
-
-ul, ol {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-gray-300);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-400);
-}
-
-:focus-visible {
-  outline-color: inherit;
-  outline-width: inherit;
-}
-
-input::placeholder {
-  overflow: visible;
-}
-
-h1 {
-  @include fontSize($font-heading-lg);
-}
-
-h2 {
-  @include fontSize($font-heading-base);
-}
-
-h3 {
-  @include fontSize($font-heading-md);
-}
-
-h4 {
-  @include fontSize($font-heading-sm);
-}
-
-h5 {
-  @include fontSize($font-heading-xs);
-}

package/styles/scss/base/index.scss

@@ -1,2 +0,0 @@
-@import "normalize";
-@import "heading";

package/styles/scss/modules/_autocomplete.scss

@@ -1,29 +0,0 @@
-.autocomplete-ui {
-  box-shadow: $box-shadow-default;
-  border-radius: $border-radius-base;
-  display: flex;
-  flex-direction: column;
-
-  @include m(item) {
-    @include fontSize(16px);
-    width: 100%;
-    padding: calc-rem(16);
-    color: var(--color-black);
-
-    &::after {
-      @extend %pseudos;
-
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background-color: var(--color-gray-100);
-    }
-
-    &:last-of-type {
-      &:after {
-        background-color: transparent;
-      }
-    }
-  }
-}

package/styles/scss/modules/_button.scss

@@ -1,281 +0,0 @@
-.btn {
-  @include fontSize($font-size-lg);
-
-  border: 0;
-  min-width: calc-rem(111);
-  width: fit-content;
-  padding: calc-rem(8 24);
-  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;
-  }
-
-  // #Primary
-  @include e(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-200);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn__primary--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-
-      &:hover {
-        background-color: var(--color-gray-200);
-      }
-    }
-  }
-
-  /* #Secondary */
-  @include e(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-200);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn__secondary--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-    }
-  }
-
-  /* #Warn */
-  @include e(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-200);
-      }
-    }
-
-    @include m(link) {
-      @extend .btn__warn--outline;
-
-      &:after {
-        border-color: transparent;
-      }
-    }
-  }
-
-  /* #Success */
-  @include e(success) {
-    background-color: var(--color-success);
-    color: var(--color-white);
-
-    &: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-200);
-      }
-    }
-
-    @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);
-      }
-    }
-  }
-
-  /* #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);
-  }
-}
-
-.w-full {
-  width: 100% !important;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.ml-0 {
-  margin-left: 0;
-}
-
-.flex {
-  display: flex;
-}
-.absolute {
-  position: absolute;
-}
-.left-0 {
-  left: 0px;
-}
-.top-0 {
-  top: 0px;
-}
-.right-0 {
-  right: 0px;
-}
-.bottom-0 {
-  bottom: 0px;
-}
-.z-50 {
-  z-index: 50;
-}
-.items-center {
-  align-items: center;
-}
-.justify-center{
-  justify-content: center;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-.mr-4 {
-  margin-right: 1rem;
-}

package/styles/scss/modules/_card.scss

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

package/styles/scss/modules/_chip.scss

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