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

package/src/digitv2/components/uploaderV2.scss

@@ -68,6 +68,10 @@
     gap: theme(digitv2.spacers.spacer2);
   }
 
+  &.error{
+    gap:theme(digitv2.spacers.spacer1);
+  }
+
   .digit-upload-label {
     @extend .typography.label;
     @apply text-left;
@@ -78,6 +82,22 @@
   .digit-uploader-content {
     @apply flex w-full;
     gap: theme(digitv2.spacers.spacer3);
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      max-width: 27.5rem;
+      min-width: 21rem;
+    }
+
+    @media (max-width: 30rem) {
+      max-width: 20.563rem;
+      min-width: 18rem;
+    }
+
+    @media (min-width: 48rem) {
+      max-width: 37.5rem;
+      min-width: 20.75rem;
+    }
+
   }
 
   label {
@@ -85,12 +105,13 @@
   }
 
   .digit-uploader-content-uploadpopup {
-    @apply flex flex-col w-full items-center justify-center max-w-full border-dashed;
+    @apply flex flex-col w-full items-center justify-center max-w-full;
     gap: theme(digitv2.spacers.spacer4);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
     background: theme(digitv2.lightTheme.paper-secondary);
     padding: theme(digitv2.spacers.spacer4);
     height: 9rem;
+    border-style: dashed;
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
       min-width: 18.75rem;
@@ -121,7 +142,7 @@
     }
 
     &.error {
-      @apply border-dashed;
+      border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
@@ -188,9 +209,44 @@
       width: 6.25rem;
       min-height: 6.25rem;
 
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 6.25rem !important;
+        height: 6.25rem !important;
+        background: #6f6f6fb2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.error{
+          background: rgba(185, 25, 0, 0.2);
+          
+          &:hover{
+            background: transparent;
+          }
+        }
+
+        &:hover{
+          background: transparent;
+        }
+      }
+
+      .digit-docupload-icon{
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+
+        &:hover{
+          box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+        }
+      }
+
       .preview-file-name{
+        @extend .typography.body-xs;
         @apply whitespace-pre-wrap break-words;
-        color: theme(digitv2.lightTheme.text-primary);
+        color: theme(digitv2.lightTheme.text-secondary);
+        word-break: break-word;
+        cursor: default;
       }
 
       img {
@@ -207,18 +263,46 @@
           border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         }
       }
-    }
 
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      min-width: 20.75rem;
+      &.single.imageFile{
+        width: 100%;
+
+        img{
+          width: 100% !important;
+        }
+
+        .overlay{
+          width: 100% !important;
+        }
+      }
     }
 
-    @media (max-width: 30rem) {
-      min-width: 18rem;
+    .preview-container.uploadImage.singleUpload {
+      width: 100%; 
+      height: 100%; 
+
+      img{
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover; 
+      }
     }
 
-    @media (min-width: 48rem) {
-      min-width: 20.75rem;
+    &:not(.uploadImage){
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        max-width: 27.5rem;
+        min-width: 21rem;
+      }
+  
+      @media (max-width: 30rem) {
+        max-width: 20.563rem;
+        min-width: 18rem;
+      }
+  
+      @media (min-width: 48rem) {
+        max-width: 37.5rem;
+        min-width: 20.75rem;
+      }
     }
   }
 
@@ -282,6 +366,10 @@
       gap: theme(digitv2.spacers.spacer4);
       margin-left: auto;
       margin-right: theme(digitv2.spacers.spacer6);
+
+      &.error-card{
+        margin-right: theme(digitv2.spacers.spacer0);
+      }
     }
 
     .digit-uploadpopup-close-icon {

package/src/digitv2/components/viewCardFieldPairV2.scss

@@ -0,0 +1,45 @@
+.digit-viewcard-field-pair{
+    @apply w-full flex-col;
+    display: flex;
+    height: fit-content;
+    background-color: transparent;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-viewcard-label{
+        @extend .typography.heading-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        word-break: break-word;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    .digit-viewcard-value{
+        @extend .typography.body-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    &.inline{
+        flex-direction: row;
+
+        @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);
+        }
+
+        .digit-viewcard-label{
+            width: 20%;
+        }
+
+        .digit-viewcard-value{
+            width: 80%;
+        }
+
+    }
+}

package/src/digitv2/index.scss

@@ -1,6 +1,12 @@
+@import url("./components/backLinkV2.scss");
 @import url("./components/bodyContainerV2.scss");
+@import url("./components/breadcrumbV2.scss");
 @import url("./components/buttonsV2.scss");
+@import url("./components/cardlabelV2.scss");
+@import url("./components/cardbasedoptionsV2.scss");
+@import url("./components/cardV2.scss");
 @import url("./components/checkboxV2.scss");
+@import url("./components/dividerV2.scss");
 @import url("./components/errorMessageV2.scss");
 @import url("./components/fieldV1.scss");
 @import url("./components/FormComposerV2.scss");
@@ -13,7 +19,7 @@
 @import url("./components/panelV2.scss");
 @import url("./components/popUpV2.scss");
 @import url("./components/radiobtnV2.scss");
-@import url("./components/removeableTagV2.scss");
+@import url("./components/chipV2.scss");
 @import url("./components/selectDropdownV2.scss");
 @import url("./components/stepperV2.scss");
 @import url("./components/textareaV2.scss");
@@ -24,9 +30,13 @@
 @import url("./components/toggleV2.scss");
 @import url("./components/treeSelectV2.scss");
 @import url("./components/uploaderV2.scss");
-
-
-
+@import url("./components/viewCardFieldPairV2.scss");
+@import url("./components/actionbarV2.scss");
+@import url("./components/headerdropdownV2.scss");
+@import url("./components/topbarV2.scss");
+@import url("./components/sidebarV2.scss");
+@import url("./components/mobilesidebarV2.scss");
+@import url("./components/tooltipwrapperV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");

package/src/digitv2/typography.scss

@@ -242,7 +242,7 @@
 
 
   &.heading-xl {
-    font-family: theme(digitv2.fontFamily.sans);
+    font-family: theme(digitv2.fontFamily.rc);
     font-style: theme(digitv2.fontStyle.normal);
     font-weight: theme(digitv2.fontWeight.bold);
     line-height: theme(digitv2.lineHeight.lineheight1);

package/src/index.scss

@@ -74,10 +74,6 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.dark {
-  @apply text-text-primary;
-}
-
 .mrlg {
   @apply mr-lg;
 }

package/src/pages/employee/index.scss

@@ -133,7 +133,7 @@
     height: 100%;
     color: theme(colors.white);
     margin-top: 83px;
-    z-index: 10000;
+    z-index: 999;
     transition: 0.3s ease all;
     white-space: nowrap;
     height: calc(100vh - 36px);

package/svg/arrowdown.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>

package/svg/arrowleft.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="19px"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M14 7l-5 5 5 5V7z"/></svg>

package/svg/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>

package/svg/camera.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="46px" height="42px">
-<rect fill="none" height="24" width="24"/>
-<path d="M3,4V1h2v3h3v2H5v3H3V6H0V4H3z M6,10V7h3V4h7l1.83,2H21c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2V10H6z M13,19c2.76,0,5-2.24,5-5s-2.24-5-5-5s-5,2.24-5,5S10.24,19,13,19z M9.8,14c0,1.77,1.43,3.2,3.2,3.2s3.2-1.43,3.2-3.2 s-1.43-3.2-3.2-3.2S9.8,12.23,9.8,14z"/>
-</svg>

package/svg/check.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F47738" >
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>

package/svg/close.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
-<path d="M0 0h24v24H0V0z" fill="#d4351c"/>
-<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
-</svg>

package/svg/error.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" >
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-</svg>

package/svg/error2.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4351c">
-<path d="M0 0h24v24H0V0z" fill="none"/>
-<circle cx="12" cy="19" r="2"/>
-<path d="M10 3h4v12h-4z"/>
-</svg>

package/svg/searchicon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#505A5F" width="48px" height="48px" >
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-</svg>

package/svg/starempty.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F47738" width="48px" height="48px">
-    <path d="M0 0h24v24H0V0z" fill="none"/>
-    <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
-</svg>

package/svg/starfilled.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="#F47738" width="48px" height="48px" >
-    <g><path d="M0,0h24v24H0V0z" fill="none"/>
-    <path d="M0,0h24v24H0V0z" fill="none"/></g>
-    <g><path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z"/></g>
-</svg>

package/svg/success.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00703C" >
-    <path d="M0 0h24v24H0V0z" fill="none"/>
-    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
-</svg>