diff --git a/drag-n-drop-chart-library/src/App.css b/drag-n-drop-chart-library/src/App.css index c3fee3d..7d75691 100644 --- 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; +}