a-multilayout-splitter/dist/style/DragHandle.css

A React package designed to facilitate the division of your views into distinct sections, offering effortless resizing and support for intricate layouts.

.a-split-bar{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;flex:0 0 auto;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#c0c0c0 !important}.a-split-bar.a-split-handle-disable{pointer-events:none;cursor:not-allowed !important}.a-split-horizontal>.a-split-bar{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;height:inherit !important;width:1px;min-width:1px;margin-inline:5px;cursor:col-resize}.a-split-horizontal>.a-split-bar::after{content:'';position:absolute;width:16px;height:inherit !important;z-index:999}.a-splitter-handlebar-icon{position:relative}.a-splitter-handlebar-icon:after{position:absolute;content:'\22EE';font-weight:900;font-size:1.6rem;top:50%;left:50%;z-index:1001;transform:translate(-50%,-50%)}.a-splitter-handlebar-icon::before{position:absolute;content:'';width:3px;height:27px;top:50%;left:50%;background-color:#fff;z-index:1000;transform:translate(-50%,-50%)}button.a-splitter-collapse-icon{border-image:none;border-width:1px;cursor:pointer;display:-ms-flexbox;display:flex;height:26px;padding:3px 12px;position:relative;z-index:1002;border-radius:100%;background-color:transparent}button.splitter-horizontal-left-icon{right:10px}button.splitter-horizontal-right-icon{left:10px}button.splitter-horizontal-left-icon::before,button.splitter-horizontal-left-icon::after,button.splitter-horizontal-right-icon::before,button.splitter-horizontal-right-icon::after{border-radius:16px;content:"";height:8px;position:absolute;transform:rotate(0);background-color:#000;opacity:0;width:2px !important}button.splitter-horizontal-left-icon::before{top:6px;right:12px}button.splitter-horizontal-right-icon::before{top:6px;left:12px}button.splitter-horizontal-left-icon::after{top:11px;right:12px}button.splitter-horizontal-right-icon::after{top:11px;left:12px}.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-left-icon::after{transform:rotate(-45deg)}.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-right-icon::after{transform:rotate(40deg)}.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-left-icon::before{transform:rotate(45deg)}.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-right-icon::before{transform:rotate(-40deg)}.a-split-horizontal>.a-split-bar:hover .button.a-splitter-collapse-icon,.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-left-icon::before,.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-left-icon::after,.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-right-icon::before,.a-split-horizontal>.a-split-bar:hover button.splitter-horizontal-right-icon::after{opacity:1;transition-duration:.3s;transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)}.a-icon-hide{background-color:transparent;border-color:transparent;color:transparent;transition:background-color 500ms ease-out}.a-splitter-collapse-icon.splitter-horizontal-left-icon.disable{display:none !important}.a-splitter-collapse-icon.splitter-horizontal-right-icon.disable{display:none !important}.a-splitter-handlebar-icon.left-margin-fix{margin-left:27px}.a-splitter-handlebar-icon.right-margin-fix{margin-right:27px}.a-split-vertical>.a-split-bar{-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;width:inherit !important;height:1px;min-height:1px;margin-top:5px;margin-bottom:5px;cursor:row-resize}.a-split-vertical>.a-split-bar::after{content:'';position:absolute;height:16px;width:100% !important;z-index:999}.a-split-vertical>.a-split-bar .a-splitter-handlebar-icon:after{transform:translate(-50%,-50%) rotate(90deg)}.a-split-vertical>.a-split-bar .a-splitter-handlebar-icon::before{transform:translate(-50%,-50%) rotate(90deg)}.a-split-vertical>.a-split-bar button.a-splitter-collapse-icon{border-image:none;border-width:1px;cursor:pointer;display:-ms-flexbox;display:flex;padding:12px 12px;position:relative;z-index:1002;border-radius:100%;background-color:transparent}button.splitter-vertical-top-icon{top:-10px;transform:rotate(90deg)}button.splitter-vertical-bottom-icon{top:10px;transform:rotate(90deg)}button.splitter-vertical-top-icon::before,button.splitter-vertical-top-icon::after,button.splitter-vertical-bottom-icon::before,button.splitter-vertical-bottom-icon::after{border-radius:16px;content:"";height:8px;position:absolute;transform:rotate(0);background-color:#000;opacity:0;width:2px !important}button.splitter-vertical-top-icon::before{top:5px;right:11px}button.splitter-vertical-bottom-icon::before{top:6px;left:12px}button.splitter-vertical-top-icon::after{top:11px;right:11px}button.splitter-vertical-bottom-icon::after{top:10px;left:12px}.a-split-vertical>.a-split-bar:hover button.splitter-vertical-top-icon::after{transform:rotate(-45deg)}.a-split-vertical>.a-split-bar:hover button.splitter-vertical-bottom-icon::after{transform:rotate(40deg)}.a-split-vertical>.a-split-bar:hover button.splitter-vertical-top-icon::before{transform:rotate(45deg)}.a-split-vertical>.a-split-bar:hover button.splitter-vertical-bottom-icon::before{transform:rotate(-40deg)}.a-split-vertical>.a-split-bar:hover .button.a-splitter-collapse-icon,.a-split-vertical>.a-split-bar:hover button.splitter-vertical-top-icon::before,.a-split-vertical>.a-split-bar:hover button.splitter-vertical-top-icon::after,.a-split-vertical>.a-split-bar:hover button.splitter-vertical-bottom-icon::before,.a-split-vertical>.a-split-bar:hover button.splitter-vertical-bottom-icon::after{opacity:1;transition-duration:.3s;transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)}.a-icon-hide{background-color:transparent;border-color:transparent;color:transparent;transition:background-color 500ms ease-out}.a-splitter-collapse-icon.splitter-vertical-top-icon.disable{display:none !important}.a-splitter-collapse-icon.splitter-vertical-bottom-icon.disable{display:none !important}.a-splitter-handlebar-icon.top-margin-fix{margin-top:25px}.a-splitter-handlebar-icon.bottom-margin-fix{margin-bottom:25px}