openecomp-ui/resources/scss/components/_navigationSideBar.scss

   1 .software-product-navigation-side-bar {
   2     width: 245px;
   3     height: 100%;
   4     background-color: $white;
   5     border-right: 1px solid $light-gray;
   6     @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
   7     border-bottom: 0;
   8
   9     .navigation-side-content {
  10         overflow: hidden;
  11         height: 100%;
  12
  13         .navigation-group {
  14             height: 100%;
  15             display: flex;
  16             flex-direction: column;
  17             background-color: $tlv-gray;
  18             .group-name {
  19                 @extend .heading-4-semibold;
  20                 @include ellipsis;
  21                 min-height: 70px;
  22                 display: block;
  23                 height: 70px;
  24                 padding: 24px 12px 13px 40px;
  25                 background-color: $white;
  26                 border-bottom: 1px solid $tlv-light-gray;
  27             }
  28         }
  29
  30         .navigation-group-items {
  31             padding-left: 20px;
  32             overflow-y: auto;
  33
  34             .navigation-group-item {
  35                 @extend .body-1;
  36                 cursor: pointer;
  37                 margin: 18px 0;
  38                 padding-left: 20px;
  39                 color: $dark-gray;
  40                 line-height: 17px;
  41                 &.selected-item {
  42                     padding-left: 0;
  43                     .collapse.in {
  44                         padding-left: 20px;
  45                     }
  46                 }
  47                 .navigation-group-item-name {
  48                     @include ellipsis;
  49                     white-space: normal;
  50                     &.selected {
  51                         @extend .body-1-semibold;
  52                         border-left: 4px solid $blue;
  53                         padding-left: 18px;
  54                         color: $blue;
  55                     }
  56                     &.bold-name {
  57                         @extend .body-1-semibold;
  58                     }
  59                 }
  60             }
  61         }
  62     }
  63 }