modified classnames and updated tag styles and other css (#43)

* updated-components * updated-css * updated components and css versions
egovernments · Apr 17, 2024 · 40fff07 · 40fff07
1 parent 0095273
commit 40fff07
Show file tree

Hide file tree

Showing 35 changed files with 586 additions and 337 deletions.
diff --git a/react/css/README.md b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.6 updated css with new classnames and updated tag styles 
 1.8.2-coreui.5 updated css version 
 1.8.2-coreui.4 updated classnames 
 1.8.2-coreui.3 styles for stepper and fixed date issue

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-coreui.5",
+  "version": "1.8.2-coreui.6",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
@@ -1,7 +1,7 @@
 @import url("../index.scss");
 
 .icon-label-container {
-  @apply w-full flex max-w-full;
+  @apply w-full flex max-w-full items-center;
   gap: 0.5rem;
 
   .digit-button-customIcon {
@@ -12,6 +12,7 @@
 
   &.link {
     gap: 0.25rem;
+    align-items: flex-start;
 
     .digit-button-customIcon {
       width: 1.25rem;
@@ -20,10 +21,6 @@
   }
 }
 
-.icon-label-container:not(.link) {
-  @apply items-center; 
-}
-
 .digit-button-label {
   @extend .typography.button;
   @apply leading-6 text-center text-white w-full overflow-hidden whitespace-no-wrap;

diff --git a/react/css/src/digitv2/components/checkboxV2.scss b/react/css/src/digitv2/components/checkboxV2.scss
@@ -1,6 +1,6 @@
 @import url("../index.scss");
 
-.digit-checkbox-wrap {
+.digit-checkbox-container {
   @apply flex mb-md relative;
   gap: 1rem;
 

diff --git a/react/css/src/digitv2/components/fieldV1.scss b/react/css/src/digitv2/components/fieldV1.scss
@@ -19,18 +19,14 @@
         }
 
         .label-container {
-            @apply flex;
-            width: 80%;
+            @apply flex items-end w-full;
             gap: 0.25rem;
-
-            @media (max-width: 30rem) {
-                /* Media query for mobile */
-                width: 100%;
-            }
         }
 
         .info-icon {
             @apply relative cursor-pointer;
+            width: 1.188rem;
+            height: 1.188rem;
         }
 
         .info-icon .infotext {

diff --git a/react/css/src/digitv2/components/labelFieldPairV2.scss b/react/css/src/digitv2/components/labelFieldPairV2.scss
@@ -3,33 +3,20 @@
 
 
    @media (min-width: 30.063rem) {
-     align-items: flex-start;
+    @apply items-start;
    }
 
    @media (max-width: 30rem) {
-     flex-direction: column;
-     align-items: flex-start;
+    @apply flex-col items-start;
    }
 
    & .label,
    & header {
      margin-right: 1.5rem;
      width: 33%;
 
-     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-       /* Media query for tablets */
-       max-width: 12rem;
-     }
-
      @media (max-width: 30rem) {
-       /* Media query for mobile */
-       width:100%;
-       max-width:100%
-     }
-
-     @media (min-width: 48rem) {
-      /*Media quey for desktop*/
-      max-width: 17rem;
+      @apply w-full;
     }
    }
 

diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -69,28 +69,24 @@
   .digit-multiselectdropdown-server {
     top: 2.5rem;
     @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
-    max-height: 25vmax;
+    max-height: 70vmax;
     box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
     width: 100% !important;
   }
 
-  .digit-multiselectdropdown-server::-webkit-scrollbar-track {
-    background-color: #F5F5F5;
-    border-radius: 0.625rem;
+  .digit-server::-webkit-scrollbar {
+    width: 0.5rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
   }
 
-  .digit-multiselectdropdown-server::-webkit-scrollbar {
-    width: 0.625rem;
-    background-color: #F5F5F5;
+  .digit-server::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
   }
 
-  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
-    background-color: #C1C1C1;
-    border-radius: 0.625rem;
-  }
-
-  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb:hover {
-    background-color: #A8A8A8;
+  .digit-server::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
   }
 
   .digit-nested-category {

diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -1,6 +1,6 @@
 @import url("../index.scss");
 
-.digit-radio-wrap {
+.digit-radio-options-wrap {
   @apply leading-10 flex justify-between flex-wrap;
   margin-bottom: 0.5rem;
 

diff --git a/react/css/src/digitv2/components/selectdropdownV2.scss b/react/css/src/digitv2/components/selectdropdownV2.scss
@@ -1,7 +1,24 @@
 .digit-dropdown-employee-select-wrap {
   @apply w-full relative;
 
-  max-width: 37.5rem;
+  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+    min-width: 12.5rem;
+  }
+
+  @media (max-width: 30rem) {
+    /* Media query for mobile */
+    max-width: 20.5rem;
+    min-width: 9.75rem;
+    width: 100%;
+  }
+
+  @media (min-width: 48rem) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+    min-width: 12.5rem;
+  }
 
   .digit-dropdown-select {
     @extend .light-input-border;
@@ -83,10 +100,10 @@
     }
   }
 
-  .digit-options-card {
+  .digit-dropdown-options-card {
     width: 100% !important;
     box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
-    max-height: 27.5rem;
+    max-height: 70vmax;
     @apply absolute z-20 bg-white max-w-full overflow-y-auto overflow-x-hidden;
 
     p {
@@ -111,23 +128,19 @@
   }
 }
 
-.digit-options-card::-webkit-scrollbar-track {
-  background-color: #F5F5F5;
-  border-radius: 0.625rem;
-}
-
 .digit-options-card::-webkit-scrollbar {
-  width: 0.625rem;
-  background-color: #F5F5F5;
+  width: 0.5rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
 }
 
-.digit-options-card::-webkit-scrollbar-thumb {
-  background-color: #C1C1C1;
-  border-radius: 0.625rem;
+.digit-options-card::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
 }
 
-.digit-options-card::-webkit-scrollbar-thumb:hover {
-  background-color: #A8A8A8;
+.digit-options-card::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
 }
 
 
@@ -154,8 +167,11 @@
   height: 1.188rem;
 }
 
-.profile-dropdown--item {
+.digit-dropdown-item {
 
+  @apply flex flex-row;
+  padding: 0.625rem;
+  gap:0.625rem;
   min-height: 2.438rem;
   color: theme(digitv2.lightTheme.text-primary) !important;
 
@@ -392,11 +408,11 @@
     }
   }
 
-  .digit-options-card {
+  .digit-dropdown-options-card {
     width: 100% !important;
     box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
     @apply absolute z-20 bg-white overflow-y-auto overflow-x-hidden;
-    max-height: 25vmax;
+    max-height: 70vmax;
 
     p {
       @extend .light-text-color-primary;

diff --git a/react/css/src/digitv2/components/stepper.scss b/react/css/src/digitv2/components/stepper.scss
@@ -135,22 +135,18 @@
   }
 }
 
-.digit-stepper-container::-webkit-scrollbar-track {
-  background-color: #F5F5F5;
-  border-radius: 0.313rem;
-}
-
 .digit-stepper-container::-webkit-scrollbar {
-  width: 0.313rem;
-  height: 0.625rem;
-  background-color: #F5F5F5;
+  width: 0.5rem;
+  height:0.5rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
 }
 
-.digit-stepper-container::-webkit-scrollbar-thumb {
-  background-color: #C1C1C1;
-  border-radius: 0.313rem;
+.digit-stepper-container::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
 }
 
-.digit-stepper-container::-webkit-scrollbar-thumb:hover {
-  background-color: #A8A8A8;
+.digit-stepper-container::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
 }
diff --git a/react/css/src/digitv2/components/tagV2.scss b/react/css/src/digitv2/components/tagV2.scss
@@ -1,7 +1,7 @@
 .digit-tag-container {
   @apply flex flex-wrap mb-md items-center;
   gap: 0.5rem;
-  margin-top:0.5rem;
+  margin-top: 0.5rem;
 
   @media (min-width: 481px) {
     /* Media query for tablets */
@@ -23,36 +23,46 @@
   }
 
   .digit-tag {
-    @apply inline-flex items-center;
+    @apply inline-flex items-center h-10;
     padding: 0.5rem;
     gap: 0.5rem;
-    border-radius: 3.125rem;
-    background: theme(digitv2.lightTheme.generic-divider);
-    height: 2.5rem;
-    margin: 0px;
+    border-radius: 0.25rem;
+    background: theme(digitv2.lightTheme.generic-background);
+    margin: 0rem;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
 
     .digit-text {
+      @extend .typography.body-s;
+      @apply overflow-hidden h-4;
       max-width: calc(100% - 24px);
-      overflow: hidden;
       text-overflow: clip;
       color: theme(digitv2.lightTheme.text-primary);
-      font-family: theme(digitv2.fontFamily.sans);
-      font-size: 0.875rem;
-      font-style: theme(digitv2.fontStyle.normal);
-      font-weight: theme(digitv2.fontWeight.regular);
-      line-height: theme(digitv2.lineHeight.normal);
-      height: 1rem;
+      line-height: 1.026rem;
     }
 
     .close-icon {
-      @apply flex items-center;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 1px solid theme(digitv2.lightTheme.text-secondary);
-      border-radius: 50%;
+      @apply flex items-center w-6 h-6 cursor-pointer;
+      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+      border-radius: 0.25rem;
       background-color: theme(digitv2.lightTheme.text-secondary);
-      cursor: pointer;
+    }
+
+    &.errortag {
+      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+      background-color: theme(digitv2.lightTheme.paper-primary);
+      box-shadow: 0.125rem 0.125rem 0.25rem 0rem #D4351C4D;
+
+      .digit-text {
+        @extend .typography.heading-s;
+        line-height: 1.172rem;
+        color: theme(digitv2.lightTheme.alert-error);
+      }
+
+      .close-icon {
+        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+        background-color: theme(digitv2.lightTheme.alert-error);
+      }
     }
   }
 }
diff --git a/react/css/src/digitv2/components/textareaV2.scss b/react/css/src/digitv2/components/textareaV2.scss
@@ -48,22 +48,18 @@
 }
 
 textarea::-webkit-scrollbar {
-  width: 0.625rem;
-  background-color: #F5F5F5;
+  width: 0.5rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
 }
 
 textarea::-webkit-scrollbar-track {
-  background-color: #F5F5F5;
-  border-radius: 0.625rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
 }
 
 textarea::-webkit-scrollbar-thumb {
-  background-color: #C1C1C1;
-  border-radius: 0.625rem;
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-  background-color: #A8A8A8;
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
 }
 
 .digit-employee-card-textarea {