@egovernments/digit-ui-health-css 0.3.2 → 0.3.5

package/src/pages/employee/hrmsupdate.scss

@@ -0,0 +1,14 @@
+ .custom-form{
+    .label-field-wrapper{
+        width: 100% !important;
+    }
+    
+    .custom-label-pair{
+        margin-bottom: 0rem;
+    }
+
+    .digit-submit-bar{
+        width: fit-content;
+        margin-left: auto;
+    }
+}

package/src/pages/employee/index.scss

@@ -4,11 +4,12 @@
 @import "../../typography.scss";
 @import "./villageView.scss";
 @import "./facility.scss";
+@import "./hrmsupdate.scss";
 
-.results-table-wrapper{
+.results-table-wrapper {
   margin-bottom: 2rem;
 
-  .pagination{
+  .pagination {
     margin-bottom: 2rem;
   }
 }
@@ -30,7 +31,6 @@
   margin-left: 3.5rem;
 }
 
-
 .main.digit-home-main {
   margin-left: 60px;
 
@@ -38,14 +38,13 @@
     margin-left: 0;
     margin-right: 0rem;
     padding-right: 0;
-    margin-bottom: 0rem;
+    margin-bottom: 1.5rem;
     min-height: calc(100vh - 10em);
 
-
     .ground-container.digit-home-ground {
       padding: 0;
       padding-right: 0;
-      margin-bottom: 0rem;
+      margin-bottom: 1.5rem;
 
       .employee-app-container.digit-home-employee-app {
         .ground-container.moduleCardWrapper.gridModuleWrapper.digit-home-moduleCardWrapper {
@@ -53,7 +52,7 @@
           padding-right: 0;
           margin-top: 1.5rem;
           margin-left: 1rem;
-          margin-bottom: 0rem;
+          margin-bottom: 1.5rem;
           padding: 0;
           display: grid !important;
           grid-template-columns: repeat(auto-fill, minmax(263px, 1fr));
@@ -106,7 +105,7 @@
   display: flex;
   justify-content: space-between;
   flex-direction: row-reverse;
-  z-index: 10;
+  z-index: 0;
 }
 
 .previous-button {
@@ -114,10 +113,6 @@
   min-width: 12.5rem;
 }
 
-.info-text {
-  padding-bottom: 1.5rem;
-}
-
 .microplan-bulk-upload {
   display: flex;
   justify-content: space-between;
@@ -295,6 +290,7 @@
   font-size: 24px;
   color: #505a5f;
   margin-top: 0.5rem;
+  padding-bottom: 1rem;
 }
 
 .header-end {
@@ -392,6 +388,7 @@ tbody {
 }
 
 .campaign-summary-container {
+  overflow: auto;
   .setup-campaign-card {
     .employeeCard.employeeCard-override {
       padding: 1.5rem;
@@ -424,7 +421,7 @@ tbody {
 
     .digit-button-primary {
       height: 1.5rem;
-      background-color: #d4351c !important;
+      background-color: #d4351c;
 
       .icon-label-container.primary.large {
         font-size: 14px;
@@ -455,9 +452,8 @@ tbody {
 .add-new-product-container {
   border: 1px solid #d6d5d4;
   background-color: #fafafa;
+  margin-bottom: 1.5rem;
   width: 100%;
-  padding-top: 0;
-
   .heading-bar {
     font-weight: 700;
     display: flex;
@@ -493,7 +489,7 @@ tbody {
   justify-content: space-between;
 
   .submit-bar {
-    background-color: #c84c0e !important;
+    background-color: #c84c0e;
     width: max-content;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -622,6 +618,9 @@ tbody {
   h2 {
     color: theme(digitv2.lightTheme.text-primary);
   }
+  div {
+    flex-direction: column;
+  }
 }
 
 .link {
@@ -677,7 +676,8 @@ tbody {
 
 .digit-employee-card.campaign-update-container {
   padding: 1.5rem;
-  margin: 0 !important;
+  margin: 0rem;
+  margin-top: 1rem;
 
   .header {
     margin-bottom: 1.5rem;
@@ -712,7 +712,7 @@ tbody {
 
           p {
             margin: 0;
-            margin-bottom: 0.25rem;
+            margin-bottom: 1rem;
           }
 
           .mandatory-date {
@@ -762,12 +762,23 @@ tbody {
   width: unset !important;
 }
 
-
-.inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.search .search-wrapper .search-field-wrapper.search.custom-both-clear-search .search-button-wrapper .submit-bar {
+.inbox-search-wrapper
+  .inbox-search-component-wrapper
+  .sections-parent.search
+  .search-wrapper
+  .search-field-wrapper.search.custom-both-clear-search
+  .search-button-wrapper
+  .submit-bar {
   background-color: theme(digitv2.lightTheme.primary) !important;
 }
 
-.inbox-search-wrapper .inbox-search-component-wrapper .sections-parent.search .search-wrapper .search-field-wrapper.search.custom-both-clear-search .search-button-wrapper .link-label {
+.inbox-search-wrapper
+  .inbox-search-component-wrapper
+  .sections-parent.search
+  .search-wrapper
+  .search-field-wrapper.search.custom-both-clear-search
+  .search-button-wrapper
+  .link-label {
   color: theme(digitv2.lightTheme.primary) !important;
 }
 
@@ -783,7 +794,7 @@ tbody {
   border-top-right-radius: 0.25rem;
   border-bottom-left-radius: 0rem;
   border-bottom-right-radius: 0rem;
-  padding: .75rem;
+  padding: 0.75rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   border: 0.063rem solid;
@@ -802,7 +813,7 @@ tbody {
 .parent-group {
   border-width: 0.063rem;
   background: theme(digitv2.lightTheme.paper-secondary);
-  border-color: #D4D5D6;
+  border-color: #d4d5d6;
   border-radius: 0.25rem;
   padding: 1rem;
   padding-bottom: 0rem;
@@ -811,7 +822,7 @@ tbody {
 .summary-parent-group {
   border-width: 0.063rem;
   background: theme(digitv2.lightTheme.paper-secondary);
-  border-color: #D4D5D6;
+  border-color: #d4d5d6;
   border-radius: 0.25rem;
   padding: 1rem;
 }
@@ -823,7 +834,7 @@ tbody {
 .summary-group {
   border-width: 0.063rem;
   background: theme(digitv2.lightTheme.paper-secondary);
-  border-color: #D4D5D6;
+  border-color: #d4d5d6;
   border-radius: 0.25rem;
   padding: 1rem;
 }
@@ -838,7 +849,6 @@ tbody {
 .card-container2 {
   width: -webkit-fill-available;
   padding-bottom: 1.5rem;
-
 }
 
 .card-container-delivery {
@@ -853,13 +863,11 @@ tbody {
   padding-bottom: 1rem;
 }
 
-
 .view-campaign-details-card {
-
-  .view-composer-header-section{
+  .view-composer-header-section {
     margin-bottom: 1.5rem;
-    header{
-      margin:0rem;
+    header {
+      margin: 0rem;
     }
   }
   .employee-data-table {
@@ -886,7 +894,6 @@ tbody {
       &.last {
         margin: 0rem;
       }
-
     }
   }
 }
@@ -898,7 +905,410 @@ tbody {
 }
 
 .digit-landing-page-wrapper {
-  .digit-landing-page-card{
+  .digit-landing-page-card {
     min-width: fit-content;
   }
 }
+/* APP CONFIG CSS REDESIGN */
+.configure-app-tabs {
+  .configure-app-tab-head {
+    border: 1px solid #d6d5d4;
+    border-radius: 0px;
+    padding: 0.5rem 1rem;
+    min-width: 2.5rem;
+    height: 2rem;
+    background-color: #ffffff;
+    width: 10rem;
+  }
+  .configure-app-tab-head.active {
+    background-color: #c84c0e;
+    font-weight: 700;
+    color: #ffffff;
+  }
+}
+.digit-card-component.appConfigScreenCard {
+  width: 50%;
+  margin: 0rem 1.5rem;
+  border-radius: 0.75rem;
+}
+
+.app-configure-action-button {
+  border-radius: 1.25rem;
+  padding: 0.25rem 0.25rem;
+  height: 3rem;
+  width: 10rem;
+  min-width: 10rem;
+  margin-bottom: 5rem;
+}
+.app-configuration-side-panel {
+  width: 24rem;
+  z-index: 99;
+  background-color: #ffffff;
+  .slider-content {
+    .slider-footer {
+      margin-bottom: 5rem;
+    }
+  }
+}
+.appConfigHeaderLabelField {
+  flex-direction: column;
+  gap: 0.5rem;
+  .appConfigLabelField-label-container {
+    width: 100%;
+  }
+}
+.appConfigLabelField {
+  position: relative;
+  padding: 1rem;
+  width: 18rem;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: unset;
+}
+.draggableField-cont {
+  margin-bottom: 1rem;
+  width: fit-content;
+  border-radius: 0.5rem;
+  border: 1px solid #d6d5d4;
+  background-color: #fafafa;
+}
+.appConfigLabelField.selected {
+  background-color: #f477381a;
+  border: 1px solid #c84c0e;
+}
+.app-config-field-tag {
+  background-color: #0057bd0d !important;
+  word-break: break-word;
+  border: 0.0031rem solid #0b4b66;
+  color: #0b4b66;
+  font-size: 0.75rem;
+  font-weight: 400;
+  height: 1.5rem;
+  .digit-tag-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+  }
+  .digit-tag-wrapper {
+    border-radius: 0.5rem;
+  }
+}
+.app-configure-drawer-footer-button {
+  margin: auto;
+}
+.app-configure-drawer-footer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  .app-configure-drawer-footer-button {
+    width: 100%;
+  }
+}
+.appConfigLabelField-label {
+  @extend .typography.heading-s;
+  width: 12rem !important;
+  word-break: break-word;
+  color: theme(digitv2.lightTheme.text-secondary);
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  &.desc {
+    margin-bottom: 0 !important;
+  }
+}
+.app-preview-action-button {
+  margin-top: auto;
+  margin-bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+.app-preview-app-config-drawer-action-button {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.app-config-header {
+  color: #0b4b66 !important;
+  font-weight: 700;
+  font-size: 2.5rem;
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  .app-config-header-group {
+    display: flex;
+    column-gap: inherit;
+  }
+}
+.appConfigLabelField-label-container {
+  width: 12rem;
+}
+.app-config-drawer-button {
+  width: 100%;
+}
+.app-preview-sub-heading {
+  font-family: "Roboto";
+  margin: unset;
+}
+.app-config-add-field-popup {
+  width: 35rem !important;
+  .digit-popup-heading {
+    color: theme(digitv2.lightTheme.primary-2);
+  }
+  .digit-popup-children-wrap {
+    overflow: visible !important;
+  }
+  .digit-label-field-pair {
+    display: flex;
+    align-items: center;
+    .product-label-field {
+      width: 15rem !important;
+    }
+  }
+}
+.app-config-drawer-action-divider {
+  margin-top: auto;
+}
+.app-preview-field-pair {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  padding: 0.5rem;
+  .digit-header-content.label {
+    width: 70%;
+  }
+  .digit-field {
+    width: 100%;
+    .digit-description {
+      display: flex !important;
+    }
+    .selection-card-container {
+      .selection-card {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+  .infotext {
+    width: 12rem !important;
+  }
+  .digit-field {
+    .digit-radio-options-wrap {
+      flex-direction: column;
+    }
+  }
+}
+.app-preview-field-pair.app-preview-selected {
+  .digit-header-content .label {
+    width: 100%;
+  }
+  background-color: #c84c0e1a;
+  border: 2px solid #c84c0e;
+  border-radius: 0.5rem;
+  .digit-field {
+    .digit-radio-options-wrap {
+      flex-direction: column;
+    }
+  }
+}
+.app-config-checkbox-main {
+  display: flex;
+  align-items: center;
+  margin-bottom: unset;
+  margin-left: 0.5rem;
+}
+.app-config-checkbox-label {
+  display: inline-block !important;
+
+  &.required::after {
+    content: " *";
+    color: #d4351c;
+  }
+}
+
+.app-preview-field-button {
+  width: 100%;
+}
+
+.drawer-toggle-field-container {
+  border: 1px solid #d6d5d4;
+  background: #fafafa;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  .drawer-container-tooltip {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    .digit-switch-container {
+      .digit-switch-label {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-color-secondary);
+      }
+    }
+    .drawer-toggle-conditional-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+      .digit-header-content.label {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-color-secondary);
+        width: 100%;
+      }
+      .digit-field {
+        width: 100%;
+      }
+    }
+  }
+}
+.app-config-drawer-subheader {
+  @extend .typography.caption-s;
+  font-style: normal;
+  color: theme(digitv2.lightTheme.primary-2);
+  display: flex;
+  align-items: center;
+}
+
+.icon-wrapper.app-config-tooltip {
+  margin-bottom: 0;
+  height: 2rem;
+  display: contents;
+  .tooltip-wrapper {
+    .tooltip-content {
+      width: max-content !important;
+    }
+  }
+}
+.mobile-bezel-child-container {
+  height: 90%;
+  .app-preview-selected {
+    .digit-header-content {
+      width: 100%;
+    }
+  }
+}
+.drag-handle {
+  display: grid;
+  grid-template-columns: repeat(2, 4px); /* 2 columns */
+  gap: 4px; /* spacing between dots */
+  width: fit-content;
+  margin: 0 0.5rem;
+  cursor: grab;
+}
+
+.drag-handle span {
+  width: 4px;
+  height: 4px;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+  display: block;
+}
+.mobile-bezel-screen {
+  scrollbar-width: none;
+  scrollbar-color: #d6d5d4 transparent;
+
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    transition: background-color 0.3s ease;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none !important;
+    height: 0 !important;
+    width: 0 !important;
+  }
+
+  &.scrolling {
+    scrollbar-width: thin;
+    scrollbar-color: #d6d5d4 transparent;
+    transition: scrollbar-color 0.3s ease;
+    &::-webkit-scrollbar-thumb {
+      background-color: #d6d5d4;
+    }
+  }
+}
+.mobile-bezel-flexContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  .mobile-bezel-zoom-container {
+    display: none;
+    height: fit-content;
+    gap: 0.5rem;
+    flex-direction: column-reverse;
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    border: 1px solid #d6d5d4;
+    .item {
+      padding: 0.5rem;
+      border: none;
+      background-color: unset;
+    }
+    .zoom-button {
+    }
+    .zoom-span {
+      border-top: 1px solid #d6d5d4;
+      border-bottom: 1px solid #d6d5d4;
+      color: #787878;
+      font-size: 14px;
+    }
+  }
+}
+
+.info-text {
+  color: theme(digitv2.lightTheme.text-color-secondary);
+}
+
+.appConfig-flex-action {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 5rem;
+  left: 37rem;
+  gap: 1rem;
+  .app-configure-action-button {
+    margin-bottom: unset;
+    width: 9rem;
+    min-width: fit-content;
+    height: 2.5rem;
+    padding: 0.2rem;
+  }
+}
+.app-config-tag-page {
+  color: #0b4b66;
+  font-weight: 700;
+}
+.zoom-content {
+  height: 100%;
+}
+
+.onhover-tooltip-text {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 100%; /* shows tooltip below the element */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 4px;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+  z-index: 100;
+}
+
+.drawer-container-tooltip:hover .onhover-tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}

package/src/pages/employee/mapview.scss

@@ -41,6 +41,38 @@
         align-items: flex-end !important;
     }
 
+    .bottom-right-map-subcomponents{
+      position: absolute;
+      top: 80%;
+      right: 1rem;
+      z-index: 550;
+      gap:1.5rem;
+      display: flex;
+      align-items: flex-end !important;
+
+      .map-view-element-wrapper{
+        display: flex;
+        width: fit-content;
+        gap: 0.5rem;
+        align-items: center;
+        background-color: #FFFFFF;
+        padding: 0.5rem;
+
+        .map-view-element-label{
+          color: #363636;
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.regular);
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        .map-view-element-icon{
+          width: 1.688rem;
+          height: 2.438rem;
+        }
+      }
+    }
+
     .bottom-left-map-subcomponents {
         position: absolute;
         bottom: 1.5rem;
@@ -95,6 +127,10 @@
                 margin: 0;
                 padding: 0;
                 color: theme(digitv2.lightTheme.paper);
+
+                &.microplan{
+                  color: theme(digitv2.lightTheme.primary);
+                }
             }
 
             .layer-icon {