TableHeaderCell.styled.ts 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import styled, { css } from 'styled-components';
  2. interface TitleProps {
  3. isOrderable?: boolean;
  4. isOrdered?: boolean;
  5. }
  6. const orderableMixin = css(
  7. ({ theme: { table } }) => `
  8. cursor: pointer;
  9. padding-right: 18px;
  10. position: relative;
  11. &::before,
  12. &::after {
  13. border: 4px solid transparent;
  14. content: '';
  15. display: block;
  16. height: 0;
  17. right: 5px;
  18. top: 50%;
  19. position: absolute;
  20. }
  21. &::before {
  22. border-bottom-color: ${table.th.color.normal};
  23. margin-top: -9px;
  24. }
  25. &::after {
  26. border-top-color: ${table.th.color.normal};
  27. margin-top: 1px;
  28. }
  29. &:hover {
  30. color: ${table.th.color.hover};
  31. &::before {
  32. border-bottom-color: ${table.th.color.hover};
  33. }
  34. &::after {
  35. border-top-color: ${table.th.color.hover};
  36. }
  37. }
  38. `
  39. );
  40. const orderedMixin = css(
  41. ({ theme: { table } }) => `
  42. color: ${table.th.color.active};
  43. &::before {
  44. border-bottom-color: ${table.th.color.active};
  45. }
  46. &::after {
  47. border-top-color: ${table.th.color.active};
  48. }
  49. `
  50. );
  51. export const Title = styled.span<TitleProps>(
  52. ({ isOrderable, isOrdered, theme: { table } }) => css`
  53. font-family: Inter, sans-serif;
  54. font-size: 12px;
  55. font-style: normal;
  56. font-weight: 400;
  57. line-height: 16px;
  58. letter-spacing: 0em;
  59. text-align: left;
  60. display: inline-block;
  61. justify-content: start;
  62. align-items: center;
  63. background: ${table.th.backgroundColor.normal};
  64. cursor: default;
  65. color: ${table.th.color.normal};
  66. ${isOrderable && orderableMixin}
  67. ${isOrderable && isOrdered && orderedMixin}
  68. `
  69. );
  70. export const Preview = styled.span`
  71. margin-left: 8px;
  72. font-family: Inter, sans-serif;
  73. font-style: normal;
  74. font-weight: 400;
  75. line-height: 16px;
  76. letter-spacing: 0em;
  77. text-align: left;
  78. background: ${(props) => props.theme.table.th.backgroundColor.normal};
  79. font-size: 14px;
  80. color: ${(props) => props.theme.table.th.previewColor.normal};
  81. cursor: pointer;
  82. `;
  83. export const TableHeaderCell = styled.th`
  84. padding: 4px 0 4px 24px;
  85. border-bottom-width: 1px;
  86. vertical-align: middle;
  87. `;