ecabs-components 1.0.14 → 1.0.15

package/styles/scss/modules/_button.scss

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

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;
-  }
-}

package/styles/scss/modules/_datepicker.scss

@@ -1,426 +0,0 @@
-@import "../utilities/index";
-
-ecabs-date-picker {
-  .mat-datepicker-input {
-    // max-height: 2.625rem;;
-  }
-
-  .dateTimeWrapper {
-    position: relative;
-    display: flex;
-    width: 100%;
-
-    .datePart {
-      flex: 2;
-    }
-
-    .timePart {
-      flex: 1;
-      padding-left: 10px;
-      vertical-align: top;
-      max-width: calc-rem(160);
-
-      ecabs-timepicker .timeInputWrapper {
-        display: block;
-      }
-
-      ecabs-timepicker {
-        width: 100%;
-
-        .inputWrapper {
-          display: block;
-        }
-      }
-    }
-
-    .dateInputWrapper {
-      position: relative;
-    }
-
-    input {
-      min-height: 42px;
-      width: 100%;
-      display: block;
-      box-sizing: border-box;
-      font-size: 14px;
-      font-weight: 500;
-      padding-left: 10px;
-      border-radius: 4px;
-      border: 1px solid rgb(107, 109, 115);
-      outline: none;
-      transition: all 300ms ease-in-out;
-
-      &:disabled {
-        border-bottom-width: 1px;
-        background-color: var(--color-white-opacity-05);
-      }
-    }
-
-    input[type='date']::-webkit-calendar-picker-indicator,
-    input[type='date']::-webkit-inner-spin-button {
-      display: none;
-    }
-
-    input[type='date']::-webkit-clear-button {
-      display: none;
-    }
-
-    .calendar-icon {
-      float: right;
-      margin-top: -38px;
-      padding: 5px 10px 5px 5px;
-      display: block;
-      font-size: 13px;
-      line-height: 20px;
-      color: var(--color-gray-500);
-      position: relative;
-      width: 40px;
-      height: 30px;
-      cursor: pointer;
-      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: calc-rem(22);
-
-      &.disabled {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .app-element-wrapper {
-    &.focused {
-      label {
-        color: #376bfb;
-      }
-
-      input {
-        border-bottom-width: 2px;
-        border-bottom-color: #376bfb;
-      }
-    }
-
-    &.validationError {
-      label {
-        color: #ff4c4c;
-      }
-
-      input {
-        border-bottom-color: #ff4c4c;
-        border-bottom-width: 2px;
-      }
-    }
-  }
-}
-
-// ------------------------ datepicker component css override --------------
-
-.ng-mydp {
-  .myDpSelector {
-    border: 0;
-    padding: 0;
-    box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
-    0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
-    border-radius: 0 0 4px 4px;
-    background: white;
-
-    &:focus {
-      box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08),
-      0 2px 16px rgba(22, 42, 76, 0.06), 0 8px 12px rgba(22, 42, 76, 0.04);
-    }
-
-    .myDpWeekDayTitle {
-      background-color: white;
-      font-weight: 500;
-      font-size: 11px;
-      color: rgba(22, 42, 76, 0.7);
-    }
-
-    .myDpNextBtn {
-      margin-left: auto;
-      margin-right: 16px;
-
-      .myDpIconRightArrow {
-        line-height: 26px;
-        height: 25px;
-
-        &::before {
-          color: #376bfb;
-          font-size: 13px;
-        }
-      }
-    }
-
-    .myDpPrevBtn {
-      margin-left: 16px;
-
-      .myDpIconLeftArrow {
-        line-height: 26px;
-        height: 25px;
-
-        &::before {
-          color: #376bfb;
-          font-size: 13px;
-        }
-      }
-    }
-
-    .myDpMonthYearSelBar {
-      height: 52px;
-      padding-top: 10px;
-      border: 0;
-    }
-
-    .myDpMonthYearText {
-      button {
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 20px;
-        color: #376bfb;
-      }
-
-      .myDpMonthBtn {
-        padding-right: 7px;
-        position: relative;
-        margin-right: 15px;
-
-        &::after {
-          position: absolute;
-          content: '';
-          height: 14px;
-          width: 1px;
-          right: -7px;
-          top: 6px;
-          background: rgba(22, 42, 76, 0.5);
-        }
-      }
-
-      .myDpYearBtn {
-        padding-left: 6px;
-      }
-    }
-
-    .myDpCalTable {
-      height: calc(100% - 54px);
-      width: calc(100% - 20px);
-      margin: 0 10px;
-    }
-
-    //---------------- days table -------------------------------
-    table.myDpCalTable {
-      td {
-        .myDpDayValue {
-          border-radius: 4px;
-          background: #f0f2f5;
-          display: inline-block;
-          box-sizing: border-box;
-          width: 32px;
-          height: 28px;
-          font-size: 13px;
-          line-height: 28px;
-          text-align: center;
-          color: rgba(22, 42, 76, 0.9);
-
-          &.myDpMarkCurrDay {
-            border-bottom: 0;
-            color: #376bfb;
-          }
-        }
-
-        &.myDpSelectedDay {
-          .myDpDayValue {
-            color: white !important;
-            background: #6ab72a !important;
-          }
-        }
-
-        &.myDpDisabled {
-          background: unset;
-
-          .myDpDayValue {
-            background: unset !important;
-            color: rgba(22, 42, 76, 0.5);
-            cursor: not-allowed;
-
-            &:hover {
-              background: unset !important;
-            }
-          }
-        }
-
-        &.myDpRangeColor {
-          background-color: white;
-
-          .myDpDayValue {
-            background: #bee39d !important;
-          }
-
-          &.myDpSelectedDay {
-            .myDpDayValue {
-              color: white !important;
-              background: #6ab72a !important;
-            }
-          }
-        }
-
-        &.myDpDaycell:focus {
-          box-shadow: unset;
-          outline: unset;
-        }
-
-        &.myDpPrevMonth,
-        &.myDpNextMonth {
-          .myDpDayValue {
-            background: #f6f7f9;
-            color: rgba(22, 42, 76, 0.5);
-          }
-        }
-
-        .myDpDimDay {
-          opacity: 1;
-        }
-      }
-
-      .myDpTableSingleDay:hover {
-        background-color: white;
-
-        .myDpDayValue {
-          background: #bee39d;
-          color: rgba(22, 42, 76, 0.9);
-        }
-      }
-
-      .myDpSelectedDay,
-      .myDpSelectedMonth,
-      .myDpSelectedYear {
-        background-color: white;
-        border-radius: 0;
-      }
-    }
-
-    //================== months table =====================
-    .myDpMonthTable {
-      height: 128px;
-      width: calc(100% - 20px);
-      margin: 0 10px;
-
-      td {
-        .myDpMonthValue {
-          display: inline-block;
-          height: 28px;
-          width: 80px;
-          background: #f0f2f5;
-          vertical-align: middle;
-          text-align: center;
-          line-height: 28px;
-          font-weight: normal;
-          font-size: 13px;
-          color: rgba(22, 42, 76, 0.9);
-          border-radius: 4px;
-
-          &.myDpMarkCurrMonth {
-            border: 0;
-            color: #376bfb;
-          }
-
-          &:hover {
-            background: #bee39d;
-          }
-        }
-
-        &.myDpDisabled {
-          background: unset;
-
-          .myDpMonthValue {
-            background: unset !important;
-            color: rgba(22, 42, 76, 0.5) !important;
-            cursor: not-allowed;
-          }
-        }
-
-        &.myDpSelectedMonth {
-          background-color: white;
-
-          .myDpMonthValue {
-            background: #6ab72a !important;
-            color: white !important;
-          }
-        }
-
-        &.myDpTableSingleMonth:hover {
-          background-color: white;
-        }
-      }
-    }
-
-    //================== years table =====================
-
-    .myDpYearTable {
-      height: 160px;
-      width: calc(100% - 20px);
-      margin: 0 10px;
-
-      td {
-        .myDpYearValue {
-          display: inline-block;
-          height: 28px;
-          width: 46px;
-          background: #f0f2f5;
-          vertical-align: middle;
-          text-align: center;
-          line-height: 28px;
-          font-weight: normal;
-          font-size: 13px;
-          color: rgba(22, 42, 76, 0.9);
-          border-radius: 4px;
-
-          &.myDpMarkCurrYear {
-            border: 0;
-            color: #376bfb;
-          }
-
-          &:hover {
-            background: #bee39d;
-          }
-        }
-
-        &.myDpDisabled {
-          background: unset;
-
-          .myDpYearValue {
-            background: unset !important;
-            color: rgba(22, 42, 76, 0.5) !important;
-            cursor: not-allowed;
-          }
-        }
-
-        &.myDpSelectedYear {
-          background-color: white;
-
-          .myDpYearValue {
-            background: #6ab72a !important;
-            color: white !important;
-          }
-        }
-
-        &.myDpTableSingleYear:hover {
-          background-color: white;
-        }
-      }
-    }
-  }
-
-  .myDpSelectorArrow {
-    height: 272px !important;
-    width: 268px !important;
-    margin-top: -12px;
-
-    &::after {
-      display: none;
-    }
-
-    &::before {
-      display: none;
-    }
-  }
-}