@egovernments/digit-ui-components-css 0.0.2-beta.7 → 0.2.0

package/src/digitv2/components/errorMessageV2.scss

@@ -7,15 +7,36 @@
   word-break: break-word;
   cursor: default;
 
-  .digit-error-icon{
-      @apply flex items-center;
-      width: theme(digitv2.spacers.spacer4);
-      height: theme(digitv2.lineHeight.lineheight2);
+  .digit-error-icon {
+    @apply flex items-center;
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.lineHeight.lineheight2);
   }
+
   .digit-error-message {
-      @extend .typography.body-s;
-      @apply  w-full;
-      margin: theme(digitv2.spacers.spacer0);
-      color: theme(digitv2.lightTheme.alert-error)
+    @extend .typography.body-s;
+    @apply w-full;
+    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);
+    }
+
+    margin: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.alert-error)
   }
 }

package/src/digitv2/components/fieldV1.scss

@@ -1,9 +1,16 @@
 @import url("../index.scss");
 
+.label-field-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: theme(digitv2.spacers.spacer1);
+}
+
 .digit-header-content {
 
     &.label {
-        @extend .typography.body-l;
+        @extend .typography.label;
         @apply flex ;
         color: theme(digitv2.lightTheme.text-primary);
         gap: theme(digitv2.spacers.spacer1);
@@ -35,6 +42,25 @@
         .info-icon .infotext {
             @extend .typography.body-s;
             @apply absolute text-center;
+            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);
+            }
             visibility: hidden;
             width: 7.5rem;
             background-color: #555555;
@@ -75,6 +101,25 @@
         @apply flex justify-between items-baseline;
         color: theme(digitv2.lightTheme.text-secondary);
         gap: theme(digitv2.spacers.spacer2);
+        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);
+        }
 
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
@@ -82,7 +127,7 @@
         }
 
         @media (max-aspect-ratio: 9/16) {
-            max-width: 20.5rem;
+            max-width: 100%;
             width: 100%;
         }
 

package/src/digitv2/components/{uploaderV2.scss → fileUploadV2.scss}

@@ -20,8 +20,14 @@
       gap: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
     }
 
+    .upload-options-svg-wrap{
+      width: theme(digitv2.spacers.spacer10);
+      height: theme(digitv2.spacers.spacer10);
+      cursor: pointer;
+    }
+
     .upload-options-label {
-      @extend .typography.label;
+      @extend .typography.button.large;
       @apply cursor-pointer;
       color: theme(digitv2.lightTheme.primary-1);
     }
@@ -45,7 +51,7 @@
 
   @media (max-width: 30rem) {
     height: 7.625rem;
-    animation: slideInFromBottom 0.5s ease-out forwards;
+    animation: slideInFromBottomUploader 0.5s ease-out forwards;
   }
 
 
@@ -72,6 +78,10 @@
     gap:theme(digitv2.spacers.spacer1);
   }
 
+  &.inline{
+    flex-direction: row;
+  }
+  
   .digit-upload-label {
     @extend .typography.label;
     @apply text-left;
@@ -82,19 +92,36 @@
   .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 {
     outline: none !important;
   }
 
-  .digit-uploader-content-uploadpopup {
-    @apply flex flex-col w-full items-center justify-center max-w-full border-dashed;
+  .digit-uploader-content-uploadWidget {
+    @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;
@@ -114,6 +141,25 @@
 
     .drag-drop-text {
       @extend .typography.body-s;
+      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);
+      }
       @apply items-center;
       color: theme(digitv2.lightTheme.text-disabled);
       display: flex;
@@ -124,14 +170,40 @@
       }
     }
 
+    .drag-drop-link{
+      @extend .typography.link-S;
+      margin-left: theme(digitv2.spacers.spacer1);
+      color: theme(digitv2.lightTheme.primary-1);
+      cursor: pointer;
+    }
+
     &.error {
-      @apply border-dashed;
+      border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
 
-  .digit-uploadpopup-label {
+  .digit-uploadWidget-label {
     @extend .typography.body-s;
+    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);
+    }
     color: theme(digitv2.lightTheme.text-disabled);
   }
 
@@ -141,6 +213,25 @@
 
   .digit-uploader-input {
     @extend .typography.body-s;
+    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);
+    }
     @apply h-10;
     background-color: transparent;
     border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
@@ -216,7 +307,6 @@
         }
       }
 
-
       .digit-docupload-icon{
         border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
@@ -247,6 +337,18 @@
           border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         }
       }
+
+      &.single.imageFile{
+        width: 100%;
+
+        img{
+          width: 100% !important;
+        }
+
+        .overlay{
+          width: 100% !important;
+        }
+      }
     }
 
     .preview-container.uploadImage.singleUpload {
@@ -260,16 +362,21 @@
       }
     }
 
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      min-width: 20.75rem;
-    }
-
-    @media (max-width: 30rem) {
-      min-width: 18rem;
-    }
-
-    @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;
+      }
     }
   }
 
@@ -285,6 +392,25 @@
 
   .digit-upload-helptext {
     @extend .typography.body-s;
+    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);
+    }
     @apply text-left;
     margin: theme(digitv2.spacers.spacer0);
     color: theme(digitv2.lightTheme.text-secondary);
@@ -319,6 +445,25 @@
 
       .uploaded-file-details {
         @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);
       }
 
@@ -339,7 +484,7 @@
       }
     }
 
-    .digit-uploadpopup-close-icon {
+    .digit-uploadWidget-close-icon {
       @apply absolute top-0 right-0 w-6 h-6 items-center cursor-pointer;
       background: theme(digitv2.lightTheme.generic-background);
       border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -356,7 +501,7 @@
     &.error {
       border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
 
-      .digit-uploadpopup-close-icon {
+      .digit-uploadWidget-close-icon {
         background: theme(digitv2.lightTheme.alert-error);
         border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         border-top: none;
@@ -373,7 +518,7 @@
         }
       }
 
-      .uploadpopup-error-card {
+      .uploadWidget-error-card {
         @apply w-full max-w-full;
         margin: theme(digitv2.spacers.spacer0);
       }
@@ -487,6 +632,25 @@
 
   .capture-heading {
     @extend .typography.heading-m;
+    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-m.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
     @apply items-center;
     color: #000000;
     display: flex;
@@ -513,7 +677,7 @@
 
 }
 
-@keyframes slideInFromBottom {
+@keyframes slideInFromBottomUploader {
   from {
     transform: translateY(100%);
   }
@@ -521,4 +685,27 @@
   to {
     transform: translateY(0);
   }
-}
+}
+
+
+.digit-upload-file-composer-wrapper{
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+   gap:theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-width: 30rem) {
+    gap:theme(digitv2.spacers.spacer4);
+  }
+
+  @media (min-width: 48rem) {
+    gap:theme(digitv2.spacers.spacer6);
+  }
+
+  .upload-filecomposer-header{
+    color: theme(digitv2.lightTheme.text-primary) !important;
+  }
+
+}