@djb25/digit-ui-css 1.0.0 → 1.0.1

package/src/pages/employee/login.scss

@@ -1,30 +1,51 @@
 .loginFormStyleEmployee {
+  z-index: 10;
+  margin-top: 15px;
   .employeeCard {
-     background-color: transparent !important;
     .submit-bar {
       @apply w-full;
+      height: 2rem !important;
     }
+    .employeeCard 
+      .submit-bar .submit-bar header
+      {
+        line-height: 2rem !important;
+        font-size: 16px;
+        
+      }
   }
 }
 .banner .bannerCard{
   min-width: 420px !important;
+  background-color: transparent;
 }
 .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
-  margin-top: 0;
   border: 1px solid;
   border-right: none;
-  padding: 7px;
+  height: 32px !important;
+  margin-top: -16px !important;
+  z-index: 999;
+  background-color:#ffffffeb;
 }
 @screen dt {
   .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
-    padding: 7px;
+    border: 1px solid black;
+    border-right: none;
+    height: 32px !important;
+    margin-top: -16px !important;
+    z-index: 999;
+    background-color: #ffffffeb;
+
   }
  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
-    min-width: 420px !important;
+    min-width: 270px !important;
+   
+    background-color: #ffffffd6 !important
   }
   .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
-    max-width: 420px !important;
-    min-width: 420px !important;
+    max-width: 270px !important;
+    min-width: 270px !important;
+    background-color: #ffffffeb
   }
 }
 
@@ -39,6 +60,7 @@
 .employeeForgotPassword {
   .submit-bar {
     @apply w-full;
+    background-color: #5a1166 !important;
   }
 }
 .employeeChangePassword .submit-bar {
@@ -64,11 +86,11 @@
   font-size: 24px;
 }
 .loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 19px;
-  color: theme(colors.text.primary);
-  margin-top: 20px;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  line-height: 10px !important;
+  color: #0B0C0C;
+  z-index: 10 !important;
 }
 .banner .bannerHeader {
   margin-bottom: 20px;
@@ -77,23 +99,32 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
-  color: theme(colors.text.primary);
+  color: #0B0C0C;
 }
 .profile-label-margin{
    margin-top: 10px;
 }
-
+.loginFormStyleEmployee .primary-label-btn{
+  font-size: 12px;
+}
 .employeeForgotPassword .employeeCard .card-label-desc {
   font-weight: normal;
   font-size: 16px;
   line-height: 24px;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
   margin-top: 15px;
 }
 .employeeChangePassword .employeeCard .card-text {
   margin-bottom: 15px;
   font-size: 16px;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
+}
+.employeeCard .card-label{
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  line-height: 10px !important;
+  color: #0b0c0c;
+  
 }
 @media screen and (max-width: 768px) {
   .employeeChangePassword .employeeCard .card-text {
@@ -120,7 +151,10 @@
 .employeeChangePassword .employeeCard .field .field-container{
   margin-bottom: 24px;
 }
-
+.upyog-copyright-footer-web
+{
+  display: none;
+}
 .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
   font-size: 24px !important;
   line-height: 28px !important;
@@ -131,15 +165,19 @@
     font-size: 18px !important;
     line-height: 21px !important;
     margin-bottom: 0px !important;
+    z-index: 10 !important;
   }
   .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
-    min-width: 340px !important;
-    margin: 10px !important;
+    min-width: 270px !important;
+    z-index: 10 !important;
+    background-color: #ffffffd6 !important;
+    margin-top: 0 !important;
   }
   .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
-    max-width: 360px !important;
-    min-width: 340px !important;
-    margin: 10px !important;
+    max-width: 250px !important;
+    min-width: 250px !important;
+    margin-top: -50% !important;
+    background-color: #ffffffeb;
   }
 }
 .employeeChangePassword .employeeCard .card-text{
@@ -149,15 +187,20 @@
 .employeeBackbuttonAlign{
   display: none;
 }
-.resend-otp{
-  cursor: pointer;
-}
+.employee-select-wrap .select{
+height: 2.0rem !important;
+background-color: white !important;
 
+}
 .employee-select-wrap.login-city-dd {
   .options-card{
-  max-height: 200px;
+  max-height: 150px;
   }
 }
+.banner .bannerCard, .loginFormStyleEmployee .employeeCard{
+  background-color: transparent;
+}
+
 @media screen and (max-width: 768px){
   .employeeBackbuttonAlign{
     display: block;
@@ -166,13 +209,12 @@
     left: 20px;
   }
   .banner{
-    align-items: flex-end;
     padding-bottom: 40px;
     height: 100vh !important;
+    z-index: 1;
   }
   .topbar{
-    background: rgba(34, 57, 77, var(--bg-opacity)) !important;
-    color: white;
+    background: white;
   }
   .employee .loginContainer{
     padding-top: 0px !important;
@@ -185,118 +227,34 @@
     max-height: 160px;
     }
   }
-}
-
-
-
-@media (max-width: 768px) {
-  .modernFinanceUIWelcomeContainer,
-  .modernFinanceUIWelcomeContent,
-  .financeUI-background-decor1,
-  .financeUI-background-decor3,
-  .financeUI-background-decor4,
-  .financeUI-background-decor2 {
-    display: none !important;
-  }
-
-  .modernFinanceUILoginFormRightContainer {
-    width: 100% !important;
+  .banner .upyog-copyright-footer
+  {
+    display: none;
   }
-
-  .loginContainer {
-    padding: 0 !important;
-    background: #fff !important; /* optional */
+  .banner .upyog-copyright-footer-web
+  {
+    display: block;
   }
 }
+@media screen and (max-width:900px) {
 
-.loginFormStyleEmployee {
-
-  .loginCardSubHeaderClassName {
-    text-align: center !important;
-  }
-  .loginCardClassName {
-     background-color: transparent !important;
-    margin: auto !important; 
-    min-width: 408px !important;
-    header.employee-card-sub-header{
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-  .buttonClassName {
-    max-width: 100% !important;
-    width: 100% !important
-  }
-  .field .field-container .text-input input {
-    margin-bottom: 5px !important;
-  }
-  .bannerHeader {
-    margin-bottom: 0px !important;
-    display: flex;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-align: center;
-    align-items: center;
-    margin-bottom: 24px;
-  }
-  .bannerLogo {
-    width: 150px;
-    height: auto;
-    -o-object-fit: contain;
-    object-fit: contain;
-    padding-right: 10px;
-    margin-right: 10px;
-    border-right: 1px solid #0b0c0c;
-  }
-  
-  .primary-label-btn {
-    margin: 20px auto 0 auto !important;
-  }
-
-  .employee-select-wrap .options-card {
-    max-height: 150px !important;
+  .loginFormStyleEmployee .employeeForgotPassword
+  {
+    margin-top: -50% !important;
+    background-color: #ffffffeb !important;
+    z-index: 2;
   }
-}
-@media screen and (max-width: 768px) {
-  
-  /* remove ALL fixed/min widths */
-  .loginCardClassName,
-  .employeeCard,
-  .loginFormStyleEmployee .employeeCard,
-  .bannerCard,
-  .banner .bannerCard,
-  .employeeForgotPassword .employeeCard,
-  .employeeChangePassword .employeeCard {
-    min-width: 0 !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
+  .psuedo-banner{
+    font-size: 20px;
   }
-
-  /* make main container full width */
-  .modernFinanceUIMainContainer,
-  .modernFinanceUILoginFormRightContainer,
-  .loginContainer {
-    width: 100% !important;
-    max-width: 100% !important;
-    padding: 0 12px !important;
-    margin: 0 !important;
-    box-sizing: border-box !important;
+  .banner-slogan{
+    font-size: 14px;
   }
-
-  /* center logo + header & shrink them */
-  .bannerHeader,
-  .bannerLogo {
-    margin: 0 auto !important;
-    text-align: center !important;
-    width: auto !important;
-  }
-
-  .bannerLogo {
-    width: 100px !important;
-    height: auto !important;
-    border-right: none !important;
-    padding: 0 !important;
-    margin-bottom: 8px !important;
+  .loginFormStyleEmployee, .employeeForgotPassword{
+    margin-top: -30% !important;
+   
   }
 }
+.employeeForgotPassword{
+  z-index: 2;
+}

package/src/pages/employee/popupmodule.scss

@@ -32,3 +32,16 @@
     }
   }
 }
+
+.popup-module-main {
+  iframe #page-container div {
+    width: 99% !important;
+    margin: 5px !important;
+  }
+
+  iframe #page-container {
+    ::-webkit-scrollbar {
+      width: 0px !important;
+    }
+  }
+}

package/src/pages/employee/scroll-table.scss

@@ -66,7 +66,7 @@ top: 0px;
 
 /* Light Theme / Paper */
 
-background: theme(colors.white);
+background: #FFFFFF;
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 
 /* Inside auto layout */
@@ -79,7 +79,7 @@ color: #B1B4B6;
 .table-switch-card-inactive:hover{
     background: #fffffc;
     font-size: 17px;
-    color: theme(colors.text.secondary);
+    color: #505A5F;
 }
 
 .table-switch-card-active{/* Frame 57 */
@@ -99,10 +99,10 @@ color: #B1B4B6;
     
     /* Light Theme / Paper */
     
-    background: theme(colors.white);
+    background: #FFFFFF;
     /* Light Theme / Primary */
     
-    border: 1px solid theme(colors.primary.main);
+    border: 1px solid #a82227;
     box-sizing: border-box;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
     
@@ -111,9 +111,4 @@ color: #B1B4B6;
     flex: none;
     flex-grow: 0;
     margin: 0px 0px;
-}
-
-.icon-wrapper {
-    margin-left:1rem;
-    cursor:pointer
 }

package/src/pages/employee/surveys.scss

@@ -89,7 +89,7 @@
 .question-title {
   font-size: 18px;
   line-height: 21px;
-  color: theme(colors.text.primary);
+  color: #0b0c0c;
   font-weight: 700;
 }
 
@@ -98,8 +98,8 @@
   flex-direction: column;
   align-items: flex-start;
   padding: 8px 4px; 
-  background-color: theme(colors.grey.light);
-  border: 1px solid theme(colors.border);
+  background-color: #FAFAFA;
+  border: 1px solid #D6D5D4;
   box-sizing: border-box;
   border-radius: 4px;
   margin-top: 20px;
@@ -116,8 +116,8 @@
   position: static;
   left: 0px;
   top: 41px;
-  background: theme(colors.grey.light);
-  border: 1px solid theme(colors.border);
+  background: #FAFAFA;
+  border: 1px solid #D6D5D4;
   box-sizing: border-box;
   border-radius: 4px;
   margin-top: 20px;
@@ -148,8 +148,8 @@ flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 16px 8px;
-background: theme(colors.grey.light);
-border: 1px solid theme(colors.border);
+background: #FAFAFA;
+border: 1px solid #D6D5D4;
 box-sizing: border-box;
 border-radius: 4px;
 @apply gap-y-6;
@@ -200,10 +200,10 @@ border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
       }
 
       .radio-btn-checkmark {
-        height: 1.75rem;
-        width: 1.75rem;
+        height: 1.5rem;
+        width: 1.5rem;
         --border-opacity: 1;
-        border: 1px solid theme(colors.inputBorder);
+        border: 1px solid #464646;
         border-color: rgba(70, 70, 70, var(--border-opacity));
         border-radius: 9999px;
         display: block;
@@ -212,10 +212,9 @@ border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
       .radio-wrap .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
         display: block;
         --bg-opacity: 1;
-        background-color: theme(colors.primary.main);
-        background-color: rgba(244, 119, 56, var(--bg-opacity));
-        height: 1.25rem;
-        width: 1.25rem;
+        background-color: #a82227;
+        height: 1rem;
+        width: 1rem;
         border-radius: 9999px;
         position: absolute;
         top: 4px;

package/svg/check.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F47738" >
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a82227" >
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
 </svg>

package/svg/starempty.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F47738" width="48px" height="48px">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a82227" width="48px" height="48px">
     <path d="M0 0h24v24H0V0z" fill="none"/>
     <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
 </svg>

package/svg/starfilled.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="#F47738" width="48px" height="48px" >
+<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="#a82227" width="48px" height="48px" >
     <g><path d="M0,0h24v24H0V0z" fill="none"/>
     <path d="M0,0h24v24H0V0z" fill="none"/></g>
     <g><path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z"/></g>

package/README.md

@@ -1,80 +0,0 @@
-<!-- TODO: update this -->
-
-# digit-ui-css
-
-## Install
-
-```bash
-npm install --save @egovernments/digit-ui-css
-```
-
-## Limitation
-
-```bash
-This Package is more specific to DIGIT-UI's can be used across mission's
-It is the base css for all Digit UI's
-```
-
-## Usage
-
-After adding the dependency make sure you have this dependency in
-
-```bash
-frontend/micro-ui/web/package.json
-```
-
-```json
-"@egovernments/digit-ui-css":"^1.5.0",
-```
-
-then navigate to App.js
-
-```bash
-frontend/micro-ui/web/public/index.html
-```
-
-```jsx
-/** add this import **/
-
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.22/dist/index.css" />
-
-```
-### Changelog
-
-```bash
-1.8.1 added workbench releated css for popup
-1.8.0 Workbench v1.0
-1.8.0-beta.13 fixed the login text styling issue
-1.8.0-beta.1 styles for login dropdown and homepage dropdowns
-1.8.0-beta added workbench related css and some new Digit v2 constants based on em
-1.7.0 urban 2.9
-1.6.0 urban 2.8
-1.5.41 added styles for login dropdown and homepage dropdowns
-1.5.40 aligment issue in edit and logout
-1.5.39 updated login scss and alignment issues
-1.5.37 updated the readme content
-1.5.36 enhanced the formcomposer with header attribute
-1.5.35 Fixed the card css issues
-1.5.34 Fixed breadcrumb styling issue
-1.5.33 fixed some card related css issues due to v2 css
-1.5.32 newer css DIGITv2 added and corrected few existing issues
-1.5.31 Corrected the CSS for inbox composers and default core ui
-1.5.30 Updated the css for dynamic drodown filter dss
-1.5.29 layout issues fixed
-1.5.28 Horizontal Bar chart alignment fixes
-1.5.27 DSS UI alignment fixes for Horizontal Metric and bar chart
-1.5.26 added new css class for dss enhancements
-1.5.25 added the css of inbox search composers
-1.5.24 added the readme file
-1.5.23 base version
-```
-## Contributors
-
-[jagankumar-egov] [nipunarora-eGov] [Tulika-eGov] [Ramkrishna-egov] [nabeelmd-eGov] [anil-egov] [vamshikrishnakole-wtt-egov] 
-
-### Published from DIGIT Frontend 
-DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/master)
-
-## License
-
-MIT © [jagankumar-egov](https://github.com/jagankumar-egov)