@selco/installation-ui-css 1.0.0

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

@@ -0,0 +1,1112 @@
+@import url("../../index.scss");
+
+.bread-crumb.workbench-bredcrumb {
+  a {
+    color: theme(digitv2.lightTheme.primary);
+  }
+}
+
+.workbench {
+  &.app-container {
+    margin-top: 0.75rem;
+  }
+
+  .workbench-create-form {
+    display: inherit;
+    padding-top: 1.5rem;
+
+  .workbench-mdms-json-container{
+    position: relative;
+    .jk-digit-secondary-btn.action-bar-button {
+      position: absolute;
+      right: 0%;
+    }
+  }
+
+    .digit-form-composer-sub-header {
+      @extend .typography.text-heading-m;
+      padding-left: 1rem;
+
+      @media (max-width: theme(digitv2.screens.mobile)) {
+        padding-left: 0;
+      }
+    }
+
+    form {
+      #label_digit_root {
+        display: none;
+      }
+
+      #digit_root {
+        width: 100%;
+
+        .field-wrapper {
+          .form-group.field {
+            display: flex;
+            padding: 1em 0 0 1em;
+
+            @media (max-width: theme(digitv2.screens.mobile)) {
+              flex-direction: column;
+            }
+
+            &.field-error.has-error.has-danger {
+              .control-label {
+                @extend .alert-error;
+              }
+
+              .form-control {
+                @extend .alert-error-border;
+              }
+
+              .card-label-error {
+                display: inline;
+                position: relative;
+                margin: 0px;
+                padding: 0px;
+                top: -0.7rem;
+                font-weight: normal;
+
+              }
+            }
+
+            &.field-boolean.field-error.has-error.has-danger {
+
+              .card-label-error {
+                position: initial;
+                display: block;
+                margin-top: 0.5rem;
+
+              }
+            }
+
+            .control-label {
+              max-width: 12.5rem;
+              margin-right: 2.5rem;
+              @extend .card-label;
+              display: inline-flex;
+              /* align-self: center; */
+              line-height: 3rem;
+              @extend .typography.text-heading-s;
+              /* web view*/
+              @apply w-1/3;
+
+              /* tablet view*/
+
+              @media (max-width: theme(digitv2.screens.tablet)) {
+                max-width: 11rem;
+                margin-right: 1.5rem;
+
+              }
+
+              /* mobile view*/
+
+              @media (max-width: theme(digitv2.screens.mobile)) {
+                /*max-width: 10.2rem;*/
+                @apply w-full;
+
+              }
+
+            }
+
+            .all-input-field-wrapper {
+
+              @apply w-3/5;
+
+              @media (max-width: theme(digitv2.screens.mobile)) {
+                @apply w-full;
+              }
+
+              .form-control {
+                @extend .light-input-border;
+                @extend .employee-card-input;
+                font-style: inherit;
+                font-family: inherit;
+                /* web view*/
+                max-width: 37.5rem;
+                min-width: 20.5rem;
+                margin-bottom: 1rem;
+                /* tablet view*/
+
+                @media (max-width: theme(digitv2.screens.tablet)) {
+                  max-width: 27.5rem;
+                  min-width: 12.5rem;
+
+                }
+
+                /* mobile view*/
+
+                @media (max-width: theme(digitv2.screens.mobile)) {
+                  max-width: 20.5rem;
+                  min-width: 9.5rem;
+                  @apply w-full;
+
+                }
+
+                &.form-select {
+                  padding: 0%;
+                  border: 0px;
+
+                  .digit__control {
+                    @apply outline-none;
+
+                    .digit__value-container:in-range {
+                      border-color: unset;
+                      box-shadow: none;
+                      box-sizing: unset;
+                      @apply outline-none;
+                    }
+                  }
+
+                  .digit__control--is-focused {
+                    border-color: theme(digitv2.lightTheme.primary) !important;
+                    box-shadow: none;
+                    box-sizing: unset;
+                    @apply outline-none;
+                  }
+
+
+                  .digit__control:hover {
+
+                    border-color: unset;
+                    box-shadow: none;
+                    box-sizing: unset;
+                    @apply outline-none;
+                  }
+
+                  .digit__control:focus {
+                    border-color: theme(digitv2.lightTheme.primary);
+
+                    .digit__value-container:focus {
+                      border-color: theme(digitv2.lightTheme.primary);
+
+                    }
+                  }
+                }
+
+                &.form-select:focus {
+                  @apply outline-none;
+                  border-color: theme(digitv2.lightTheme.primary);
+
+                }
+              }
+
+              .form-control:read-only {
+                background-color: theme(digitv2.lightTheme.background);
+                color: theme(digitv2.lightTheme["text-color-secondary"]);
+              }
+
+              .form-control:focus {
+
+                @apply outline-none;
+                border-color: theme(digitv2.lightTheme.primary);
+              }
+
+              textarea.form-control {
+                height: 5rem;
+              }
+            }
+
+            &.field-string {
+              align-self: center;
+            }
+
+            &.field-boolean {
+              padding-top: 0rem;
+              padding-bottom: 1rem;
+
+              .custom-checkbox {
+                display: inline-flex;
+                align-items: end;
+
+                &.custom-checkbox-disabled {
+                  pointer-events: none;
+                  opacity: 0.6;
+                }
+
+                .custom-checkbox-label {
+                  @extend .typography.text-body-s;
+                  @apply pl-sm;
+                }
+              }
+
+              .checkbox {
+                width: 28rem;
+
+                label {
+                  float: left;
+
+                  /* display: flex;
+            flex-direction: row-reverse;
+            */
+                  span {
+                    width: 17rem;
+                    display: none;
+                    @extend .card-label;
+                  }
+
+                  input[type="checkbox"] {
+                    @extend .light-input-border;
+                    @extend .employee-card-input;
+                    height: 1.5rem;
+                    /*              @apply ml-sm;*/
+                  }
+
+                  input[type="checkbox"]#digit_root_active {
+                    accent-color: theme(digitv2.lightTheme.primary);
+                  }
+
+                  input:checked,
+                  input:hover {
+                    @apply border-2;
+                    @extend .light-input-border;
+                  }
+                }
+              }
+
+              .field-radio-group {
+                display: inline-flex;
+                height: 2.5rem;
+                align-items: center;
+
+                .radio {
+                  @apply mr-sm;
+                }
+              }
+
+
+
+            }
+
+
+
+            &.field-object>.control-label {
+              margin-left: 0.5rem;
+            }
+
+            &.field-object {
+              display: block;
+              @extend .light-background;
+              @extend .light-paper-border;
+              padding: 1rem;
+              margin: 1rem;
+
+              .digit-expand-collapse-wrapper {
+                margin-top: 0px;
+              }
+
+              .digit-icon-toggle {
+                top: -1.5rem;
+                right: 1.5em;
+              }
+
+              .object-wrapper {
+                .array-remove-button-wrapper {
+                  position: relative;
+                }
+              }
+
+              /* have to revisit for objects
+        [id^="root_"] {
+          @extend .light-background;
+        }
+        */
+            }
+
+            &.field-array {
+              display: block;
+              @extend .light-paper-secondary;
+              @extend .light-paper-border;
+              padding: 2rem;
+              margin: 1rem;
+              padding-top: 1rem;
+
+              .array-wrapper .array-item {
+                &.jk-array-objects>.array-remove-button-wrapper {
+                  display: block;
+                }
+
+                &.jk-array-objects {
+                  margin-bottom: 2rem;
+
+                  .array-children>span .form-group.field.field-object {
+                    padding-bottom: 3rem;
+                  }
+
+                  .array-obj {
+                    position: absolute;
+                    bottom: 1.5rem;
+                    left: 2rem;
+
+                    >.array-remove-button-wrapper {
+                      position: unset;
+                    }
+                  }
+
+                }
+
+                &.jk-array-of-non-objects>.array-remove-button-wrapper {
+                  display: inline;
+                  left: 38.5rem;
+                  right: unset;
+                  top: 0.7rem;
+                }
+
+                &.jk-array-of-non-objects .array-children {
+                  span .form-group {
+                    padding-left: 0%;
+
+                    .control-label {
+                      display: none;
+                    }
+
+                  }
+                }
+
+                /* it has been removed since we dont need diff color for array items @extend .light-background;*/
+                position: relative;
+
+                .field-object {
+                  margin-left: 0;
+                  margin-right: 0;
+                }
+
+
+                .array-remove-button-wrapper {
+                  position: absolute;
+                  right: 1.3em;
+                  top: 1.3em;
+                  background-color: inherit !important;
+
+                  .array-remove-button {
+                    cursor: pointer;
+                    background-color: inherit !important;
+
+                    @media (max-width: theme(digitv2.screens.mobile)) {
+                      padding: 0px;
+                    }
+
+                    h2 {
+                      @media (max-width: theme(digitv2.screens.mobile)) {
+                        display: none;
+                      }
+                    }
+
+                  }
+                }
+
+                span.all-input-field-wrapper {
+                  @apply w-3/5;
+
+                  .form-control {
+                    @apply w-full;
+                  }
+                }
+
+                .control-label {
+                  @apply w-1/3;
+
+                }
+              }
+
+
+              .jk-digit-secondary-btn {
+                height: 1.7em;
+                margin-top: 0.5rem;
+
+                @media (max-width: theme(digitv2.screens.mobile)) {
+                  height: auto;
+                  width: 100%;
+                }
+
+                h2 {
+                  font-size: 1rem;
+                }
+              }
+
+              .all-input-field-wrapper {
+                .card-label-error {
+                  position: unset !important;
+                }
+              }
+
+            }
+
+            .digit-expand-collapse-header {
+              border: 0;
+              background-color: inherit;
+              padding: 0;
+            }
+          }
+        }
+      }
+    }
+
+    div.action-bar-wrap {
+      @extend .action-bar-wrap;
+
+      .submit-bar {
+        @extend .submit-bar;
+        cursor: pointer;
+        @apply font-rc font-medium text-legend text-white leading-10;
+      }
+    }
+    .workbench-bulk-upload {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 1.5rem;
+      .workbench-download-template-btn {
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  .workbench-no-schema-found {
+    @apply flex justify-items-center flex-col;
+    align-items: center;
+  }
+
+  .jk-digit-loader {
+    position: absolute;
+    z-index: 10000;
+    width: 100vw;
+    background-color: rgba(189, 189, 189, 0.5);
+    height: 100vh;
+    left: 0;
+    top: 0;
+
+    .jk-spinner-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .jk-spinner {
+        border: 0.4em solid #fe7a51;
+        border-radius: 50%;
+        border-top: 0.4em solid #ffffff;
+        width: 4em;
+        height: 4em;
+        -webkit-animation: spin 2s linear infinite;
+        /* Safari */
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .jk-sm-inbox-loader {
+    border: 0.2em solid #fe7a51;
+    border-radius: 50%;
+    border-top: 0.2em solid #ffffff;
+    width: 2em;
+    height: 2em;
+    -webkit-animation: spin 2s linear infinite;
+    /* Safari */
+    animation: spin 1s linear infinite;
+  }
+
+  /* Safari */
+  @-webkit-keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .no-data-found {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .digit-error-msg {
+      margin-top: 2rem;
+    }
+  }
+
+
+  .tooltip .tooltiptext {
+
+    top: 2rem;
+    left: 0;
+    margin-left: 0rem;
+    width: fit-content;
+    height: max-content;
+    white-space: normal;
+
+    .tooltiptextvalue {
+      font-size: 14px;
+      font-weight: 400px;
+      color: white;
+    }
+  }
+
+  .employeeCard.manage-master-wrapper {
+    width: 100%;
+    display: flex;
+    padding-top: 2.1rem;
+
+    @media (max-width: theme(digitv2.screens.mobile)) {
+      flex-direction: column;
+    }
+
+    .employee-select-wrap.form-field {
+      @apply w-1/4;
+      margin-right: 1rem;
+
+      @media (max-width: theme(digitv2.screens.mobile)) {
+        @apply w-full;
+      }
+    }
+  }
+
+  .table {
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+
+    &-row-mdms:hover {
+      background-color: theme(digitv2.lightTheme.primary-bg);
+      /* Change this to the desired hover color */
+      cursor: pointer;
+    }
+  }
+}
+
+.header-btn {
+  width: 12rem;
+}
+
+.drag-drop-container {
+  background-color: #FAFAFA;
+  border: 1.5px dashed #D6D5D4;
+  border-radius: 5px;
+  margin: -1rem 1rem 1rem 1rem;
+  padding: 1rem 1rem 1rem 1rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .drag-drop-text {
+    text-decoration: none;
+
+    .browse-text {
+      text-decoration: none;
+      color: theme(colors.primary.main);
+      transition: color 0.3s;
+    }
+
+    .browse-text:hover {
+      color: theme(colors.primary.main);
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+}
+
+.uploaded-file-container {
+  background-color: #FAFAFA;
+  border: 1.5px solid #D6D5D4;
+  border-radius: 5px;
+  margin: 0.5rem 1rem 2rem 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.6rem;
+  justify-content: space-between;
+
+  .uploaded-file-container-sub {
+    display: flex;
+    align-items: center;
+
+    .icon:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+.popup-header-fix {
+  margin-top: -0.5rem !important;
+}
+
+.option-details {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+  border: 1px solid #D6D5D4;
+  /* Border color and width */
+  background-color: #fff;
+  padding: 2em;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  min-width: 300px;
+
+  .detail-container {
+    margin-top: 20px;
+    overflow-y: auto;
+    max-height: 50vh;
+
+    .detail-item {
+      margin: 10px 0;
+      display: flex;
+      align-items: center;
+
+      .key {
+        flex-basis: 30%;
+        margin-right: 10px;
+        font-weight: bold;
+        text-align: start !important;
+      }
+
+      .value {
+        flex-basis: 70%;
+        text-align: start !important;
+      }
+    }
+
+    .separator {
+      margin: 10px 0;
+      border: none;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .view-more {
+      display: flex;
+      justify-content: flex-start;
+      margin-top: 1.5em;
+    }
+
+    .select {
+      display: flex;
+      justify-content: flex-start;
+      margin-top: 1.5em;
+    }
+  }
+}
+
+
+.close-button {
+  align-self: flex-end;
+  cursor: pointer;
+  font-weight: bold;
+  position: absolute;
+  padding: 7px;
+  top: 0;
+  right: 0;
+  border: 1px solid black;
+  margin-bottom: 20px;
+}
+
+
+
+.option-details-dropdown {
+  position: absolute;
+  z-index: 999;
+  border: #D6D5D4 1px solid;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  width: 250px;
+  margin-left: -250px;
+}
+
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  overflow: auto;
+  /* Enable scrolling if content exceeds the viewport */
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  max-width: 80%;
+  /* Adjust the maximum width as needed */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  max-height: 80vh;
+  /* Limit the maximum height to 80% of the viewport height */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.modal-inner {
+  overflow-y: auto;
+  /* Enable scrolling within the modal */
+}
+
+.modal-content .employee-select-wrap .select input {
+  width: calc(100% - 32px);
+  background-color: initial;
+  position: relative !important;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  padding-left: 8px;
+}
+
+.modal-content .employee-select-wrap .select-active {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 2.5rem;
+  --border-opacity: 1;
+  border: 1px solid theme(colors.primary.main);
+  border-color: rgba(244, 119, 56, var(--border-opacity));
+}
+
+.modal-content .label-field-pair {
+  display: -ms-flexbox;
+  display: block !important;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.modal-content .employee-select-wrap {
+  margin-bottom: 24px;
+}
+
+.inbox-search-wrapper {
+  .add-new-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+
+    .add-new {
+      position: relative;
+      color: theme(colors.primary.main);
+      cursor: pointer;
+      margin-right: 1em;
+      font-weight: bolder;
+      font-size: 23px;
+    }
+  }
+}
+
+.multiselect {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: 588px) {
+    .info-icon-container {
+      position: absolute;
+      right: 2px;
+      margin-right: 0px !important;
+      margin-left: 0px !important;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 0.7em;
+    }
+  }
+
+  .info-icon-container {
+    margin-left: 0.7em;
+    margin-right: -2em;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.7em;
+  }
+
+  .info-icon-container .info-icon {
+    cursor: pointer;
+  }
+}
+
+.link-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #bdc5d1;
+
+  .view-all-link {
+    background-color: #bdc5d1;
+    color: theme(colors.primary.main);
+    font-size: 16px;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.action-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  .action-bar-button {
+    margin-right: 0.5em;
+  }
+}
+
+.progressBarContainer {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #fff;
+  padding: 45px 45px 20px 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+  width: 25vw;
+
+  @media (max-width: 768px) {
+    width: 70vw;
+    position: fixed;
+    bottom: 20px;
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .progressBar {
+    display: flex;
+    flex-direction: row;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    height: 20px;
+    background-color: #4CAF50;
+  }
+
+  .progressHeading {
+    margin: 8px 0;
+    font-size: 16px;
+
+    .success-container {
+      display: flex;
+      flex-direction: row;
+      background-color: #00703C;
+      color: #fff;
+      padding: 5px 10px;
+      border-radius: 5px;
+      width: fit-content;
+      align-items: center;
+
+      .success-count {
+        background-color: #fff;
+        color: #00703C;
+        padding: 3px 5px;
+        border-radius: 3px;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .closeButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    padding: 2px;
+    border: 1px solid #ccc;
+    border-radius: 1px;
+  }
+
+  .no-uploads {
+    margin-top: 1em;
+  }
+}
+
+.results-container-orange {
+  max-height: 50vh;
+  overflow: auto;
+  margin-top: 1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 1em;
+  background-color: #ea8a3b !important;
+
+  .no-errors {
+    background-color: #ea8a3b !important;
+  }
+}
+
+.results-container {
+  max-height: 50vh;
+  overflow: auto;
+  margin-top: 1em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 1em;
+
+  .results-list-item {
+    border-bottom: 1px solid #ddd;
+    padding: 0.5em;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #D4351C;
+      color: white;
+      /* Yellowish color on hover */
+    }
+  }
+
+  .results-details {
+    white-space: pre-wrap;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 1em;
+  }
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 9998;
+}
+.CloseLevelButton{
+  font-size: 1rem;
+  margin-bottom: 24px;
+  /* margin-left: 24px; */
+  position: relative;
+  right: auto;
+  border: none;
+}
+
+.mdms-view-audit{
+visibility: hidden;
+}
+.audit-history{
+.diff{
+  table-layout: fixed;
+border-collapse: collapse;
+width: 100%;
+}
+.diff-gutter-col {
+width: 7ch;
+}
+.diff-code-delete {
+background-color: #fdeff0;
+}
+.diff-line {
+line-height: 1.5;
+font-family: Consolas, Courier, monospace;
+}
+.diff-gutter-delete {
+background-color: #fadde0;
+}
+.diff-gutter, .diff-gutter>a {
+padding: 0 1ch;
+text-align: right;
+cursor: pointer;
+user-select: none;
+}
+.diff-code {
+white-space: pre-wrap;
+word-wrap: break-word;
+word-break: break-all;
+padding: 0;
+padding-left: .5em;
+}
+.diff td {
+vertical-align: top;
+padding-top: 0;
+padding-bottom: 0;
+}
+.diff-gutter-insert {
+background-color: #d6fedb;
+}
+.diff-gutter, .diff-gutter>a {
+padding: 0 1ch;
+text-align: right;
+cursor: pointer;
+user-select: none;
+}
+.diff-code-insert {
+background-color: #eaffee;
+}
+
+}
+
+
+.code-details {
+  padding: 0.5rem 1.5rem;
+  background-color: #f9f9f9;
+  border: 0.125rem solid #e0e0e0;
+  border-radius: 0.25rem;
+}
+
+.code-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.code-key {
+  flex: 0 0 9rem; 
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: #444;
+  text-align: left;
+  line-height: 1.2rem;
+}
+
+.code-value-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-left: 0.5rem; 
+  align-items: flex-start; 
+}
+
+.code-value {
+  font-size: 0.9rem;
+  color: #555;
+  line-height: 1.2rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+