@entit/digit-ui-css 2.0.0 → 2.0.1

package/src/pages/employee/index.scss

@@ -6,7 +6,6 @@
   }
   .ground-container {
     margin-bottom: 56px;
-    margin-left: 0px;
     @apply flex flex-col;
   }
   .card-home {
@@ -16,17 +15,13 @@
     display: inline-block;
     margin: 8px auto;
   }
-  .home-action-cards {
-    height: auto !important;
-    min-height: 263px;
-  }
   .topbar {
     position: fixed;
     top: 0;
     width: 100%;
     padding: 16px 24px;
-    background: #ffffff;
-    box-shadow: 0 1px 4px #b1b4b6;
+    background: white;
+    box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
     z-index: 9999;
 
     img {
@@ -54,7 +49,7 @@
       margin-top: 12px;
 
       .user-img-txt {
-        background: #a82227;
+        background: #f47738;
         padding: 10px 15px;
         border-radius: 50%;
         color: white;
@@ -67,67 +62,10 @@
     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%;
   }
@@ -156,207 +94,76 @@
     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 - 48px);
-    display: flex !important;
+    min-height: calc(100vh - 90px);
   }
 }
+
 .citizen,
 .employee {
   .sidebar {
     position: fixed;
     left: 0;
+    padding: 20px 0;
+    background: #22394d;
     height: 100%;
-    color: #ffffff;
+    color: white;
     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;
-
+    z-index: 1000;
 
     .actions {
       cursor: pointer;
-      display: flex;
-      align-items: center;
-      .tooltip {
-        margin-left: 16px;
-      }
-    }
-
-    svg {
-      width: 24px;
-      height: 24px;
-      fill: #ffffff;
-    }
-    a {
-      display: flex;
-    }
-    .sidebar-link {
-      display: flex;
-      color: #ffffff;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20px;
-      font-size: 14px;
-      &.active {
-        color: #a82227 !important;
-
-        border-right: 4px solid #a82227;
-        svg {
-          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;
-          }
-        }
-      }
-
-      svg {
-        fill: #ffffff !important;
-        width: 21px;
-        height: 21px;
-      }
-
-      &:hover {
-        color: #a82227 !important;
-        background-color: #486480;
+      padding: 0 20px;
+      margin-bottom: 32px;
 
-        cursor: pointer;
-        svg {
-          fill: #a82227 !important;
-        }
-      }
-      .search-icon-wrapper {
-        svg {
-          fill: #ffffff !important;
-          width: 21px;
-          height: 21px;
-          path {
-            fill: #ffffff !important;
-          }
-        }
-      }
-    }
-    .dropdown-link {
-      height: 40px;
-      display: flex;
-      margin-left: 40px;
-      align-items: center;
-      text-decoration: none;
-      color: #ffffff;
-      font-size: 14px;
-      .actions {
-        .tooltiptext {
-          left: unset;
-          right: 1%;
-        }
-      }
-      svg {
-        width: 20px;
-        height: 20px;
-        fill: #ffffff;
-      }
-      &:hover {
-        color: #fe7a51 !important;
-        background-color: #486480;
-        cursor: pointer;
-        svg {
-          fill: #fe7a51 !important;
-        }
-      }
       &.active {
-        color: #a82227 !important;
-
-        border-right: 4px solid #a82227;
-        svg {
-          fill: #a82227 !important;
-        }
+        border-right: 4px solid #f47738;
+        padding-right: 16px;
       }
     }
-    span {
-      margin-left: 16px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
   }
 
   .wrapperStyles {
     margin-top: -5px;
     padding-left: 20px;
     padding-top: 10px;
-
+  
     .containerStyles {
-      border: 1px solid #505a5f;
+      border: 1px solid #505A5F;
       padding: 16px;
       margin-bottom: 20px;
     }
-
+  
     &.leftBorder {
       border-left: 2px solid rgba(0, 0, 0, 0.12);
     }
   }
-
+  
   .rowContainerStyles {
     @apply flex flex-col;
   }
-
+  
   .tableContainerStyles {
-    border: 1px solid #505a5f;
+    border: 1px solid #505A5F;
     padding: 16px;
     margin-bottom: 20px;
   }
-
+  
   .historyTables {
     display: grid;
     grid-template-rows: 100px 100px;
-    grid-template-columns: repeat(5, minmax(100px, 1fr));
+    grid-template-columns: repeat(5, minmax(100px, 1fr)); 
   }
-
+  
   .historyContent {
     margin: 0 10px;
     position: relative;
     padding-bottom: 5px;
   }
-
+  
   .historyCheckpoint {
     background-color: #fe7a51;
     border-radius: 100%;
@@ -366,12 +173,12 @@
     position: relative;
     left: -9px;
     top: 4px;
-
+  
     &.zIndex {
       z-index: 10;
     }
   }
-
+  
   .historyTableDateLabel {
     color: rgba(0, 0, 0, 0.87);
     font-size: 16px;
@@ -380,12 +187,13 @@
     text-align: left;
     display: inline-block;
     padding-top: 5px;
+  
   }
-
+  
   .bottomMargin {
     margin-bottom: 0px;
   }
-
+  
   .historyTableDate {
     color: rgba(0, 0, 0, 0.87);
     font-size: 19px;
@@ -395,12 +203,12 @@
     display: inline-block;
     padding-top: 10px;
   }
-
+  
   .historyHorizontalBar {
     background-color: rgba(0, 0, 0, 0.12);
     width: auto;
     height: 2px;
-    margin-left: 16px;
+    margin-left: 16px
   }
 
   .smallText {
@@ -422,7 +230,7 @@
 }
 
 .link {
-  @apply text-primary-main cursor-pointer;
+  @apply text-primary-main cursor-pointer ;
 
   :hover {
     @apply text-primary-dark;
@@ -430,71 +238,23 @@
 }
 
 .RightMostTopBarOptions{
-  @apply flex float-right;
-  display: flex;
+  @apply inline-block float-right;
   .EventNotificationWrapper{
     @apply relative cursor-pointer;
     span{
       top: -10px;
       right: -10px;
       @apply absolute bg-error h-5 w-5 rounded-full text-center;
-      p {
+      p{
         line-height: 20px;
       }
     }
   }
-  .select-wrap {
-    margin-bottom: unset;
-    svg {
-      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 {
-      margin-left: 0px !important;
       @apply block ml-md;
     }
     .breadcrumb {
@@ -503,8 +263,8 @@
     }
     .card-home {
       width: 270px;
-      margin-right: 10px;
-      margin-bottom: 10px;
+      margin-right: 16px;
+      margin-bottom: 16px;
     }
     .card-home-hrms {
       width: 405px;
@@ -513,113 +273,65 @@
       margin-bottom: 16px;
     }
     .main {
-      display: flex;
-      flex-direction: column;
       padding-top: 80px;
-      margin-left: 64px;
+      margin-left: 72px;
       width: calc(100%-83px);
     }
-    .citizen-home-container {
-      display: flex;
-      flex-direction: unset !important;
-      width: unset !important;
-      margin-left: unset !important;
-      padding-top: 58px;
-    }
   }
-  #main-img{      
-    content:url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
-} 
+
   .citizen {
     .main {
+      gap: 0.3rem;
       width: 100%;
       padding-top: 80px;
-      min-height: calc(100vh - 48px);
-      margin-bottom: 18px !important;
-      display: flex !important;
+      padding-left: 16px;
+      min-height: calc(100vh - 40px);
     }
 
     .center-container {
+      width: 70%;
+      margin: 0 auto;
     }
   }
- 
 }
 
-@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;
-}
+.fullWidth {
+  width: 100%;
 }
 
-@media screen and (min-width:768){
+.multi-select-container {
+  .disposal-text {
+    @apply font-bold;
+  }
+
+  .disposal-info {
+    @apply my-md ml-sm;
+  }
 
-   #login-conference-table{
-  position:absolute;
-   z-index:1;
-   width:40%;
-   height:30%;
-   margin:12%;
-   margin-top:25%
-} 
-}
-@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;
+  .disposal-action-bar {
+    @apply flex justify-between items-center;
+  }
 }
-.employee .psuedo-banner{
-  font-size: 1.2rem;
+
+@screen dt {
+  .d-grid {
+    display: grid;
+    grid-template-columns: 250px 250px 250px 250px;
+    column-gap: 10px;
+    row-gap: 2px;
+    margin-left: -12px;
+  }
+
 }
-.employee .banner-slogan{
-  font-size: 0.8rem;
+
+.m-auto {
+  margin: auto !important;
 }
+
+.mb-50{
+  margin-bottom: 50px;
 }
-@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;
+.mb-25{
+  margin-bottom: 25px;
 }
-}
+