ecabs-components 1.0.5 → 1.0.7

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

package/styles/scss/modules/_dialog.scss

@@ -1,14 +0,0 @@
-.dialog {
-  @include e(title) {
-    @include fontSize($font-heading-xs);
-
-    font-weight: $font-weight-semibold;
-    color: var(--color-brand-dark);
-  }
-
-  @include m(maps) {
-    padding: 1px;
-    border-radius: $border-radius-base * 2;
-    background: #9cc0f9;
-  }
-}

package/styles/scss/modules/_divider.scss

@@ -1,3 +0,0 @@
-.divider {
-  border-top-color: var(--color-gray-300);
-}

package/styles/scss/modules/_form.scss

@@ -1,233 +0,0 @@
-$form-input-icon-size: 18px;
-
-.form,
-form {
-  &-field {
-    margin-bottom: 1rem;
-    position: relative;
-    // #Label
-    @include e(label) {
-      @include fontSize($font-size-xs);
-
-      display: inline-block;
-      margin-bottom: 0.25rem;
-      color: var(--color-gray-500);
-      cursor: pointer;
-
-
-      .icon {
-        @include fontSize($font-size-base);
-
-        display: inline;
-        vertical-align: middle;
-        margin-left: calc-rem(6px);
-      }
-    }
-
-    // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8) calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: 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 m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        border-color: transparent;
-      }
-
-      @include m(invalid) {
-        // invalid
-        border-color: var(--color-error);
-        color: var(--color-error);
-      }
-    }
-
-    // #Textarea
-    @include e(textarea) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: 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 m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        border-color: transparent;
-      }
-    }
-
-    // #Invalid
-    @include m(invalid) {
-      .form-field__input,
-      .form-field__textarea {
-        color: var(--color-error);
-        border-color: var(--color-error);
-      }
-    }
-
-    // #Required
-    @include m(required) {
-      .form-field__label {
-        &:after {
-          @extend %pseudos;
-
-          content: '*';
-          margin-left: 0.2rem;
-          margin-top: 2px;
-          color: var(--color-error);
-        }
-      }
-    }
-
-    // #Validation
-    @include e(validation) {
-      padding-top: 0.5rem;
-      @include fontSize($font-size-xs);
-      color: var(--color-error);
-      @include m(item) {
-        padding-bottom: 0.6rem;
-
-        &:last-of-type {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
-        @extend %pseudos;
-
-        margin-top: 1.2rem;
-      }
-    }
-
-    &.disabled input,
-    .disabled textarea {
-      background-color: var(--color-white-opacity-05);
-    }
-
-    .spinner {
-      position: absolute;
-      right: 0.25rem;
-      bottom: 0.5rem;
-    }
-
-    .hint {
-      font-size: 10px;
-      text-align: right;
-      margin-right: calc-rem(17px);
-      transform: translateY(-1rem);
-      margin-bottom: -1rem;
-    }
-  }
-
-  // ==========================================================================
-  // #OVERRIDES
-  // ==========================================================================
-  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-
-  .mat-mdc-form-field-infix {
-    border-top: 0;
-  }
-
-  .mat-mdc-form-field .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-}
-
-.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
-  width: auto;
-}
-
-.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
-  width: auto;
-}
-
-.mat-mdc-text-field-wrapper {
-  padding-bottom: 0;
-}

package/styles/scss/modules/_icon.scss

@@ -1,30 +0,0 @@
-.icon {
-  color: var(--color-gray-500);
-
-  &:hover {
-    color: var(--color-brand-light);
-  }
-
-  @include e(bordered) {
-    @extend .icon;
-
-    &:after {
-      @extend %pseudos;
-
-      border: 1px solid var(--color-gray-400);
-      border-radius: $border-radius-base;
-      width: calc(100% + 0.8rem);
-      height: calc(100% + 0.8rem);
-      top: -0.4rem;
-      left: -0.4rem;
-    }
-  }
-}
-
-.eyes-icon-label {
-  border-color: var(--color-gray-400);
-  background-color: var(--color-white);
-  color: var(--color-black);
-  padding: 0.125rem;
-  transform: translateY(-1.25rem);
-}