@djb25/digit-ui-css 1.0.0 → 1.0.2

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "cssConfig": {
     "prefix": ""
@@ -23,9 +23,10 @@
   ],
   "style": "./dist/index.css",
   "dependencies": {
-    "node-sass": "4.14.1",
+    "gulp-sass": "^5.1.0",
     "normalize.css": "8.0.1",
     "postcss-scss": "3.0.5",
+    "sass": "^1.72.0",
     "tailwindcss": "1.9.6"
   },
   "devDependencies": {

package/src/components/CardBasedOptions.scss

@@ -1,46 +1,107 @@
-.CardBasedOptions {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+.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;
-    }
+  .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;
-      .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: theme(colors.primary.main);
+  .mainContent{
+      @apply flex justify-evenly;
+      
+      .CardBasedOptionsMainChildOption{
+          width: 25%;
+          
+          @apply text-center;
           margin: auto;
-        }
-      }
-      .ChildOptionName {
-        font-size: 12px;
-        line-height: 14px;
-        padding-top: 1rem;
+          .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;
+          }
       }
-    }
   }
 }
 
-@screen dt {
-  .CardBasedOptions {
-    width: calc(50% - 16px);
-    @apply p-md;
+@screen dt{
+  .CardBasedOptions{
+      width: calc( 50% - 16px );
+    padding: 0px !important;
+    height: 250px !important;
+  }
+}
+.citizen .ServicesSection .CardBasedOptions:nth-child(odd){
+  .employeeCustomCard{
+    background-size: cover
+  }
+}
+.citizen .ServicesSection .CardBasedOptions:nth-child(even){
+  .employeeCustomCard{
+background-size: cover
+  }
+}
+.citizen .employeeCustomCard {
+  border-radius: 10px;
+      background-size: cover;
+    .employeeCustomCard {
+      border-radius: 10px;
+      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;
+  }
+}

package/src/components/CitizenHomeCard.scss

@@ -1,56 +1,58 @@
-.CitizenHomeCard {
+.CitizenHomeCard{
+
   @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;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
+@screen dt{
 
-  .CitizenHomeCard {
-    @apply p-lg;
-    .header {
-      @apply pb-lg text-heading-l-dt;
-      svg {
-        @apply w-12 h-12;
-      }
+  .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;
     }
 
-    .links {
-      @apply grid grid-cols-4 gap-px;
-      .linksWrapper {
-        height: 25px;
-        margin-bottom: 0.5em;
+  .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;
+          }
       }
-      a {
-        @apply pb-md;
-        padding-left: 0.2em;
-        margin-bottom: 16px;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        min-width: 0;
+  
+      .links{
+        
+          a{
+            
+              @apply pb-md
+          }
       }
-    }
   }
-}
+}

package/src/components/PageBasedInput.scss

@@ -18,6 +18,8 @@
     }
     .SubmitBarInCardInDesktopView {
       @apply block;
+      position:relative;
+      background-color: #fff0; 
     }
     .card {
       max-width: 960px;

package/src/components/PropertySearchForm.scss

@@ -15,19 +15,19 @@
   }
 
   .PropertySearchFormSwitcher{
-    border-bottom: 1px solid theme(colors.border);
+    border-bottom: 1px solid #d6d5d4;
     cursor: pointer;
     margin-bottom: 20px;
     display: flex;
     .non-selected {
-      color: theme(colors.text.secondary);
+      color: #505a5f;
       font-weight: 400;
     }
     .selected {
-      color: theme(colors.primary.main);
+      color: #a82227;
       font-weight: 700;
       padding-bottom: 10px;
-      border-bottom: 2px solid theme(colors.primary.main);
+      border-bottom: 2px solid #a82227;
     }
     span {
       margin-right: 20px;

package/src/components/SearchOnRadioButton.scss

@@ -1,6 +1,6 @@
 .SearchOnRadioButton{
     svg{
-        fill: theme(colors.text.secondary);
+        fill: #505A5F;
         width: 24px;
         height: 24px;
         top: 8px;

package/src/components/StandaloneSearchBar.scss

@@ -1,7 +1,7 @@
 .StandaloneSearchBar{
     @apply bg-white flex rounded-3xl px-md py-sm w-full;
     svg{
-        fill: theme(colors.text.secondary);
+        fill: #505A5F;
         @apply mr-md;
     }
     input{

package/src/components/TimeLine.scss

@@ -15,7 +15,7 @@
     }
 
     .secondary-color {
-      color: theme(colors.text.primary);
+      color: #0B0C0C;
       padding: 5px;
       font-size: small;
     }
@@ -26,7 +26,7 @@
     top: 12px;
     left: calc(50% + 8px);
     right: calc(-50% + 8px);
-    border-top: 4px solid theme(colors.border);
+    border-top: 4px solid #D6D5D4;
     z-index: -1;
   }
 
@@ -39,8 +39,8 @@
   }
 
   .active {
-    background-color: theme(colors.primary.main);
-    border-color: theme(colors.primary.main);
+    background-color: #a82227;
+    border-color: #a82227;
   }
 } 
 

package/src/components/bannercomponents.scss

@@ -62,6 +62,7 @@
 
 @screen dt {
   .success-wrap {
+    width: calc(100%);
     header {
       @apply text-heading-xl-dt;
     }
@@ -74,7 +75,7 @@
   }
 
   .error-wrap {
-    width: 100%;
+    width: calc(100%);
     header {
       @apply text-heading-xl-dt;
     }
@@ -110,7 +111,7 @@
 .banner {
   @apply flex justify-center items-center;
   height: calc(100vh - 80px);
-  background: linear-gradient(rgba(11, 75, 102, 0.8), rgba(11, 75, 102, 0.8)), var(--banner-url) center center;
+  position: relative;
 
   .bannerCard {
     min-width: 400px;
@@ -121,7 +122,7 @@
     object-fit: contain;
     padding-right: 10px;
     margin-right: 10px;
-    border-right: 1px solid theme(colors.text.primary);
+    border-right: 1px solid #0b0c0c;
   }
   .bannerHeader {
     @apply flex justify-center items-center;

package/src/components/body.scss

@@ -4,10 +4,14 @@ 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;
   }
@@ -47,11 +51,10 @@ body {
 
 .bread-crumb {
   font-size: 14px;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
   display: flex;
   margin-bottom: 10px;
-  list-style: none;
-  padding: 0;
+  flex-wrap: wrap
 }
 .bread-crumb--item {
   margin-left: 5px;
@@ -65,7 +68,7 @@ body {
   }
 
   .last {
-    color: theme(colors.text.primary);
+    color: #0b0c0c;
   }
 }
 

package/src/components/buttons.scss

@@ -22,7 +22,7 @@
   }
 }
 
-.input-mirror-selector-button {
+.input-mirror-selector-button{
   @apply h-16 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg !important;
 
   &:focus {
@@ -45,62 +45,6 @@
     @apply font-rc font-medium text-legend text-white;
   }
 }
-
 .submit-bar:focus {
   @apply outline-none !important;
-}
-
-.jk-digit-secondary-btn {
-  width: auto;
-  height: 40px;
-  background: theme(colors.white);
-  border: 1px solid theme(colors.primary.main);
-  padding: 20px;
-  color: theme(colors.primary.main);
-  display: flex;
-  align-items: center;
-  font-size: 19px;
-  cursor: pointer;
-  border-radius: 6px;
-
-  svg {
-    margin: 0 10px;
-  }
-}
-
-.jk-digit-primary-btn {
-  width: auto;
-  height: 40px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: 1px solid linear-gradient(135deg, #667eea, #764ba2);
-  padding: 20px;
-  color: theme(colors.white);
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-size: 19px;
-  border-radius: 6px;
-
-  svg {
-    margin: 0 15px;
-  }
-}
-
-.jk-digit-disabled-btn {
-  opacity: 0.5;
-  font-size: 19px;
-  cursor: not-allowed;
-}
-
-.jk-header-btn-wrapper {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* for mobile view */
-@media (max-width: 780px) {
-  .jk-header-btn-wrapper {
-    flex-flow: column;
-    margin-bottom: 15px;
-  }
 }