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     width:120%;
 128 }
 129
 130 /* --- treeview menu  */
 131
 132 .sidebar .sidebar-menu .treeview-menu {
 133   display: none;
 134   list-style: none;
 135   padding: 0;
 136   margin: 0;
 137 }
 138 .sidebar .sidebar-menu .treeview-menu > li {
 139   margin: 0;
 140 }
 141 .sidebar .sidebar-menu li.open li.treeview-menu  > a {
 142   padding: 5px 5px 5px 20px;
 143   display: block;
 144   font-size: 14px;
 145   margin: 0px 0px;
 146 }
 147 .sidebar .sidebar-menu .treeview-menu > li > a > .fa,
 148 .sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
 149 .sidebar .sidebar-menu .treeview-menu > li > a > .ion {
 150   width: 20px;
 151 }
 152 /* background to highlighted treeview node
 153 .sidebar .sidebar-menu li li.treeview-menu.active  {
 154     background: #fff;
 155 }
 156 */
 157
 158 .sidebar .sidebar-menu li li.treeview-menu.active > a {
 159     font-weight: bold;
 160 }
 161 /* active sidebard... */
 162
 163
 164
 165 .badge-default {
 166     background-color: @gray-light;
 167     color: @body-bg;
 168 }
 169
 170 .badge-primary {
 171     background-color: @brand-primary;
 172     color: @body-bg;
 173 }
 174
 175 .badge-success {
 176     background-color: @brand-success;
 177     color: @body-bg;
 178 }
 179
 180 .badge-info {
 181     background-color: @brand-info;
 182     color: @body-bg;
 183 }
 184
 185 .badge-warning {
 186     background-color: @brand-warning;
 187     color: @body-bg;
 188 }
 189
 190 .badge-danger {
 191     background-color: @brand-danger;
 192     color: @body-bg;
 193 }
 194
 195 .sidebar .sidebar-menu > li.active .badge-info {
 196     background-color: @body-bg;
 197     color: @brand-info;
 198 }