@entit/digit-ui-css 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entit/digit-ui-css",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "dist/index.css",
   "engines": {
@@ -22,7 +22,7 @@
   ],
   "style": "./dist/index.css",
   "dependencies": {
-    "@entit/digit-ui-css": "2.0.0",
+    "@entit/digit-ui-css": "9.6.1",
     "node-sass": "4.14.1",
     "normalize.css": "8.0.1",
     "postcss-scss": "3.0.5",

package/src/components/CardBasedOptions.scss

@@ -1,111 +1,45 @@
 .CardBasedOptions{
-  box-shadow: #32325d14 0px 50px 100px -20px, rgb(0 0 0 / 18%) 0px 30px 60px -30px, #0a254038 0px -2px 6px 0px inset;
-  border-radius: 12px;
-  padding: 0px !important;
-  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
-  .headContent{
-      @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;
-      }
-  }
+    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;
+    .headContent{
+        @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;
+        }
+    }
 
-  .mainContent{
-      @apply flex justify-evenly;
-      
-      .CardBasedOptionsMainChildOption{
-          width: 25%;
-          
-          @apply text-center;
-          margin: auto;
-          .ChildOptionImageWrapper{
-              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: #a82227;
-                  margin: auto;
-              }
-          }
-          .ChildOptionName{
-              font-size: 12px;
-              line-height: 14px;
-          }
-      }
-  }
+    .mainContent{
+        @apply flex justify-evenly;
+        .CardBasedOptionsMainChildOption{
+            width: 25%;
+            @apply text-center;
+            .ChildOptionImageWrapper{
+                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: #F47738;
+                    margin: auto;
+                }
+            }
+            .ChildOptionName{
+                font-size: 12px;
+                line-height: 14px;
+            }
+        }
+    }
 }
 
 @screen dt{
-  .CardBasedOptions{
-      width: calc( 50% - 16px );
-    padding: 0px !important;
-    height: 250px !important;
-  }
-}
-.citizen .ServicesSection .CardBasedOptions:nth-child(odd){
-  .employeeCustomCard{
-    background-image: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-red-card.png");
-    background-size: cover
-  }
-}
-.citizen .ServicesSection .CardBasedOptions:nth-child(even){
-  .employeeCustomCard{
-background-image: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-green-card.png");
-background-size: cover
-  }
-}
-.citizen .employeeCustomCard {
-  border-radius: 10px;
-  background-image: url(https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-red-card.png);
-      background-size: cover;
-    .employeeCustomCard {
-      border-radius: 10px;
-      background-image: url(https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-red-card.png);
-      background-size: cover;
-  }
-}
-.employee-card-banner{
-    background-color: white;
-    width: 88%;
-    height: 60%;
-    bottom: 0px;
-    position: absolute;
-    margin-bottom: -10%;
-    left: 6%;
-    box-shadow: 1px 5px 6px 0px #e3e4e3;
-    border-radius: 10px;
-}
-.citizen .employee-card-banner{
-  margin-bottom: -5% !important;
-  height: 65% !important;
-}
-.text-employee-card{
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  position: absolute;
-  top:10%;
-  padding-left: 10%;
-  color: white !important;
-
-}
-.citizen .employee-card-banner .citizenAllServiceGrid{
-  display: flex-root !important;
-  height: 100% !important;
-} 
-
-@media screen and (min-width: 300px) {
-  .CardBasedOptions {
-    height: 200px;
-  }
-  .employeeCustomCard{
-    font-size: 1rem;
-  }
+    .CardBasedOptions{
+        width: calc( 50% - 16px );
+        @apply p-md;
+    }
 }

package/src/components/CitizenHomeCard.scss

@@ -1,58 +1,47 @@
 .CitizenHomeCard{
 
-  @apply bg-white mx-md p-md mb-lg;
+    @apply bg-white mx-md p-md mb-lg;
 
-  .header{
-      @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
+    .header{
+        @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
 
-      svg{
-          width: 33px;
-          height: 33px;
-      }
-  }
+        svg{
+            width: 33px;
+            height: 33px;
+        }
+    }
 
-  .links{
-        
-      @apply text-heading-s text-primary-main;
+    .links{
+        @apply text-heading-s text-primary-main;
 
-      a{
-          @apply block pb-sm;
-      }
-  }
+        a{
+            @apply block pb-sm;
+        }
+    }
 }
 
 @screen dt{
 
-  .citizenAllServiceGrid{
-    display: flex-root !important;
-      @apply grid grid-cols-2 gap-4;
-    }
-    .links{
-        display: grid;
-            grid-template-columns: repeat(4, minmax(0, 1fr));
-            grid-gap: 1px;
-            gap: 1px;
-    }
-
-  .CitizenHomeCard{
-     padding: 16px !important;
-     margin-right:16px !important;
-     display:block !important;
-      box-shadow: rgb(50 50 93 / 18%) 0px 50px 100px -20px, rgb(0 0 0 / 16%) 0px 30px 60px -30px, rgb(10 37 64 / 17%) 0px -2px 6px 0px inset;
-      @apply inline-block mr-lg p-lg align-top;
-      .header{
-          @apply pb-lg text-heading-l-dt;
-          svg{
-              @apply w-12 h-12;
-          }
+    .citizenAllServiceGrid{
+        @apply grid grid-cols-2 gap-4;
       }
-  
-      .links{
-        
-          a{
-            
-              @apply pb-md
-          }
-      }
-  }
+
+    .CitizenHomeCard{
+       
+        min-width: 40%;
+        margin-left: 0;
+        @apply inline-block mr-lg p-lg align-top;
+        .header{
+            @apply pb-lg text-heading-l-dt;
+            svg{
+                @apply w-12 h-12;
+            }
+        }
+    
+        .links{
+            a{
+                @apply pb-md
+            }
+        }
+    }
 }

package/src/components/PageBasedInput.scss

@@ -1,31 +1,23 @@
-.PageBasedInputWrapper {
-  .SubmitBar {
-    z-index: 60;
-    @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
-  }
-  .SubmitBarInCardInDesktopView {
-    @apply hidden;
-  }
-  label {
-    margin-left: 0 !important;
-  }
-}
-
-@screen dt {
-  .PageBasedInputWrapper {
-    .SubmitBar {
-      @apply hidden;
-    }
-    .SubmitBarInCardInDesktopView {
-      @apply block;
-      position:relative;
-      background-color: #fff0; 
+.PageBasedInputWrapper{
+    .SubmitBar{
+        z-index: 60;
+        @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
     }
-    .card {
-      max-width: 960px;
+    .SubmitBarInCardInDesktopView{
+        @apply hidden;
     }
-    button {
-      max-width: 240px;
+    label{
+        margin-left: 0 !important;
     }
-  }
 }
+
+@screen dt{
+    .PageBasedInputWrapper{
+        .SubmitBar{
+            @apply hidden;
+        }
+        .SubmitBarInCardInDesktopView{
+            @apply block;
+        }
+    }
+}

package/src/components/PropertySearchForm.scss

@@ -24,10 +24,10 @@
       font-weight: 400;
     }
     .selected {
-      color: #a82227;
+      color: #f47738;
       font-weight: 700;
       padding-bottom: 10px;
-      border-bottom: 2px solid #a82227;
+      border-bottom: 2px solid #f47738;
     }
     span {
       margin-right: 20px;

package/src/components/TimeLine.scss

@@ -39,8 +39,8 @@
   }
 
   .active {
-    background-color: #a82227;
-    border-color: #a82227;
+    background-color: #F47738;
+    border-color: #F47738;
   }
 } 
 

package/src/components/bannercomponents.scss

@@ -62,7 +62,7 @@
 
 @screen dt {
   .success-wrap {
-    width: calc(100%);
+    width: calc(100% + 284px);
     header {
       @apply text-heading-xl-dt;
     }
@@ -75,7 +75,7 @@
   }
 
   .error-wrap {
-    width: calc(100%);
+    width: calc(100% + 284px);
     header {
       @apply text-heading-xl-dt;
     }
@@ -111,7 +111,7 @@
 .banner {
   @apply flex justify-center items-center;
   height: calc(100vh - 80px);
-  position: relative;
+  background: linear-gradient(rgba(11,75,102,0.8), rgba(11,75,102,0.8)), var(--banner-url) center center;
 
   .bannerCard {
     min-width: 400px;
@@ -129,9 +129,3 @@
     margin-bottom: 24px;
   }
 }
-
-.banner-container {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center !important;
-}

package/src/components/body.scss

@@ -4,14 +4,10 @@ body {
 
 .body-container {
   @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
-  position: relative !important;
-
-
 }
 
 .navbar {
   @apply text-white bg-secondary p-md w-full mb-md;
-  background: linear-gradient(to right, #feeee7, #a82227,#feeee7) !important;
   img {
     height: 24px;
   }
@@ -25,7 +21,7 @@ body {
 }*/
 
 .h1 {
-  @apply text-heading-l text-text-primary font-bold mb-md ml-md;
+  @apply text-heading-l text-text-primary font-bold mb-md ml-md ;
 }
 
 .link-label {
@@ -54,7 +50,6 @@ body {
   color: #505a5f;
   display: flex;
   margin-bottom: 10px;
-  flex-wrap: wrap
 }
 .bread-crumb--item {
   margin-left: 5px;
@@ -96,25 +91,9 @@ body {
   }
 
   .app-container {
-    width: 100%;
-    form {
-      .card {
-        max-width: 960px;
-        h2 {
-          text-align: left;
-        }
-        .field-container {
-          max-width: 540px;
-        }
-        button {
-          max-width: 240px;
-        }
-        .input-otp-wrap,
-        .card-text-button {
-          text-align: left;
-        }
-      }
-    }
+    width: 960px;
+    margin-left: 8px;
+    margin-right: auto;
   }
 
   .h1 {
@@ -137,11 +116,4 @@ body {
 
 .body-container::-webkit-scrollbar {
   display: none;
-}
-.audit-card {
-  width: 80%;
-  margin-left: -21%;
-  margin-right: -27%;
-  max-height: 120px;
-  margin-top: 90px;
 }

package/src/components/buttons.scss

@@ -45,6 +45,3 @@
     @apply font-rc font-medium text-legend text-white;
   }
 }
-.submit-bar:focus {
-  @apply outline-none !important;
-}

package/src/components/card.scss

@@ -1,7 +1,6 @@
 .card {
   @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
   border-radius: 4px;
-  max-width: 960px;
 
   .card-header {
     @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md;
@@ -32,7 +31,7 @@
   }
 
   .card-label {
-    @apply text-legend text-text-primary mb-sm;
+    @apply text-legend text-text-primary mb-md;
   }
 
   .card-label-error {
@@ -48,13 +47,13 @@
   }
 }
 
-.validation-error {
+.validation-error{
   @apply block text-body-s text-error;
 }
 
 .docsDescription {
-  color: #0b0c0c !important;
-}
+  color: #0B0C0C !important;
+} 
 
 .field-container {
   @apply flex  items-center;
@@ -78,10 +77,6 @@
     @apply text-text-primary text-heading-m font-bold;
   }
 
-  .card-section-sub-text{
-    @apply text-text-primary text-body-s;
-  }
-
   .card-caption {
     @apply text-text-secondary text-caption-xl mb-sm;
   }
@@ -118,7 +113,7 @@
     @apply block text-center text-link text-link-normal mt-md;
   }
 
-  .card-search-heading {
+  .card-search-heading{
     margin-right: 0px !important;
     margin-left: 0px !important;
     margin-bottom: 0px !important;
@@ -127,9 +122,10 @@
   }
 }
 .employeeCard.fsm {
-  margin-bottom: 64px !important;
+  margin-bottom: 16px !important;
   margin-left: 0px !important;
   margin-right: 16px !important; }
+  
 .header-wrap {
   @apply flex mb-md;
 
@@ -155,7 +151,7 @@
 
 .submit-bar {
   @apply h-10 bg-primary-main text-center w-full outline-none;
-  box-shadow: inset 0px -2px 0px #0b0c0c;
+  box-shadow: inset 0px -2px 0px #0B0C0C;
 
   &:focus {
     @apply outline-none;
@@ -168,7 +164,6 @@
 
 .submit-bar-disabled {
   @apply h-10 bg-primary-main text-center w-full outline-none opacity-50;
-  background-color: #882636 !important;
 
   &:focus {
     @apply outline-none;
@@ -176,7 +171,6 @@
 
   header {
     @apply font-rc font-medium text-legend text-white leading-10;
-    line-height: 2rem !important;
   }
 }
 
@@ -184,13 +178,16 @@
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
-    background-color: #882636 !important;
-    height: 2rem !important
   }
 
   .card {
-    display: flex;
-    flex-direction: column;
+    margin-right: auto;
+    padding-right: 300px;
+    padding-left: 16px;
+    padding-top: 16px;
+    max-width: 960px;
+    min-width: 640px;
+    margin-left: 0px;
 
     .card-header {
       @apply text-heading-xl-dt;
@@ -240,11 +237,7 @@
       @apply text-heading-m-dt;
     }
 
-    .card-section-sub-text{
-      @apply text-text-primary text-body-s-dt;
-    }
-
-    .card-search-heading {
+    .card-search-heading{
       margin-right: 0px !important;
       margin-left: 0px !important;
       margin-bottom: 0px !important;
@@ -316,7 +309,7 @@
   @apply text-text-primary text-heading-m font-bold;
 }
 
-.card-search-heading {
+.card-search-heading{
   margin-right: 0px !important;
   margin-left: 0px !important;
   margin-bottom: 0px !important;
@@ -338,16 +331,18 @@
   }
   .home-page-info-banner-wrap {
     max-width: 45%;
-    min-width: 100%;
+    min-width: 40%;
     margin-left: 0;
     margin-right: 24px;
     margin-bottom: 24px;
   }
   .info-banner-wrap-citizen-override {
+    min-width: 640px;
+    max-width: 960px
   }
   .oc-aknowledgement-screen {
     width: auto;
-    min-width: 240px;
+    min-width: 240px; 
     max-width: 100%;
     padding: 0px 10px;
   }
@@ -364,23 +359,21 @@
 .BPAemployeeCard {
   margin-left: 0px !important;
   margin-right: 0px !important;
-  margin-bottom: 0px !important;
+  margin-bottom: 64px !important;
 }
 
 .employee-application-details {
   display: flex !important;
-  flex-direction: column !important;
   justify-content: space-between !important;
-  max-height: 70px !important;
-  height: 70px !important;
-  margin-bottom: 15px !important;
+  max-height: 60px !important;
+  height: 60px !important
 }
 .employee-main-application-details {
   padding: 10px !important;
 }
 
 .employee-mulitlink-main-div {
-  z-index: 10 !important;
+  z-index: 10 !important; 
   max-width: 41% !important;
 }
 
@@ -394,20 +387,4 @@
   position: unset !important;
   margin: 0 !important;
   width: 100% !important;
-}
-
-.language-selector .submit-bar, .submit-bar-disabled{
-  background-color: #5a1166 !important;
-}
-
-.owner-details{
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  flex-wrap: wrap;
-  justify-content: space-between
-}
-
-.owner-details-child{
-  width: 50%;
 }