resize-handle.css 824 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. [data-component="resize-handle"] {
  2. position: absolute;
  3. z-index: 10;
  4. &::after {
  5. content: "";
  6. position: absolute;
  7. opacity: 0;
  8. transition: opacity 0.15s ease-in-out;
  9. }
  10. &:hover::after,
  11. &:active::after {
  12. opacity: 1;
  13. }
  14. &[data-direction="horizontal"] {
  15. inset-block: 0;
  16. inset-inline-end: 0;
  17. width: 8px;
  18. transform: translateX(50%);
  19. cursor: col-resize;
  20. &::after {
  21. width: 3px;
  22. inset-block: 0;
  23. inset-inline-start: 50%;
  24. transform: translateX(-50%);
  25. }
  26. }
  27. &[data-direction="vertical"] {
  28. inset-inline: 0;
  29. inset-block-start: 0;
  30. height: 8px;
  31. transform: translateY(-50%);
  32. cursor: row-resize;
  33. &::after {
  34. height: 3px;
  35. inset-inline: 0;
  36. inset-block-start: 50%;
  37. transform: translateY(-50%);
  38. }
  39. }
  40. }