ecabs-components 1.1.69 → 1.1.71

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

@@ -1,435 +1,435 @@
-@import "../utilities/index";
-
-.datepicker-ui {
-  @include e(toggle) {
-    position: absolute !important;
-    right: 0;
-    line-height: 1.25;
-    padding: 0;
-
-    mat-icon {
-      color: var(--color-gray-500);
-    }
-  }
-}
-
-ecabs-date-picker {
-  .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;
-      }
-    }
-  }
-
-  .ecabs-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;
-    }
-  }
-}
+@import "../utilities/index";
+
+.datepicker-ui {
+  @include e(toggle) {
+    position: absolute !important;
+    right: 0;
+    line-height: 1.25;
+    padding: 0;
+
+    mat-icon {
+      color: var(--color-gray-500);
+    }
+  }
+}
+
+ecabs-date-picker {
+  .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;
+      }
+    }
+  }
+
+  .ecabs-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;
+    }
+  }
+}