styles.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .react-resizable {
  2. position: relative;
  3. }
  4. .react-resizable-handle {
  5. position: absolute;
  6. width: 20px;
  7. height: 20px;
  8. background-repeat: no-repeat;
  9. background-origin: content-box;
  10. box-sizing: border-box;
  11. background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  12. background-position: bottom right;
  13. padding: 0 3px 3px 0;
  14. }
  15. .react-resizable-handle-sw {
  16. bottom: 0;
  17. left: 0;
  18. cursor: sw-resize;
  19. transform: rotate(90deg);
  20. }
  21. .react-resizable-handle-se {
  22. bottom: 0;
  23. right: 0;
  24. cursor: se-resize;
  25. }
  26. .react-resizable-handle-nw {
  27. top: 0;
  28. left: 0;
  29. cursor: nw-resize;
  30. transform: rotate(180deg);
  31. }
  32. .react-resizable-handle-ne {
  33. top: 0;
  34. right: 0;
  35. cursor: ne-resize;
  36. transform: rotate(270deg);
  37. }
  38. .react-resizable-handle-w,
  39. .react-resizable-handle-e {
  40. top: 50%;
  41. margin-top: -10px;
  42. cursor: ew-resize;
  43. }
  44. .react-resizable-handle-w {
  45. left: 0;
  46. transform: rotate(135deg);
  47. }
  48. .react-resizable-handle-e {
  49. right: 0;
  50. transform: rotate(315deg);
  51. }
  52. .react-resizable-handle-n,
  53. .react-resizable-handle-s {
  54. left: 50%;
  55. margin-left: -10px;
  56. cursor: ns-resize;
  57. }
  58. .react-resizable-handle-n {
  59. top: 0;
  60. transform: rotate(225deg);
  61. }
  62. .react-resizable-handle-s {
  63. bottom: 0;
  64. transform: rotate(45deg);
  65. }