Merge pull request #11 from luzmo-official/chore_css_fixes

chore: css fixes
luzmo-official · Sep 6, 2024 · be15b87 · be15b87
2 parents e7465da + 1a7632d
commit be15b87
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/drag-n-drop-chart-library/src/App.css b/drag-n-drop-chart-library/src/App.css
@@ -2,17 +2,23 @@
 userflow-drag-n-drop {
 }
 
+.MuiButtonBase-root + .MuiButtonBase-root {
+  margin-left: 20px;
+}
 .react-resizable-handle {
-  background-image: none;
-  padding: 0;
-  color: yellow;
+  border-right: 3px solid rgba(0, 0, 0, 0) !important;
+  border-bottom: 3px solid rgba(0, 0, 0, 0) !important;
+  opacity: 0;
+  -webkit-transition: all 500ms ease-in-out;
+  -moz-transition: all 500ms ease-in-out;
+  -ms-transition: all 500ms ease-in-out;
+  -o-transition: all 500ms ease-in-out;
+  transition: all 500ms ease-in-out;
 }
 
 .react-resizable-handle::after {
-  content: "";
-  position: absolute;
-  right: -3px !important;
-  bottom: -3px !important;
+  right: 0px !important;
+  bottom: 0px !important;
   width: 16px !important;
   height: 16px !important;
   border-right: 3px solid rgba(206, 146, 216, 1) !important;
@@ -25,6 +31,10 @@ userflow-drag-n-drop {
   transition: all 500ms ease-in-out;
 }
 
-.flexComponent:hover .react-resizable-handle::after {
+.flexComponent:hover .react-resizable-handle {
   opacity: 1;
 }
+
+.flexComponent:hover .react-resizable-handle::after {
+  opacity: 1 !important;
+}