@tattvafoundation/upyog-css 1.0.15 → 1.0.16

package/src/pages/employee/index.scss

@@ -1,14 +1,17 @@
 @import "./login.scss";
+
 /* TODO: convert using tailwind */
 .employee {
   .breadcrumb {
     @apply ml-sm mb-lg;
   }
+
   .ground-container {
     margin-bottom: 56px;
     margin-left: 0px;
     @apply flex flex-col;
   }
+
   .card-home {
     font-size: 16px;
     padding: 0 0 16px 0;
@@ -16,10 +19,12 @@
     display: inline-block;
     margin: 8px auto;
   }
+
   .home-action-cards {
     height: auto !important;
     min-height: 263px;
   }
+
   .topbar {
     position: fixed;
     top: 0;
@@ -51,11 +56,11 @@
 
     .right {
       float: right;
-      margin-top: 12px;
+      margin-top: 0px;
 
       .user-img-txt {
-        background: #a82227;
-        padding: 10px 15px;
+        background: #d1b03f;
+        padding: 7px 15px;
         border-radius: 50%;
         color: white;
         font-weight: 700;
@@ -67,56 +72,63 @@
     padding-top: 88px;
   }
 
-.submit-bar header{
-  height: 2rem !important;
-  line-height: 2rem !important;
-} 
+  .submit-bar header {
+    height: 2rem !important;
+    line-height: 2rem !important;
+  }
 
   .loginContainer {
     padding-top: 88px;
     position: relative;
   }
 
-.loginnn{
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  min-width: 100%;
-}
-.loginnn .img{
-  position: absolute;
-  background-size: cover;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-.logoNiua{
-  display: flex;
-  width: 100%;
-  position: absolute;
-}
-.logoNiua .img{
-  width: 15%;
-  height: 15%;
-}
-.upyogLogo{
-  width: 100% !important;
-}
-.login-logo-wrapper{
+  .loginnn {
+    position: relative;
+    max-width: 100%;
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .loginnn .img {
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .logoNiua {
+    display: flex;
+    width: 100%;
+    position: absolute;
+  }
+
+  .logoNiua .img {
+    width: 15%;
+    height: 15%;
+  }
+
+  .upyogLogo {
+    width: 100% !important;
+  }
+
+  .login-logo-wrapper {
     min-width: 100%;
     height: 100%;
     position: absolute;
     display: flex;
     flex-direction: row;
-}
-.loginConference{
+  }
+
+  .loginConference {
     position: relative;
     height: 100%;
     width: 100%;
     font-weight: 700;
 
-}
-.login-banner-wrapper{
+  }
+
+  .login-banner-wrapper {
     position: relative;
     color: white;
     float: right;
@@ -126,7 +138,7 @@
     margin-right: 2%;
     text-align: right;
     font-family: none;
-}
+  }
 
   .react-time-picker {
     width: 100%;
@@ -156,26 +168,32 @@
     padding-left: 8px;
   }
 }
-#login-conference-table{
-  position:absolute;
-   z-index:1;
-   width:36vw;
-   height:62vh;
-   margin-top:20vh;
-   margin-left: 2vw;
+
+#login-conference-table {
+  position: absolute;
+  z-index: 1;
+  width: 36vw;
+  height: 62vh;
+  margin-top: 20vh;
+  margin-left: 2vw;
 }
-.banner-slogan{
+
+.banner-slogan {
   padding-top: 10%;
 }
-.psuedo-banner span{
+
+.psuedo-banner span {
   color: #fdd049;
-} 
-.login-banner-wrapper .psuedo-banner{
+}
+
+.login-banner-wrapper .psuedo-banner {
   font-size: 2.2rem;
 }
-.login-banner-wrapper .banner-slogan{
+
+.login-banner-wrapper .banner-slogan {
   font-size: 1.5rem;
 }
+
 .citizen {
   .main {
     padding-top: 82px;
@@ -183,6 +201,7 @@
     display: flex !important;
   }
 }
+
 .citizen,
 .employee {
   .sidebar {
@@ -196,7 +215,7 @@
     white-space: nowrap;
     height: calc(100vh - 36px);
     padding-bottom: 5rem;
-    background-image: url(https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-green-card.png), url(https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/top-red-card.png);
+    background-color: rgb(245, 234, 205);
     background-blend-mode: lighten;
     background-size: cover;
 
@@ -205,6 +224,7 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+
       .tooltip {
         margin-left: 16px;
       }
@@ -215,33 +235,39 @@
       height: 24px;
       fill: #ffffff;
     }
+
     a {
       display: flex;
     }
+
     .sidebar-link {
       display: flex;
-      color: #ffffff;
+      color: #d1b03f;
       justify-content: space-between;
       align-items: center;
       padding: 20px;
       font-size: 14px;
+
       &.active {
-        color: #a82227 !important;
+        color: #d1b03f !important;
 
         border-right: 4px solid #a82227;
+
         svg {
-          fill: #a82227 !important;
+          fill: #d1b03f !important;
         }
       }
+
       .employee-search-input {
         border: none;
         outline: none;
-        background-color: rgba(0, 0, 0, 0);
         margin-left: 13px;
       }
+
       .custom-link {
         .tooltip {
           margin-left: 16px;
+
           span {
             margin-left: unset !important;
             left: unset !important;
@@ -250,67 +276,86 @@
       }
 
       svg {
-        fill: #ffffff !important;
+        fill: #d1b03f !important;
         width: 21px;
         height: 21px;
       }
 
       &:hover {
-        color: #a82227 !important;
-        background-color: #486480;
+        color: #fff !important;
+        background-color: rgb(202 170 63 / 76%);
 
         cursor: pointer;
+
         svg {
-          fill: #a82227 !important;
+          fill: #fff !important;
         }
       }
+
       .search-icon-wrapper {
         svg {
-          fill: #ffffff !important;
+          fill: #d1b03f !important;
           width: 21px;
           height: 21px;
+
           path {
-            fill: #ffffff !important;
+            fill: #d1b03f !important;
           }
+
+
+        }
+
+
+
+        input {
+          color: #d1b03f;
         }
       }
     }
+
     .dropdown-link {
       height: 40px;
       display: flex;
       margin-left: 40px;
       align-items: center;
       text-decoration: none;
-      color: #ffffff;
+      color: #d1b03f;
       font-size: 14px;
+
       .actions {
         .tooltiptext {
           left: unset;
           right: 1%;
         }
       }
+
       svg {
         width: 20px;
         height: 20px;
         fill: #ffffff;
       }
+
       &:hover {
-        color: #fe7a51 !important;
-        background-color: #486480;
+        color: #fff !important;
+        background-color: rgb(202 170 63 / 76%);
         cursor: pointer;
+
         svg {
           fill: #fe7a51 !important;
         }
       }
+
       &.active {
         color: #a82227 !important;
 
         border-right: 4px solid #a82227;
+
         svg {
           fill: #a82227 !important;
         }
       }
     }
+
     span {
       margin-left: 16px;
       text-overflow: ellipsis;
@@ -413,6 +458,7 @@
   .sidebar {
     margin-top: 54px;
     min-width: 200px;
+
     .actions {
       display: flex;
       align-items: center;
@@ -422,29 +468,35 @@
 }
 
 .link {
-  @apply text-primary-main cursor-pointer;
+  color: #d1b03f;
+  cursor: pointer;
 
   :hover {
     @apply text-primary-dark;
   }
 }
 
-.RightMostTopBarOptions{
+.RightMostTopBarOptions {
   @apply flex float-right;
   display: flex;
-  .EventNotificationWrapper{
+
+  .EventNotificationWrapper {
     @apply relative cursor-pointer;
-    span{
+
+    span {
       top: -10px;
       right: -10px;
       @apply absolute bg-error h-5 w-5 rounded-full text-center;
+
       p {
         line-height: 20px;
       }
     }
   }
+
   .select-wrap {
     margin-bottom: unset;
+
     svg {
       fill: #ffffff;
     }
@@ -485,33 +537,39 @@
   margin: auto !important;
 }
 
-.mb-50{
+.mb-50 {
   margin-bottom: 50px;
 }
-.mb-25{
+
+.mb-25 {
   margin-bottom: 25px;
 }
+
 @media (min-width: 640px) {
   .employee {
     .ground-container {
       margin-left: 0px !important;
       @apply block ml-md;
     }
+
     .breadcrumb {
       @apply mb-lg;
       margin-left: 0;
     }
+
     .card-home {
       width: 270px;
       margin-right: 10px;
       margin-bottom: 10px;
     }
+
     .card-home-hrms {
       width: 405px;
       padding: 0px;
       margin-right: 16px;
       margin-bottom: 16px;
     }
+
     .main {
       display: flex;
       flex-direction: column;
@@ -519,6 +577,7 @@
       margin-left: 64px;
       width: calc(100%-83px);
     }
+
     .citizen-home-container {
       display: flex;
       flex-direction: unset !important;
@@ -527,9 +586,11 @@
       padding-top: 58px;
     }
   }
-  #main-img{      
-    content:url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
-} 
+
+  #main-img {
+    content: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
+  }
+
   .citizen {
     .main {
       width: 100%;
@@ -539,87 +600,102 @@
       display: flex !important;
     }
 
-    .center-container {
-    }
+    .center-container {}
   }
- 
-}
 
-@media only screen and (max-width:950px){
-  #main-img{      
-    content:url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
-  }
- #login-conference-table{
-  position:relative;
-   z-index:1;
-   width:75%;
-   height:115%;
-   margin:12%;
-   margin-top:25%
 }
-.loginConference{
+
+@media only screen and (max-width:950px) {
+  #main-img {
+    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
+  }
+
+  #login-conference-table {
+    position: relative;
+    z-index: 1;
+    width: 75%;
+    height: 115%;
+    margin: 12%;
+    margin-top: 25%
+  }
+
+  .loginConference {
     position: absolute;
     height: 100%;
     width: 100%;
     font-weight: 700;
     display: flex;
     flex-direction: column;
-}
-.employee .login-banner-wrapper{
-  padding-top: 0vh;
-  
-}
-.psuedo-banner{
-  font-size: 4vw;
-}
-.banner-slogan{
-  font-size: 3.5vw;
-}
-}
+  }
+
+  .employee .login-banner-wrapper {
+    padding-top: 0vh;
+
+  }
 
-@media screen and (min-width:768){
+  .psuedo-banner {
+    font-size: 4vw;
+  }
 
-   #login-conference-table{
-  position:absolute;
-   z-index:1;
-   width:40%;
-   height:30%;
-   margin:12%;
-   margin-top:25%
-} 
+  .banner-slogan {
+    font-size: 3.5vw;
+  }
 }
-@media only screen and (max-width:500px){
-  #main-img{      
-    content:url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
-  }
- #login-conference-table{
-  position:relative;
-   z-index:1;
-   width:75%;
-   height:80%;
-   margin:12%;
-   margin-top:25%
+
+@media screen and (min-width:768) {
+
+  #login-conference-table {
+    position: absolute;
+    z-index: 1;
+    width: 40%;
+    height: 30%;
+    margin: 12%;
+    margin-top: 25%
+  }
 }
-.loginConference{
+
+@media only screen and (max-width:500px) {
+  #main-img {
+    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
+  }
+
+  #login-conference-table {
+    position: relative;
+    z-index: 1;
+    width: 75%;
+    height: 80%;
+    margin: 12%;
+    margin-top: 25%
+  }
+
+  .loginConference {
     position: absolute;
     height: 100%;
     width: 100%;
     font-weight: 700;
     display: flex;
     flex-direction: column;
+  }
+
+  .employee .psuedo-banner {
+    font-size: 1.2rem;
+  }
+
+  .employee .banner-slogan {
+    font-size: 0.8rem;
+  }
 }
-.employee .psuedo-banner{
-  font-size: 1.2rem;
-}
-.employee .banner-slogan{
-  font-size: 0.8rem;
-}
-}
-@media only screen and (min-width:300px)
-{
-.employee .card-home{
-height: 220px;
-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;
+
+@media only screen and (min-width:300px) {
+  .employee .card-home {
+    height: 220px;
+    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;
+  }
 }
+
+
+
+.actions.search-icon-wrapper svg:hover {
+  fill: #fff !important;
 }