@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

package/src/components/order-daily-overview/table/table-data/styles.ts

@@ -1,635 +0,0 @@
-import styled from 'styled-components';
-
-export const ColumStyle = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-`;
-
-export const GreyBox = styled.div`
-  display: flex;
-  padding: 3px 12px;
-  align-items: flex-start;
-  gap: 24px;
-  border-radius: 6px;
-  background: rgba(153, 153, 153, 0.1);
-`;
-// Styled components
-export const StyledTableWrapper = styled.div`
-  overflow-x: auto;
-  max-height: calc(100vh - 396px);
-  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
-  &::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 100px;
-    height: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #777;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #7b61ff;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #7b61ff;
-  }
-`;
-
-export const StyledTable = styled.table`
-  border-spacing: 0 10px;
-  width: 100%;
-  table-layout: fixed;
-  /* min-width: 1600px; */
-  thead {
-    position: sticky;
-    top: 10px;
-    z-index: 1;
-    background: #fff;
-    box-shadow: 0px 0px 1px #ffffff, 0px -10px 1px #ffffff;
-    tr {
-      border-radius: 40px;
-      border-spacing: 0 10px;
-      font-family: 'lato', sans-serif;
-      .emailInvoiceCheckbox {
-        padding-right: 0px;
-        width: 0;
-        > div {
-          width: fit-content;
-        }
-      }
-      .emailInvoiceNo {
-        padding-left: 12px;
-      }
-      .emailInvoiceShare {
-        width: 100px;
-      }
-      th {
-        color: #3a3630;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        padding: 11px 15px;
-        background: #f0f2f2;
-        border-right: none;
-        border-left: none;
-        text-align: left;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        border-width: 1px 0;
-        &:first-child {
-          border-radius: 100px 0 0 100px;
-          border-left: 1px solid rgba(0, 0, 0, 0.08);
-        }
-        &:last-child {
-          border-radius: 0px 100px 100px 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-  }
-  tbody {
-    max-height: 400px;
-    overflow-y: auto;
-    tr {
-      td {
-        color: #3a3630;
-        font-size: 13px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        padding: 12px 15px;
-        background: #fff;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        border-right: none;
-        border-left: none;
-        word-break: break-word;
-
-        .shareIconContainer {
-          display: flex;
-          width: 24px;
-          height: 24px;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          gap: 10px;
-          flex-shrink: 0;
-          border-radius: 15px;
-          background: #edebe8;
-          cursor: pointer;
-        }
-        .statuscontainer {
-          display: flex;
-          padding: 6px 10px;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-          flex: 1 0 0;
-          border-radius: 22px;
-          background: rgba(41, 204, 106, 0.15);
-        }
-      }
-      &:nth-child(even) td {
-        background: #f6fbff;
-      }
-      td:first-child {
-        border-radius: 100px 0 0 100px;
-        border-left: 1px solid rgba(0, 0, 0, 0.08);
-      }
-      td:last-child {
-        border-radius: 0px 100px 100px 0;
-        border-right: 1px solid rgba(0, 0, 0, 0.08);
-      }
-      .flex {
-        display: flex;
-        flex-direction: row;
-        gap: 5px;
-        height: 29px;
-        align-items: center;
-      }
-
-      &.insideTable {
-        td {
-          border-radius: 0;
-          border: none;
-          &:last-child {
-            border-radius: 0;
-            border-right: none;
-          }
-        }
-        table {
-          border-spacing: 0;
-          width: 100%;
-          border-radius: 5px;
-          border: 1px solid rgba(0, 0, 0, 0.08);
-          overflow: hidden;
-          border-top-left-radius: 15px;
-          border-top-right-radius: 15px;
-          thead {
-            tr {
-              border-bottom: none;
-              th {
-                padding: 14px 20px;
-                text-align: left;
-                border-top: 0;
-                border-right: 0;
-                border-left: 0;
-                background: #f8fafc;
-
-                &:first-child {
-                  border-radius: 0;
-                  border-left: 1px solid rgba(0, 0, 0, 0.08);
-                  border-top-left-radius: 15px;
-                }
-                &:last-child {
-                  border-radius: 0;
-                }
-              }
-            }
-          }
-          tbody {
-            tr {
-              td {
-                padding: 14px 20px;
-                text-align: left;
-                border-bottom: 1px solid rgba(58, 54, 48, 0.15);
-                background: #fff;
-                > svg {
-                  transform: scale(1.5);
-                  background-color: #edebe8;
-                  border-radius: 20px;
-                  padding: 5px;
-                }
-                &:last-child {
-                  border-radius: 0;
-                  border-right: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    > svg {
-      transform: scale(1.5);
-      background-color: #edebe8;
-      border-radius: 20px;
-      padding: 5px;
-    }
-
-    .close-icon {
-      transform: scale(1.3);
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-    }
-  }
-`;
-
-export const StyledThBase = styled.th`
-  color: #3a3630;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  padding: 11px 15px;
-  background: #f0f2f2;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-right: none;
-  border-left: none;
-  text-align: left;
-`;
-
-export const StyledTdBasic = styled.td`
-  color: #3a3630;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  padding: 15px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-right: none;
-  border-left: none;
-`;
-
-export const StyledFlex = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  em {
-    padding-left: 8px;
-    border-left: 2px dotted #758588;
-    font-style: normal;
-  }
-  span {
-    display: block;
-    line-height: 1;
-    &:first-child {
-      margin-bottom: 5px;
-    }
-  }
-`;
-export const StyledRoundedBorder = styled.div`
-  border-radius: 30px;
-  border: 1px solid #edefef;
-  background: #f6fbff;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const RouteName = styled.div`
-  font-weight: 600;
-  color: #09f;
-  margin-bottom: 6px;
-`;
-
-export const StyledFlexGap4 = styled.div`
-  display: flex;
-  gap: 4px;
-  /* align-items: center; */
-`;
-
-export const TomtomName = styled.div`
-  color: #29cc6a;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 24px;
-`;
-export const StyledLineBreak = styled.div``;
-export const Weight = styled.div`
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 16px;
-`;
-
-export const StyledIconCover = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  span {
-    margin-top: 4px;
-    &.ascending svg path:first-child {
-      fill: #000;
-    }
-    &.descending svg path:last-child {
-      fill: #000;
-    }
-  }
-`;
-
-export const TomtomCover = styled.div`
-  transform: scale(0.5);
-`;
-
-export const CustomDrop = styled.div`
-  border-radius: 20px;
-  border: 1px solid #e2e0db;
-  background: #fff;
-  display: flex;
-  padding: 4px 8px;
-  gap: 8px;
-  align-items: center;
-  cursor: pointer;
-  &.active .drop {
-    transform: rotate(180deg);
-  }
-`;
-
-export const CoverCustomDrop = styled.div`
-  position: relative;
-`;
-
-export const IconCoverData = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  svg {
-    cursor: pointer;
-  }
-`;
-
-//  For route details
-export const StyledCollapseWrapper = styled.div`
-  border-radius: 15px;
-  border: 1px solid #e3e3e3;
-  background: #fff;
-  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-  padding-bottom: 10px;
-`;
-
-export const StyledCollapseHeadWrapper = styled.div`
-  border-bottom: 1px solid #e3e3e3;
-  background: #f8fafc;
-  display: flex;
-  padding: 10px 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 15px 15px 0 0;
-`;
-
-export const StyledCollapseBody = styled.div`
-  /* padding-left: 45px; */
-  position: relative;
-  padding-right: 15px;
-`;
-
-export const StyledTh = styled(StyledThBase)`
-  background: none;
-  padding: 0px;
-  border-radius: 0 !important;
-  border: none;
-  padding: 14px 20px;
-  border-radius: 15px 0px 0px 0px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-  background: #f8fafc;
-`;
-
-export const StyledTd = styled(StyledTdBasic)`
-  background: none;
-  border: none;
-  padding: 0;
-  td td {
-    padding: 0 10px;
-    min-width: 140px;
-    max-width: 140px;
-    &:nth-child(3) {
-      min-width: 210px;
-      max-width: 210px;
-    }
-  }
-`;
-
-export const StyledDateWrapper = styled.div`
-  border-radius: 100px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: #faf9f9;
-  padding: 6px 8px;
-  color: #888075;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  display: inline-block;
-`;
-
-export const StyledLocationName = styled.div`
-  color: #fc7743;
-`;
-
-export const StyledToggleStatus = styled.div`
-  border-radius: 20px;
-  border: 1px solid rgba(233, 82, 82, 0.5);
-  background: rgba(233, 82, 82, 0.15);
-  padding: 2px 8px;
-  display: flex;
-  cursor: pointer;
-  max-width: 70px;
-
-  &.active .coverArrow {
-    transform: rotate(0deg);
-    position: relative;
-    top: 2px;
-  }
-  .coverArrow {
-    transform: rotate(180deg);
-    position: relative;
-    top: -2px;
-  }
-
-  .circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 100px;
-    border: 1px solid #e95252;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:after {
-      content: '';
-      width: 10px;
-      height: 10px;
-      border-radius: 100px;
-      background: #e95252;
-    }
-  }
-`;
-
-export const StyledTimeTrack = styled.div`
-  border-radius: 12px;
-  background: #fff;
-
-  position: absolute;
-  top: 86px;
-  left: 3px;
-  min-width: 36px;
-  span {
-    padding: 2px 6px;
-    color: #687d9b;
-    font-weight: 600;
-    font-size: 11px;
-    position: relative;
-    z-index: 2;
-    background: #fff;
-    border-radius: 100px;
-    border: 1px solid #edefef;
-  }
-
-  i {
-    width: 2px;
-    height: 36px;
-    background: #7b91b0;
-    display: block;
-    position: absolute;
-    top: 58%;
-    transform: translateY(-50%);
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    z-index: 1;
-    &:after,
-    &::before {
-      width: 5px;
-      height: 5px;
-      display: block;
-      background: #7b91b0;
-      position: absolute;
-      top: -5px;
-      content: '';
-      border-radius: 100px;
-      left: -1px;
-    }
-    &:after {
-      top: auto;
-      bottom: -4px;
-    }
-  }
-`;
-
-export const StyledWeight = styled.div`
-  font-size: 13px;
-  color: #e95252;
-`;
-export const StyledCube = styled(StyledWeight)`
-  font-size: 10px;
-`;
-
-export const Header = styled.th`
-  color: #3a3630;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  padding: 11px 15px;
-  background: #f0f2f2;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-right: none;
-  border-left: none;
-  text-align: left;
-`;
-
-export const Back = styled.div`
-  border-radius: 20px;
-  border: 1px solid var(--contextual-blue, #6396e5);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  color: #6396e5;
-  align-content: center;
-  padding: 4px 12px;
-  height: 28px;
-  cursor: pointer;
-  &:hover {
-    background-color: #89b8ff;
-    color: white;
-  }
-`;
-
-export const Remove = styled.div`
-  border-radius: 20px;
-  border: 1px solid rgba(233, 82, 82, 0.5);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  color: #e95252;
-  align-content: center;
-  padding: 4px 12px;
-  height: 28px;
-  cursor: pointer;
-  &:hover {
-    background-color: #ff7b7b;
-    color: white;
-  }
-`;
-
-export const Buttons = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  white-space: nowrap;
-  align-items: center;
-`;
-export const EmptyDataContainer = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
-export const ClearAll = styled.div`
-  border-radius: 20px;
-  border: 1px solid #edebe8;
-  background: #fff;
-  display: flex;
-  padding: 6px 6px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-
-  &.active {
-    background: #313130;
-    & > div {
-      color: #fff;
-    }
-  }
-`;
-export const StyledFilterBtnIcon = styled.div`
-  display: flex;
-  width: 24px;
-  height: 24px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 20px;
-  border: 1px solid #e2e0db;
-  background: #b2b3b3;
-  .cross {
-    position: relative;
-    &:after {
-      display: inline-block;
-      content: 'X';
-      font-style: normal;
-      font-size: 14px;
-      color: #000;
-    }
-  }
-`;
-export const StyledFilterBtnLabel = styled.div`
-  color: #6a7378;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-  white-space: nowrap;
-`;