resize-handle.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. [data-component="resize-handle"] {
  2. position: absolute;
  3. z-index: 10;
  4. &::after {
  5. content: "";
  6. position: absolute;
  7. opacity: 0;
  8. transition-property: opacity;
  9. transition-duration: var(--transition-duration);
  10. transition-timing-function: var(--transition-easing);
  11. }
  12. &:hover::after,
  13. &:active::after {
  14. opacity: 1;
  15. }
  16. &[data-direction="horizontal"] {
  17. inset-block: 0;
  18. inset-inline-end: 0;
  19. width: 8px;
  20. transform: translateX(50%);
  21. cursor: col-resize;
  22. &[data-edge="start"] {
  23. inset-inline-start: 0;
  24. inset-inline-end: auto;
  25. transform: translateX(-50%);
  26. }
  27. &::after {
  28. width: 3px;
  29. inset-block: 0;
  30. inset-inline-start: 50%;
  31. transform: translateX(-50%);
  32. }
  33. }
  34. &[data-direction="vertical"] {
  35. inset-inline: 0;
  36. inset-block-start: 0;
  37. height: 8px;
  38. transform: translateY(-50%);
  39. cursor: row-resize;
  40. &[data-edge="end"] {
  41. inset-block-start: auto;
  42. inset-block-end: 0;
  43. transform: translateY(50%);
  44. }
  45. &::after {
  46. height: 3px;
  47. inset-inline: 0;
  48. inset-block-start: 50%;
  49. transform: translateY(-50%);
  50. }
  51. }
  52. }