@djb25/digit-ui-css 1.0.0 → 1.0.1

package/src/pages/employee/index.scss

@@ -1,50 +1,41 @@
 @import "./login.scss";
-
 /* TODO: convert using tailwind */
 .employee {
   .breadcrumb {
     @apply ml-sm mb-lg;
   }
-
   .ground-container {
     margin-bottom: 56px;
-    margin-left: 0;
-    margin-right: 0;
-    /* @apply flex flex-col; */
+    margin-left: 0px;
+    @apply flex flex-col;
   }
-
   .card-home {
     font-size: 16px;
-    /* padding: 0 0 16px 0; */
-    /* width: 23%; */
-    border-radius: 10px;
+    padding: 0 0 16px 0;
+    width: 92vw;
     display: inline-block;
     margin: 8px auto;
-    cursor: pointer;
-    overflow: hidden;
-    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }
-
-  .card-home:hover {
-    box-shadow: 0px 6px 0 0px #764ba2;
+  .home-action-cards {
+    height: auto !important;
+    min-height: 263px;
   }
-
   .topbar {
     position: fixed;
     top: 0;
     width: 100%;
-    padding: 10px 24px;
-    background: white;
-    box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
+    padding: 16px 24px;
+    background: #ffffff;
+    box-shadow: 0 1px 4px #b1b4b6;
     z-index: 9999;
 
     img {
       display: inline;
 
       &.city {
-          margin-right: 8px;
-          height: 60px;
-          margin-left: 53px;
+        margin-right: 8px;
+        height: 48px;
+        width: 48px;
       }
 
       &.state {
@@ -61,10 +52,9 @@
     .right {
       float: right;
       margin-top: 12px;
-      margin-right: 53px;
 
       .user-img-txt {
-        background: theme(colors.primary.main);
+        background: #a82227;
         padding: 10px 15px;
         border-radius: 50%;
         color: white;
@@ -77,16 +67,73 @@
     padding-top: 88px;
   }
 
+.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{
+    min-width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+}
+.loginConference{
+    position: relative;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+
+}
+.login-banner-wrapper{
+    position: relative;
+    color: white;
+    float: right;
+    z-index: 999;
+    height: 100%;
+    padding-top: 35vh;
+    margin-right: 2%;
+    text-align: right;
+    font-family: none;
+}
+
   .react-time-picker {
     width: 100%;
   }
 
   .react-time-picker__wrapper {
-    border: 1px solid theme(colors.inputBorder);
+    border: 1px solid #464646;
   }
 
   .react-time-picker__clock {
@@ -109,89 +156,92 @@
     padding-left: 8px;
   }
 }
-
+#login-conference-table{
+  position:absolute;
+   z-index:1;
+   width:36vw;
+   height:62vh;
+   margin-top:20vh;
+   margin-left: 2vw;
+}
+.banner-slogan{
+  padding-top: 10%;
+}
+.psuedo-banner span{
+  color: #fdd049;
+} 
+.login-banner-wrapper .psuedo-banner{
+  font-size: 2.2rem;
+}
+.login-banner-wrapper .banner-slogan{
+  font-size: 1.5rem;
+}
 .citizen {
   .main {
     padding-top: 82px;
-    min-height: calc(100vh - 90px);
+    min-height: calc(100vh - 48px);
+    display: flex !important;
   }
 }
-
 .citizen,
 .employee {
   .sidebar {
     position: fixed;
     left: 0;
-    background: #0B4B66;
     height: 100%;
-    color: theme(colors.white);
-    margin-top: 83px;
-    z-index: 10000;
+    color: #ffffff;
+    margin-top: 80px;
+    z-index: 999;
     transition: 0.3s ease all;
     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-blend-mode: lighten;
+    background-size: cover;
+
 
     .actions {
       cursor: pointer;
       display: flex;
       align-items: center;
-
       .tooltip {
         margin-left: 16px;
       }
-
-      margin-bottom: 0px;
     }
 
     svg {
       width: 24px;
       height: 24px;
-      fill: theme(colors.white);
+      fill: #ffffff;
     }
-
     a {
       display: flex;
     }
-
     .sidebar-link {
       display: flex;
-      color: theme(colors.white);
+      color: #ffffff;
       justify-content: space-between;
       align-items: center;
       padding: 20px;
       font-size: 14px;
-
-      &.level-0 {
-        margin: 0 0.3rem 0 0.3rem;
-
-        &.select-level {
-          border-top: 1px solid;
-          border-bottom: 1px solid;
-        }
-      }
-
       &.active {
-        color: theme(colors.primary.main) !important;
-
-        border-right: none;
+        color: #a82227 !important;
 
+        border-right: 4px solid #a82227;
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: #a82227 !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;
@@ -200,93 +250,67 @@
       }
 
       svg {
-        fill: theme(colors.white) !important;
+        fill: #ffffff !important;
         width: 21px;
         height: 21px;
       }
 
       &:hover {
-
-        background-color: #0B4B66;
+        color: #a82227 !important;
+        background-color: #486480;
 
         cursor: pointer;
-
+        svg {
+          fill: #a82227 !important;
+        }
       }
-
       .search-icon-wrapper {
-        border: 2px solid theme(colors.white);
-        border-radius: 4px;
-        padding: 5px;
-
         svg {
-          fill: theme(colors.white) !important;
+          fill: #ffffff !important;
           width: 21px;
           height: 21px;
-
           path {
-            fill: theme(colors.white) !important;
+            fill: #ffffff !important;
           }
         }
       }
     }
-
     .dropdown-link {
       height: 40px;
       display: flex;
       margin-left: 40px;
       align-items: center;
       text-decoration: none;
-      color: theme(colors.white);
+      color: #ffffff;
       font-size: 14px;
-
       .actions {
         .tooltiptext {
           left: unset;
           right: 1%;
         }
       }
-
       svg {
         width: 20px;
         height: 20px;
-        fill: theme(colors.white);
+        fill: #ffffff;
       }
-
       &:hover {
-        background-color: #6A8E9D;
-        opacity: 0.8;
+        color: #fe7a51 !important;
+        background-color: #486480;
         cursor: pointer;
-
         svg {
           fill: #fe7a51 !important;
         }
       }
-
-
       &.active {
-        border-left: 4px solid theme(colors.primary.main);
-
-        &.level-0 {}
-
-        &.level-1 {
-          border-left: 8.5px solid theme(colors.primary.main);
-        }
-
-        &.level-2 {
-          border-left: 4px solid theme(colors.primary.main);
-        }
-
-        &.level-3 {}
-
-        color: theme(colors.primary.main) !important;
-        border-right: none;
+        color: #a82227 !important;
 
+        border-right: 4px solid #a82227;
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: #a82227 !important;
         }
       }
     }
-
     span {
       margin-left: 16px;
       text-overflow: ellipsis;
@@ -301,7 +325,7 @@
     padding-top: 10px;
 
     .containerStyles {
-      border: 1px solid theme(colors.text.secondary);
+      border: 1px solid #505a5f;
       padding: 16px;
       margin-bottom: 20px;
     }
@@ -316,7 +340,7 @@
   }
 
   .tableContainerStyles {
-    border: 1px solid theme(colors.text.secondary);
+    border: 1px solid #505a5f;
     padding: 16px;
     margin-bottom: 20px;
   }
@@ -389,7 +413,6 @@
   .sidebar {
     margin-top: 54px;
     min-width: 200px;
-
     .actions {
       display: flex;
       align-items: center;
@@ -406,66 +429,96 @@
   }
 }
 
-.RightMostTopBarOptions {
-  @apply flex;
-
-  .EventNotificationWrapper {
-    @apply relative cursor-pointer ml-md;
-
-    span {
+.RightMostTopBarOptions{
+  @apply flex float-right;
+  display: flex;
+  .EventNotificationWrapper{
+    @apply relative cursor-pointer;
+    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: theme(colors.white);
+      fill: #ffffff;
     }
   }
 }
 
+
+.fullWidth {
+  width: 100%;
+}
+
+.multi-select-container {
+  .disposal-text {
+    @apply font-bold;
+  }
+
+  .disposal-info {
+    @apply my-md ml-sm;
+  }
+
+  .disposal-action-bar {
+    @apply flex justify-between items-center;
+  }
+}
+
+@screen dt {
+  .d-grid {
+    display: flex-root;
+    grid-template-columns: 250px 250px 250px 250px;
+    column-gap: 10px;
+    row-gap: 2px;
+    margin-left: -12px;
+  }
+
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mb-50{
+  margin-bottom: 50px;
+}
+.mb-25{
+  margin-bottom: 25px;
+}
 @media (min-width: 640px) {
   .employee {
     .ground-container {
-      /* @apply block; */
-      margin-left: 72px;
-      margin-right: 72px;
+      margin-left: 0px !important;
+      @apply block ml-md;
     }
-
     .breadcrumb {
       @apply mb-lg;
       margin-left: 0;
     }
-
     .card-home {
-      /* width: 23%; */
+      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;
       padding-top: 80px;
-     /* margin-left: 72px; */
-     /* width: calc(100%-83px); */
-     }
-
+      margin-left: 64px;
+      width: calc(100%-83px);
+    }
     .citizen-home-container {
       display: flex;
       flex-direction: unset !important;
@@ -474,148 +527,99 @@
       padding-top: 58px;
     }
   }
-
+  #main-img{      
+    content:url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
+} 
   .citizen {
     .main {
       width: 100%;
-      padding-top: 58px;
-      height: 100%;
-      display: flex;
-      justify-content: center;
+      padding-top: 80px;
+      min-height: calc(100vh - 48px);
+      margin-bottom: 18px !important;
+      display: flex !important;
     }
 
-    .center-container {}
+    .center-container {
+    }
   }
+ 
 }
 
-.fullWidth {
-  width: 100%;
+@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%
 }
-
-.multi-select-container {
-  .disposal-text {
-    @apply font-bold;
-  }
-
-  .disposal-info {
-    @apply my-md ml-sm;
-  }
-
-  .disposal-action-bar {
-    @apply flex justify-between items-center;
-  }
+.loginConference{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+    display: flex;
+    flex-direction: column;
 }
-
-@screen dt {
-  .d-grid {
-    display: grid;
-    grid-template-columns: 250px 250px 250px 250px;
-    column-gap: 10px;
-    row-gap: 2px;
-    margin-left: -12px;
-  }
+.employee .login-banner-wrapper{
+  padding-top: 0vh;
+  
 }
-
-.m-auto {
-  margin: auto !important;
+.psuedo-banner{
+  font-size: 4vw;
 }
-
-.mb-50 {
-  margin-bottom: 50px;
+.banner-slogan{
+  font-size: 3.5vw;
 }
-
-.mb-25 {
-  margin-bottom: 25px;
 }
 
-.back-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .top-back-btn {
-    margin-bottom: 0px;
-    color: theme(colors.white);
-    margin-right: 1em;
+@media screen and (min-width:768){
 
-    & svg {
-      fill: theme(colors.white);
-    }
-  }
-
-  .hambuger-back-wrapper {
-    display: flex;
-
-    @media (min-width: 780px) {
-      .hamburger-span {
-        display: none;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .back-wrapper {
-    margin-right: 2rem;
-    margin-left: 2rem;
-  }
+   #login-conference-table{
+  position:absolute;
+   z-index:1;
+   width:40%;
+   height:30%;
+   margin:12%;
+   margin-top:25%
+} 
 }
-
-.user-profile {
-  @media (min-width: 780px) {
-    width: calc(100% - 219px);
-    margin-left: 16px;
-    margin-right: 16px;
-  }
+@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%
 }
-
-.link {
-  a {
-    color: inherit;
-    text-decoration: inherit
-  }
+.loginConference{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+    display: flex;
+    flex-direction: column;
 }
-
-.breadcrumb {
-  a {
-    color: inherit;
-    text-decoration: inherit
-  }
+.employee .psuedo-banner{
+  font-size: 1.2rem;
 }
-
-.sidebar-link.active {
-  .custom-link {
-    text-decoration: none;
-
-    div {
-      span {
-        color: theme(colors.primary.main) !important;
-        text-decoration: none;
-      }
-    }
-  }
+.employee .banner-slogan{
+  font-size: 0.8rem;
 }
-
-.bread-crumb {
-  a {
-    color: inherit;
-    text-decoration: inherit
-  }
 }
-
-.sidebar-link {
-  .custom-link {
-    text-decoration: none;
-
-    div {
-      span {
-        color: theme(colors.white);
-        text-decoration: none;
-      }
-    }
-  }
+@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;
 }
-
-/* TODO fix required NABEEL/ANIL for home screen card */
-.customEmployeeCard {
-  @apply m-sm !important;
 }