@djb25/digit-ui-css 1.0.40 → 1.0.42

package/src/components/inboxv2/inboxSearchComposer.scss

@@ -1,134 +1,135 @@
 @import url("../../digitv2/index.scss");
 
 .inbox-search-wrapper {
-    /*
+  /*
     TODO NABEEL/ANIL Removed these since it creates issues in search screen
     @extend .light-background;
 
     */
-    height: 100%;
-    .inbox-search-component-wrapper {
- /*
+  height: 100%;
+  .inbox-search-component-wrapper {
+    /*
     TODO NABEEL/ANIL Removed these since it creates issues in search screen
     @extend .light-background;
 
-    */        height: 100%;
-        width: 100%;
-        .sections-parent {
- /*
+    */
+    height: 100%;
+    width: 100%;
+    .sections-parent {
+      /*
     TODO NABEEL/ANIL Removed these since it creates issues in search screen
     @extend .light-background;
 
-    */            height: 100%;
-            display: grid;
-            grid-template-columns: 20% 1fr;
-            gap : 1rem;
-            &.inbox {
-                @extend .light-text-color-primary;
-                .links{
-                    @extend .light-primary;
-                    @extend .light-paper-primary;
-                    .text{
-                        @extend .light-text-color-primary;
-                    }
-                    .inbox-links-icon{
-                        color:#f47738;
-                        fill:#f47738;
-                        path{
-                            fill:#f47738;
-                        }
-                    }
-                }
-            }
-            &.search {
-                display: flex;
-                flex-direction: column;
-                .section {
-                    &.links {
-                        display: none;
-                    }
-                    &.filter {
-                        display: none;
-                    }
-                }
-                .search-wrapper {
-                    @extend .light-paper-primary;
-                    .search-field-wrapper.search.custom-both-clear-search{
-                        .search-button-wrapper.search {
-                            grid-column: initial;
-                        }
-                    .search-button-wrapper{
-                        .link-label{
-                            @extend .light-primary;
-                            white-space:initial;
-                        }
-                        .submit-bar {
-                            @extend .light-primary-button;
-                            width: 60%;
-                        }
-                    }
-                }
-            }
+    */
+      height: 100%;
+      display: grid;
+      grid-template-columns: 20% 1fr;
+      gap: 1rem;
+      &.inbox {
+        @extend .light-text-color-primary;
+        .links {
+          @extend .light-primary;
+          @extend .light-paper-primary;
+          .text {
+            @extend .light-text-color-primary;
+          }
+          .inbox-links-icon {
+            color: #3a8dcc;
+            fill: #3a8dcc;
+            path {
+              fill: #3a8dcc;
             }
-            &.download {
-                grid-template-columns: 100%
+          }
+        }
+      }
+      &.search {
+        display: flex;
+        flex-direction: column;
+        .section {
+          &.links {
+            display: none;
+          }
+          &.filter {
+            display: none;
+          }
+        }
+        .search-wrapper {
+          @extend .light-paper-primary;
+          .search-field-wrapper.search.custom-both-clear-search {
+            .search-button-wrapper.search {
+              grid-column: initial;
             }
-            .section {
-                @extend .light-paper-primary;
-                @extend .light-text-color-primary;
-                min-height: 10rem;
-                /* background-color: white; */
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 4px;
-                box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
-                &.search-results {
-                    min-height: 0;
-                }
-                &.links {
-                    height: 100%;
-                    color : #f47738;
-                    .inbox-search-links-component {
-                        height: 100% !important;
-                        width: 100%;
-                    }
-                }
-                &.filter {
-                    @extend .light-paper-primary;
-                    @extend .light-text-color-primary;
-                    height: fit-content;
-                }
+            .search-button-wrapper {
+              .link-label {
+                @extend .light-primary;
+                white-space: initial;
+              }
+              .submit-bar {
+                @extend .light-primary-button;
+                width: 60%;
+              }
             }
+          }
+        }
+      }
+      &.download {
+        grid-template-columns: 100%;
+      }
+      .section {
+        @extend .light-paper-primary;
+        @extend .light-text-color-primary;
+        min-height: 10rem;
+        /* background-color: white; */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
+        &.search-results {
+          min-height: 0;
+        }
+        &.links {
+          height: 100%;
+          color: #3a8dcc;
+          .inbox-search-links-component {
+            height: 100% !important;
+            width: 100%;
+          }
+        }
+        &.filter {
+          @extend .light-paper-primary;
+          @extend .light-text-color-primary;
+          height: fit-content;
         }
+      }
     }
+  }
 }
 
 @screen sm {
-    .employee-main-application-details-for-modal  {
-        padding: 0 !important;
-    }
-    .inbox-search-wrapper {
-        .inbox-search-component-wrapper {
-            .sections-parent {
-                display: flex;
-                flex-direction : column;
-                .section {
-                    &.search-results {
-                    }
-                    &.links {
-                    }
-                    &.filter {
-                       
-                    }
-                    &.as-modal {
-                        position : fixed;
-                        top : 0;
-                        height : 100vh;
-                        width : 100vw;
-                    }
-                }
-            }
+  .employee-main-application-details-for-modal {
+    padding: 0 !important;
+  }
+  .inbox-search-wrapper {
+    .inbox-search-component-wrapper {
+      .sections-parent {
+        display: flex;
+        flex-direction: column;
+        .section {
+          &.search-results {
+          }
+          &.links {
+          }
+          &.filter {
+          }
+          &.as-modal {
+            position: fixed;
+            top: 0;
+            height: 100vh;
+            width: 100vw;
+          }
         }
+      }
     }
-}
+  }
+}

package/src/components/juridictions.scss

@@ -9,6 +9,10 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
+
+  @media (max-width: 760px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 

package/src/components/landingpage.scss

@@ -2973,7 +2973,7 @@ svg text {
 /* Premium Professional Organizational Chart - Version 4.0 */
 
 :root {
-  --primary-color: #667eea;
+  --primary-color: #1f5fa8;
   --primary-dark: #5a67d8;
   --secondary-color: #f093fb;
   --accent-color: #4facfe;
@@ -3319,7 +3319,7 @@ svg text {
 
 /* Instruction Banner */
 .instruction-banner {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   color: white;
   padding: 14px 24px;
   border-radius: 10px;
@@ -3553,7 +3553,7 @@ svg text {
 
 /* Hierarchy Level Styling */
 .org-tree > .org-node > .org-box {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   color: white;
   border-color: var(--primary-dark);
   font-size: 16px;
@@ -3740,7 +3740,7 @@ svg text {
 }
 
 .legend-color.level-1 {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
 }
 
 .legend-color.level-2 {

package/src/components/moduleHeader.scss

@@ -149,7 +149,7 @@
     top: 55px;
     left: 0;
     width: 100%;
-    background: #667eea;
+    background: #1f5fa8;
     color: #fff;
     flex-direction: column;
     padding: 16px;

package/src/components/multiSelectDropdown.scss

@@ -2,9 +2,10 @@
   @apply relative text-form-field text-text-primary w-full;
   .master,
   .master-active {
-    @apply relative border border-solid border-input-border h-10 w-full;
+    border: 2px solid #e5e5e7;
+    @apply rounded-md relative h-10 w-full;
     input[type="text"] {
-      @apply absolute top-0 left-0 min-h-full opacity-0;
+      @apply rounded-l-md absolute top-0 left-0 min-h-full opacity-0;
       &:focus {
         @apply outline-none;
       }
@@ -17,12 +18,24 @@
     }
 
     &:hover {
-      @apply border-2 border-solid border-primary-main;
+      border: 2px solid #a1a1aa;
+      @apply rounded-md;
+    }
+    &:focus-within {
+      border: 2px solid #007bff !important;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
     }
   }
 
   .master-active {
-    @apply border-2 border-primary-main;
+    &:hover {
+      border: 2px solid #a1a1aa;
+      @apply rounded-md;
+    }
+    &:focus-within {
+      border: 2px solid #007bff !important;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
     input[type="text"] {
       @apply opacity-100;
     }

package/src/components/radiobtn.scss

@@ -1,10 +1,10 @@
 .radio-wrap {
   flex-wrap: wrap;
   .radio-btn-outer-wrap {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
   }
-  @apply my-sm block leading-10 mb-lg;
+  @apply block leading-10;
 
   .radio-btn-wrap {
     @apply block float-left relative;
@@ -35,16 +35,16 @@
     @apply border-2 border-primary-main;
   }
 
-.radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
-  @apply block bg-primary-main h-3 w-3 rounded-full absolute;
+  .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
+    @apply block bg-primary-main h-3 w-3 rounded-full absolute;
 
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
-.reverse-radio-selection-wrapper{
-  div{
-    @apply flex flex-row-reverse place-content-between items-center;    ;
+.reverse-radio-selection-wrapper {
+  div {
+    @apply flex flex-row-reverse place-content-between items-center;
   }
-}
+}

package/src/components/selectdropdown.scss

@@ -50,7 +50,10 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    outline: none;
+    border: 2px solid #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    @apply relative block w-full h-10 rounded-md;
 
     input[type="text"] {
       width: calc(100% - 32px);
@@ -77,9 +80,13 @@
   }
 
   .options-card {
+    position: absolute;
+    top: 100%;
+    margin-top: 4px;
+    z-index: 2;
     width: 100% !important;
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    max-height: 400px;
+    max-height: 200px;
     overflow: auto;
     @apply absolute z-20 mt-xs bg-white max-w-full;
 
@@ -92,6 +99,11 @@
       }
     }
   }
+  & .options-card.open-up {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 4px;
+  }
 }
 
 .employee-select-wrap--elipses {
@@ -130,7 +142,10 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    outline: none;
+    border: 2px solid #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    @apply relative block w-full h-10 rounded-md;
 
     input[type="text"] {
       width: calc(100% - 32px);

package/src/components/table.scss

@@ -14,7 +14,7 @@
       text-align: left;
       white-space: nowrap;
       /* Updated gradient background to match screenshot */
-      background: #667eea;
+      background: #1f5fa8;
       color: white;
       @apply font-bold align-middle text-left;
 
@@ -227,4 +227,4 @@
       }
     }
   }
-}
+}

package/src/components/textfields.scss

@@ -9,6 +9,9 @@
 .employee-card-input {
   border: 2px solid #e5e5e7;
   @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field text-text-primary rounded-md;
+  &:hover {
+    border: 2px solid #a1a1aa;
+  }
 }
 
 .employee-card-input:disabled {
@@ -31,7 +34,11 @@
 
 .card-textarea,
 .employee-card-textarea {
-  @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
+  border: 2px solid #e5e5e7;
+  @apply block outline-none w-full bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
+  &:hover {
+    border: 2px solid #a1a1aa;
+  }
 }
 
 .inputWrapper {

package/src/components/toast.scss

@@ -1,7 +1,7 @@
 .toast-success {
   max-width: 480px;
   width: calc(100% - 20px);
-  bottom: 64px;
+  bottom: 100px;
   left: 0;
   margin: 0 10px;
   gap: 16px;

package/src/components/topbar.scss

@@ -15,6 +15,26 @@
     width: 100%;
   }
 
+
+  .btx {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px; /* controls space between lines */
+
+    h1 {
+      margin: 0;
+      line-height: 1.1;
+    }
+
+    p {
+      margin: 0;
+      line-height: 1.1;
+    }
+
+
+}
+
   img {
     display: inline;
 
@@ -110,6 +130,27 @@
       }
     }
   }
+
+  @media (max-width: 780px) {
+    padding: 10px 16px; // Reduce padding for mobile
+
+    .brand-mark {
+      width: 40px !important;
+      height: 40px !important;
+      img {
+        max-width: 32px;
+      }
+    }
+
+    .btx {
+      h1 {
+        font-size: 15px !important;
+      }
+      p {
+        font-size: 9px !important;
+      }
+    }
+  }
 }
 
 .cp {
@@ -235,3 +276,155 @@ video::-webkit-media-controls-panel {
     flex-shrink: 0;
   }
 }
+
+.topbar-right-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  gap: 15px;
+
+  @media (max-width: 1024px) {
+    gap: 8px;
+    margin-right: 0px !important;
+    margin-left: 0px !important;
+  }
+}
+
+.topbar-item-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  padding: 8px 14px !important;
+  border-radius: 8px !important;
+  border: 1px solid #e5e7eb !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #1f2937 !important;
+  white-space: nowrap !important;
+
+  @media (max-width: 1024px) {
+    padding: 6px 10px !important;
+    gap: 6px !important;
+    font-size: 12px !important;
+  }
+
+  @media (max-width: 780px) {
+    padding: 4px 6px !important;
+    font-size: 11px !important;
+    svg {
+      width: 14px !important;
+      height: 14px !important;
+    }
+  }
+
+  @media (max-width: 450px) {
+    padding: 3px 5px !important;
+    font-size: 10px !important;
+    gap: 4px !important;
+    svg {
+      width: 12px !important;
+      height: 12px !important;
+    }
+  }
+}
+
+.hide-on-mobile {
+  @media (max-width: 500px) {
+    display: none !important;
+  }
+}
+
+.vertical-divider {
+  width: 2px;
+  height: 28px;
+  background-color: rgb(203, 213, 225);
+
+  @media (max-width: 1024px) {
+    height: 20px;
+  }
+  @media (max-width: 780px) {
+    height: 16px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .user-profile-pill {
+    padding: 4px !important;
+    gap: 0 !important;
+    .user-profile-info {
+      display: none !important;
+    }
+  }
+
+  .topbar img.spect-icon {
+    max-height: 40px !important;
+    padding-right: 10px !important;
+  }
+}
+
+@media (max-width: 780px) {
+  .topbar img.spect-icon {
+    display: none !important;
+  }
+
+  .user-profile-pill {
+    .user-profile-avatar,
+    .user-profile-img {
+      width: 32px !important;
+      height: 32px !important;
+      font-size: 14px !important;
+    }
+  }
+}
+
+@media (max-width: 360px) {
+  .topbar {
+    padding: 8px 10px !important;
+  }
+  .topbar-content {
+    gap: 0 !important;
+  }
+  .topbar .brand {
+    gap: 6px !important;
+  }
+  .topbar .brand-mark {
+    width: 34px !important;
+    height: 34px !important;
+    border-radius: 6px !important;
+    min-width: 34px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+  .topbar .brand-mark img {
+    max-width: 24px !important;
+    height: auto !important;
+    object-fit: contain !important;
+  }
+  .topbar .btx p {
+    display: none !important;
+  }
+  .topbar .btx h1 {
+    font-size: 14px !important;
+    line-height: 1 !important;
+    white-space: nowrap !important;
+  }
+  .user-profile-pill {
+    padding: 2px 6px 2px 2px !important;
+    gap: 4px !important;
+    border: none !important;
+    .user-profile-avatar,
+    .user-profile-img {
+      width: 28px !important;
+      height: 28px !important;
+      font-size: 13px !important;
+    }
+  }
+  .topbar-item-wrapper {
+    padding: 4px !important;
+    border: none !important;
+  }
+}