| @import "variables.less"; |
| @import "mixins.less"; |
| |
| |
| /* new flex layout for templates. Specificity needed for now. Will remove at end */ |
| body #dashboard .flex-layout, |
| body #dashboard.flex-layout, |
| body #notification-center .flex-layout { |
| .display-flex(); |
| |
| &.flex-col { |
| .flex-direction(column); |
| } |
| &.flex-row { |
| .flex-direction(row); |
| } |
| |
| /* FLEXBOX REFACTOR: temporary overrides */ |
| padding: 0; |
| &>div { |
| padding: 0; |
| } |
| /* end overrides */ |
| |
| /* |
| always default all child elements as flex items that neither shrink nor expand. Assumes all flex-layout containers |
| contain at least one .flex-body to indicate that's the one that expands |
| */ |
| &>* { |
| .flex(0); |
| } |
| |
| /* notice we don't set heights. Flex will expand to fill the content but no more */ |
| #dashboard-upper-content { |
| .flex(0 0 auto); |
| } |
| #dashboard-lower-content { |
| padding: @panelPadding; |
| } |
| |
| #footer { |
| .flex(0 0 auto); |
| } |
| } |
| |
| /* can be added to any element in a display:flex element that you want to act as the main body. It expands to the |
| available space and shows a scrollbar */ |
| body #dashboard .flex-body, body #notification-center .flex-body { |
| .flex(1); |
| overflow: auto; |
| } |
| |
| /* tells an element to be as large as the content. This will replace the hardcoded ones */ |
| body #dashboard .flex-fill { |
| .flex(0 0 auto); |
| } |
| |
| /* used on the databases page. To be removed once moved to flexbox */ |
| .one-pane #footer { |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| margin: 0 -20px; |
| } |
| |
| /* this drops .fixed-header, which was a position:absolute'd element, and switches it and all children to use flexbox. */ |
| .one-pane > header { |
| width: 100%; |
| |
| #breadcrumbs { |
| overflow: hidden; |
| |
| /* overrides - can be removed later */ |
| float: none; |
| } |
| |
| #right-header { |
| -ms-flex-preferred-size: auto; |
| -webkit-flex: 0 0 auto; |
| flex-grow: 0; |
| flex-shrink: 0; |
| flex-basis: inherit; |
| } |
| #api-navbar { |
| .flex(0 0 auto); |
| } |
| } |
| |
| body #dashboard .flex-body#right-header { |
| .flex(0 1 auto); |
| overflow: hidden; |
| } |
| |
| body #dashboard .flex-layout #api-navbar { |
| .flex(0 0 auto); |
| } |
| |
| /* temporary wedge. Can be replaced at end */ |
| .with-sidebar { |
| |
| /* temporary wedge. Can be replaced at end */ |
| #breadcrumbs { |
| float: left; |
| } |
| #api-navbar { |
| float: right; |
| } |
| /* end tmp wedge */ |
| } |
| |
| body #dashboard .header-right-panel { |
| overflow: hidden; |
| } |
| |
| .right-header-wrapper { |
| #api-navbar { |
| float: right; |
| } |
| } |
| |
| body #dashboard .right-db-header { |
| &>div { |
| .flex(1 0 auto); |
| /*overflow: hidden; */ |
| } |
| } |
| |
| /** FLEXBOX REFACTOR: "body #dashboard" can be removed at end. Specificity needed right now */ |
| body #dashboard.two-pane { |
| height: 100%; |
| |
| /* this will be renamed & reused once all templates use flexbox */ |
| #two-pane-content { |
| .display-flex(); |
| .flex-direction(row); |
| } |
| #left-content { |
| .flex(0 0 440px); |
| } |
| #footer { |
| .flex(0 0 50px) |
| } |
| |
| /* overrides a weird default */ |
| .editor-wrapper form { |
| padding-bottom: 0; |
| } |
| |
| /* temporary. header-wrapper will be converted to flexbox everywhere */ |
| .header-wrapper { |
| .flex(0 0 65px); |
| position: inherit; |
| |
| #breadcrumbs { |
| height: 64px; |
| .flex(0 0 440px); |
| overflow: hidden; |
| } |
| } |
| } |
| |
| body #dashboard.template-with-sidebar { |
| header { |
| .flex(0 0 65px); |
| } |
| #sidebar-content { |
| .flex(0 0 330px); |
| overflow: auto; |
| overflow-x: hidden; |
| } |
| .template-content { |
| overflow: hidden; |
| } |
| #dashboard-content { |
| border-left: 1px solid @grayLight; |
| .left-shadow-border(); |
| } |
| } |
| |
| /* tmp. Will be removed at end of flexbox refactor */ |
| aside#sidebar-content { |
| top: 64px; |
| } |