@selco/installation-ui-css 1.0.0

package/src/digitv2/components/loaderV2.scss

@@ -0,0 +1,90 @@
+@import url("../index.scss");
+
+.digit-screen-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  @extend .light-background;
+  .digit-ldio-pjg92h09b2o div {
+    position: absolute;
+    width: 52px;
+    height: 52px;
+    border: 12px solid theme(digitv2.lightTheme.primary);
+    border-top-color: transparent;
+    border-radius: 50%;
+  }
+}
+
+.digit-page-loader,
+.digit-module-loader {
+  text-align: center;
+}
+
+.digit-page-loader {
+  padding-top: 20%;
+  position: absolute;
+  left: 50%;
+}
+
+.digit-module-loader {
+  padding: 16px;
+}
+
+@keyframes digit-ldio-pjg92h09b2o {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.digit-ldio-pjg92h09b2o div {
+  position: absolute;
+  width: 52px;
+  height: 52px;
+  border: 12px solid theme(colors.secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+}
+
+.digit-ldio-pjg92h09b2o div {
+  animation: digit-ldio-pjg92h09b2o 1s linear infinite;
+  top: 50px;
+  left: 50px;
+}
+
+.digit-loadingio-spinner-rolling-faewnb8ux8 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  overflow: hidden;
+  background: none;
+}
+
+.digit-loadingio-spinner-rolling-frame {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  overflow: hidden;
+  background: none;
+}
+.digit-ldio-pjg92h09b2o {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(0.48);
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+}
+
+.digit-ldio-pjg92h09b2o div {
+  box-sizing: content-box;
+}

package/src/digitv2/components/mobileNumberV2.scss

@@ -0,0 +1,33 @@
+@import url("../index.scss");
+
+.digit-mobile-number-container {
+  @apply flex  items-center;
+
+  .digit-citizen-card-input--front {
+    @extend .light-background;
+    width: fit-content !important;
+    display: flex;
+    align-items: center;
+    /* background: theme(colors.grey.mid); */
+    border-right: 0;
+    padding-right: 5px;
+  }
+
+  .digit-citizen-card-input {
+    @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+  }
+
+  .digit-citizen-card-input--front {
+    width: fit-content !important;
+    display: flex;
+    align-items: center;
+    background: theme(colors.grey.mid);
+    border-right: 0;
+    padding-right: 5px;
+  }
+  .digit-employee-card-input-error {
+    @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-solid bg-white leading-10 text-form-field text-text-primary;
+    @extend .light-input-border;
+    @extend .alert-error;
+  }
+}

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -0,0 +1,92 @@
+@import url("../index.scss");
+
+.digit-multi-select-dropdown-wrap {
+  margin-bottom: 24px;
+  @apply relative text-form-field text-text-primary w-full;
+  .digit-master,
+  .digit-master-active {
+    @apply relative border border-solid border-input-border h-10 w-full;
+    input[type="text"] {
+      @apply absolute top-0 left-0 p-sm pl-sm min-h-full min-w-full opacity-0;
+      &:focus {
+        @apply outline-none;
+      }
+    }
+    .digit-label {
+      @apply flex justify-between p-sm w-full h-full;
+      svg {
+        @apply h-6 w-6;
+      }
+    }
+
+    &:hover {
+      @apply border-2 border-solid border-primary-main;
+    }
+  }
+
+  .digit-master-active {
+    @apply border-2 border-primary-main;
+    input[type="text"] {
+      @apply opacity-100;
+    }
+    .digit-label {
+      @apply hidden;
+    }
+  }
+
+  .digit-server {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    top: 40px;
+
+    max-height: 20vmax;
+    overflow: scroll;
+    @apply absolute min-w-full z-20;
+    div {
+      @apply flex w-full bg-white;
+      justify-content: flex-start;
+      align-items: center;
+      &:hover {
+        @apply bg-grey-mid;
+      }
+      input {
+        height: 44px;
+        @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
+      }
+      p {
+        padding: 12px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        @apply text-form-field text-text-primary;
+      }
+      .digit-custom-checkbox {
+        height: 28px;
+        width: 28px;
+        @apply border border-solid border-input-border m-sm;
+        svg {
+          @apply opacity-0 z-10;
+        }
+      }
+      input:checked ~ .digit-custom-checkbox,
+      input:hover ~ .digit-custom-checkbox {
+        @apply border-2 border-primary-main;
+      }
+
+      input:checked ~ .digit-custom-checkbox svg {
+        @apply opacity-100;
+      }
+    }
+  }
+  .digit-cursorPointer {
+    @apply cursor-pointer;
+  }
+  .digit-master {
+    .digit-label {
+      p {
+        white-space: pre;
+        margin: auto;
+        margin-left: 0px;
+        padding-left: 1%;
+      }
+    }
+  }
+}

package/src/digitv2/components/noresultsfoundV2.scss

@@ -0,0 +1,11 @@
+.digit-no-data-found {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .digit-error-msg {
+    margin-top: 2rem;
+  }
+}

package/src/digitv2/components/otpInputV2.scss

@@ -0,0 +1,15 @@
+.digit-input-otp-wrap {
+  @apply mb-lg;
+
+  input {
+    @apply border-2 border-solid border-input-border outline-none h-10 w-10 text-form-field text-text-primary mr-sm mb-sm text-center;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+}

package/src/digitv2/components/popUpV2.scss

@@ -0,0 +1,24 @@
+.digit-popup-wrap {
+  background: rgba(0, 0, 0, 0.7);
+  @apply flex  fixed w-full h-full overflow-auto top-0 left-0 min-h-screen;
+  z-index: 10000;
+}
+
+@screen dt {
+  .digit-popup-wrap {
+    background: rgba(0, 0, 0, 0.7);
+    @apply min-h-screen;
+  }
+}
+
+.digit-popup-close-icon {
+  @apply flex justify-end;
+}
+
+.digit-logout-popup-wrapper{
+  width: 31.25rem !important;
+
+  .logout-cancel-button{
+    height: 2.5rem;
+  }
+}

package/src/digitv2/components/radiobtnV2.scss

@@ -0,0 +1,51 @@
+@import url("../index.scss");
+
+.digit-radio-wrap {
+  @apply my-sm block leading-10 mb-lg;
+
+  div {
+    @apply block mb-md;
+  }
+
+  .digit-radio-btn-wrap {
+    @apply block float-left relative;
+    &:hover {
+      .digit-radio-btn-checkmark {
+        @apply border-primary-main;
+      }
+    }
+  }
+
+  .digit-radio-btn {
+    @apply opacity-0 absolute cursor-pointer h-10 w-10;
+  }
+
+  .digit-radio-btn-checkmark {
+    @extend .light-input-border;
+    @apply h-10 w-10 border border-input-border border-solid rounded-full block;
+  }
+
+  label {
+    @extend .light-text-color-primary;
+    @apply text-text-primary text-form-field ml-md;
+  }
+
+  .digit-radio-btn-checkmark:after {
+    content: "";
+  }
+
+  .digit-radio-btn-wrap input:checked ~ .digit-radio-btn-checkmark {
+    /* @extend .light-input-border; */
+    @apply border-2 border-primary-main;
+  }
+
+  .digit-radio-btn-wrap input:checked ~ .digit-radio-btn-checkmark:after {
+    /* @extend .light-background; */
+    @apply block bg-primary-main h-5 w-5 rounded-full absolute top-10 left-10;
+  }
+}
+.digit-reverse-radio-selection-wrapper {
+  div {
+    @apply flex flex-row-reverse place-content-between items-center;
+  }
+}

package/src/digitv2/components/ratingV2.scss

@@ -0,0 +1,33 @@
+.digit-rating-star-wrap {
+  @apply flex w-full mb-lg;
+  img {
+    width: 40px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+
+  svg {
+    width: 40px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+}
+
+@screen dt {
+  .digit-rating-star-wrap {
+    @apply w-2/5;
+  }
+}
+
+.digit-rating-with-text {
+  @apply flex place-items-center w-full;
+
+  svg {
+    width: 24px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+}

package/src/digitv2/components/selectdropdownV2.scss

@@ -0,0 +1,180 @@
+.digit-employee-select-wrap {
+  @apply mb-lg relative;
+
+  .digit-select {
+    @extend .light-input-border;
+    @apply relative block w-full h-10 border border-solid border-input-border;
+    &:hover {
+      @extend .light-input-border;
+      @apply border-2 border-solid border-primary-main;
+    }
+    input[type="text"] {
+      width: calc(100% - 32px);
+      background-color: transparent;
+      @extend .light-input-border;
+      @extend .light-text-color-primary;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+    }
+
+    p {
+      padding-top: 9px;
+      @extend .light-text-color-primary;
+      @apply text-form-field text-text-primary float-left ml-sm;
+    }
+
+    img {
+      @apply float-right h-6 w-6 mt-sm mr-sm;
+    }
+
+    svg {
+      @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm;
+    }
+  }
+
+  .digit-select-active {
+    @apply relative block w-full h-10 border-2 border-solid border-primary-main;
+    @extend .light-input-border;
+
+    input[type="text"] {
+      width: calc(100% - 32px);
+      background-color: transparent;
+      @extend .light-background;
+      @extend .light-text-color-primary;
+
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+    }
+
+    p {
+      @extend .light-text-color-primary;
+      @apply text-form-field text-text-primary float-left ml-sm;
+    }
+
+    p {
+      padding-top: 9px;
+    }
+
+    img {
+      @apply float-right h-6 w-6 mt-sm mr-sm;
+    }
+
+    svg {
+      @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm;
+    }
+  }
+
+  .digit-options-card {
+    width: 100% !important;
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    max-height: 400px;
+    overflow: auto;
+    @apply absolute z-20 mt-xs bg-white max-w-full;
+
+    p {
+      padding-top: 14px;
+      @extend .light-text-color-primary;
+      @apply w-full h-12 pl-sm text-text-primary text-form-field;
+
+      &:hover {
+        @apply bg-grey-mid;
+        @extend .light-background;
+      }
+    }
+  }
+}
+
+.digit-employee-select-wrap--elipses {
+  width: 85% !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.digit-select-wrap {
+  @apply mb-lg relative;
+  max-width: 540px;
+
+  .digit-select {
+    @apply relative block w-full h-10 border border-solid border-input-border;
+    @extend .light-input-border;
+
+    input[type="text"] {
+      width: calc(100% - 32px);
+      background-color: transparent;
+      @extend .light-text-color-primary;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+    }
+
+    p {
+      padding-top: 9px;
+      @extend .light-text-color-primary;
+      @apply text-form-field text-text-primary float-left ml-sm;
+    }
+
+    img {
+      @apply float-right h-6 w-6 mt-sm mr-sm;
+    }
+
+    svg {
+      @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm;
+    }
+  }
+
+  .digit-select-active {
+    @extend .light-input-border;
+    @apply relative block w-full h-10 border-2 border-solid border-primary-main;
+
+    input[type="text"] {
+      width: calc(100% - 32px);
+      background-color: transparent;
+      @extend .light-text-color-primary;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+    }
+
+    p {
+      @extend .light-text-color-primary;
+      @apply text-form-field text-text-primary float-left ml-sm;
+    }
+
+    p {
+      padding-top: 9px;
+    }
+
+    img {
+      @apply float-right h-6 w-6 mt-sm mr-sm;
+    }
+
+    svg {
+      @apply absolute right-0 float-right h-6 w-6 mt-sm mr-sm;
+    }
+  }
+
+  .digit-options-card {
+    width: 100% !important;
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    @extend .light-background;
+    @apply absolute z-20 mt-xs bg-white;
+
+    p {
+      padding-top: 14px;
+      @extend .light-text-color-primary;
+      @apply w-full h-12 pl-sm text-text-primary text-form-field;
+
+      &:hover {
+        @apply bg-grey-mid;
+      }
+    }
+  }
+}
+
+@screen dt {
+}
+
+.digit-dropdown-employee-select-wrap{
+  
+  &.language-dropdown{
+
+    .digit-dropdown-options-card{
+      min-width: fit-content;
+    }
+  }
+}

package/src/digitv2/components/tagV2.scss

@@ -0,0 +1,28 @@
+.digit-tag-container {
+  @apply flex flex-wrap mb-md;
+
+  .digit-tag {
+    @apply bg-grey-mid rounded-2xl pt-sm pb-sm flex justify-between items-center;
+    padding-left: 12px;
+    padding-right: 12px;
+    font-size: 14px;
+    margin-left: 2px;
+    height: 2rem;
+    margin-top: 1rem;
+    .digit-text {
+      padding-right: 5px;
+      max-width: calc(100% - 24px);
+      height: 22px;
+      overflow: hidden;
+      text-overflow: clip;
+    }
+
+    &:hover {
+      @apply cursor-pointer;
+
+      .close {
+        fill: black;
+      }
+    }
+  }
+}

package/src/digitv2/components/telephoneV2.scss

@@ -0,0 +1,18 @@
+.digit-telephone {
+  @apply flex items-baseline;
+  img,
+  svg {
+    height: 22px;
+    width: 20px;
+    @apply text-primary-main ml-sm items-center;
+    margin-left: 0px;
+  }
+
+  p {
+    @apply text-text-primary text-body-l pl-sm;
+  }
+}
+
+.digit-call {
+  @apply flex text-text-secondary text-body-l;
+}

package/src/digitv2/components/textInputV2.scss

@@ -0,0 +1,123 @@
+@import url("../index.scss");
+
+.digit-card-input-error {
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+.digit-text-input {
+  @apply relative w-full;
+}
+
+.digit-text-input-width {
+  max-width: 540px;
+}
+.digit-card-input {
+  @apply mb-lg pl-sm outline-none mt-sm block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.digit-card-input-error {
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.digit-employee-card-input {
+  @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+.digit-employee-card-input:disabled {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
+.digit-employee-card-input--front {
+  width: fit-content !important;
+  display: flex;
+  align-items: center;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 5px;
+}
+.digit-employee-card-input-error {
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.digit-card-textarea,
+.digit-employee-card-textarea {
+  @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
+}
+
+.digit-inputWrapper {
+  display: flex;
+  justify-content: flex-start;
+  max-width: 500px;
+
+  div {
+    max-width: 80px;
+  }
+
+  span {
+    margin-top: 16px;
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+}
+
+@screen dt {
+  .digit-card-input {
+    width: 480px;
+  }
+
+  .digit-card-input-emp {
+    width: 240px;
+  }
+
+  .digit-card-input-error {
+    width: 480px;
+  }
+
+  .digit-employee-card-input {
+    @apply w-full;
+  }
+
+  .digit-employee-card-input-error {
+    @apply w-full;
+  }
+
+  .digit-card-textarea {
+    /* //width: 480px; */
+    @apply w-full;
+    max-width: 540px;
+  }
+
+  .digit-employee-card-textarea {
+    @apply w-full;
+  }
+
+  .card-input-emp {
+    width: 240px;
+  }
+}
+
+.digit-citizen-card-input {
+  @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.digit-citizen-card-input--front {
+  width: fit-content !important;
+  display: flex;
+  align-items: center;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 5px;
+}
+
+.digit-employee-card-input-error {
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+  @extend .light-input-border;
+  @extend .alert-error;
+}
+.digit-card-input-error {
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+  @extend .light-input-border;
+  @extend .alert-error;
+}
+.disabled {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}