@kie-tools.dashbuilder-client.dist.org.dashbuilder.DashbuilderRuntime.less.nav-vertical-alt.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
//
// Nav Vertical Alt
// --------------------------------------------------

.layout-pf-alt-fixed.transitions .nav-pf-vertical-alt {
  transition: @flyout-transition-pf;

  &.collapsed .list-group-item .list-group-item-value {
    transition: opacity 0ms 100ms, opacity 100ms linear;
  }

  .list-group-item {
    .badge {
      transition: @flyout-transition-pf;
    }

    .list-group-item-value {
      transition: opacity 500ms ease-out;
      transition-delay: 150ms;
    }
  }
}

.nav-pf-vertical-alt {
  background: @nav-pf-vertical-alt-bg-color;

  .ie9.layout-pf-alt-fixed & {
    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
  }

  .layout-pf-alt-fixed & {
    border-right: 1px solid @nav-pf-vertical-alt-border-color;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    left: 0;
    position: fixed;
    top: @navbar-pf-alt-height; // move out of way of navbar-pf-alt
    width: @nav-pf-vertical-alt-width;
    z-index: @zindex-navbar-fixed;

    &.collapsed {
      width: @nav-pf-vertical-alt-collapsed-width !important;

      .list-group-item {
        .badge {
          padding: 2px 3px;
          right: 21px;
          top: 36px;
        }

        .list-group-item-value {
          opacity: 0;
        }
      }
    }

    &.hidden {
      display: none;

      &.show-mobile-nav {
        box-shadow: 0 0 3px fade(@color-pf-black, 15%);
        display: block !important;
      }
    }
  }

  .layout-pf-alt-fixed-with-footer & {
    bottom: @footer-pf-alt-height;
  }

  .list-group {
    border-top: 0;
    margin-bottom: 0;
  }

  .list-group-item {
    padding: 0;

    a {
      color: @gray-dark;
      display: block;
      font-size: (@font-size-base + 2);
      height: @nav-pf-vertical-alt-link-height;
      padding: @nav-pf-vertical-alt-link-padding;
      position: relative;
      white-space: nowrap;

      &:focus {
        color: @gray-dark;
        text-decoration: none;
      }

      &:hover {
        color: @nav-pf-vertical-alt-active-color;
        text-decoration: none;
      }
    }

    &.active {
      background-color: @nav-pf-vertical-alt-bg-color;
      border-color: @list-group-border;

      &:before {
        background: @nav-pf-vertical-alt-active-color;
        content: " ";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 5px;
      }

      a {
        color: @nav-pf-vertical-alt-active-color;
      }
    }

    .badge {
      background: @gray-dark;
      border: 1px solid @nav-pf-vertical-alt-bg-color;
      border-radius: 3px;
      color: @nav-pf-vertical-alt-badge-color;
      font-weight: 700;
      font-size: (@font-size-base - 3);
      padding: 5px;
      position: absolute;
      right: 15px;
      text-align: center;
      top: 21px;

      &.notifications {
        background: @notification-badge-color;
      }
    }

    .fa,
    .glyphicon,
    .pficon {
      float: left;
      font-size: 18px;
      line-height: 30px;
      margin-right: 10px;
      text-align: center;
      width: 18px;
    }

    .list-group-item-value {
      display: inline-block;
      line-height: 30px;
      opacity: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 140px;
    }

  }

  .list-group-item-separator {
    border-top-width: 5px;
  }

  .sidebar-pf & {
    margin-left: (-(@grid-gutter-width / 2));
    margin-right: (-(@grid-gutter-width / 2));
  }
}