@entit/digit-ui-css 1.5.6

package/src/pages/employee/dss.scss

@@ -0,0 +1,116 @@
+.dss-switch-tabs{/* Card / Primary */
+
+/* Light Theme / Paper */
+
+background: #FFFFFF;
+/* Card-Shadow */
+
+box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+border-radius: 4px;
+margin-bottom:3%;
+margin-right:25px;
+}
+
+.dss-header-label{
+  font-weight: 600 !important;
+  font-size: 22px !important;
+  white-space: pre-line;
+}
+.dss-switch-tab-wrapper{
+    cursor:pointer;
+    display: flex;
+    flex-direction: row;
+    height: 50px;
+    align-items: center;
+}
+
+.dss-switch-tab-selected{
+  /* Revenue */
+  border-bottom: 3px solid #f47738;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 22px;
+  color: #f47738;
+  padding: 7px 24px;
+
+}
+.dss-switch-tab-unselected{
+
+font-family: Roboto;
+font-style: normal;
+font-weight: 500;
+font-size: 22px;
+color: #505A5F;
+padding: 8px 24px;
+
+}
+
+.dss-table-subheader{
+  position: relative;
+    top: -7px;
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(80, 90, 95, 1);
+}
+
+.dss-pie-subheader{
+  position: relative;
+    top: -7px;
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(80, 90, 95, 1);
+}
+
+.recharts-legend-item{
+  margin-bottom: 20px !important;
+  white-space: pre;
+}
+
+@media screen and (max-width: 768px) {
+  .dss-switch-tabs{/* Card / Primary */
+    margin-right:0px;
+  }
+}
+
+.dss-white-pre{
+  white-space: pre;
+
+}
+.dss-white-pre-line{
+  white-space: pre-line;
+
+}
+.dss-white-pre-temp{
+  white-space: pre-line;
+
+}
+
+.multi-select-dropdown-wrap{
+  .master{
+    .label{
+      p{
+        white-space:pre;
+      }
+    }
+  }
+}
+
+.divToBeHidden{
+  display:block;
+}
+
+.divWillGetHidden{
+  display:none;
+}
+
+.dss-temp-white-pre{
+  white-space: pre;
+}
+
+.dss-input-active-border{
+--border-opacity: 1;
+border: 1px solid #f47738 !important;
+border-color: rgba(244, 119, 56, var(--border-opacity));
+}
+

package/src/pages/employee/form-fields.scss

@@ -0,0 +1,13 @@
+.form-field{
+    @apply w-full
+}
+
+@screen dt {
+    .form-field{
+        @apply w-1/2
+    }
+
+    .desktop-w-full{
+        @apply w-full !important   
+    }
+}

package/src/pages/employee/iframe.scss

@@ -0,0 +1,66 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background: #f4f7fb;
+  }
+  
+  
+  .app-container-iframe {
+    border-width: 0px;
+    div[class^="MuiCircularProgress"] {
+      position: sticky;
+      top: 90%;
+      left: 50%;
+    }
+    div[role^="progressbar"] {
+      left: 50%;
+      position: sticky;
+    }
+  }
+  
+  @media only screen and (min-width: 953px) {
+    .app-container-iframe {
+      border-width: 0px;
+      position: fixed;
+      width: 83.5%;
+      height: calc(100vh - 64px);
+    }
+  }
+
+  
+  @media (max-width: 768px) {
+    .app-container-iframe {
+        border-width: 0;
+        width: 100vw;
+        height: 100vh;
+        margin: 32px 0 0 0;
+    }
+  }
+  @media (max-width: 375px) {
+  .app-container-iframe {
+        border-width: 0;
+        width: 100vw;
+        height: 100vh;
+        margin: 32px 0 0 0;
+    }
+  }
+  
+.app-iframe-wrapper{
+  left: 64px;
+   border-width: 0;
+    position: fixed;
+    top: 80px;
+}
+  .app-iframe{
+    width: 97%;
+    height: calc(100vh - 90px);
+    border-width: 0;
+    position: fixed;
+  }
+  @media (max-width: 768px) {
+    
+  .app-iframe-wrapper{
+  left: 0px;
+  }
+  }

package/src/pages/employee/inbox.scss

@@ -0,0 +1,455 @@
+.complaint-links-container {
+  @apply bg-white;
+  border-radius: 4px;
+  .header {
+    @apply flex items-center border-b border-border justify-between;
+
+    .logo {
+      width: 56px;
+      height: 56px;
+      @apply bg-focus;
+      padding: 12px;
+      border-radius: 4px;
+      svg {
+        @apply w-8 h-8;
+      }
+    }
+
+    .text {
+      @apply pl-md text-heading-m font-bold;
+    }
+  }
+
+  .body {
+    padding: 10px;
+    @apply flex items-start flex-col;
+    margin-left: 46px;
+
+    .link {
+      @apply p-sm text-primary-main items-center;
+      display: flex !important;
+    }
+
+    .inbox-total {
+      padding: 4px;
+      display: table;
+      @apply whitespace-normal text-center text-white w-8 h-8 bg-primary-main rounded-full ml-xs;
+    }
+  }
+
+  .links-wrapper {
+    @apply pl-md py-sm text-text-btn;
+    .link {
+      padding: 0 !important;
+      padding-bottom: 4px !important;
+      svg {
+        @apply ml-sm;
+      }
+    }
+  }
+}
+
+.MobilePopupHeadingWrapper{
+  @apply flex place-content-between mb-md;
+  h2{
+    @apply text-heading-l font-bold;
+  }
+}
+
+.filter-button {
+  @apply text-primary-main;
+  &:hover {
+    @apply text-primary-dark cursor-pointer;
+  }
+}
+
+.employeeCard-info-box {
+  @apply flex justify-end ml-md;
+  background-color: #fafafa;
+  div {
+    margin-right: 32px;
+    span:nth-child(2) {
+      @apply font-bold;
+      color: #4f5a5f;
+    }
+  }
+  .employeeCard-info-data {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.filter-form {
+  .filter-card {
+    @apply bg-white min-h-full;
+    padding: 10px;
+
+    .heading {
+      justify-content: unset ;
+      @apply flex ;
+
+      .clearAll {
+        display: none;
+      }
+    }
+
+    .filter-label {
+      @apply font-bold text-heading-l flex gap-3;
+      padding-bottom: 6px;
+      svg{
+        fill: #0b0c0c
+      }
+    }
+    .sub-filter-label{
+      font-weight: 400;
+      font-size: 16px;
+    }
+  }
+  .filter-form-field{
+    p{
+      @apply text-form-field text-text-primary block mb-md;
+    }
+  }
+}
+
+.inbox-container {
+  .filters-container {
+    .filter {
+      .filter-card {
+        @apply bg-white;
+        padding: 10px;
+        .filter-card-close-button{
+          @apply flex flex-row-reverse;
+        }
+        .heading {
+          @apply flex justify-between;
+
+          .clearAll {
+            display: none;
+          }
+        }
+
+        .filter-label {
+          @apply text-heading-m block flex gap-3 items-center;
+          padding-bottom: 6px;
+          svg{
+            fill: #0b0c0c
+          }
+        }
+
+        .sub-filter-label{
+          font-weight: 400;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .search-complaint-container {
+      @apply items-center bg-white p-md;
+
+      .complaint-input-container {
+        @apply w-full;
+        .complaint-input {
+          @apply flex flex-col;
+
+          .clear-search {
+            @apply text-focus;
+            display: none;
+            &:hover {
+              color: #003078;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .mobile-input {
+        }
+      }
+    }
+  }
+
+  .status-container {
+    margin-bottom: 50px;
+  }
+}
+
+.clear-search,
+.clear-search .link-label {
+  @apply text-focus;
+  @apply block;
+  cursor: pointer;
+  &:hover {
+    color: #000;
+  }
+}
+.button-clear {
+  @apply text-focus text-body-s-dt;
+}
+
+.inbox-count {
+  @apply inline ml-sm p-sm bg-primary-main rounded-full text-white text-heading-s align-middle text-center font-regular;
+}
+
+@screen dt {
+  .complaint-links-container {
+    @apply bg-white;
+
+    .header {
+      @apply flex items-center border-b border-border;
+
+      .logo {
+        @apply bg-focus;
+        padding: 12px;
+        border-radius: 4px;
+      }
+
+      .text {
+        @apply pl-md text-heading-m-dt font-bold;
+      }
+    }
+
+    .body {
+      padding: 10px;
+      @apply flex items-start flex-col;
+      margin-left: 46px;
+
+      .link {
+        @apply p-sm text-primary-main;
+      }
+    }
+  }
+
+  .inboxLinks {
+    margin: 0 !important;
+    padding: 0 !important;
+    .header {
+      border: none;
+      @apply justify-start;
+      .logo {
+        @apply bg-white;
+        svg {
+          path {
+            fill: #f47738;
+          }
+        }
+      }
+    }
+    .body {
+      margin-left: 0;
+    }
+  }
+
+  .filter-form {
+    .filter-card {
+      @apply p-md bg-white;
+
+      .heading {
+        @apply flex justify-between;
+      }
+
+      .label {
+        @apply text-heading-s;
+      }
+    }
+  }
+
+  .inbox-container {
+    @apply flex;
+
+    .filters-container {
+      width: 270px;
+
+      .filter {
+        @apply mt-md;
+
+        .filter-card {
+          @apply p-md bg-white;
+
+          .heading {
+            @apply flex justify-between;
+          }
+
+          .label {
+            @apply text-heading-s;
+          }
+        }
+      }
+    }
+
+    .search-container {
+      width: 874px;
+
+      .search-complaint-container {
+        margin: auto;
+        @apply flex flex-col items-start  mb-md bg-white p-md;
+
+        .complaint-header {
+          display: flex;
+          @apply flex justify-between w-full;
+          margin-bottom: 20px;
+        }
+
+        .complaint-input-container {
+          /* display: inline-block !important; */
+          display: grid;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+
+          &.for-pt {
+            &.for-search {
+              grid-template-columns: 25% 25% 25% 25%;
+
+              .input-fields:nth-child(3n) {
+                @apply mr-md !important;
+              }
+
+              .input-fields:nth-child(4n) {
+                margin-right: 0 !important;
+              }
+
+              .search-submit-wrapper {
+                grid-column: 4/5;
+                /* margin-top: 56px;*/
+                max-width: unset;
+                margin-left: unset;
+              }
+            }
+          }
+
+          .search-submit-wrapper {
+            grid-column: 3/4;
+            margin-left: 50%;
+            max-width: 50%;
+            grid-column: 3/4;
+            @apply flex flex-col justify-center text-center;
+
+            .submit-bar-search {
+              margin-top: unset;
+              width: 100%;
+              margin-bottom: 20px;
+              margin-left: unset;
+              max-width: 100%;
+              width: 100%;
+            }
+          }
+
+    
+          .input-fields {
+            /*width: calc(50% - 16px);*/
+
+            @apply inline-block mr-md !important;
+
+            .inbox-search-form-error {
+              padding-top: 0;
+              margin-top: 0;
+              @apply absolute;
+            }
+          }
+
+          .input-fields:nth-child(3n) {
+            margin-right: 0 !important;
+          }
+
+          .complaint-input {
+            @apply flex flex-col;
+
+            .clear-search {
+              @apply text-focus;
+              @apply block;
+              cursor: pointer;
+              &:hover {
+                color: #003078;
+                cursor: pointer;
+              }
+            }
+          }
+
+          .mobile-input {
+            @apply ml-sm;
+          }
+        }
+
+      
+
+        .search-action-wrapper {
+          width: 33%;
+          margin-top: 28px;
+          @apply inline-block align-middle text-center;
+          button {
+            margin: 0;
+            width: 100%;
+            max-width: 300px !important;
+          }
+        }
+      }
+
+      .search-complaint-container-for-search {
+      }
+    }
+  }
+}
+
+.document-clear-all{
+  grid-area: 2/2;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 16px;
+  align-items: center;
+}         
+
+
+
+.cell-text {
+  color: #505a5f;
+}
+
+.sla-cell-error {
+  color: #d4351c;
+  background-color: rgba(212, 53, 28, 0.12);
+  padding: 0 24px;
+  border-radius: 11px;
+}
+
+.sla-cell-success {
+  color: #00703c;
+  background-color: rgba(0, 112, 60, 0.12);
+  padding: 0 24px;
+  border-radius: 11px;
+}
+
+.complain-no-cell-text {
+  margin-top: "4px";
+  color: "#505A5F";
+}
+
+.search-error-label {
+  @apply font-bold text-legend text-error mb-sm !important;
+}
+
+.inbox-action-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.complaint-links-container .header .removeHeight {
+  line-height: 28px;
+}
+
+@screen dt {
+  .complaint-links-container .header .removeBorderRadiusLogo {
+    border-radius: 2px !important;
+  }
+}
+@screen dt {
+  .customEmployeeCard {
+    width: 273px !important;
+    height: 263px !important;
+  }
+}
+.employeeTotalLink{
+  color: #505A5F;
+  font-size: 16px;
+}
+
+.inboxLinksFSM {
+  margin: 0 !important;
+}