@egovernments/digit-ui-components-css 0.0.1 → 0.0.2-1

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