git.roojs.org Git - roojs1/blob - less/roojs-bootstrap/sidebar-nav.less

   1 .sidebar {
   2     margin-bottom: 5px;
   3 }
   4
   5 /* override boostrap a:hover */
   6 .sidebar a:hover {
   7     text-decoration: none;
   8 }
   9
  10 .sidebar .sidebar-menu {
  11     list-style: none;
  12     margin: 0;
  13     padding: 0;
  14 }
  15
  16 /* GREY BG */
  17 .sidebar .sidebar-menu > li,
  18 .sidebar .sidebar-menu li.active li.treeview-menu
  19 {
  20     margin: 0;
  21     padding: 0;
  22     border-bottom: 1px solid @gray-light;
  23     background-color: @gray-lighter;
  24 }
  25 /* active child menu - white BG */
  26 .sidebar .sidebar-menu li.active li.treeview-menu {
  27     background-color: @gray-light;
  28 }
  29
  30 .sidebar .sidebar-menu > li > a ,
  31 .sidebar .sidebar-menu li.open li.treeview-menu > a
  32 {
  33     padding: 12px 5px 12px 15px;
  34     display: block;
  35     color: @gray-dark;
  36 }
  37
  38 .sidebar .sidebar-menu > li > a > .fa,
  39 .sidebar .sidebar-menu > li > a > .glyphicon,
  40 .sidebar .sidebar-menu > li > a > .ion {
  41     width: 20px;
  42 }
  43
  44 .sidebar .sidebar-menu li:hover,
  45 .sidebar .sidebar-menu li:focus,
  46 .sidebar .sidebar-menu li:active,
  47 .sidebar .sidebar-menu li.active li.treeview-menu:hover,
  48 .sidebar .sidebar-menu li.active li.treeview-menu:focus,
  49 .sidebar .sidebar-menu li.active li.treeview-menu:active
  50 {
  51     background-color: @body-bg;
  52 }
  53
  54
  55 .sidebar .sidebar-menu li:hover a,
  56 .sidebar .sidebar-menu li:focus a,
  57 .sidebar .sidebar-menu li:active a,
  58 .sidebar .sidebar-menu li.oepn li.treeview-menu a:hover,
  59 .sidebar .sidebar-menu li.open li.treeview-menu a:focus,
  60 .sidebar .sidebar-menu li.open li.treeview-menu a:active
  61 {
  62     color: @gray-base;
  63     text-decoration: none;
  64 }
  65
  66
  67 /* BLUE ACTIVE */
  68 .sidebar .sidebar-menu li.active {
  69   color: @body-bg;
  70   background-color: @brand-primary; //#337ab7;
  71   border-color: darken(@brand-primary, 10%); //#2e6da4;
  72 }
  73
  74 .sidebar .sidebar-menu li.active:hover,
  75 .sidebar .sidebar-menu li.active:focus,
  76 .sidebar .sidebar-menu li.active.focus
  77 {
  78     color: @body-bg;
  79     background-color: @brand-primary; //#204d74;
  80     border-color: darken(@brand-primary, 10%); //#122b40;
  81 }
  82
  83 .sidebar .sidebar-menu li.active  a {
  84     color: @body-bg;
  85 }
  86
  87 .sidebar .sidebar-menu li.disabled {
  88   color: @gray-dark;
  89   background-color: @body-bg;
  90   border-color: @gray-dark;
  91 }
  92
  93 .sidebar .sidebar-menu li.disabled a {
  94     color: @gray-light;
  95     cursor: default;
  96 }
  97
  98 .sidebar .sidebar-menu li.danger,
  99 .sidebar .sidebar-menu li.danger.active {
 100   color: @body-bg;
 101   background-color: @brand-danger;
 102   border-color: lighten(@brand-danger, 10%);
 103 }
 104
 105 .sidebar .sidebar-menu li.danger:hover,
 106 .sidebar .sidebar-menu li.danger:focus,
 107 .sidebar .sidebar-menu li.danger.active:focus
 108 {
 109     color: @body-bg;
 110     background-color: @brand-danger;
 111     border-color: darken(@brand-danger, 10%);
 112     border-bottom: 1px solid darken(@brand-danger, 10%);
 113 }
 114
 115 .sidebar .sidebar-menu li.danger a,
 116 .sidebar .sidebar-menu li.danger.active a{
 117     color: @body-bg;
 118 }
 119
 120 /* --- open  */
 121 .sidebar .sidebar-menu li.open ul {
 122     display:block;
 123 }
 124
 125 .sidebar .sidebar-menu li.open .treeview-menu {
 126     display: block;
 127 }
 128
 129 /* --- treeview menu  */
 130
 131 .sidebar .sidebar-menu .treeview-menu {
 132   display: none;
 133   list-style: none;
 134   padding: 0;
 135   margin: 0;
 136 }
 137 .sidebar .sidebar-menu .treeview-menu > li {
 138   margin: 0;
 139 }
 140 .sidebar .sidebar-menu li.open li.treeview-menu  > a {
 141   padding: 5px 5px 5px 20px;
 142   display: block;
 143   font-size: 14px;
 144   margin: 0px 0px;
 145 }
 146 .sidebar .sidebar-menu .treeview-menu > li > a > .fa,
 147 .sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
 148 .sidebar .sidebar-menu .treeview-menu > li > a > .ion {
 149   width: 20px;
 150 }
 151 /* background to highlighted treeview node
 152 .sidebar .sidebar-menu li li.treeview-menu.active  {
 153     background: #fff;
 154 }
 155 */
 156
 157 .sidebar .sidebar-menu li li.treeview-menu.active > a {
 158     font-weight: bold;
 159 }
 160 /* active sidebard... */
 161
 162
 163
 164 .badge-default {
 165     background-color: @gray-light;
 166     color: @body-bg;
 167 }
 168
 169 .badge-primary {
 170     background-color: @brand-primary;
 171     color: @body-bg;
 172 }
 173
 174 .badge-success {
 175     background-color: @brand-success;
 176     color: @body-bg;
 177 }
 178
 179 .badge-info {
 180     background-color: @brand-info;
 181     color: @body-bg;
 182 }
 183
 184 .badge-warning {
 185     background-color: @brand-warning;
 186     color: @body-bg;
 187 }
 188
 189 .badge-danger {
 190     background-color: @brand-danger;
 191     color: @body-bg;
 192 }
 193
 194 .sidebar .sidebar-menu > li.active .badge-info {
 195     background-color: @body-bg;
 196     color: @brand-info;
 197 }