assets/less/layouts.less

@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;
}