@tattvafoundation/upyog-css 1.0.15 → 1.0.17

package/src/components/bmc.scss

@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #f47738;
+  --primary-color: #d1b03f;
   --secondary-color: #0b0c0c;
   --text-color: #333;
   --background-light: #f0f0f0;
@@ -98,10 +98,8 @@
   transform: translateX(-50%);
 }
 
-.bmc-card-bannerImage {
-  background-image: url("../img/Free-Silai-Machine-Yojna-1-jpg.jpeg");
-  height: 40vh;
-  background-size: cover;
+.CardBasedOptions {
+  margin-bottom: 24px
 }
 
 /* Media Queries */
@@ -149,6 +147,19 @@
   .TLComments p {
     font-size: 12px;
   }
+
+  .employeeCustomCard h2,
+  .employeeCustomCard .inboxButton {
+    font-size: 14px !important;
+  }
+
+  .CardBasedOptions .mainContent .CardBasedOptionsMainChildOption .ChildOptionName {
+    font-size: 10px
+  }
+
+  .CardBasedOptions {
+    margin-bottom: 10px;
+  }
 }
 
 /* BMC Card Styles */
@@ -158,13 +169,32 @@
 }
 
 .bmc-card-aadharimage {
-  background-image: url("../img/aadhaarCard.jpg");
+  background-image: url("https://bmc-prod-s3.s3.ap-south-1.amazonaws.com/bmc-images/aadhaarCard.jpg");
   height: 60vh;
   width: 100%;
   background-size: cover;
   background-repeat: round;
 }
 
+.logo-ic {
+  background-image: url("https://bmc-prod-s3.s3.ap-south-1.amazonaws.com/bmc-images/logo-bmc.png");
+  height: 80px;
+  width: 80px;
+  background-size: 80px;
+  background-position: center;
+  width: 100%;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+}
+
+.employee-banner-image {
+  background-image: url("https://bmc-prod-s3.s3.ap-south-1.amazonaws.com/bmc-images/login-back.png");
+  height: 100vh;
+  width: 100%;
+  background-size: cover !important;
+  position: absolute;
+}
+
 .aadhaar-container {
   text-align: center;
 }
@@ -230,7 +260,7 @@
 }
 
 .bmc-card-master-button {
-  background-color: #5aae06;
+  background-color: #d1b03f;
   width: 174px;
 }
 
@@ -500,7 +530,7 @@
 
 .toggle-switch-inner:before {
   content: attr(data-yes);
-  background-color: #038403;
+  background-color: #d1b03f;
   color: #fff;
 }
 
@@ -515,7 +545,7 @@
   width: 34px;
   /* Match the height for a square switch */
   margin: 0;
-  background: #f47738;
+  background: #d1b03f;
   position: relative;
   top: 0;
   bottom: 0;
@@ -640,7 +670,7 @@
 }
 
 .bmc-radio-wrap .bmc-radio-btn-wrap:hover .bmc-radio-btn-checkmark {
-  border-color: #f47738;
+  border-color: #d1b03f;
 }
 
 .bmc-radio-wrap .bmc-radio-btn {
@@ -672,12 +702,12 @@
 }
 
 .bmc-radio-wrap .bmc-radio-btn:checked + .bmc-radio-btn-checkmark {
-  border-color: #f47738;
+  border-color: #d1b03f;
 }
 
 .bmc-radio-wrap .bmc-radio-btn:checked + .bmc-radio-btn-checkmark:after {
   display: block;
-  background-color: #f47738;
+  background-color: #d1b03f;
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 9999px;
@@ -694,7 +724,7 @@
 }
 
 .bmc-card-button {
-  background-color: #f47738;
+  background-color: #d1b03f;
   width: 147px;
   height: 48px;
   color: #fff;
@@ -823,6 +853,11 @@
   color: #333;
 }
 
+.linksWrapper a {
+  width: 100%;
+  text-align: center;
+}
+
 @media only screen and (max-width: 768px) {
   .bmc-card-aadharimage {
     display: none;
@@ -910,6 +945,10 @@
     display: none;
   }
 
+  .RightMostTopBarOptions img#topbar-logo {
+    display: none;
+  }
+
   .bmc-radio-wrap {
     margin-top: 8px;
     display: flex;
@@ -996,7 +1035,7 @@
 }
 
 .bmc-pagination li.active button {
-  background-color: #f47738;
+  background-color: #d1b03f;
   color: #fff;
 }
 
@@ -1035,103 +1074,160 @@
   padding: 0;
 }
 
-
-
 .select-wrap {
   margin-bottom: 24px;
   position: relative;
-  max-width: 540px; }
-  .select-wrap .select {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 2rem;
-    --border-opacity:1;
-    border: 1px solid #464646;
-    border-color: rgba(70, 70, 70, var(--border-opacity)); }
-    .select-wrap .select input[type=text], .select-wrap .select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select .input-emp[type=text] {
-      width: calc(100% - 32px);
-      background-color: initial;
-      position: absolute;
-      z-index: 10;
-      width: 100%;
-      height: 100%;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      padding-left: 8px; }
-    .select-wrap .select input[type=text], .select-wrap .select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select .input-emp[type=text], .select-wrap .select p {
-      --text-opacity:1;
-      color: #0b0c0c;
-      color: rgba(11, 12, 12, var(--text-opacity));
-      font-size: 16px;
-      line-height: 20px; }
-    .select-wrap .select p {
-      padding-top: 9px;
-      float: left;
-      margin-left: 8px; }
-    .select-wrap .select img, .select-wrap .select svg {
-      float: right;
-      height: 2rem;
-      width: 2rem;  }
-    .select-wrap .select svg {
-      position: absolute;
-      right: 0; }
-  .select-wrap .select-active {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 2rem;
-    --border-opacity:1;
-    border: 1px solid #a82227;
-    border-color: rgba(168, 34, 39, var(--border-opacity)); }
-    .select-wrap .select-active input[type=text], .select-wrap .select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select-active .input-emp[type=text] {
-      width: calc(100% - 32px);
-      background-color: initial;
-      position: absolute;
-      z-index: 10;
-      width: 100%;
-      height: 100%;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      padding-left: 8px; }
-    .select-wrap .select-active input[type=text], .select-wrap .select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select-active .input-emp[type=text], .select-wrap .select-active p {
-      --text-opacity:1;
-      color: #0b0c0c;
-      color: rgba(11, 12, 12, var(--text-opacity));
-      font-size: 16px;
-      line-height: 20px; }
-    .select-wrap .select-active p {
-      float: left;
-      margin-left: 8px;
-      padding-top: 9px; }
-    .select-wrap .select-active img, .select-wrap .select-active svg {
-      float: right;
-      height: 2rem;
-      width: 2rem;}
-    .select-wrap .select-active svg {
-      position: absolute;
-      right: 0; }
-  .select-wrap .options-card {
-    width: 100% !important;
-    -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    position: absolute;
-    z-index: 20;
-    margin-top: 4px;
-    --bg-opacity:1;
-    background-color: #fff;
-    background-color: rgba(255, 255, 255, var(--bg-opacity)); }
-    .select-wrap .options-card p {
-      padding-top: 14px;
-      width: 100%;
-      height: 2rem;
-      padding-left: 8px;
-      --text-opacity:1;
-      color: #0b0c0c;
-      color: rgba(11, 12, 12, var(--text-opacity));
-      font-size: 16px;
-      line-height: 20px; }
-      .select-wrap .options-card p:hover {
-        --bg-opacity:1;
-        background-color: #eee;
-        background-color: rgba(238, 238, 238, var(--bg-opacity)); }
+  max-width: 540px;
+}
+
+.select-wrap .select {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2rem;
+  --border-opacity: 1;
+  border: 1px solid #464646;
+  border-color: rgba(70, 70, 70, var(--border-opacity));
+}
+
+.select-wrap .select input[type="text"],
+.select-wrap .select .checkbox-wrap .input-emp[type="text"],
+.checkbox-wrap .select-wrap .select .input-emp[type="text"] {
+  width: calc(100% - 32px);
+  background-color: initial;
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  padding-left: 8px;
+}
+
+.select-wrap .select input[type="text"],
+.select-wrap .select .checkbox-wrap .input-emp[type="text"],
+.checkbox-wrap .select-wrap .select .input-emp[type="text"],
+.select-wrap .select p {
+  --text-opacity: 1;
+  color: #0b0c0c;
+  color: rgba(11, 12, 12, var(--text-opacity));
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.select-wrap .select p {
+  padding-top: 9px;
+  float: left;
+  margin-left: 8px;
+}
+
+.select-wrap .select img,
+.select-wrap .select svg {
+  float: right;
+  height: 2rem;
+  width: 2rem;
+}
+
+.select-wrap .select svg {
+  position: absolute;
+  right: 0;
+}
+
+.select-wrap .select-active {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2rem;
+  --border-opacity: 1;
+  border: 1px solid #a82227;
+  border-color: rgba(168, 34, 39, var(--border-opacity));
+}
+
+.select-wrap .select-active input[type="text"],
+.select-wrap .select-active .checkbox-wrap .input-emp[type="text"],
+.checkbox-wrap .select-wrap .select-active .input-emp[type="text"] {
+  width: calc(100% - 32px);
+  background-color: initial;
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  padding-left: 8px;
+}
+
+.select-wrap .select-active input[type="text"],
+.select-wrap .select-active .checkbox-wrap .input-emp[type="text"],
+.checkbox-wrap .select-wrap .select-active .input-emp[type="text"],
+.select-wrap .select-active p {
+  --text-opacity: 1;
+  color: #0b0c0c;
+  color: rgba(11, 12, 12, var(--text-opacity));
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.select-wrap .select-active p {
+  float: left;
+  margin-left: 8px;
+  padding-top: 9px;
+}
+
+.select-wrap .select-active img,
+.select-wrap .select-active svg {
+  float: right;
+  height: 2rem;
+  width: 2rem;
+}
+
+.select-wrap .select-active svg {
+  position: absolute;
+  right: 0;
+}
+
+.select-wrap .options-card {
+  width: 100% !important;
+  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  z-index: 20;
+  margin-top: 4px;
+  --bg-opacity: 1;
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+}
+
+.select-wrap .options-card p {
+  padding-top: 14px;
+  width: 100%;
+  height: 2rem;
+  padding-left: 8px;
+  --text-opacity: 1;
+  color: #0b0c0c;
+  color: rgba(11, 12, 12, var(--text-opacity));
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.select-wrap .options-card p:hover {
+  --bg-opacity: 1;
+  background-color: #eee;
+  background-color: rgba(238, 238, 238, var(--bg-opacity));
+}
+
+.RightMostTopBarOptions .select-wrap svg {
+  fill: #000;
+}
+
+.scheme-ic {
+  background: #fdf5e2;
+  padding: 5px;
+  border-radius: 50px;
+  border: 1px solid #d1b03f;
+}
+
+.img-responsive {
+  width: 100%;
+  height: auto;
+}

package/src/components/body.scss

@@ -3,19 +3,26 @@ body {
 }
 
 .body-container {
-  @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
+  @apply h-full min-h-screen overflow-x-hidden;
   position: relative !important;
-
+  background-color: #f1f5fe;
 
 }
 
 .navbar {
   @apply text-white bg-secondary p-md w-full mb-md;
-  background: linear-gradient(to right, #feeee7, #a82227,#feeee7) !important;
+  background: #fff !important;
+  color: #000 !important;
+
   img {
     height: 24px;
   }
+
+  h3 {
+    border-color: #9f9e9e !important;
+  }
 }
+
 /* .navbar-header{
     @apply text-navbarheader float-left px-sm
 }
@@ -56,6 +63,7 @@ body {
   margin-bottom: 10px;
   flex-wrap: wrap
 }
+
 .bread-crumb--item {
   margin-left: 5px;
 
@@ -97,18 +105,23 @@ 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;
@@ -138,6 +151,7 @@ body {
 .body-container::-webkit-scrollbar {
   display: none;
 }
+
 .audit-card {
   width: 80%;
   margin-left: -21%;

package/src/components/buttons.scss

@@ -1,5 +1,6 @@
 .selector-button-primary {
-  @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg;
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
+  background-color: #d1b03f;
 
   &:focus {
     @apply outline-none;
@@ -22,7 +23,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 {
@@ -35,7 +36,7 @@
 }
 
 .selector-button-primary-disabled {
-  @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
 
   &:focus {
     @apply outline-none;
@@ -45,6 +46,7 @@
     @apply font-rc font-medium text-legend text-white;
   }
 }
+
 .submit-bar:focus {
   @apply outline-none !important;
 }

package/src/components/card.scss

@@ -78,7 +78,7 @@
     @apply text-text-primary text-heading-m font-bold;
   }
 
-  .card-section-sub-text{
+  .card-section-sub-text {
     @apply text-text-primary text-body-s;
   }
 
@@ -126,10 +126,13 @@
     padding-left: 25px;
   }
 }
+
 .employeeCard.fsm {
   margin-bottom: 64px !important;
   margin-left: 0px !important;
-  margin-right: 16px !important; }
+  margin-right: 16px !important;
+}
+
 .header-wrap {
   @apply flex mb-md;
 
@@ -137,8 +140,7 @@
     margin-right: auto;
   }
 
-  .header-content {
-  }
+  .header-content {}
 
   .header-end {
     margin-left: auto;
@@ -181,10 +183,11 @@
 }
 
 @screen dt {
+
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
-    background-color: #882636 !important;
+    background-color: #d1b03f !important;
     height: 2rem !important
   }
 
@@ -240,7 +243,7 @@
       @apply text-heading-m-dt;
     }
 
-    .card-section-sub-text{
+    .card-section-sub-text {
       @apply text-text-primary text-body-s-dt;
     }
 
@@ -275,6 +278,7 @@
       .field {
         width: 50%;
         margin-right: 20%;
+
         .field {
           margin-right: unset;
         }
@@ -303,8 +307,7 @@
       margin-right: auto;
     }
 
-    .header-content {
-    }
+    .header-content {}
 
     .header-end {
       margin-left: auto;
@@ -336,6 +339,7 @@
   .button-sub-text {
     width: 240px;
   }
+
   .home-page-info-banner-wrap {
     max-width: 45%;
     min-width: 100%;
@@ -343,8 +347,9 @@
     margin-right: 24px;
     margin-bottom: 24px;
   }
-  .info-banner-wrap-citizen-override {
-  }
+
+  .info-banner-wrap-citizen-override {}
+
   .oc-aknowledgement-screen {
     width: auto;
     min-width: 240px;
@@ -374,6 +379,7 @@
   height: 70px !important;
   margin-bottom: 15px !important;
 }
+
 .employee-main-application-details {
   padding: 10px !important;
 }
@@ -395,11 +401,12 @@
   width: 100% !important;
 }
 
-.language-selector .submit-bar, .submit-bar-disabled{
-  background-color: #5a1166 !important;
+.language-selector .submit-bar,
+.submit-bar-disabled {
+  background-color: #d1b03f !important;
 }
 
-.owner-details{
+.owner-details {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -407,6 +414,6 @@
   justify-content: space-between
 }
 
-.owner-details-child{
+.owner-details-child {
   width: 50%;
 }