@kie-tools.dashbuilder-client.dist.org.dashbuilder.DashbuilderRuntime.less.sidebar.less Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of quarkus-dashbuilder-ui
Dashbuilder extension Web Bundle
There is a newer version: 0.32.0
//
// Sidebar
// --------------------------------------------------

.sidebar-header {
  border-bottom: 1px solid darken(@page-header-border-color, 2%);
  padding-bottom: ((@line-height-computed / 2) + 1);
  margin: ((@line-height-computed * 2) + 10) 0 @line-height-computed;
  .actions {
    margin-top: -2px;
  }
}

.sidebar-pf {
  .sidebar-header + .list-group {
    border-top: 0;
    margin-top: (-@grid-gutter-width / 2 / 2);
    .list-group-item {
      background: transparent;
      border-color: darken(@page-header-border-color, 2%);
      padding-left: 0;
    }
    .list-group-item-heading {
      font-size: @font-size-base;
    }
  }
  .nav-category {
    h2 {
      color: @dropdown-header-color;
      font-size: @font-size-base;
      font-weight: 400;
      line-height: (@line-height-computed + 1);
      margin: 0;
      padding: 8px 0;
    }
    + .nav-category {
      margin-top: (@grid-gutter-width / 4);
    }
  }
  .nav-pills > li {
    &.active > a {
      background: @dropdown-link-active-bg !important;
      border-color: @dropdown-link-active-border-color !important;
      color: @color-pf-white;
      @media (min-width: @grid-float-breakpoint) {
        &:after {
          content: @fa-var-angle-right;
          font-family: @icon-font-name-fa;
          display: block;
          position: absolute;
          right: (@grid-gutter-width / 2 / 2);
          top: 1px;
        }
      }
      .fa {
        color: @color-pf-white;
      }
    }
    > a {
      border-bottom: 1px solid transparent;
      border-radius: 0;
      border-top: 1px solid transparent;
      color: @text-color;
      font-size: (@font-size-base + 1);
      line-height: (@line-height-computed + 1);
      padding: 1px (@grid-gutter-width / 2);
      &:hover {
        background: @dropdown-link-hover-bg;
        border-color: @dropdown-link-hover-border-color;
      }
      .fa {
        color: lighten(@gray-pf, 12%);
        font-size: (@font-size-base + 3);
        margin-right: (@grid-gutter-width / 4);
        text-align: center;
        vertical-align: middle;
        width: (@font-size-base + 3);
      }
    }
  }
  .nav-stacked {
    margin-left: (-(@grid-gutter-width / 2));
    margin-right: (-(@grid-gutter-width / 2));
    li + li {
      margin-top: 0;
    }
  }
  .panel {
    background: transparent;
  }
  .panel-body {
    padding: 6px (@grid-gutter-width / 2);
    .nav-pills > li > a {
      padding-left: (@grid-gutter-width / 2 + 17);
    }
  }
  .panel-heading {
    padding: 9px (@grid-gutter-width / 2);
  }
  .panel-title {
    font-size: @font-size-base;
    > a {
      &:before {
        display: inline-block;
        margin-left: 1px;
        margin-right: 4px;
        width: 9px;
      }
      &.collapsed:before {
        margin-left: 3px;
        margin-right: 2px;
      }
    }
  }
}

@media (min-width: @grid-float-breakpoint-max) {
  .sidebar-header-bleed-left {
    margin-left: (-(@grid-gutter-width / 2));
    > h2 {
      margin-left: (@grid-gutter-width / 2);
    }
  }
  .sidebar-header-bleed-right {
    margin-right: (-(@grid-gutter-width / 2));
    .actions {
      margin-right: (@grid-gutter-width / 2);
    }
    > h2 {
      margin-right: (@grid-gutter-width / 2);
    }
    + .list-group {
      margin-right: (-(@grid-gutter-width / 2));
    }
  }
  .sidebar-pf {
    .panel-group .panel-default,
    .treeview {
      border-left: 0;
      border-right: 0;
      margin-left: (-(@grid-gutter-width / 2));
      margin-right: (-(@grid-gutter-width / 2));
    }
    .treeview {
      margin-top: 5px;
      .list-group-item {
        padding-left: (@grid-gutter-width / 2);
        padding-right: (@grid-gutter-width / 2);
        &.node-selected:after {
          content: @fa-var-angle-right;
          font-family: @icon-font-name-fa;
          display: block;
          position: absolute;
          right: (@grid-gutter-width/2 / 2);
          top: 1px;
        }
      }
    }
  }
}

@media (min-width: @grid-float-breakpoint) {
  .sidebar-pf {
    background: @sidebar-pf-bg;
    &.sidebar-pf-left {
      border-right: 1px solid @sidebar-pf-border-color;
    }
    &.sidebar-pf-right {
      border-left: 1px solid @sidebar-pf-border-color;
    }
    > .nav-category,
    > .nav-stacked {
      margin-top: 5px;
    }
  }
}