kibana-with-account/src/plugins/kibana/public/visualize/editor/styles/_editor.less

kibana-with-account is develop based kibana project

.vis-editor {
  .flex-parent();

  @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
  @vis-editor-sidebar-min-width: 350px;
  @vis-editor-nesting-width: 8px;
  @vis-editor-agg-editor-spacing: 5px;

  // For the vis-editor sidebar nav
  .navbar-default .navbar-nav {
    &> .active > a:before {
      border: 7px solid transparent;
      border-bottom-color: @vis-editor-navbar-current-tab-color;
    }

    .danger {
      color: @vis-editor-navbar-error-state-color;
      background-color: @vis-editor-navbar-error-state-bg;
    }
  }

  .btn-xs {
    line-height: 1.3;
  }

  navbar {
    .bitty-modal-container {
      position: relative;

      .bitty-modal {
        position: absolute;
        cursor: pointer;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 10;
        background: fadeout(@vis-editor-navbar-modal-bg, 10%);
        color: @vis-editor-navbar-modal-color;
        text-align: center;
        padding-top: 6px;

        // Don't overflow container
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: none;
      }

      a {
        color: @vis-editor-navbar-modal-link-color;
      }
    }
  }

  &-content {
    .flex-parent();

    // overrides for tablet and desktop
    @media (min-width: @screen-md-min) {
      flex-direction: row;
    }
  }

  .collapsible-sidebar {
    .flex-parent(0, 0, auto);
  }

  &-sidebar {
    .flex-parent(1, 0, auto);

    // overrided for tablet and desktop
    @media (min-width: @screen-md-min) {
      flex-basis: @vis-editor-sidebar-basis;
      min-width: @vis-editor-sidebar-min-width;
      max-width: @vis-editor-sidebar-min-width;
    }

    nav {
      border-radius: 0px;
    }

    .sidebar-item {
      border-top: 0 !important;
    }

    .sidebar-container {
      .flex-parent(1, 1, auto);
      background-color: @vis-editor-sidebar-bg;

      form {
        .flex-parent(1, 1, auto);

        > div.vis-editor-config {
          @media (min-width: @screen-md-min) {
            .flex-parent(1, 1, 1px);
            overflow: auto;
          }
          @media (max-width: @screen-md-min) {
            .flex-parent(1, 1, auto);
          }
        }

        > .vis-edit-sidebar-buttons {
          flex: 0 0 auto;
        }

        label {
          margin-bottom: 0px;
        }
      }
    }

    .sidebar-item-title {
      font-size: 20px;
      font-weight: bold;
      border: inherit !important;
      background-color: @vis-editor-sidebar-title-bg;
      margin-bottom: @vis-editor-agg-editor-spacing;
      padding: 2px 5px !important;
    }

    .sidebar-item-title:hover {
      color: @vis-editor-sidebar-title-hover-color !important;
      background-color: @vis-editor-sidebar-title-hover-bg !important;
    }

    .hintbox {
      padding: @vis-editor-agg-editor-spacing;
      margin-bottom: @vis-editor-agg-editor-spacing;
    }

    label {
      flex: 2 0 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0;
    }
  }

  .visualization-options {
    padding: @vis-editor-agg-editor-spacing;

    .form-group {
      margin-bottom: @vis-editor-agg-editor-spacing;
    }
    .form-horizontal .control-label {
      text-align: left;
    }
  }

  nesting-indicator {
    display: flex;
    flex: 0 0 auto;

    > span {
      width: @vis-editor-nesting-width;
      background-color: @vis-editor-nesting-indicator-bg;
    }
  }

  &-agg {
    .flex-parent();

    //IE10/11 - prevent flex item from overflowing
    flex-basis: 100%;

    padding: @vis-editor-agg-editor-spacing;

    // wraps the .vis-editor-agg and nesting-indicator ^^
    &-wrapper {
      display: flex;
    }

    &-group {
      .flex-parent(0, 1, auto);
      color: @vis-editor-agg-group-color;
    }

    &-header {
      display: flex;
      align-items: center;
      flex: 1 0 auto;
      margin-bottom: @vis-editor-agg-editor-spacing;

      &-toggle {
        flex: 0 0 auto;
        margin-right: @vis-editor-agg-editor-spacing;
      }

      &-subagg-icon {
        flex: 0 1 auto;
        padding-right: @padding-base-vertical;
      }

      &-title {
        flex: 1 1 auto;
        .ellipsis();
        font-weight: bold;
      }

      &-description {
        font-weight: normal;
        padding-right: @vis-editor-agg-editor-spacing;

        &.danger {
          .text-danger();
          font-weight: bold;
        }
      }

      &-controls {
        flex: 0 0 auto;
      }
    }

    &-error {
      margin: @vis-editor-agg-editor-spacing 0;
      padding: @vis-editor-agg-editor-spacing;
      text-align: center;
      background: @vis-editor-agg-error-bg;
      color: @vis-editor-agg-error-color;
    }

    &-editor {
      &-ranges {
        td {
          padding: 0 @vis-editor-agg-editor-spacing @vis-editor-agg-editor-spacing 0;
          &:last-child {
            padding-right: 0;
          }
        }
      }

      .regex .flags {
        .docs {
          text-align: right;
        }

        a {
          color: @vis-editor-agg-editor-flags-color;
        }
      }

      &-advanced-toggle {
        text-align: right;
      }
    }

    &-form-row {
      display: flex;

      > * {
        flex: 1 1 auto;
        margin-right: @vis-editor-agg-editor-spacing;

        &:last-child {
          margin-right: 0px;
        }
      }

      > .btn {
        align-self: center;
      }
    }

    &-form-value {
      align-self: center;
      margin: 0 0 0 @vis-editor-agg-editor-spacing;
      font-size: 1.2em;
    }

    &-wide-btn {
      border-radius: 0;
      border-top: 2px solid;
      border-top-color: @vis-editor-agg-wide-btn-border;

      &-add {
        width: 140px;
        margin: -2px auto 5px auto;
        text-align: center;
        border: 2px solid;
        border-color: @vis-editor-agg-wide-btn-border;
        border-top: 0px;
        padding: 3px;
        border-bottom-right-radius: @border-radius-base;
        border-bottom-left-radius: @border-radius-base;
        background-color: @vis-editor-agg-wide-btn-bg;
        font-weight: bold;
      }

      &-add:hover {
        color: @vis-editor-agg-wide-btn-hover-color;
        background-color: @vis-editor-agg-wide-btn-hover-bg;
      }
    }

    &-add {
      .flex-parent();

      &-subagg {
        margin-bottom: -@vis-editor-agg-editor-spacing - 1; // extra one pixel covers the aggs bottom border
        margin-right: -@vis-editor-agg-editor-spacing;
        margin-left: -@vis-editor-agg-editor-spacing;
      }

      &-schemas {
        margin: @vis-editor-agg-editor-spacing * 3;
      }
    }

    &-order-agg {
      border: 2px solid;
      border-color: @vis-editor-agg-editor-order-border;
      border-radius: @border-radius-base;
      background-color: @vis-editor-agg-editor-order-bg;
      margin: @vis-editor-agg-editor-spacing;
      padding: @vis-editor-agg-editor-spacing;
    }
  }

  vis-editor-agg-group {
    .flex-parent(0, 1, auto);
  }

  &-canvas {
    flex: 1 0 (@screen-md-min - @vis-editor-sidebar-basis);
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-left: @collapser-width;

    &.embedded {
      flex-shrink: 1;
      flex-basis: 100%;
    }

    // overrided for tablet and desktop
    @media (min-width: @screen-md-min) {
      flex-shrink: 1;
      flex-basis: 100%;
    }

    &-title {
      text-align: center;
      margin: 10px 0 0;
    }

    visualize {
      .flex-parent();
      flex: 1 1 100%;
    }

    .visualize-chart {
      position: relative;
    }
  }
}

vis-editor,
vis-editor-agg-group,
vis-editor-agg,
vis-editor-agg-params,
vis-editor-agg-param,
vis-editor-vis-options,
vis-editor-vis-options > * {
  .flex-parent();
}

form.vis-share {
  div.form-control {
    height: inherit;
  }
}