@selco/installation-ui-css 1.0.0

package/src/digitv2/components/textareaV2.scss

@@ -0,0 +1,11 @@
+.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;
+  @extend .light-input-border;
+}
+.digit-employee-card-textarea {
+  @apply w-full;
+}
+.digit-cell-text {
+  color: theme(colors.text.secondary);
+}

package/src/digitv2/components/uploadFileV2.scss

@@ -0,0 +1,146 @@
+.digit-upload-wrap {
+  @apply flex w-full h-40 bg-grey-light relative mb-lg px-sm border border-border border-dashed;
+  max-width: 540px;
+  min-height: 50px;
+  padding: 0.5rem;
+
+  img {
+    display: block;
+    margin-top: 58px;
+    margin-left: calc(50% - 23px);
+    height: 42px;
+    width: 46px;
+  }
+
+  svg {
+    display: block;
+    margin-top: 58px;
+    margin-left: calc(50% - 23px);
+    height: 42px;
+    width: 46px;
+  }
+
+  input {
+    @apply absolute w-full h-full opacity-0 top-0;
+  }
+  .digit-cell-text {
+    color: theme(colors.text.secondary);
+    padding-top: 3px;
+  }
+}
+
+.digit-multi-upload-wrap {
+  @apply flex mb-lg;
+
+  div {
+    display: block;
+    position: relative;
+    background-color: theme(colors.grey.light);
+    width: calc((100% - 16px) / 3);
+    margin-right: 8px;
+
+    .digit-delete {
+      position: absolute;
+      height: 24px;
+      width: 24px;
+      border-radius: 100%;
+      top: 2px;
+      right: 2px;
+    }
+  }
+
+  .digit-upload-img-container {
+    border: 1px dashed theme(colors.border);
+    margin: 0 !important;
+
+    img {
+      margin-left: auto;
+      margin-right: auto;
+      padding-top: calc(33% - 21px);
+    }
+
+    svg {
+      @apply flex;
+      margin: auto;
+    }
+
+    svg {
+      margin-left: auto;
+      margin-right: auto;
+      top: calc(50% - 21px);
+      position: relative;
+    }
+
+    input {
+      @apply absolute w-full h-full opacity-0 top-0;
+    }
+  }
+}
+
+.digit-upload-file-max-width {
+  max-width: 540px;
+}
+
+.digit-upload-file {
+  min-height: 56px;
+  @apply relative border border-input-border w-full;
+
+  div {
+    @apply flex flex-row h-full items-center pl-md mt-sm flex-wrap;
+
+    .file-upload-status {
+      @apply text-body-s-dt ml-sm;
+    }
+  }
+  input {
+    width: 160px;
+    @apply absolute top-0 left-0 opacity-0 h-full;
+  }
+}
+
+@screen dt {
+  .digit-multi-upload-wrap img {
+    width: 100%;
+    height: 158px;
+  }
+}
+
+.digit-upload-file-button-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0px;
+  padding: 0px;
+  button {
+    height: auto;
+    min-height: 40px;
+    width: 43%;
+    max-height: 40px;
+    margin: 5px;
+    padding: 0px;
+    h2 {
+      word-break: break-all;
+      height: auto;
+      line-height: 16px;
+      overflow: hidden;
+      max-height: 34px;
+      max-width: 100%;
+    }
+  }
+  .digit-tag-container {
+    margin: 0px;
+    padding: 0px;
+  }
+}
+.digit-input-mirror-selector-button {
+  @apply h-16 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg !important;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-text-primary;
+  }
+}

package/src/digitv2/index.scss

@@ -0,0 +1,166 @@
+@import url("./components/actionbarV2.scss");
+/* 
+    TODO NABEEL/ANIL Removed these since it creates issues in search screen and home screen
+@import url("./components/cardV2.scss");
+*/
+
+@import url("./components/checkboxV2.scss");
+@import url("./components/FormComposerV2.scss");
+@import url("./components/radiobtnV2.scss");
+@import url("./components/selectdropdownV2.scss");
+@import url("./typography.scss");
+@import url("./components/actionLinkV2.scss");
+@import url("./components/appContainerV2.scss");
+@import url("./components/bodyContainerV2.scss");
+@import url("./components/bannerV2.scss");
+@import url("./components/breakLineV2.scss");
+@import url("./components/loaderV2.scss");
+@import url("./components/headerV2.scss");
+@import url("./components/checkpointV2.scss");
+@import url("./components/backButtonV2.scss");
+@import url("./components/infoBannerV2.scss");
+@import url("./components/displayPhotosV2.scss");
+@import url("./components/collapseAndExpandGroups.scss");
+@import url("./components/dateWrapV2.scss");
+@import url("./components/ErrorMessage.scss");
+@import url("./components/ratingV2.scss");
+@import url("./components/noresultsfoundV2.scss");
+@import url("./components/mobileNumberV2.scss");
+@import url("./components/tagV2.scss");
+@import url("./components/popUpV2.scss");
+@import url("./components/telephoneV2.scss");
+@import url("./components/textareaV2.scss");
+@import url("./components/textInputV2.scss");
+@import url("./components/otpInputV2.scss");
+@import url("./components/multiSelectDropdownV2.scss");
+@import url("./components/uploadFileV2.scss");
+
+/* pages */
+@import url("./pages/employee/index.scss");
+
+/* important to be remove after fixing the components */
+.light {
+  &-primary {
+    color: theme(digitv2.lightTheme.primary) !important;
+
+    &-button {
+      background-color: theme(digitv2.lightTheme.primary) !important;
+    }
+
+    &-bg {
+      background-color: theme(digitv2.lightTheme.primary-bg) !important;
+    }
+  }
+
+  &-text-color {
+    &-primary {
+      color: theme(digitv2.lightTheme.text-color-primary) !important;
+    }
+
+    &-secondary {
+      color: theme(digitv2.lightTheme.text-color-secondary) !important;
+    }
+
+    &-disabled {
+      color: theme(digitv2.lightTheme.text-color-disabled) !important;
+    }
+  }
+
+  &-background {
+    background-color: theme(digitv2.lightTheme.background) !important;
+  }
+
+  &-paper {
+    &-primary {
+      background-color: theme(digitv2.lightTheme.paper) !important;
+
+      &-color {
+        color: theme(digitv2.lightTheme.paper) !important;
+      }
+    }
+
+    &-secondary {
+      background-color: theme(digitv2.lightTheme.paper-secondary) !important;
+    }
+
+    &-border {
+      border-radius: 4px;
+      border-style: solid;
+      border-width: 1px;
+      border-color: theme(digitv2.lightTheme.divider);
+    }
+  }
+
+  &-divider {
+    background-color: theme(digitv2.lightTheme.divider) !important;
+  }
+
+  &-header-sidenav {
+    color: theme(digitv2.lightTheme.header-sidenav) !important;
+  }
+
+  &-input-border {
+    /* TODO Check why important added here @ANIL/NABEEL */
+    border-color: theme(digitv2.lightTheme.input-border);
+  }
+}
+
+.alert {
+  &-error {
+    color: theme(digitv2.alert.error) !important;
+
+    &-bg {
+      background-color: theme(digitv2.alert.error-bg) !important;
+    }
+
+    &-border {
+      border-color: theme(digitv2.alert.error) !important;
+    }
+  }
+
+  &-success {
+    color: theme(digitv2.alert.success) !important;
+
+    &-bg {
+      background-color: theme(digitv2.alert.success-bg) !important;
+    }
+  }
+
+  &-info {
+    color: theme(digitv2.alert.info) !important;
+
+    &-bg {
+      background-color: theme(digitv2.alert.info-bg) !important;
+    }
+  }
+}
+
+.chart {
+  &-item-1 {
+    color: theme(digitv2.chart.chart-1) !important;
+  }
+
+  &-item-1-gradient {
+    color: theme(digitv2.chart.chart-1-gradient) !important;
+  }
+
+  &-item-2 {
+    color: theme(digitv2.chart.chart-2) !important;
+  }
+
+  &-item-2-gradient {
+    color: theme(digitv2.chart.chart-2-gradient) !important;
+  }
+
+  &-item-3 {
+    color: theme(digitv2.chart.chart-3) !important;
+  }
+
+  &-item-4 {
+    color: theme(digitv2.chart.chart-4) !important;
+  }
+
+  &-item-5 {
+    color: theme(digitv2.chart.chart-5) !important;
+  }
+}

package/src/digitv2/pages/employee/index.scss

@@ -0,0 +1,35 @@
+@import url("./workbench.scss");
+
+
+.digit-toast-success {
+    transform: translateX(-50%);
+    left: 50% !important;
+    bottom: 10% !important;
+}
+
+@keyframes slideInFromBottom {
+    from {
+      bottom: -100%;
+    }
+    to {
+      bottom: 4.5rem;
+    }
+  }
+  
+  .digit-toast-success.animate {
+    animation: slideInFromBottom 0.5s ease forwards;
+  }
+
+
+  .digit-topbar .digit-logo-ulb-wrapper .digit-topbar-logo{
+    width: fit-content;
+  }
+
+  .msb-sidebar{
+    z-index: 1000;
+  }
+
+.digit-sidebar{
+  top:4rem;
+  z-index: 100;
+}