@tattvafoundation/upyog-css 1.0.15 → 1.0.17

package/src/components/deonar.scss

@@ -2,6 +2,22 @@
 /* Styles for screen widths below 768px */
 @media (max-width: 768px) {
 
+  .deonar-security{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .deonar-security-card{
+    width: 100% !important;
+  }
+  .deonar-token-gen{
+    flex-wrap: wrap;
+  }
+  .deonar-input-gen{
+    flex: none !important;
+    width: 100%;
+  }
+
+
   .deonar-scrollable-table{
     display: flex !important;
   }
@@ -36,6 +52,18 @@
     grid-column: 1 / -1;
   }
 }
+
+@media (min-width: 1024px) {
+  .deonar-token-gen{
+    flex-wrap: wrap;
+  }
+  .deonar-input-gen{
+    flex: none !important;
+    width: 100%;
+  }
+ 
+}
+
 @media (max-width: 1280px) {
   .deonar-scrollable-table{
     display: block;
@@ -95,6 +123,7 @@
 
 .deonar-modal-body {
   margin-bottom: 20px;
+
   p {
     font-size: 16px;
   }
@@ -186,7 +215,8 @@
 }
 
 .deonar-btn-confirm {
-  background-color: #007bff; /* Primary button color */
+  background-color: #d1b03f;
+  /* Primary button color */
   color: white;
 }
 
@@ -199,3 +229,131 @@
 .deonar-btn-cancel:hover {
   opacity: 0.9; /* Slight opacity change on hover */
 }
+
+.bmc-receipt-watermark {
+  background-image: url("../img/bmc_receipt.png"); /* Adjust the path if necessary */
+  background-size: contain; /* Or 'cover', depending on how you want the image scaled */
+  background-repeat: no-repeat;
+  width: 100%; /* Match the container's width */
+  height: 100%; /* Match the container's height */
+  opacity: 0.1; /* Light transparency to give a watermark effect */
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1; /* Ensure it doesn't overlap the receipt content */
+  pointer-events: none; /* Prevent interaction with the watermark */
+}
+
+/**************** edit table component ****************/
+
+.bmc-edit-count-input {
+  width: 60px;
+  padding: 4px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.bmc-action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bmc-edit-btn,
+.bmc-save-btn,
+.bmc-cancel-btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  font-size: 14px;
+}
+
+.bmc-edit-btn {
+  background-color: #1976d2;
+  color: white;
+}
+
+.bmc-save-btn {
+  background-color: #4caf50;
+  color: white;
+}
+
+.bmc-cancel-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+.bmc-remove-icon {
+  cursor: pointer;
+  margin-left: 10px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.bmc-count-adjuster {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bmc-count-info {
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
+}
+
+.bmc-count-input-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.bmc-count-input {
+  width: 80px;
+  padding: 4px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.bmc-count-summary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.bmc-count-display {
+  font-size: 14px;
+  color: #666;
+}
+
+.bmc-adjust-btn,
+.bmc-apply-btn,
+.bmc-cancel-btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.bmc-adjust-btn {
+  background-color: #1976d2;
+  color: white;
+}
+
+.bmc-apply-btn {
+  background-color: #4caf50;
+  color: white;
+}
+
+.bmc-cancel-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+.bmc-adjust-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}

package/src/components/languageSelector.scss

@@ -5,20 +5,25 @@
 .language-selector div:not(:first-child) {
   margin-left: 10px;
 }
+
 .bannerCard .language-button-container button {
   width: 6.2rem;
   height: 2.5rem;
 }
+
 .bannerCard .customBtn {
   border-color: #505a5f;
 }
+
 .bannerCard .customBtn:focus {
   outline: none;
 }
+
 .bannerCard .customBtn-selected {
   border-color: transparent;
-  background-color: #5a1166 !important;
+  background-color: #d1b03f !important;
 }
+
 .bannerCard .bannerHeader p {
   font-size: 19px;
-}
+}

package/src/components/navbar.scss

@@ -8,12 +8,15 @@
     min-width: 78px;
     height: 24px;
   }
+
   .nav {
     display: flex;
     justify-content: space-between;
   }
+
   .nav-wrapper {
     display: flex;
+
     @media (min-width: 780px) {
       .hamburger-span {
         display: none;
@@ -36,7 +39,7 @@
   flex-direction: column;
   align-items: center;
   padding-top: 30px;
-  background-color: #ffffff;
+  background-color: transparent;
 
   img {
     width: 89px;
@@ -48,6 +51,7 @@
     .label-text {
       color: #767676;
     }
+
     &.name-Profile {
       .label-text {
         letter-spacing: 0.6px;
@@ -57,6 +61,7 @@
       }
     }
   }
+
   .profile-divider {
     border-top: 1px solid #d6d5d4;
     margin-left: 20px;
@@ -71,6 +76,7 @@
   position: relative;
   min-height: 1px;
   overflow: auto;
+
   .menu-item {
     border: 10px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -87,6 +93,7 @@
     min-height: 48px;
     white-space: initial;
     background: none;
+
     .icon {
       display: block;
       color: rgb(117, 117, 117);
@@ -96,27 +103,33 @@
       float: left;
       margin-top: 12px;
     }
-    .edit-btn-ico{
+
+    .edit-btn-ico {
       height: 17px;
       width: 17px;
       margin-top: 16px;
     }
-    .icon + .menu-label {
+
+    .icon+.menu-label {
       margin-left: 36px;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
+
   .sidebar-list {
     padding-right: 16px;
     padding-left: 16px;
+
     &.active {
-      border-left: 5px solid #a82227;
+      border-left: 5px solid #b08905;
+
       .menu-label {
-        color: #a82227;
+        color: #b08905;
       }
+
       .icon {
-        fill: #a82227;
+        fill: #b08905;
       }
     }
 
@@ -124,10 +137,12 @@
       cursor: pointer;
       display: flex;
       flex-direction: column;
+
       .sidebar-link {
         display: flex;
         justify-content: space-between;
         align-items: center;
+
         svg {
           width: 21px;
           height: 21px;
@@ -135,6 +150,7 @@
           fill: rgb(117, 117, 117);
         }
       }
+
       .actions {
         display: flex;
         align-items: center;
@@ -148,6 +164,7 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
         input {
           border: none;
           outline: none;
@@ -163,12 +180,14 @@
     .actions {
       display: flex;
       padding: 1em;
+
       svg {
         width: 21px;
         height: 21px;
         color: rgb(117, 117, 117);
         fill: rgb(117, 117, 117);
       }
+
       span {
         color: #5f5c62;
       }
@@ -177,6 +196,13 @@
 }
 
 .drawer-desktop {
+  background-color: rgb(245, 234, 205);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  padding-top: 80px;
+  width: 190px;
+
   .menu-item {
     border: 10px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -193,6 +219,7 @@
     min-height: 48px;
     white-space: initial;
     background: none;
+
     .icon {
       display: block;
       color: rgb(117, 117, 117);
@@ -202,30 +229,36 @@
       float: left;
       margin-top: 12px;
     }
+
     .edit-btn-ico {
       height: 17px;
       width: 17px;
       margin-top: 16px;
     }
-    .icon + .menu-label {
+
+    .icon+.menu-label {
       margin-left: 36px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
+
   @media (min-width: 780px) {
     .sidebar-list {
       padding-right: 16px;
       padding-left: 16px;
+
       &.active {
-        border-left: 5px solid #a82227;
+        border-left: 5px solid #b08905;
         padding-left: 11px;
+
         .menu-label {
-          color: #a82227;
+          color: #b08905;
         }
+
         .icon {
-          fill: #a82227;
+          fill: #b08905;
         }
       }
 
@@ -233,22 +266,26 @@
         cursor: pointer;
         display: flex;
         flex-direction: column;
+
         .sidebar-link {
           display: flex;
           justify-content: space-between;
           align-items: center;
+
           svg {
             width: 21px;
             height: 21px;
             color: rgb(117, 117, 117);
             fill: rgb(117, 117, 117);
           }
+
           .actions {
             .tooltip {
               margin-left: 16px;
             }
           }
         }
+
         .actions {
           display: flex;
           align-items: center;
@@ -270,12 +307,14 @@
       .actions {
         display: flex;
         padding: 1em;
+
         svg {
           width: 21px;
           height: 21px;
           color: rgb(117, 117, 117);
           fill: rgb(117, 117, 117);
         }
+
         span {
           color: #5f5c62;
         }
@@ -302,7 +341,8 @@
 
 .digit-footer {
   @apply flex h-4 mb-sm;
+
   img {
     @apply mr-sm;
   }
-}
+}

package/src/components/selectdropdown.scss

@@ -27,7 +27,7 @@
   .select {
     @apply relative block w-full h-10 border border-solid border-input-border;
     &:hover {
-      @apply border-2 border-solid border-primary-main;
+      border: 1px solid #b08905;
     }
     input[type="text"] {
       width: calc(100% - 32px);
@@ -196,4 +196,4 @@
 
 .employee-select-wrap .select img, .employee-select-wrap .select svg{
   margin-top: 2px;
-}
+}

package/src/index.scss

@@ -250,7 +250,7 @@
     fill: #a82227;
   }
 
-  color: #5a1166;
+  color: #d1b03f;
 
   cursor: pointer;
   font-weight: 500;
@@ -451,7 +451,7 @@ input[type="number"] {
 
   input {
     &:hover {
-      @apply border-2 border-solid border-primary-main;
+      border: 1px solid #b08905;
     }
   }
 }
@@ -771,7 +771,7 @@ input[type="number"] {
 }
 
 .icon-banner-employee svg {
-  background-color: #bf2f3b !important;
+  background-color: #d1b03f !important;
   width: 40px;
   height: 40px;
 }

package/src/pages/citizen/HomePageWrapper.scss

@@ -1,17 +1,19 @@
 .HomePageWrapper {
-  margin-top: -25px;
+  margin-top: -11px;
 
   .BannerWithSearch {
     margin-bottom: 40px;
     width: 100%;
     @apply relative;
+
     .Search {
       width: calc(100% - 32px);
       bottom: -18px;
       @apply mx-md absolute;
     }
+
     img {
-      height: 33vw;
+
       @apply w-full object-cover;
     }
   }
@@ -19,6 +21,8 @@
   .ServicesSection {
     @apply flex flex-wrap;
     padding: 40px 15px 0 15px;
+    width: 100% !important;
+    float: left !important;
   }
 
   @screen dt {
@@ -32,25 +36,31 @@
   .WhatsNewSection {
     @apply m-sm;
     padding: 0 15px;
+
     .headSection {
       @apply flex mb-sm justify-between;
+
       h2 {
         @apply text-heading-s font-bold text-text-primary pl-sm;
       }
+
       p {
         @apply text-link text-primary-main font-medium cursor-pointer;
       }
     }
+
     @media (min-width: 780px) {
       padding: 0 15px;
     }
   }
 
-  .WhatsAppBanner{
+  .WhatsAppBanner {
     width: 100%;
     padding: 0px 20px 0px 20px;
     margin: auto;
     cursor: pointer;
+    clear: both;
+
     img {
       width: 100%;
     }
@@ -60,10 +70,11 @@
 @media (min-width: 780px) {
   .SideBarStatic {
     width: 219px;
-    background: #ffffff;
+    background: transparent;
     margin-top: -24px;
   }
 }
+
 @media (max-width: 780px) {
   .SideBarStatic {
     width: 219px;
@@ -85,30 +96,37 @@
   @media (min-width: 780px) {
     width: calc(100% - 219px);
   }
+
   margin-top: -25px;
+
   img {
     height: 33vw;
-    background: linear-gradient(#000000,#000000);
+    background: linear-gradient(#000000, #000000);
     @apply w-full object-cover;
   }
+
   h1 {
     position: absolute;
     top: 100px;
     left: 21px;
     @apply text-heading-xl text-white font-bold;
   }
+
   .moduleLinkHomePageBackButton {
     border: none;
     top: 76px;
+
     svg {
       fill: #ffffff;
     }
+
     @apply absolute text-white text-heading-s ml-md;
   }
 }
 
 .moduleLinkHomePageModuleLinks {
   @apply mt-md;
+
   .CitizenHomeCard {
     .header {
       @apply hidden;
@@ -119,14 +137,17 @@
 @screen dt {
   .HomePageWrapper {
     width: 100%;
+
     .BannerWithSearch {
       margin-bottom: 56px;
       width: 100% !important;
+
       .Search {
         width: 100%;
         margin: 0;
         padding: 0 15px 0 15px;
       }
+
       img {
         height: 20vw;
       }
@@ -134,22 +155,26 @@
 
     .WhatsAppBanner {
       width: 100%;
-      img{
+
+      img {
         height: 20vw;
         width: 100%;
       }
     }
 
   }
+
   .moduleLinkHomePage {
     img {
       min-width: 100vw;
       height: 20vw;
     }
+
     h1 {
       top: calc(10vw + 40px);
       left: 15.8rem;
     }
+
     .moduleLinkHomePageBackButton {
       top: calc(10vw + 16px);
       @apply ml-md;
@@ -158,6 +183,6 @@
 
   .moduleLinkHomePageModuleLinks {
     max-width: unset;
-    width:100%
+    width: 100%
   }
-}
+}