.app-dataview-exp-bar { > .ivu-split-horizontal { > .ivu-split-trigger-con { height: 100%; width: 1px; } > .ivu-split-pane { > div { height: 100%; overflow: auto; display: flex; flex-direction: column; .dataview-exp-bar-header { line-height: 50px; border-bottom: 1px solid #ddd; .dataview-exp-bar-title { font-size: 18px; padding-left: 8px; i { font-size: 20px; margin-top: -2px; } } } .container-header{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; .quick-group-container { padding-top: 8px; padding-right: 20px; } .search-container { width: 30%; height: 48px; padding: 10px 10px 10px 0; min-width: 200px; max-width: 400px; } .toolbar-container{ padding: 4px; display: flex; flex-wrap: wrap; align-items: center; } } .dataview-exp-bar-content { height: calc(100% - 88px); overflow: auto; padding: 16px 0; margin-bottom: 10px; } .dataview-exp-bar-content2 { height: 100%; overflow: auto; flex-grow: 1; } } } > .right-pane.ivu-split-pane { > div { padding-left: 10px; } } > .left-pane.ivu-split-pane { padding-right: 10px; } } > .ivu-split-vertical{ > .ivu-split-pane { > div { height: 100%; .dataview-exp-bar-header { line-height: 50px; border-bottom: 1px solid #ddd; .dataview-exp-bar-title { font-size: 18px; padding-left: 8px; i { font-size: 20px; margin-top: -2px; } } } .container-header{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; .search-container { width: 30%; height: 48px; padding: 10px 10px 10px 0; min-width: 200px; max-width: 400px; } .toolbar-container{ padding: 4px; } .quick-group-container{ padding-top: 8px; padding-right: 20px; } } .dataview-exp-bar-content { height: calc(100% - 88px); overflow: auto; margin-bottom: 10px; } .dataview-exp-bar-content2 { height: 100%; overflow: auto; flex-grow: 1; } } } > .top-pane.ivu-split-pane { > div { padding-bottom: 10px; } } > .bottom-pane.ivu-split-pane { padding-top: 10px; } } } // this is less