kibana-123/src/ui/public/styles/sidebar.less

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/mixins";

.sidebar-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: @sidebar-bg;
  border-right-color: @sidebar-border;
  border-bottom-color: @sidebar-border;

  .sidebar-well {
    background-color: @sidebar-well-bg;
  }
  .vis-editor-agg-header-controls {
    .btn-primary {
        &.disabled,
        &[disabled] {
          background-color: @kibanaGray4;
        }
    }
  }

  .sidebar-list {
    .navbar-nav.navbar-right {
      border-radius: 4px;
      overflow:hidden;
      margin-right: -13px;
      margin-top: 2px;
      .navbar-btn-link {
        padding-left: 10px;
        padding-right: 10px;
      }
    }

    ul {
      list-style: none;
      margin-bottom: 0px;
    }

    .sidebar-item {
      border-top-color: @sidebar-border;
      font-size: @sidebar-item-font-size;

      a:not(.sidebar-item-button) {
        color: @sidebar-item-color;

        &:hover {
          color: @sidebar-item-color;
          text-decoration: none;
        }
      }

      .active {
        background-color: @sidebar-active-bg !important;
        color: @sidebar-active-color;

        &:hover,
        &:hover .text-muted {
          color: @sidebar-active-hover-color;
          background-color: @sidebar-active-hover-bg;
        }
      }
    }

      .sidebar-item-title,
      .sidebar-item-text,
      .sidebar-item-button {
        margin: 0;
        padding: 5px 10px;
        text-align: center;
        width: 100%;
        border: none;
        border-radius: 0;
      }

      .sidebar-item-title {
        text-align: left;
        white-space: nowrap;
        .ellipsis();

        &.full-title {
          white-space: normal;
        }
      }

      .sidebar-item-text {
        background: @sidebar-item-text-bg;
      }

      .sidebar-item-button {
        font-size: inherit;
        display: block;

        &[disabled] {
          opacity: 0.65;
          cursor: default;
        }

        &.primary {
          background-color: @btn-primary-bg;
          color: @btn-primary-color;
        }

        &.info {
          background-color: @btn-info-bg;
          color: @btn-info-color
        }

        &.success {
          background-color: @btn-success-bg;
          color: @btn-success-color
        }

        &.warning {
          background-color: @btn-warning-bg;
          color: @btn-warning-color
        }

        &.danger {
          background-color: @btn-danger-bg;
          color: @btn-danger-color
        }

        &.default {
          .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
        }
      }
  }

    .sidebar-list-header {
      padding-left: 10px;
      padding-right: 10px;
      color: @sidebar-header-color;
      border: 1px solid;
      border-color: @sidebar-header-border;
    }

  .index-pattern {
    font-weight: bold;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    background-color: @kibanaGray4;
    line-height: 28px;

    > * {
      flex: 0 1 auto;
    }
    &.active {
      background-color: @sidebar-active-bg;
      color: @sidebar-active-color;
    }
  }

  .index-pattern-selection .sidebar-item-title {
    background-color: @sidebar-index-pattern-selection-bg;
    &:hover {
      background-color: @sidebar-index-pattern-selection-bg-hover;
    }
  }

}