@djb25/digit-ui-css 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",

package/src/components/CardBasedOptions.scss

@@ -1,107 +1,46 @@
-.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;
+.CardBasedOptions {
+  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;
-      }
+  .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;
+  .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);
           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;
-          }
+        }
       }
+      .ChildOptionName {
+        font-size: 12px;
+        line-height: 14px;
+        padding-top: 1rem;
+      }
+    }
   }
 }
 
-@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) {
+@screen dt {
   .CardBasedOptions {
-    height: 200px;
+    width: calc(50% - 16px);
+    @apply p-md;
   }
-  .employeeCustomCard{
-    font-size: 1rem;
-  }
-}
+}

package/src/components/CitizenHomeCard.scss

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

package/src/components/PageBasedInput.scss

@@ -18,8 +18,6 @@
     }
     .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 #d6d5d4;
+    border-bottom: 1px solid theme(colors.border);
     cursor: pointer;
     margin-bottom: 20px;
     display: flex;
     .non-selected {
-      color: #505a5f;
+      color: theme(colors.text.secondary);
       font-weight: 400;
     }
     .selected {
-      color: #a82227;
+      color: theme(colors.primary.main);
       font-weight: 700;
       padding-bottom: 10px;
-      border-bottom: 2px solid #a82227;
+      border-bottom: 2px solid theme(colors.primary.main);
     }
     span {
       margin-right: 20px;

package/src/components/SearchOnRadioButton.scss

@@ -1,6 +1,6 @@
 .SearchOnRadioButton{
     svg{
-        fill: #505A5F;
+        fill: theme(colors.text.secondary);
         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: #505A5F;
+        fill: theme(colors.text.secondary);
         @apply mr-md;
     }
     input{

package/src/components/TimeLine.scss

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

package/src/components/bannercomponents.scss

@@ -62,7 +62,6 @@
 
 @screen dt {
   .success-wrap {
-    width: calc(100%);
     header {
       @apply text-heading-xl-dt;
     }
@@ -75,7 +74,7 @@
   }
 
   .error-wrap {
-    width: calc(100%);
+    width: 100%;
     header {
       @apply text-heading-xl-dt;
     }
@@ -111,7 +110,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;
@@ -122,7 +121,7 @@
     object-fit: contain;
     padding-right: 10px;
     margin-right: 10px;
-    border-right: 1px solid #0b0c0c;
+    border-right: 1px solid theme(colors.text.primary);
   }
   .bannerHeader {
     @apply flex justify-center items-center;

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

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,6 +45,62 @@
     @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;
+  }
 }