@egovernments/digit-ui-components-css 0.0.1-pucar.1

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

@@ -0,0 +1,615 @@
+@import url("../../index.scss");
+
+.bread-crumb.workbench-bredcrumb{
+a{
+  color: theme(digitv2.lightTheme.primary-orange);
+}
+}
+.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-orange) !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-orange);
+
+                  .digit__value-container:focus {
+                    border-color: theme(digitv2.lightTheme.primary-orange);
+
+                  }
+                }
+              }
+
+              &.form-select:focus {
+                @apply outline-none;
+                border-color: theme(digitv2.lightTheme.primary-orange);
+
+              }
+            }
+
+            .form-control:read-only {
+              background-color: theme(digitv2.lightTheme.generic-background);
+              color: theme(digitv2.lightTheme.text-secondary);
+            }
+
+            .form-control:focus {
+
+              @apply outline-none;
+              border-color: theme(digitv2.lightTheme.primary-orange);
+            }
+
+            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-orange);
+                }
+
+                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-orangebg); /* 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;
+}