ecabs-components 0.0.1

package/styles/material/overrides/_tab.scss

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,38 @@
+// @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

@@ -0,0 +1,10 @@
+/* #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

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

package/styles/material/overrides/index.scss

@@ -0,0 +1,19 @@
+@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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,78 @@
+* {
+  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

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

package/styles/scss/modules/_autocomplete.scss

@@ -0,0 +1,29 @@
+.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

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

package/styles/scss/modules/_card.scss

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,56 @@
+.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;
+  }
+}