@djb25/digit-ui-css 1.0.0

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

@@ -0,0 +1,1042 @@
+@import url("../../index.scss");
+
+.bread-crumb.workbench-bredcrumb{
+a{
+  color: theme(digitv2.lightTheme.primary);
+}
+}
+.workbench{
+.workbench-create-form {
+  display: inherit;
+  padding-top: 1.5rem;
+  .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-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: #F47738; 
+      transition: color 0.3s;
+    }
+    .browse-text:hover {
+        color: #F47738; 
+        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 #f47738;
+  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: #F47738;
+      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: #f47738;
+    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;
+
+}