Actions.scss 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .zoom-actions,
  2. .undo-redo-buttons {
  3. background-color: var(--island-bg-color);
  4. border-radius: var(--border-radius-lg);
  5. }
  6. .zoom-button,
  7. .undo-redo-buttons button {
  8. border: 1px solid var(--default-border-color) !important;
  9. border-radius: 0 !important;
  10. background-color: transparent !important;
  11. font-size: 0.875rem !important;
  12. width: var(--lg-button-size);
  13. height: var(--lg-button-size);
  14. svg {
  15. width: var(--lg-icon-size) !important;
  16. height: var(--lg-icon-size) !important;
  17. }
  18. .ToolIcon__icon {
  19. width: 100%;
  20. height: 100%;
  21. }
  22. }
  23. .reset-zoom-button {
  24. border-left: 0 !important;
  25. border-right: 0 !important;
  26. padding: 0 0.625rem !important;
  27. width: 3.75rem !important;
  28. justify-content: center;
  29. color: var(--text-primary-color);
  30. }
  31. .zoom-out-button {
  32. border-top-left-radius: var(--border-radius-lg) !important;
  33. border-bottom-left-radius: var(--border-radius-lg) !important;
  34. :root[dir="rtl"] & {
  35. transform: scaleX(-1);
  36. }
  37. .ToolIcon__icon {
  38. border-top-right-radius: 0 !important;
  39. border-bottom-right-radius: 0 !important;
  40. }
  41. }
  42. .zoom-in-button {
  43. border-top-right-radius: var(--border-radius-lg) !important;
  44. border-bottom-right-radius: var(--border-radius-lg) !important;
  45. :root[dir="rtl"] & {
  46. transform: scaleX(-1);
  47. }
  48. .ToolIcon__icon {
  49. border-top-left-radius: 0 !important;
  50. border-bottom-left-radius: 0 !important;
  51. }
  52. }
  53. .undo-redo-buttons {
  54. .undo-button-container button {
  55. border-top-left-radius: var(--border-radius-lg) !important;
  56. border-bottom-left-radius: var(--border-radius-lg) !important;
  57. border-right: 0 !important;
  58. :root[dir="rtl"] & {
  59. transform: scaleX(-1);
  60. }
  61. .ToolIcon__icon {
  62. border-top-right-radius: 0 !important;
  63. border-bottom-right-radius: 0 !important;
  64. }
  65. }
  66. .redo-button-container button {
  67. border-top-right-radius: var(--border-radius-lg) !important;
  68. border-bottom-right-radius: var(--border-radius-lg) !important;
  69. :root[dir="rtl"] & {
  70. transform: scaleX(-1);
  71. }
  72. .ToolIcon__icon {
  73. border-top-left-radius: 0 !important;
  74. border-bottom-left-radius: 0 !important;
  75. }
  76. }
  77. }