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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.2.0",
+  "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/buttonsV2.scss

@@ -337,6 +337,11 @@
   min-width: 15rem;
   background-color: theme(digitv2.lightTheme.primary-1);
 
+  &.digit-formcomposer-submitbar{
+    width: fit-content;
+    margin-left: auto;
+  }
+
   h2 {
     @extend .typography.button.large;
     @apply text-white;

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

@@ -5,6 +5,7 @@
     flex-direction: column;
     justify-content: flex-start;
     gap: theme(digitv2.spacers.spacer1);
+    width: 100%;
 }
 
 .digit-header-content {
@@ -22,6 +23,10 @@
             }
         }
 
+        &.boldLabel{
+          font-weight: 700;
+        }
+
         .label-container {
             @apply flex items-center w-full;
             gap: theme(digitv2.spacers.spacer1);
@@ -87,6 +92,10 @@
                 }
             }
         }
+
+        &.search-screen{
+            width: 100%;
+        }
     }
 }
 
@@ -139,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/labelFieldPairV2.scss

@@ -57,6 +57,14 @@
        width: 100%;
      }
    }
+
+   &.removeMargin{
+    margin-bottom: theme(digitv2.spacers.spacer0);
+   }
+
+   &.digit-formcomposer-fieldpair{
+    width: 100%;
+   }
  }
 
  @screen dt {

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -67,7 +67,7 @@
   }
 
   .digit-multiselectdropdown-master-active{
-    &.serachable{
+    &.searchable{
       input[type="text"]{
         opacity: 1;
         width: calc(100%-24px);
@@ -113,7 +113,7 @@
   }
   .digit-nested-category {
     @apply flex items-center flex-shrink-0;
-    background: theme(digitv2.lightTheme.background);
+    background: theme(digitv2.lightTheme.generic-background);
     height: 2.4375rem;
     padding: theme(digitv2.spacers.spacer4) 0.625rem;
     gap: 0.625rem;
@@ -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/otpInputV2.scss

@@ -40,7 +40,7 @@
     height: 3.125rem;
     text-align: center;
     color: theme(digitv2.lightTheme.text-primary);
-    border: 0.063rem solid theme(digitv2.lightTheme.input-border);
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
     outline: none;
     transition: border-color 0.3s ease-in-out;
     font-family: theme(digitv2.fontFamily.sans);

package/src/digitv2/components/selectDropdownV2.scss

@@ -164,7 +164,7 @@
 }
 .digit-nested-category {
   @apply flex items-center flex-shrink-0;
-  background: theme(digitv2.lightTheme.background);
+  background: theme(digitv2.lightTheme.generic-background);
   height: 2.4375rem;
   padding: theme(digitv2.spacers.spacer4) 0.625rem;
   gap: 0.625rem;

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/timelineV2.scss

@@ -51,7 +51,7 @@
 }
 
 .timeline-divider {
-  border: 0.063rem solid theme(digitv2.lightTheme.divider);
+  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 }
 
 .timeline-label {

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/index.scss

@@ -60,14 +60,14 @@
 /* important to be remove after fixing the components */
 .light {
   &-primary {
-    color: theme(digitv2.lightTheme.primary-orange) !important;
+    color: theme(digitv2.lightTheme.primary-1) !important;
 
     &-button {
-      background-color: theme(digitv2.lightTheme.primary-orange);
+      background-color: theme(digitv2.lightTheme.primary-1);
     }
 
     &-bg {
-      background-color: theme(digitv2.lightTheme.primary-orangebg);
+      background-color: theme(digitv2.lightTheme.primary-bg);
     }
   }
 
@@ -120,7 +120,7 @@
   }
 
   &-header-sidenav {
-    color: theme(digitv2.lightTheme.primary-bluegray);
+    color: theme(digitv2.lightTheme.primary-2);
   }
 
   &-input-border {

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%;
+  }
+