react-reflex
Version:
Flex layout component for advanced React web applications
2 lines (1 loc) • 4.69 kB
CSS
body.reflex-col-resize{cursor:col-resize}body.reflex-row-resize{cursor:row-resize}.reflex-container{place-content:stretch flex-start;align-items:stretch;width:100%;height:100%;display:flex;position:relative}.reflex-container.horizontal{flex-direction:column;min-height:1px}.reflex-container.vertical{flex-direction:row;min-width:1px}.reflex-container>.reflex-element{width:100%;height:100%;position:relative;overflow:auto}.reflex-container.reflex-resizing>.reflex-element{pointer-events:none;-webkit-user-select:none;user-select:none}.reflex-container>.reflex-element>.reflex-size-aware{width:100%;height:100%}.reflex-container>.reflex-splitter{z-index:100;background-color:#eee}.reflex-container>.reflex-splitter.active,.reflex-container>.reflex-splitter:hover{background-color:#c6c6c6;transition:all 1s}.horizontal>.reflex-splitter{cursor:row-resize;border-top:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;width:100%;height:2px}.reflex-element.horizontal .reflex-handle{cursor:row-resize;-webkit-user-select:none;user-select:none}.reflex-container.horizontal>.reflex-splitter:hover,.reflex-container.horizontal>.reflex-splitter.active{border-top:1px solid #eee;border-bottom:1px solid #eee}.reflex-container.vertical>.reflex-splitter{cursor:col-resize;border-left:1px solid #c6c6c6;border-right:1px solid #c6c6c6;width:2px;height:100%}.reflex-element.vertical .reflex-handle{cursor:col-resize;-webkit-user-select:none;user-select:none}.reflex-container.vertical>.reflex-splitter:hover,.reflex-container.vertical>.reflex-splitter.active{border-left:1px solid #eee;border-right:1px solid #eee}.reflex-container>.reflex-splitter.reflex-thin{box-sizing:border-box;-moz-background-clip:padding;-webkit-background-clip:padding;opacity:.2;z-index:100;background-clip:padding-box}.reflex-container>.reflex-splitter.reflex-thin.active .reflex-container>.reflex-splitter.reflex-thin:hover{opacity:.5;transition:all 1.5s}.reflex-container.horizontal>.reflex-splitter.reflex-thin{cursor:row-resize;border-top:8px solid #fff0;border-bottom:8px solid #fff0;width:100%;margin:-8px 0;height:17px}.reflex-container.horizontal>.reflex-splitter.reflex-thin.active,.reflex-container.horizontal>.reflex-splitter.reflex-thin:hover{border-top:8px solid #e4e4e4;border-bottom:8px solid #e4e4e4}.reflex-container.vertical>.reflex-splitter.reflex-thin{cursor:col-resize;border-left:8px solid #fff0;border-right:8px solid #fff0;height:100%;margin:0 -8px;width:17px}.reflex-container.vertical>.reflex-splitter.reflex-thin.active,.reflex-container.vertical>.reflex-splitter.reflex-thin:hover{border-left:8px solid #e4e4e4;border-right:8px solid #e4e4e4}html{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background-color:#ddd;margin:50px}.reflex-element{background-color:#01d2f80f;overflow:hidden}.reflex-element.resizing{background-color:#f003}.reflex-splitter.resizing{background-color:#ff000080}.pane-content{text-align:center;-webkit-user-select:none;user-select:none;height:100%;position:relative}.pane-content>label{position:relative;top:30%}.header{background-color:#01d2f84d;border-bottom:1px solid #c6c6c6;overflow:hidden}.footer{text-align:center;background-color:#01d2f84d;border-top:1px solid #c6c6c6;overflow:hidden}.left-pane{color:#03d8ff;background-color:#222}.middle-pane{background-color:#fff}.right-pane{background-color:#03d8ff}.bottom-pane{color:#03d8ff;background-color:#222}.pane-control{background-color:#b3f2fd;border-bottom:1px solid #c6c6c6;height:25px;overflow:hidden}.pane-control>label{white-space:nowrap;float:left;margin-top:4px;margin-left:10px;font-size:14px}.pane-control>button{float:right;background-color:#c6c6c6;border:1px solid #eee;border-radius:6px;outline:none;width:30px;height:17px;margin-top:4px;margin-right:4px;transition:all 1s;position:relative;overflow:hidden}.pane-control>button:hover{border:1px solid #0c63ff}.pane-control>button>label{color:#f0fcff;font-size:20px;transition:all 1s;position:relative;top:-8px}.pane-control>button:hover>label{color:#0c63ff}.ctrl-pane-content{height:calc(100% - 26px);overflow:hidden}.ctrl-pane-content>label{position:relative;top:30%}.handle{background:#eae9e9;height:28px;padding:8px 0 0 8px}#demo-basic,#demo-basic-splitter,#demo-splitter-propagation-2x,#demo-splitter-propagation-3x{background-color:#fff;border:1px solid #0c63ff;height:250px}#demo-advanced{background-color:#fff;border:1px solid #0c63ff;height:600px}#demo-controls{background-color:#fff;border:1px solid #0c63ff;height:400px}#demo-size-aware,#demo-storage,#demo-collapse,#demo-handle{background-color:#fff;border:1px solid #0c63ff;height:280px}#page-footer-filler{height:100px}