@egovernments/digit-ui-components-css 0.0.2-beta.10 → 0.0.2-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.10",
+  "version": "0.0.2-beta.12",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",

package/src/digitv2/components/actionbarV2.scss

@@ -0,0 +1,207 @@
+@import url("../index.scss");
+
+/*.digit-action-bar-wrap {
+  @extend .light-text-color-primary;
+  @extend .light-paper-primary;
+  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+  max-width: 100%;
+  z-index: 100;
+
+  @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right;
+
+  div {
+    @apply w-full;
+  }
+
+  .digit-menu-wrap {
+    @extend .light-background;
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    bottom: 45px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: calc(100% - 16px);
+    right: 8px;
+
+    div {
+      @extend .light-primary;
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+      &:hover {
+        @extend .light-background;
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .digit-action-bar-wrap {
+    box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+    left: 0;
+    max-width: none;
+    z-index: 999;
+
+    @apply fixed bottom-0 bg-white py-sm pr-lg text-right;
+
+    div {
+      width: calc(100% - 16px);
+    }
+
+    .digit-menu-wrap {
+      bottom: 45px;
+      top: unset;
+      box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+      @apply absolute h-auto bg-white text-left mb-xs z-30;
+      width: 240px;
+      right: 24px;
+
+      div {
+        @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+        &:hover {
+          @apply bg-grey-mid w-full;
+        }
+      }
+    }
+  }
+}
+
+.digit-action-bar-wrap-registry {
+  div {
+    @apply w-full;
+  }
+  .digit-menu-wrap {
+    @extend .light-background;
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: 160px;
+    right: 60px;
+
+    div {
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+      &:hover {
+        @extend .light-background;
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+
+  .digit-search-add {
+    @extend .light-primary;
+    padding: 12px 16px;
+    color: rgb(244, 119, 56);
+    display: flex;
+    cursor: pointer;
+  }
+
+  .digit-search-add-icon {
+    @extend .light-primary-button;
+    background: rgb(244, 119, 56);
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+  }
+}
+*/
+
+.digit-action-bar-wrap{
+  width: 100%;
+  max-width: 100%;
+  padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer8);
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  height: 4.5rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+
+  @media (min-width: 48rem) {
+    gap: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+    gap: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-width: 30rem) {
+    gap: theme(digitv2.spacers.spacer4);
+    box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+    height: 8rem;
+    padding: theme(digitv2.spacers.spacer4);
+  }
+
+  .digit-action-bar-fields{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    @media (min-width: 48rem) {
+      gap: theme(digitv2.spacers.spacer6);
+    }
+  
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      gap: theme(digitv2.spacers.spacer5);
+    }
+  
+    @media (max-width: 30rem) {
+      gap: theme(digitv2.spacers.spacer4);
+      flex-direction: column;
+
+      .action-bar-individual-action-field{
+        button{
+          width: 100%;
+          max-width: 100%;
+        }
+      }
+    }
+
+    &.toRight{
+      margin-left: auto;
+    }
+
+    &.toLeft{
+      justify-content: unset;
+    }
+
+    .action-bar-individual-action-field{
+      button{
+        flex: 1;
+      }
+    }
+
+    &:not(.toRight){
+      width: 100%;
+    }
+  }
+
+  .digit-dropdown-select-wrap,
+  .digit-employee-dropdown-select-wrap{
+    margin-bottom: 0rem;
+  }
+
+  .header-dropdown-container {
+    position: relative; 
+  }
+
+  .header-dropdown-menu {
+    @apply absolute z-30;
+    bottom: theme(digitv2.spacers.spacer10);
+    right: 0;
+    max-height: unset;
+    margin-top: unset;
+
+    &.showBottom{
+      bottom: unset;
+    }
+  }
+
+}

package/src/digitv2/components/backLinkV2.scss

@@ -18,7 +18,7 @@
 
     .digit-back-link-label {
         @extend .typography.body-l;
-        color: theme(digitv2.lightTheme.primary-1);
+        color: theme(digitv2.lightTheme.primary-2);
         margin-top:0.063rem;
         cursor: pointer;
     }

package/src/digitv2/components/buttonsV2.scss

@@ -165,7 +165,7 @@
   &.large{
     h2{
       @apply h-5;
-      margin-top: 0.125rem;
+      margin-top: theme(digitv2.spacers.spacer1);
     }
   }
 
@@ -423,4 +423,29 @@
   button{
     flex: 1;
   }
-}
+}
+
+.header-dropdown-container {
+  position: relative; 
+
+  .header-dropdown-menu {
+    @apply absolute z-30;
+    bottom: theme(digitv2.spacers.spacer5);
+    right: 0;
+    max-height: unset;
+    margin-top: unset;
+  
+    &.showBottom{
+      bottom: unset;
+    }
+
+    @media (max-width: 30rem) {
+      width: 100% !important;
+    }
+
+    @media (max-width: 15.625rem) {
+      left:0 ;
+    }
+  }
+}
+

package/src/digitv2/components/cardV2.scss

@@ -389,10 +389,10 @@
     width: 100%;
     height: auto;
     background-color: #ffffff;
-    border-radius: 0.25rem;
+    border-radius: theme(digitv2.spacers.spacer1);
     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
     display: flex;
-    gap: 1rem;
+    gap: theme(digitv2.spacers.spacer4);
     flex-direction: column;
 
     &.secondary {
@@ -459,18 +459,21 @@
     }
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-        padding: 1.25rem;
+        padding: theme(digitv2.spacers.spacer5);
     }
 
     @media (min-width: 48rem) {
-        padding: 1.5rem;
+        padding: theme(digitv2.spacers.spacer6);
     }
 
     @media (max-width: 30rem) {
-        padding: 1rem;
+        padding: theme(digitv2.spacers.spacer4);
     }
 
     &.action {
+        padding: theme(digitv2.spacers.spacer6);
+        gap: theme(digitv2.spacers.spacer6);
+
         button {
             width: 100%;
         }
@@ -482,4 +485,14 @@
             color: theme(digitv2.lightTheme.primary-2);
         }
     }
+
+    &.form{
+        .digit-label-field-pair  {
+            margin-bottom: unset;
+        }
+
+        .digit-radio-options-wrap {
+            margin-bottom: unset;
+        }
+    }
 }

package/src/digitv2/components/headerdropdownV2.scss

@@ -0,0 +1,152 @@
+.header-dropdown-profile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: theme(digitv2.spacers.spacer8);
+    height: theme(digitv2.spacers.spacer8);
+    overflow: hidden;
+    border-radius: 50%;
+  
+    &.text {
+      color: theme(digitv2.lightTheme.paper-primary);
+      font-weight: 700;
+      background: theme(digitv2.lightTheme.primary-2);
+    }
+  
+    &.dark {
+      &.text {
+        background: theme(digitv2.lightTheme.paper-primary);
+        font-weight: 700;
+        color: theme(digitv2.lightTheme.primary-2);
+      }
+    }
+  
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+  
+  .header-dropdown-label {
+    @extend .typography.body-s;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: theme(digitv2.lightTheme.text-primary);
+    position: relative;
+  
+    &.dark {
+      color: theme(digitv2.lightTheme.paper-primary);
+    }
+  }
+  
+  .header-dropdown-arrow {
+    margin-left: theme(digitv2.spacers.spacer2);
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+  }
+  
+  .header-dropdown-menu {
+    width: fit-content !important;
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
+    max-height: 80%;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    margin-top: theme(digitv2.spacers.spacer5);
+    position: fixed;
+    min-width: 14rem;
+    max-width: 25rem;
+    @apply z-30 overflow-y-auto overflow-x-hidden;
+  }
+  
+  .header-dropdown-search-container {
+    height: 3.5rem;
+    min-width: 14rem;
+    max-width: 25rem;
+    width: auto;
+    padding: theme(digitv2.spacers.spacer3) !important;
+  }
+  
+  .header-dropdown-search {
+    height: theme(digitv2.spacers.spacer8) !important;
+    min-width: 12.5rem;
+    max-width: 23.5rem;
+  
+    .digit-text-input-customIcon {
+      height: theme(digitv2.spacers.spacer5);
+      width: theme(digitv2.spacers.spacer5);
+      top: 0.4rem;
+      right: theme(digitv2.spacers.spacer4);
+    }
+  
+    .input-container {
+      max-height: 100%;
+    }
+  
+    input {
+      max-height: 100%;
+    }
+  }
+  
+  .header-dropdown-options {
+    max-height: 12.5rem;
+    overflow-y: auto;
+  }
+  
+  .header-dropdown-option {
+    @extend .typography.body-s;
+    @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
+    padding: theme(digitv2.spacers.spacer4) 0.625rem;
+    color: theme(digitv2.lightTheme.text-primary);
+    gap: theme(digitv2.spacers.spacer2);
+    height: theme(digitv2.spacers.spacer10);
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+  
+  .header-dropdown-option:not(:hover):not(:active):nth-of-type(2n +1) {
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+  }
+  
+  .header-dropdown-nooption {
+    @extend .typography.body-s;
+    padding: theme(digitv2.spacers.spacer2);
+    pointer-events: none;
+    color: theme(digitv2.lightTheme.text-disabled);
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+  }
+  
+  .header-dropdown-option:hover,
+  .header-dropdown-option.keyChange {
+    background: theme(digitv2.lightTheme.primary-bg) !important;
+    border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
+  }
+  
+  .header-dropdown-option:active,
+  .header-dropdown-option.activeIndex {
+    @extend .typography.heading-s;
+    background: theme(digitv2.lightTheme.primary-1) !important;
+    color: theme(digitv2.lightTheme.paper-primary);
+  }
+  
+  .header-dropdown-options::-webkit-scrollbar {
+    width: theme(digitv2.spacers.spacer2);
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+  
+  .header-dropdown-options::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+  }
+  
+  .header-dropdown-options::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+  }

package/src/digitv2/components/popUpV2.scss

@@ -234,6 +234,17 @@
           width: 100%;
         }
       }
+
+      &.equal-buttons{
+        width: 100%;
+
+        @media (min-width: 30.063rem) {
+
+          button {
+            flex: 1;
+          }
+        }
+      }
     }
 
 

package/src/digitv2/components/timelineV2.scss

@@ -98,15 +98,6 @@ img {
   @apply max-w-full;
 }
 
-.details-btn {
-  @extend .typography.link;
-  @apply text-left;
-  background-color: transparent;
-  border: none;
-  color: theme(digitv2.lightTheme.primary-1);
-  padding: theme(digitv2.spacers.spacer0);
-}
-
 /* Circle Variants */
 .timeline-circle,
 .timeline-circle.upcoming {
@@ -152,8 +143,29 @@ img {
 
 .digit-timeline-molecule{
   @apply max-h-full;
+
+  .timeline-content:not(.lastTimeline){
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      margin-bottom: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      margin-bottom: theme(digitv2.spacers.spacer5);
+    }
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      margin-bottom: theme(digitv2.spacers.spacer4);
+    }
+  }
 }
 
-.view-more-container {
+.view-more-past-container {
   margin-top: theme(digitv2.spacers.spacer4);
 }
+
+.view-more-future-container {
+  margin-bottom: theme(digitv2.spacers.spacer4);
+}