less/patternfly/sidebar.less

   1 //
   2 // Sidebar
   3 // --------------------------------------------------
   4
   5 .sidebar-header {
   6   border-bottom: 1px solid darken(@page-header-border-color, 2%);
   7   padding-bottom: ((@line-height-computed / 2) + 1);
   8   margin: (@line-height-computed * 2)+10 0 @line-height-computed;
   9   .actions {
  10     margin-top: -2px;
  11   }
  12 }
  13
  14 .sidebar-pf {
  15   .sidebar-header + .list-group {
  16     border-top: 0;
  17     margin-top: -@grid-gutter-width/2/2;
  18     .list-group-item {
  19       background: transparent;
  20       border-color: darken(@page-header-border-color, 2%);
  21       padding-left: 0;
  22     }
  23     .list-group-item-heading {
  24       font-size: @font-size-base;
  25     }
  26   }
  27   .nav-category {
  28     h2 {
  29       color: @dropdown-header-color;
  30       font-size: @font-size-base;
  31       font-weight: 400;
  32       line-height: @line-height-computed + 1;
  33       margin: 0;
  34       padding: 8px 0;
  35     }
  36     + .nav-category {
  37       margin-top: @grid-gutter-width/4;
  38     }
  39   }
  40   .nav-pills > li {
  41     &.active > a {
  42       background: @dropdown-link-active-bg !important;
  43       border-color: @dropdown-link-active-border-color !important;
  44       color: #fff;
  45       @media (min-width: @grid-float-breakpoint) {
  46         &:after {
  47           content: @fa-var-angle-right;
  48           font-family: @icon-font-name-fa;
  49           display: block;
  50           position: absolute;
  51           right: @grid-gutter-width/2/2;
  52           top: 1px;
  53         }
  54       }
  55       .fa {
  56         color: #fff;
  57       }
  58     }
  59     > a {
  60       border-bottom: 1px solid transparent;
  61       border-radius: 0;
  62       border-top: 1px solid transparent;
  63       color: @text-color;
  64       font-size: @font-size-base + 1;
  65       line-height: @line-height-computed + 1;
  66       padding: 1px @grid-gutter-width/2;
  67       &:hover {
  68         background: @dropdown-link-hover-bg;
  69         border-color: @dropdown-link-hover-border-color;
  70       }
  71       .fa {
  72         color: lighten(@gray-pf, 12%);
  73         font-size: @font-size-base + 3;
  74         margin-right: @grid-gutter-width/4;
  75         text-align: center;
  76         vertical-align: middle;
  77         width: @font-size-base + 3;
  78       }
  79     }
  80   }
  81   .nav-stacked {
  82     margin-left: -@grid-gutter-width/2;
  83     margin-right: -@grid-gutter-width/2;
  84     li + li {
  85       margin-top: 0;
  86     }
  87   }
  88   .panel {
  89     background: transparent;
  90   }
  91   .panel-body {
  92     padding: 6px @grid-gutter-width/2;
  93     .nav-pills > li > a {
  94       padding-left: @grid-gutter-width/2 + 17;
  95     }
  96   }
  97   .panel-heading {
  98     padding: 9px @grid-gutter-width/2;
  99   }
 100   .panel-title {
 101     font-size: @font-size-base;
 102     > a {
 103       &:before {
 104         display: inline-block;
 105         margin-left: 1px;
 106         margin-right: 4px;
 107         width: 9px;
 108       }
 109       &.collapsed:before {
 110         margin-left: 3px;
 111         margin-right: 2px;
 112       }
 113     }
 114   }
 115 }
 116
 117 @media (min-width: @grid-float-breakpoint-max) {
 118   .sidebar-header-bleed-left {
 119     margin-left: -@grid-gutter-width/2;
 120     > h2 {
 121       margin-left: @grid-gutter-width/2;
 122     }
 123   }
 124   .sidebar-header-bleed-right {
 125     margin-right: -@grid-gutter-width/2;
 126     .actions {
 127       margin-right: @grid-gutter-width/2;
 128     }
 129     > h2 {
 130       margin-right: @grid-gutter-width/2;
 131     }
 132     + .list-group {
 133       margin-right: -@grid-gutter-width/2;
 134     }
 135   }
 136   .sidebar-pf {
 137     .panel-group .panel-default, .treeview {
 138       border-left: 0;
 139       border-right: 0;
 140       margin-left: -@grid-gutter-width/2;
 141       margin-right: -@grid-gutter-width/2;
 142     }
 143     .treeview {
 144       margin-top: 5px;
 145       .list-group-item {
 146         padding-left: @grid-gutter-width/2;
 147         padding-right: @grid-gutter-width/2;
 148         &.node-selected:after {
 149           content: @fa-var-angle-right;
 150           font-family: @icon-font-name-fa;
 151           display: block;
 152           position: absolute;
 153           right: @grid-gutter-width/2/2;
 154           top: 1px;
 155         }
 156       }
 157     }
 158   }
 159 }
 160
 161 @media (min-width: @grid-float-breakpoint) {
 162   .sidebar-pf {
 163     background: @sidebar-pf-bg;
 164     &.sidebar-pf-left {
 165       border-right: 1px solid @sidebar-pf-border-color;
 166     }
 167     &.sidebar-pf-right {
 168       border-left: 1px solid @sidebar-pf-border-color;
 169     }
 170     > .nav-category, > .nav-stacked {
 171       margin-top: 5px;
 172     }
 173   }
 174 }