@gfazioli/mantine-split-pane/dist/styles.css

A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.

.me_31ecce4d{flex:var(--split-pane-grow,initial);overflow:hidden;position:relative;z-index:1}.me_31ecce4d[data-orientation=vertical]{flex-direction:row}.me_31ecce4d[data-orientation=horizontal]{flex-direction:column}.me_755975b3{--split-resizer-size-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-size-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-size-md:calc(0.5rem*var(--mantine-scale));--split-resizer-size-lg:calc(0.75rem*var(--mantine-scale));--split-resizer-size-xl:calc(1rem*var(--mantine-scale));--split-resizer-size:var(--split-resizer-size-xs);--split-resizer-knob-size-xs:20%;--split-resizer-knob-size-sm:30%;--split-resizer-knob-size-md:50%;--split-resizer-knob-size-lg:60%;--split-resizer-knob-size-xl:calc(100% - var(--split-resizer-size)/2);--split-resizer-knob-size:var(--split-resizer-knob-size-xs);--split-resizer-spacing-xs:calc(0.125rem*var(--mantine-scale));--split-resizer-spacing-sm:calc(0.25rem*var(--mantine-scale));--split-resizer-spacing-md:calc(0.5rem*var(--mantine-scale));--split-resizer-spacing-lg:calc(1rem*var(--mantine-scale));--split-resizer-spacing-xl:calc(1.5rem*var(--mantine-scale));--split-resizer-spacing:var(--split-resizer-spacing-xs);--split-resizer-color:var(--mantine-color-gray-1);--split-resizer-hover-color:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .me_755975b3{--split-resizer-color:var(--mantine-color-dark-5)}.me_755975b3{background:var(--split-resizer-color);background-clip:padding-box;border-radius:var(--split-resizer-radius,var(--mantine-radius-xl));box-sizing:border-box;opacity:var(--split-resizer-opacity,1);position:relative;touch-action:none;transition:color .5s ease,background-color .5s ease,background-image .5s ease,opacity .5s ease;z-index:2}.me_755975b3:after{background:var(--split-resizer-knob-color);border-radius:var(--split-resizer-knob-radius,var(--mantine-radius-default));content:"";opacity:var(--split-resizer-knob-opacity,1);position:absolute;transition:all .5s ease;z-index:1}.me_755975b3:hover{background:var(--split-resizer-hover-color)}.me_755975b3:hover:after{background:var(--split-resizer-knob-hover-color);opacity:var(--split-resizer-knob-hover-opacity)}.me_755975b3[data-orientation=vertical]{bottom:0;cursor:var(--split-resizer-cursor-vertical);margin-left:var(--split-resizer-spacing);margin-right:var(--split-resizer-spacing);right:0;top:0;width:var(--split-resizer-size)}.me_755975b3[data-orientation=vertical]:after{height:var(--split-resizer-knob-size);left:calc(50% - var(--split-resizer-size)/4);top:calc(50% - var(--split-resizer-knob-size)/2);width:calc(var(--split-resizer-size)/2)}.me_755975b3[data-orientation=horizontal]{bottom:0;cursor:var(--split-resizer-cursor-horizontal);height:var(--split-resizer-size);margin-bottom:var(--split-resizer-spacing);margin-top:var(--split-resizer-spacing);right:0;width:100%}.me_755975b3[data-orientation=horizontal]:after{height:calc(var(--split-resizer-size)/2);left:calc(50% - var(--split-resizer-knob-size)/2);top:calc(50% - var(--split-resizer-size)/4);width:var(--split-resizer-knob-size)}.me_ef80b24f{background:transparent;border:1px solid var(--split-resizer-color)}.me_eedf38df{background:transparent;border-color:transparent}.me_3e2cc004,.me_3e2cc004:after,.me_3ef2aa7d,.me_3ef2aa7d:after{background:transparent;border:none;border-radius:0}.me_3e2cc004:after,.me_3ef2aa7d:after{content:"";display:flex;opacity:1}.me_3e2cc004[data-orientation=vertical]:after,.me_3ef2aa7d[data-orientation=vertical]:after{border:none;border-right:4px dotted var(--split-resizer-color);left:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px);width:2px}.me_3e2cc004[data-orientation=horizontal]:after,.me_3ef2aa7d[data-orientation=horizontal]:after{border:none;border-bottom:4px dotted var(--split-resizer-color);height:2px;top:calc(var(--split-resizer-size) - var(--split-resizer-size)/2 - 2px)}.me_3e2cc004:hover,.me_3ef2aa7d:hover{background:transparent}.me_3e2cc004:hover:after,.me_3ef2aa7d:hover:after{background:transparent;border-color:var(--split-resizer-hover-color);display:block}.me_3e2cc004[data-orientation=vertical]:after{border-right-style:dashed}.me_3e2cc004[data-orientation=horizontal]:after{border-bottom-style:dashed}.me_755975b3.me_b5b15ecd{cursor:not-allowed}.me_755975b3.me_b5b15ecd:hover{border-color:transparent}.me_dfcf43d5{display:var(--split-inline,"flex")}.me_dfcf43d5[data-orientation=horizontal]{flex-direction:column}