@egovernments/digit-ui-components-css 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
@@ -24,7 +24,9 @@
     "last 2 versions"
   ],
   "style": "./dist/index.css",
-  "dependencies": {},
+  "dependencies": {
+    "react-datepicker": "4.8.0"
+  },
   "devDependencies": {
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",

package/src/digitv2/components/cardV2.scss

@@ -334,7 +334,8 @@
 }
 
 .digit-card-section-header {
-    @apply text-text-primary text-heading-m font-bold;
+    @apply text-heading-m font-bold;
+    color: theme(digitv2.lightTheme.text-primary);
 }
 
 .digit-card-search-heading {
@@ -495,4 +496,9 @@
             margin-bottom: unset;
         }
     }
+}
+.titleStyle{
+    color: theme(digitv2.lightTheme.primary-2);
+    font-weight: theme(digitv2.fontWeight.bold);
+    font-size: theme(digitv2.spacers.spacer10);
 }

package/src/digitv2/components/fieldV1.scss

@@ -23,6 +23,10 @@
             }
         }
 
+        &.boldLabel{
+          font-weight: 700;
+        }
+
         .label-container {
             @apply flex items-center w-full;
             gap: theme(digitv2.spacers.spacer1);
@@ -144,4 +148,102 @@
     .digit-charcount {
         @apply justify-end;
     }
+}
+
+.digit-form-card-subheader {
+    @extend .typography.caption-l;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.medium);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.caption-l.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.caption-l.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.caption-l.desktop);
+    }
+    color: theme(digitv2.lightTheme.text-primary);
+}
+
+.digit-form-card-description {
+    @extend .typography.heading-s;
+    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-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    color: theme(digitv2.lightTheme.text-secondary);
+}
+
+.digit-form-card-text {
+    @extend .typography.body-l;
+    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-l.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-l.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-l.desktop);
+    }
+    color: theme(digitv2.lightTheme.text-secondary);
+
+}
+
+.sectionSubHeaderStyle{
+  @extend .typography.body-s;
+  @apply flex justify-between items-baseline;
+  color: theme(digitv2.lightTheme.text-secondary);
+  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);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.body-s.tablet);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.body-s.desktop);
+  }
 }

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -203,6 +203,11 @@
   }
   .digit-multiselectdropodwn-menuitem {
     @apply flex w-full bg-white justify-start items-center;
+
+    &.frozen{
+      pointer-events: none;
+      opacity: 0.6;
+    }
     min-height: 2.438rem;
     .option-des-container {
       @apply w-full max-w-full overflow-hidden box-border;

package/src/digitv2/components/textInputV2.scss

@@ -462,4 +462,20 @@
   &.disabled {
     @apply pointer-events-none;
   }
+}
+
+.digit-new-date-format{
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.digit-new-date-format.disabled{
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
 }

package/src/digitv2/components/toggleV2.scss

@@ -108,4 +108,79 @@
 .digit-toggle-label {
   color: theme(digitv2.lightTheme.text-disabled);
   padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
-}
+}
+
+
+.digit-toggle-toolbar.vertical-toggle {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.digit-toggle-toolbar.vertical-toggle .toggle-option-container {
+  width: fit-content !important;
+  max-width: 100% !important;
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  border: 1px solid #d6d6d6;
+  cursor: pointer;
+  transition:  all 0.2s ease;
+  width: 8.5rem !important; 
+  min-width: 6.25rem; 
+  height: 8.125rem;
+}
+
+.vertical-toggle .toggle-option-container:first-child .digit-toggle-btn-wrap {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.vertical-toggle .toggle-option-container:last-child .digit-toggle-btn-wrap {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-btn-wrap.checked {
+  border: 2px solid theme(digitv2.lightTheme.primary-1);
+  background-color: theme(digitv2.lightTheme.paper-primary) !important;
+  color: theme(digitv2.lightTheme.primary-1);
+  width: 9rem !important;
+  transform: scaleX(1.05); 
+}
+
+.digit-toggle-toolbar.vertical-toggle .digit-toggle-label {
+  font-weight: bold;
+  font-size: theme(digitv2.fontSize.heading-s);
+  text-align: center;
+  width: 100%;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  color: theme(digitv2.lightTheme.primary-2);
+}
+
+.digit-toggle-input {
+  display: none;
+}
+.vertical-toggle .digit-toggle-btn-wrap input:checked + .digit-toggle-label {
+  background-color:theme(digitv2.lightTheme.paper-primary) !important;
+  color: theme(digitv2.lightTheme.primary-1) !important;
+  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.vertical-toggle .digit-toggle-btn-wrap.checked {
+  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.vertical-toggle{
+  .digit-toggle-label{
+    &.disabled{
+      color: theme(digitv2.lightTheme.text-disabled) !important;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+.selecting-boundary-div {
+    padding-top: 0.5rem;
+   
+    gap:1.5rem;
+    .label-field-pair {
+        margin-bottom: 1.5rem;
+    }
+
+}
+
+
+
+.selecting-boundary-div.horizontal-layout {
+    display: grid; 
+    grid-template-columns: repeat(3, 1fr); 
+    align-items: flex-start;
+  }
+
+
+.digit-card-label.boundary-selection-label{
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+
+    @media (max-width: 30rem) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-width: 48rem) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+
+    color: theme(digitv2.lightTheme.text-primary);
+    width:30%;
+} 
+.selecting-boundary-div.horizontal-layout .boundary-item {
+    display: flex;
+    justify-content: center;
+ }
+
+ .digit-field-full{
+    width:100%;
+ }
+
+ .digit-label-field-pair.boundary-item.vertical{
+    margin-bottom: 0rem;
+ } 
+ 
+ .padding-dropdown{
+    padding-bottom: 1.6rem;
+ }
+
+ .filter-card.filter-card-vertical .selecting-boundary-div {
+    max-width: 65%;
+  }
+  

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

@@ -249,6 +249,16 @@
                     .digit-tab-main {
                         width: 100%;
                     }
+
+                    &.tab{
+                        background: none !important;
+                        padding: theme(digitv2.spacers.spacer0);
+                        box-shadow: none;
+
+                        .digit-search-wrapper{
+                            padding: theme(digitv2.spacers.spacer6);
+                        }
+                    }
                 }
 
                 &.filter{
@@ -301,6 +311,17 @@
     line-height: normal;
 }
 
+.digit-inbox-search-composer-header-action-wrapper{
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .digit-inbox-search-composer-action{
+        margin-bottom: theme(digitv2.spacers.spacer6);
+    }
+}
+
 .digit-inbox-search-links-container {
     .digit-inbox-search-links-header {
         display: flex;
@@ -375,4 +396,105 @@
         }
 
     }
+}
+
+@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 ;
+}
+
+.digit-custom-row-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer6);
+}
+
+.footer-pagination-content {
+    &.digit-results-table{
+        margin-top:1.5rem;
+
+        td{
+            width: 100%;
+
+            .pagination{
+                border-top: none;
+            }
+        }
+    }
+}
+.digit-results-card-component {
+    .digit-results-card-heading-tags-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .digit-results-card-heading {
+            color: theme(digitv2.lightTheme.primary-2);
+            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);
+            }
+        }
+
+        .digit-results-card-tags {
+            display: flex;
+            gap: theme(digitv2.spacers.spacer4);
+        }
+    }
+}
+
+.pagination {
+    &.custom-results {
+
+        button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                margin-left: theme(digitv2.spacers.spacer0);
+            }
+        }
+    }
 }

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

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

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

@@ -1,11 +1,11 @@
 
-.digit-global-serach-results-table-wrapper{
+.digit-global-search-results-table-wrapper{
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }
 
-.digit-global-serach-results-table{
+.digit-global-search-results-table{
   margin-bottom: 1.5rem;
 
 

package/src/index.scss

@@ -10,6 +10,7 @@
 
 @import "react-date-range/dist/styles.css";
 @import "react-date-range/dist/theme/default.css";
+@import "react-datepicker/dist/react-datepicker.css";
 
 @import "./pages/employee/index.scss";
 @import "./pages/employee/login.scss";