@egovernments/digit-ui-components-css 0.0.2-beta.7 → 0.2.0-beta.1

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

@@ -0,0 +1,409 @@
+.digit-search-wrapper {
+    @extend .light-text-color-primary;
+    @extend .light-paper-primary;
+    height: 100%;
+    width: 100%;
+
+    .popup-label {
+        display: flex;
+        font-size: large;
+        @extend .light-text-color-primary;
+
+        .header {
+            @extend .light-text-color-primary;
+            width: 100%;
+            font-weight: normal;
+            font-size: large;
+
+            .icon {
+                @extend .light-primary;
+                margin-right: 12px;
+                margin-top: 5px;
+            }
+        }
+    }
+
+    .filter-header-wrapper {
+        @extend .light-text-color-primary;
+        display: grid;
+        grid-template-columns: 15% 1fr 15%;
+        height: 3rem;
+        margin-bottom: 1rem;
+
+        .icon-refresh {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #00000017;
+            cursor: pointer;
+
+            svg {
+                height: 60%;
+                width: 40%;
+            }
+        }
+
+        .label {
+            @extend .light-text-color-primary;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        @media (min-width: 1024px) {
+            .label {
+                font-size: 24px;
+            }
+        }
+
+        @media (max-width: 1024px) {
+            .label {
+                font-size: 16px;
+            }
+        }
+
+        .icon-filter {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+    }
+}
+
+@screen sm {
+    .digit-search-wrapper {
+        .digit-search-field-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
+
+.digit-inbox-search-wrapper {
+
+    .digit-inbox-search-component-wrapper {
+        height: 100%;
+        width: 100%;
+
+        .digit-sections-parent {
+            height: 100%;
+            display: grid;
+            grid-template-columns: 20% 1fr;
+            gap: 1rem;
+
+            &.inbox {
+                @extend .light-text-color-primary;
+
+                .links {
+                    .inbox-links-icon {
+                        color: theme(colors.primary.main);
+                        fill: theme(colors.primary.main);
+
+                        path {
+                            fill: theme(colors.primary.main);
+                        }
+                    }
+                }
+            }
+
+            &.search {
+                display: flex;
+                flex-direction: column;
+
+                .digit-section {
+                    &.links {
+                        display: none;
+                    }
+
+                    &.filter {
+                        display: none;
+                    }
+                }
+
+                .digit-search-wrapper {
+                    @extend .light-paper-primary;
+
+                    .digit-search-field-wrapper.search.custom-both-clear-search {
+
+                        .digit-search-button-wrapper {
+                            .link-label {
+                                @extend .light-primary;
+                                white-space: initial;
+                            }
+
+                            .submit-bar {
+                                @extend .light-primary-button;
+                                width: 60%;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.download {
+                grid-template-columns: 100%
+            }
+
+            .digit-section {
+                @extend .light-paper-primary;
+                @extend .light-text-color-primary;
+                min-height: 10rem;
+
+                &.search-results {
+                    min-height: 0;
+                }
+
+                &.links {
+                    height: 100%;
+                    color: theme(colors.primary.main);
+
+                    .inbox-search-links-component {
+                        height: 100% !important;
+                        width: 100%;
+                    }
+                }
+
+                &.filter {
+                    height: fit-content;
+                }
+
+                &.tab {
+                    display: block;
+                    background-color: #eee;
+                    box-shadow: none;
+
+                    .digit-search-wrapper {
+                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@screen sm {
+    .employee-main-application-details-for-modal {
+        padding: 0 !important;
+    }
+
+    .digit-inbox-search-wrapper {
+        .digit-inbox-search-component-wrapper {
+            .digit-sections-parent {
+                display: flex;
+                flex-direction: column;
+
+                .digit-section {
+                    &.search-results {}
+
+                    &.links {}
+
+                    &.filter {}
+
+                    &.as-modal {
+                        position: fixed;
+                        top: 0;
+                        height: 100vh;
+                        width: 100vw;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+.digit-inbox-search-wrapper {
+    height: 100%;
+
+    .digit-inbox-search-component-wrapper {
+        height: 100%;
+        width: 100%;
+
+        .digit-sections-parent {
+
+            height: 100%;
+            display: grid;
+            grid-template-columns: 20% 1fr;
+            gap: theme(digitv2.spacers.spacer6);
+
+            .digit-section {
+
+                &.links,
+                &.search{
+                    background-color: theme(digitv2.lightTheme.paper-primary);
+                    box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+                    border-radius: theme(digitv2.spacers.spacer1);
+                    padding: theme(digitv2.spacers.spacer6);
+                    justify-content: flex-start;
+                    display: flex;
+                    align-items: center;
+                }
+
+                &.links{
+                    align-items: flex-start;
+                }
+
+                &.search {
+                    .digit-tab-main {
+                        width: 100%;
+                    }
+                }
+
+                &.filter{
+                    .digit-inbox-search-composer-filter-card-content{
+                        gap:theme(digitv2.spacers.spacer4)
+                    }
+                }
+
+                .digit-search-wrapper {
+                    .digit-search-field-wrapper {
+                        .digit-search-button-wrapper {
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-end;
+                            gap: theme(digitv2.spacers.spacer6);
+
+                            &.add-margin{
+                                margin-top:theme(digitv2.spacers.spacer6);
+                            }
+
+                            &.inbox {
+                                grid-column: 3 / -1;
+
+                                &.filter {
+                                    button {
+                                        width: 100%;
+                                    }
+                                }
+                            }
+
+                            &.search {
+                                grid-column: 3 / -1;
+                            }
+                        }
+                    }
+
+                    .digit-filter-header-wrapper{
+                        
+                    }
+                }
+            }
+        }
+    }
+}
+
+.digit-inbox-search-composer-header {
+    @extend .typography.heading-xl;
+    color: theme(digitv2.lightTheme.primary-2);
+    margin-bottom: theme(digitv2.spacers.spacer6);
+    line-height: normal;
+}
+
+.digit-inbox-search-links-container {
+    .digit-inbox-search-links-header {
+        display: flex;
+        gap: theme(digitv2.spacers.spacer2);
+        align-items: center;
+        margin-bottom: theme(digitv2.spacers.spacer6);
+
+        .digit-inbox-search-links-header-logo {
+            width: theme(digitv2.spacers.spacer8);
+            height: theme(digitv2.spacers.spacer8);
+        }
+
+        .digit-inbox-search-links-header-text {
+            @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
+
+            color:theme(digitv2.lightTheme.primary-2);
+            line-height: normal;
+        }
+    }
+
+    .digit-inbox-search-links-contents {
+        display: flex;
+        flex-direction: column;
+        gap: theme(digitv2.spacers.spacer4);
+
+        a {
+            color: theme(digitv2.lightTheme.primary-1) !important;
+        }
+
+        .digit-inbox-search-link {
+            @extend .typography.link-L;
+            color: theme(digitv2.lightTheme.primary-1);
+        }
+    }
+}
+
+.digit-inbox-search-composer-label-pair {
+    margin-bottom: theme(digitv2.spacers.spacer0);
+}
+
+.digit-search-wrapper {
+    .digit-search-field-wrapper {
+        display: grid;
+        row-gap: theme(digitv2.spacers.spacer6);
+        column-gap: theme(digitv2.spacers.spacer4);
+        grid-template-columns: repeat(3, 1fr);
+
+        &.inbox {
+            &.filter {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+    }
+}
+
+@media screen and (max-width: 426px) {
+
+    .digit-header-content{
+        &.digit-inbox-search-composer-header{
+            margin-left: 1rem;
+        }
+    }
+    
+    .digit-inbox-search-wrapper {
+        .digit-inbox-search-component-wrapper {
+            .digit-sections-parent {
+                display: flex;
+                flex-direction: column;
+
+                &.inbox{
+                    .searchBox{
+                        margin: 0rem 1rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.digit-table-loader{
+    height: 31.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center ;
+}

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

@@ -1 +1,3 @@
 @import url("./workbench.scss");
+@import url("./inboxsearchcomposer.scss");
+@import url("./reactdatatable.scss");

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

@@ -0,0 +1,132 @@
+
+.digit-global-serach-results-table-wrapper{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.digit-global-serach-results-table{
+  margin-bottom: 1.5rem;
+
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    min-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    min-width: 100%;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    min-width: 37.5rem;
+  }
+}
+
+.rdt_TableRow {
+    &.selectedRow {
+        background-color: #FBEEE8 !important;
+        border-bottom-color: theme(digitv2.lightTheme.generic-divider) !important;
+    }
+}
+
+.rdt_TableCol_Sortable {
+    display: flex;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer1);
+
+    &:hover {
+        opacity: 1 !important;
+    }
+
+    /* Target the first div directly inside .rdt_TableCol_Sortable */
+    >div:first-child {
+        white-space: normal;
+    }
+
+    .__rdt_custom_sort_icon__ {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.rdt_TableCol {
+    border-radius: theme(digitv2.spacers.spacer0) !important;
+
+    &:last-of-type {
+        border-left: none !important;
+    }
+}
+
+.rdt_TableCol {
+    border-radius: theme(digitv2.spacers.spacer0) !important;
+
+    &:last-of-type {
+        border-left: none !important;
+    }
+}
+
+.sc-fzXfNN.sc-fzXfNO.sc-fzXfNP.iSamCd.rdt_TableCell>div:first-of-type {
+    width: 100%;
+}
+
+.rdt_TableHead {
+    z-index: 13 !important;
+}
+
+.rdt_TableHeadRow {
+    justify-content: space-between;
+}
+
+.rdt_TableRow {
+    justify-content: space-between;
+}
+
+.digit-data-table::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-data-table::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-data-table::-webkit-scrollbar {
+    width: theme(digitv2.spacers.spacer2);
+    background-color: theme(digitv2.lightTheme.generic-divider);
+}
+
+.digit-data-table::-webkit-scrollbar:horizontal {
+    height: theme(digitv2.spacers.spacer2);
+    background-color: theme(digitv2.lightTheme.generic-divider);
+}
+
+.digit-data-table-select-checkbox {
+    margin-bottom: theme(digitv2.spacers.spacer0);
+}
+
+.rdt_Pagination {
+    margin-top: -1rem;
+    border: 0.063rem solid #d6d5d4;
+    border-top: theme(digitv2.spacers.spacer0);
+}
+
+
+.rdt_TableHeadRow {
+    justify-content: space-between;
+}
+
+.rdt_TableRow {
+    justify-content: space-between;
+}
+
+.digit-dataTable-actions-container{
+    display: flex;
+    gap:theme(digitv2.spacers.spacer2);
+    align-items: center;
+    flex-wrap: wrap;
+}

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

@@ -2,7 +2,7 @@
 
 .bread-crumb.workbench-bredcrumb{
 a{
-  color: theme(digitv2.lightTheme.primary-orange);
+  color: theme(digitv2.lightTheme.primary-1);
 }
 }
 .workbench{
@@ -142,7 +142,7 @@ a{
                 }
 
                 .digit__control--is-focused {
-                  border-color: theme(digitv2.lightTheme.primary-orange) !important;
+                  border-color: theme(digitv2.lightTheme.primary-1) !important;
                   box-shadow: none;
                   box-sizing: unset;
                   @apply outline-none;
@@ -158,10 +158,10 @@ a{
                 }
 
                 .digit__control:focus {
-                  border-color: theme(digitv2.lightTheme.primary-orange);
+                  border-color: theme(digitv2.lightTheme.primary-1);
 
                   .digit__value-container:focus {
-                    border-color: theme(digitv2.lightTheme.primary-orange);
+                    border-color: theme(digitv2.lightTheme.primary-1);
 
                   }
                 }
@@ -169,7 +169,7 @@ a{
 
               &.form-select:focus {
                 @apply outline-none;
-                border-color: theme(digitv2.lightTheme.primary-orange);
+                border-color: theme(digitv2.lightTheme.primary-1);
 
               }
             }
@@ -182,7 +182,7 @@ a{
             .form-control:focus {
 
               @apply outline-none;
-              border-color: theme(digitv2.lightTheme.primary-orange);
+              border-color: theme(digitv2.lightTheme.primary-1);
             }
 
             textarea.form-control {
@@ -236,7 +236,7 @@ a{
                 }
          
                 input[type="checkbox"]#digit_root_active {
-                  accent-color: theme(digitv2.lightTheme.primary-orange);
+                  accent-color: theme(digitv2.lightTheme.primary-1);
                 }
 
                 input:checked,
@@ -549,7 +549,7 @@ a{
   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 */
+    background-color:  theme(digitv2.lightTheme.primary-bg); /* Change this to the desired hover color */
     cursor: pointer;
   }
 }
@@ -573,11 +573,11 @@ a{
     text-decoration: none;
     .browse-text {
       text-decoration: none;
-      color: #F47738; 
+      color: theme(digitv2.lightTheme.primary-1); 
       transition: color 0.3s;
     }
     .browse-text:hover {
-        color: #F47738; 
+        color: theme(digitv2.lightTheme.primary-1);
         text-decoration: underline; 
         cursor: pointer;
     }

package/src/digitv2/typography.scss

@@ -443,46 +443,61 @@
   }
 
   &.body-s {
-    font-family: theme(digitv2.fontFamily.sans);
-    font-style: theme(digitv2.fontStyle.normal);
-    font-weight: theme(digitv2.fontWeight.regular);
-    line-height: theme(digitv2.lineHeight.lineheight2);
-
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
       font-size: theme(digitv2.fontSize.body-s.mobile);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
       font-size: theme(digitv2.fontSize.body-s.tablet);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.body-s.desktop);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
 
   &.body-xs {
-    font-family: theme(digitv2.fontFamily.sans);
-    font-style: theme(digitv2.fontStyle.normal);
-    font-weight: theme(digitv2.fontWeight.regular);
-    line-height: theme(digitv2.lineHeight.lineheight2);
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
       font-size: theme(digitv2.fontSize.body-xs.mobile);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
       font-size: theme(digitv2.fontSize.body-xs.tablet);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.body-xs.desktop);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
 

package/src/index.scss

@@ -74,10 +74,6 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.dark {
-  @apply text-text-primary;
-}
-
 .mrlg {
   @apply mr-lg;
 }