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

package/src/digitv2/components/cardbasedoptionsV2.scss

@@ -0,0 +1,47 @@
+.digit-card-based-options {
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
+    .digit-head-content {
+      @apply flex justify-between mb-lg;
+      h2 {
+        @apply text-heading-s font-bold text-text-primary;
+      }
+      p {
+        @apply text-link text-primary-main font-medium cursor-pointer;
+      }
+    }
+  
+    .digit-main-content {
+      @apply flex justify-evenly;
+      .digit-card-based-options-main-child-option {
+        width: 25%;
+        @apply text-center;
+        .digit-child-option-image-wrapper {
+          margin: auto !important;
+          background: rgba(244, 119, 56, 0.12);
+          mix-blend-mode: normal;
+          padding-top: 14px;
+          @apply h-12 w-12 rounded-full cursor-pointer;
+          svg {
+            height: 20px;
+            width: 20px;
+            fill: theme(colors.primary.main);
+            margin: auto;
+          }
+        }
+        .digit-child-option-name {
+          font-size: 12px;
+          line-height: 14px;
+          padding-top: 1rem;
+        }
+      }
+    }
+  }
+  
+  @screen dt {
+    .digit-card-based-options {
+      width: calc(50% - 16px);
+      @apply p-md;
+    }
+  }
+  

package/src/digitv2/components/checkboxV2.scss

@@ -26,6 +26,10 @@
       @apply opacity-0;
     }
 
+    svg{
+      flex-shrink: 0;
+    }
+
     &:hover {
       @apply border-2 ;
       border-color: theme(digitv2.lightTheme.primary-1);

package/src/digitv2/components/{tagV2.scss → chipV2.scss}

@@ -118,4 +118,13 @@
       }
     }
   }
+}
+
+.cp{
+  cursor: pointer;
+}
+
+.nonclickable{
+  pointer-events: none;
+  cursor:none;
 }

package/src/digitv2/components/dividerV2.scss

@@ -0,0 +1,11 @@
+.digit-divider {
+    border: theme(digitv2.divider.dividerS);
+
+    &.medium {
+        border: theme(digitv2.divider.dividerM);
+    }
+
+    &.large {
+        border: theme(digitv2.divider.dividerL);
+    }
+}

package/src/digitv2/components/{ErrorMessage.scss → errorMessageV2.scss}

@@ -4,6 +4,8 @@
 .digit-error-icon-message-wrap {
   @apply flex w-full whitespace-pre-wrap break-words;
   gap: theme(digitv2.spacers.spacer1);
+  word-break: break-word;
+  cursor: default;
 
   .digit-error-icon{
       @apply flex items-center;

package/src/digitv2/components/fieldV1.scss

@@ -82,7 +82,7 @@
         }
 
         @media (max-aspect-ratio: 9/16) {
-            max-width: 20.5rem;
+            max-width: 100%;
             width: 100%;
         }
 

package/src/digitv2/components/infoCardV2.scss

@@ -2,7 +2,7 @@
 @import url("../typography.scss");
 
 .digit-infobanner-wrap {
-  @apply m-sm p-md flex flex-col; 
+  @apply p-md flex flex-col; 
   top: theme(digitv2.spacers.spacer5);
   left: theme(digitv2.spacers.spacer5);
   gap: theme(digitv2.spacers.spacer2);
@@ -86,19 +86,16 @@
   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
     /* Media query for tablets */
     max-width: 44.5rem;
-    min-width: 22.5rem;
   }
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
     max-width: 21.5rem;
-    min-width: 15rem;
   }
 
   @media (min-aspect-ratio: 3/4) {
     /* Media query for desktop */
     max-width: 87rem;
-    min-width: 25rem;
   }
 
   &.inline {

package/src/digitv2/components/labelFieldPairV2.scss

@@ -3,40 +3,49 @@
 
 
    @media (min-aspect-ratio: 9/16) {
-    @apply items-start;
+     @apply items-start;
+   }
+
+   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer5);
    }
 
    @media (max-aspect-ratio: 9/16) {
-    @apply flex-col items-start;
+     @apply flex-col items-start;
+     gap: theme(digitv2.spacers.spacer4);
+   }
+
+   @media (min-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer6);
    }
 
-   &.vertical{
-    @apply flex-col items-start;
+   &.vertical {
+     @apply flex-col items-start;
+     gap: theme(digitv2.spacers.spacer2);
    }
 
    & .label,
    & header {
-     margin-right: theme(digitv2.spacers.spacer6);
      width: 33%;
 
      @media (max-aspect-ratio: 9/16) {
-      @apply w-full;
-    }
+       @apply w-full;
+     }
    }
 
    & .digit-field {
      width: 60%;
 
      @media (max-aspect-ratio: 9/16) {
-      width: 100%;
-    }
+       width: 100%;
+     }
    }
  }
 
-@screen dt {
+ @screen dt {
    .digit-employee-card {
      .digit-label-field-pair {
-       @apply mb-lg flex ;
+       @apply mb-lg flex;
 
        h2 {
          width: 30%;

package/src/digitv2/components/mobileNumberV2.scss

@@ -13,7 +13,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width:100%;
     min-width: 9.75rem;
     width: 100%;
   }

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -9,7 +9,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width: 100%;
     width: 100%;
   }
 

package/src/digitv2/components/popUpV2.scss

@@ -55,8 +55,8 @@
       }
   
       @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-        top: 0.625rem;
-        right: 0.625rem;
+        top: theme(digitv2.spacers.spacer3);
+        right: theme(digitv2.spacers.spacer3);
       }
   
       @media (max-width: 30rem) {
@@ -104,11 +104,6 @@
             @extend .typography.caption-s;
           }
         }
-  
-        .digit-popup-description {
-          @extend .typography.body-l;
-          color: theme(digitv2.lightTheme.text-primary);
-        }
       }
   
       &.with-shadow {
@@ -145,9 +140,16 @@
     }
   
     .digit-popup-children-wrap {
+      @extend .typography.body-s;
       @apply overflow-hidden overflow-y-auto flex-col;
       display: flex;
       flex: 1;
+      color: theme(digitv2.lightTheme.text-primary);
+
+      .digit-popup-description {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
   
       &.inline {
         flex-direction: row;
@@ -233,6 +235,15 @@
         }
       }
     }
+
+
+    &.equal-buttons{
+      width: 100%;
+
+      button{
+        flex:1;
+      }
+    }
   
   
     .digit-popup-alert-content {

package/src/digitv2/components/radiobtnV2.scss

@@ -89,9 +89,10 @@
   }
 
   .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
     top: 25%;
-    left: 25%;
     background-color: theme(digitv2.lightTheme.primary-1);
   }
 
@@ -100,9 +101,10 @@
   }
 
   .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
     top: 25%;
-    left: 25%;
     background-color: theme(digitv2.lightTheme.text-disabled);
   }
 }

package/src/digitv2/components/{selectdropdownV2.scss → selectDropdownV2.scss}

@@ -6,7 +6,7 @@
   }
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width: 100%;
     width: 100%;
   }
   @media (min-aspect-ratio: 3/4) {
@@ -265,7 +265,7 @@
   }
 }
 .digit-dropdown-select-wrap {
-  @apply mb-lg relative bg-white;
+  @apply relative bg-white w-full;
   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
     /* Media query for tablets */
     max-width: 27.5rem;
@@ -347,7 +347,7 @@
   .digit-dropdown-options-card {
     width: 100% !important;
     box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
-    @apply  z-20 bg-white overflow-y-auto overflow-x-hidden;
+    @apply  absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
     max-height: 20vmax;
     p {
       @extend .light-text-color-primary;
@@ -358,4 +358,8 @@
       }
     }
   }
+}
+
+.cp{
+  cursor: pointer;
 }

package/src/digitv2/components/{stepper.scss → stepperV2.scss}

@@ -13,32 +13,42 @@
   }
 
   .digit-stepper-content {
-    @apply flex flex-col items-center;
+    @apply flex flex-col items-center font-sans font-regular;
     min-height: 4rem;
     gap: theme(digitv2.spacers.spacer2);
+    color: theme(digitv2.lightTheme.text-secondary);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: theme(digitv2.spacers.spacer6);
+    text-align: center;
+
 
     .stepper-label {
       @extend .typography.body-s;
       @apply text-center;
       color: theme(digitv2.lightTheme.text-secondary);
       letter-spacing: theme(digitv2.spacers.spacer0);
+
       &.completed {
         color: theme(digitv2.lightTheme.text-primary);
       }
+
       &.current {
         @extend .typography.heading-s;
-        line-height:1.37rem;
+        line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
-      &.vertical{
+
+      &.vertical {
         @apply text-left;
-        margin-top:0.438rem;
+        margin-top: 0.438rem;
       }
     }
+
     &.vertical {
       @apply flex-row;
     }
   }
+
   .stepper-circle {
     @apply flex text-center justify-center items-center font-regular w-8 h-8;
     background-color: theme(digitv2.lightTheme.paper-primary);
@@ -46,16 +56,19 @@
     margin-top: theme(digitv2.spacers.spacer1);
     border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
     color: #787878;
+
     @media (max-aspect-ratio: 9/16) {
       @apply w-6 h-6;
     }
   }
+
   .active {
     @apply font-bold;
     background-color: theme(digitv2.lightTheme.primary-1);
     border-color: theme(digitv2.lightTheme.primary-1);
-    color:theme(digitv2.lightTheme.paper-primary);
+    color: theme(digitv2.lightTheme.paper-primary);
   }
+
   .stepper-connect {
     @apply absolute;
     top: theme(digitv2.spacers.spacer5);
@@ -64,25 +77,30 @@
     border-top: 0.125rem solid theme(colors.border);
     z-index: -1;
     height: 0.125rem;
+
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       min-width: 6.313rem;
       max-width: 39.438rem;
     }
+
     @media (max-aspect-ratio: 9/16) {
       min-width: 4.313rem;
       max-width: 16.875rem;
       top: 0.875rem;
     }
+
     @media (min-aspect-ratio: 3/4) {
       min-width: 5.313rem;
       max-width: 82.688rem;
     }
+
     &.active {
       background-color: theme(digitv2.lightTheme.primary-1);
       border-color: theme(digitv2.lightTheme.primary-1);
-      height:theme(digitv2.spacers.spacer1);
+      height: theme(digitv2.spacers.spacer1);
       border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
     }
+
     &.vertical {
       top: calc(50% + (theme(digitv2.spacers.spacer2)));
       bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
@@ -90,20 +108,23 @@
       width: 0.125rem;
       height: auto;
       transform: rotate(90deg);
+
       &.active {
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
     }
   }
+
   .digit-stepper-content:hover {
     .stepper-circle.active {
       outline: theme(digitv2.spacers.spacer1) solid #F477381F;
     }
+
     .stepper-label {
       &.completed {
         @extend .typography.heading-s;
-        line-height:1.37rem;
+        line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
     }
@@ -111,8 +132,8 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width:theme(digitv2.spacers.spacer2);
-  height:theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer2);
   background-color: theme(digitv2.lightTheme.generic-background);
 }
 

package/src/digitv2/components/textInputV2.scss

@@ -380,7 +380,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width: 100%;
     width: 100%;
   }
 

package/src/digitv2/components/textareaV2.scss

@@ -74,7 +74,7 @@ textarea::-webkit-scrollbar-thumb {
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width:100%;
     min-width: 9.75rem;
     width: 100%;
   }

package/src/digitv2/components/{timeline.scss → timelineV2.scss}

@@ -1,5 +1,5 @@
 .digit-timeline-item {
-  @apply flex items-start;
+  @apply flex items-start relative ;
   gap: theme(digitv2.spacers.spacer4);
 }
 
@@ -13,6 +13,30 @@
   }
 }
 
+.connector-line {
+  @apply absolute bottom-0 border-solid border-border;
+  border-left-width: 0.125rem;
+  margin-left: 0.938rem;
+  top: theme(digitv2.spacers.spacer8);
+
+  &.completed,
+  &.inprogress,
+  &.nextActiveStep{
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.nextActiveStep{
+    border-style: dotted;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    margin-left: 0.688rem;
+    top: theme(digitv2.spacers.spacer6);
+    border-left-width: 0.063rem;
+  }
+}
+
 .timeline-content,
 .timeline-info {
   @apply flex flex-col w-full;
@@ -86,7 +110,7 @@ img {
 /* Circle Variants */
 .timeline-circle,
 .timeline-circle.upcoming {
-    background-color: theme(digitv2.lightTheme.text-disabled);
+  background-color: theme(digitv2.lightTheme.text-disabled);
 }
 
 .timeline-circle.inprogress {
@@ -124,4 +148,12 @@ img {
       height: 1.125rem;
     }
   }
-}
+}
+
+.digit-timeline-molecule{
+  @apply max-h-full;
+}
+
+.view-more-container {
+  margin-top: theme(digitv2.spacers.spacer4);
+}