@import "./colors";

@io-panel-height: 250px;

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: @io-panel-height;
  min-width: 250px;

  background: @term-bg;
  overflow-y: scroll;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-panel-resizer {
  width: 5px;
  background-color: @term-border-color;
  height: @io-panel-height;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.5em;
  width: 100%;
  padding: 0 1.25em;

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}

@import "./colors";

@io-panel-height: 250px;

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: @io-panel-height;
  min-width: 100px;

  background: @term-bg;
  overflow-y: scroll;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-panel-resizer {
  width: 5px;
  background-color: @term-border-color;
  height: @io-panel-height;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.5em;
  width: 100%;
  padding: 0 1.25em;

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}

Allow for a smaller min width
Allow for a smaller min width
