@pmidc/upyog-css 1.2.36-dev.1.35 → 1.2.36-dev.1.37

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "@pmidc/upyog-css",
-  "version": "1.2.36-dev.1.35",
-  "license": "MIT",
-  "author": "",
-  "type": "commonjs",
-  "main": "dist/index.css",
-  "directories": {
-    "example": "example"
-  },
-  "files": [
-    "dist/index.min.css",
-    "dist/index.css",
-    "svg/**/*.svg",
-    "img/**/*.png",
-    "src/**/*.scss",
-    "src/**/*.css"
-  ],
-  "scripts": {
-    "start": "gulp build",
-    "build:prod": "gulp build",
-    "prepublish": "yarn build:prod",
-    "deploy": "gulp && cp -R svg example && cp -R img example && gh-pages -d example"
-  },
-  "dependencies": {
-    "normalize.css": "8.0.1",
-    "postcss-scss": "3.0.5",
-    "tailwindcss": "^1.9.6",
-    "yarn": "^1.22.22"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.4",
-    "cssnano": "4.1.11",
-    "gh-pages": "3.2.3",
-    "gulp": "4.0.2",
-    "gulp-clean": "^0.4.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-livereload": "^4.0.2",
-    "gulp-postcss": "9.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.0.0",
-    "postcss": "8.4.12",
-    "postcss-cli": "8.3.1",
-    "postcss-header": "2.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-prefixer": "2.1.3",
-    "postcss-preset-env": "^6.7.1",
-    "postcss-scss": "3.0.5",
-    "sass": "1.49.11"
-  },
-  "engines": {
-    "node": ">=10"
-  },
-  "cssConfig": {
-    "prefix": ""
-  },
-  "browserslist": [
-    "> 3%",
-    "last 2 versions"
-  ],
-  "style": "./dist/index.css",
-  "description": ""
-}
+{
+  "name": "@pmidc/upyog-css",
+  "version": "1.2.36-dev.1.37",
+  "license": "MIT",
+  "author": "",
+  "type": "commonjs",
+  "main": "dist/index.css",
+  "directories": {
+    "example": "example"
+  },
+  "files": [
+    "dist/index.min.css",
+    "dist/index.css",
+    "svg/**/*.svg",
+    "img/**/*.png",
+    "src/**/*.scss",
+    "src/**/*.css"
+  ],
+  "scripts": {
+    "start": "gulp build",
+    "build:prod": "gulp build",
+    "prepublish": "yarn build:prod",
+    "deploy": "gulp && cp -R svg example && cp -R img example && gh-pages -d example"
+  },
+  "dependencies": {
+    "normalize.css": "8.0.1",
+    "postcss-scss": "3.0.5",
+    "tailwindcss": "^1.9.6",
+    "yarn": "^1.22.22"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.4",
+    "cssnano": "4.1.11",
+    "gh-pages": "3.2.3",
+    "gulp": "4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-livereload": "^4.0.2",
+    "gulp-postcss": "9.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.0.0",
+    "postcss": "8.4.12",
+    "postcss-cli": "8.3.1",
+    "postcss-header": "2.0.0",
+    "postcss-import": "^12.0.1",
+    "postcss-prefixer": "2.1.3",
+    "postcss-preset-env": "^6.7.1",
+    "postcss-scss": "3.0.5",
+    "sass": "1.49.11"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "cssConfig": {
+    "prefix": ""
+  },
+  "browserslist": [
+    "> 3%",
+    "last 2 versions"
+  ],
+  "style": "./dist/index.css",
+  "description": ""
+}

package/src/components/CardBasedOptions.scss

@@ -113,34 +113,34 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 14px;
-  border-bottom: 2px solid #003C71;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #3B82F6;
 }
 
 .new-card-header-title {
-  font-size: 20px;
+  font-size: 28px;
   font-weight: 700;
-  color: #003C71;
+  color: #111827;
   margin: 0;
 }
 
 .new-card-view-button {
   background: transparent;
   border: none;
-  color: #003C71;
-  font-size: 13px;
+  color: #3B82F6;
+  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 14px;
+  padding: 8px 16px;
   border-radius: 8px;
   transition: background 0.2s ease;
 }
 .new-card-view-button:hover {
-  background: #EEF4FF;
+  background: #EFF6FF;
 }
 
 /* Cards grid */
@@ -156,54 +156,53 @@
 
 /* Individual option card */
 .new-card-option {
-  border-radius: 14px;
-  padding: 20px;
+  border-radius: 12px;
+  padding: 24px;
   margin: 8px;
-  min-width: 180px;
+  min-width: 220px;
   flex: 1 1 calc(25% - 16px);
   max-width: calc(25% - 16px);
   cursor: pointer;
-  transition: all 0.22s ease;
-  border: 1.5px solid #DEE0E2;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+  border: 1px solid #E5E7EB;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   transform: translateY(0);
   box-sizing: border-box;
-  background: #ffffff;
 }
 .new-card-option:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   transform: translateY(-4px);
 }
 
-/* Icon wrapper — rounded square */
+/* Icon wrapper */
 .new-card-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
   color: #fff;
-  flex-shrink: 0;
+  font-size: 24px;
 }
 .new-card-icon svg {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   fill: #fff;
 }
 
 /* Service name and access row */
 .new-card-service-name {
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 600;
-  color: #1F1F1F;
-  margin-bottom: 10px;
-  line-height: 1.4;
+  color: #111827;
+  margin-bottom: 8px;
 }
 
 .new-card-access {
-  font-size: 12px;
-  color: #626A6E;
+  font-size: 14px;
+  color: #6B7280;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -211,9 +210,8 @@
 
 /* Arrow */
 .new-card-arrow {
-  color: #003C71;
-  display: flex;
-  align-items: center;
+  color: #3B82F6;
+  font-size: 18px;
 }
 
 /* Per-index background classes (backgrounds for the card root) */

package/src/components/body.scss

@@ -3,7 +3,7 @@ body {
 }
 
 :root {
-  --digit-font-family: "Noto Sans", sans-serif;
+  --digit-font-family: "Source Sans Pro", sans-serif;
 }
 
 body {
@@ -111,7 +111,7 @@ body {
     padding: 3rem;
     form {
       .card {
-        max-width: 960px;
+         max-width: 100%;
         h2 {
         }
         .field-container {
@@ -199,7 +199,7 @@ body {
   font-size: 1.5rem;
   border-bottom: 2px solid #ccc;
   padding-bottom: 0.3rem;
-  color: #003C71;
+  color: #2e4a66;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
@@ -270,7 +270,7 @@ body {
 
 .bpa-stepper-form-container {
   padding: 16px;
-  background: #F3F2F1;
+  background: #f8fafc;
   min-height: calc(100vh - 120px);
 }
 

package/src/components/buttons.scss

@@ -3,7 +3,7 @@
   border: none !important;
   border-radius: 0.375rem;
   padding: 0.5rem 1rem;
-  font-family: var(--digit-font-family);
+  font-family: "Noto Sans", sans-serif;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -42,31 +42,31 @@
 
 .selector-button-primary {
   @extend .selector-button;
-  background-color: #003C71 !important;
+  background-color: #2947a3 !important;
   width: 100%;
 
   &:hover {
-    background-color: #002554 !important;
+    background-color: #1e3a8a !important;
   }
 }
 
 .selector-button-secondary {
   @extend .selector-button;
   background-color: #ffffff !important;
-  color: #003C71 !important;
+  color: #2947a3 !important;
 
   h2 {
-    color: #003C71 !important;
+    color: #2947a3 !important;
   }
 }
 
 .selector-button-border {
-  background-color: #003C71 !important;
+  background-color: #2947a3 !important;
   color: #ffffff !important;
   border: none !important;
   border-radius: 0.375rem;
   padding: 0.5rem 1rem;
-  font-family: var(--digit-font-family);
+  font-family: "Noto Sans", sans-serif;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -86,7 +86,7 @@
 
 
   &:hover {
-    background-color: #002554 !important;
+    background-color: #1e3a8a !important;
     opacity: 0.9;
   }
 

package/src/components/card.scss

@@ -8,8 +8,6 @@
   box-shadow: none;
 }
 
-
-
 .card {
   padding: 20px 24px 28px 24px;
   max-width: 95vw;
@@ -81,11 +79,11 @@
     color: #0f172a;
     margin-bottom: 8px;
     margin-top: 8px;
-    font-weight: 700;    
+    font-weight: 700;
     letter-spacing: 0.5px;
     width: 100%;
   }
-  .card-label span{
+  .card-label span {
     color: #dc2626;
     font-weight: "bold";
   }
@@ -407,13 +405,13 @@
   .card {
     margin-top: 2rem;
   }
-  .popup-module{
+  .popup-module {
     width: 100% !important;
   }
-  #search-property-field{
+  #search-property-field {
     display: block !important;
   }
-  .bpa-summary-page{
+  .bpa-summary-page {
     padding: 0 !important;
   }
   .card-link {
@@ -494,7 +492,7 @@
 
 .submit-bar-back {
   background: transparent !important;
-  color: #2563eb !important;
+  color: #e7e9ef !important;
   border: 1px solid #2563eb !important;
   box-shadow: none !important;
   margin-right: 10px;
@@ -586,12 +584,12 @@ button.card-link.submit-bar {
     }
 
     .card-sub-header {
-      margin-bottom: 24px !important;
+      margin-bottom: 40px;
       font-size: 18px;
     }
 
     .employee-card-sub-header {
-      margin-bottom: 24px !important;
+      margin-bottom: 40px;
       font-size: 18px;
     }
 
@@ -769,7 +767,6 @@ button.card-link.submit-bar {
     align-items: flex-start;
   }
 
-
   .employee .employeeCard .field {
     width: 100%;
   }
@@ -859,32 +856,31 @@ button.card-link.submit-bar {
 .ws-citizen-wrapper .app-container {
   margin-top: 1rem !important;
   padding: 0 !important;
-  
 }
 
 @media (max-width: 768px) {
- .chb-citizen .app-container{
-  margin-top: 3rem !important;
- }
-
- .pet-citizen .app-container{
-  margin-top: 2rem !important;
- }
- .mcollect-citizen .app-container{
-  margin-top: 2rem !important;
- }
- .ads-citizen .app-container{
-  margin-top: 2rem !important;
- }
-
- .bills-citizen-wrapper{
-  margin-top: 1rem !important;
-  padding: 10px !important;
-  width: 100% !important;
- }
- .property-search-modal{
-  width: 100% !important;
- }
+  .chb-citizen .app-container {
+    margin-top: 3rem !important;
+  }
+
+  .pet-citizen .app-container {
+    margin-top: 2rem !important;
+  }
+  .mcollect-citizen .app-container {
+    margin-top: 2rem !important;
+  }
+  .ads-citizen .app-container {
+    margin-top: 2rem !important;
+  }
+
+  .bills-citizen-wrapper {
+    margin-top: 1rem !important;
+    padding: 10px !important;
+    width: 100% !important;
+  }
+  .property-search-modal {
+    width: 100% !important;
+  }
   .card .card {
     padding: 0;
     background: none;
@@ -965,5 +961,4 @@ button.card-link.submit-bar {
       padding: 0;
     }
   }
-
 }