ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/control-sidebar.less

   1 /*
   2  * Component: Control sidebar. By default, this is the right sidebar.
   3  */
   4 //The sidebar's background control class
   5 //This is a hack to make the background visible while scrolling
   6 .control-sidebar-bg {
   7   position: fixed;
   8   z-index: 1000;
   9   bottom: 0;
  10 }
  11
  12 //Transitions
  13 .control-sidebar-bg,
  14 .control-sidebar {
  15   top: 0;
  16   right: -@control-sidebar-width;
  17   width: @control-sidebar-width;
  18   .transition(right @transition-speed ease-in-out);
  19 }
  20
  21 //The sidebar
  22 .control-sidebar {
  23   position: absolute;
  24   padding-top: @navbar-height;
  25   z-index: 1010;
  26   //Fix position after header collapse
  27   @media (max-width: @screen-sm) {
  28     padding-top: @navbar-height + 50;
  29   }
  30   //Tab panes
  31   > .tab-content {
  32     padding: 10px 15px;
  33   }
  34   //Open state with slide over content effect
  35   &.control-sidebar-open {
  36     &,
  37     + .control-sidebar-bg {
  38       right: 0;
  39     }
  40   }
  41 }
  42
  43 //Open without slide over content
  44 .control-sidebar-open {
  45   .control-sidebar-bg,
  46   .control-sidebar {
  47     right: 0;
  48   }
  49   @media (min-width: @screen-sm) {
  50     .content-wrapper,
  51     .right-side,
  52     .main-footer {
  53       margin-right: @control-sidebar-width;
  54     }
  55   }
  56 }
  57
  58 //Control sidebar tabs
  59 .nav-tabs.control-sidebar-tabs {
  60   > li {
  61     &:first-of-type > a {
  62       &,
  63       &:hover,
  64       &:focus {
  65         border-left-width: 0;
  66       }
  67     }
  68     > a {
  69       .border-radius(0);
  70
  71       //Hover and active states
  72       &,
  73       &:hover {
  74         border-top: none;
  75         border-right: none;
  76         border-left: 1px solid transparent;
  77         border-bottom: 1px solid transparent;
  78       }
  79       .icon {
  80         font-size: 16px;
  81       }
  82     }
  83     //Active state
  84     &.active {
  85       > a {
  86         &,
  87         &:hover,
  88         &:focus,
  89         &:active {
  90           border-top: none;
  91           border-right: none;
  92           border-bottom: none;
  93         }
  94       }
  95     }
  96   }
  97   //Remove responsiveness on small screens
  98   @media (max-width: @screen-sm) {
  99     display: table;
 100     > li {
 101       display: table-cell;
 102     }
 103   }
 104 }
 105
 106 //Headings in the sidebar content
 107 .control-sidebar-heading {
 108   font-weight: 400;
 109   font-size: 16px;
 110   padding: 10px 0;
 111   margin-bottom: 10px;
 112 }
 113
 114 //Subheadings
 115 .control-sidebar-subheading {
 116   display: block;
 117   font-weight: 400;
 118   font-size: 14px;
 119 }
 120
 121 //Control Sidebar Menu
 122 .control-sidebar-menu {
 123   list-style: none;
 124   padding: 0;
 125   margin: 0 -15px;
 126   > li > a {
 127     .clearfix();
 128     display: block;
 129     padding: 10px 15px;
 130     > .control-sidebar-subheading {
 131       margin-top: 0;
 132     }
 133   }
 134   .menu-icon {
 135     float: left;
 136     width: 35px;
 137     height: 35px;
 138     border-radius: 50%;
 139     text-align: center;
 140     line-height: 35px;
 141   }
 142   .menu-info {
 143     margin-left: 45px;
 144     margin-top: 3px;
 145     > .control-sidebar-subheading {
 146       margin: 0;
 147     }
 148     > p {
 149       margin: 0;
 150       font-size: 11px;
 151     }
 152   }
 153   .progress {
 154     margin: 0;
 155   }
 156 }
 157
 158 //Dark skin
 159 .control-sidebar-dark {
 160   color: @sidebar-dark-color;
 161   // Background
 162   &,
 163   + .control-sidebar-bg {
 164     background: @sidebar-dark-bg;
 165   }
 166   // Sidebar tabs
 167   .nav-tabs.control-sidebar-tabs {
 168     border-bottom: darken(@sidebar-dark-bg, 3%);
 169     > li {
 170       > a {
 171         background: darken(@sidebar-dark-bg, 5%);
 172         color: @sidebar-dark-color;
 173         //Hover and active states
 174         &,
 175         &:hover,
 176         &:focus {
 177           border-left-color: darken(@sidebar-dark-bg, 7%);
 178           border-bottom-color: darken(@sidebar-dark-bg, 7%);
 179         }
 180         &:hover,
 181         &:focus,
 182         &:active {
 183           background: darken(@sidebar-dark-bg, 3%);
 184         }
 185         &:hover {
 186           color: #fff;
 187         }
 188       }
 189       //Active state
 190       &.active {
 191         > a {
 192           &,
 193           &:hover,
 194           &:focus,
 195           &:active {
 196             background: @sidebar-dark-bg;
 197             color: #fff;
 198           }
 199         }
 200       }
 201     }
 202   }
 203   //Heading & subheading
 204   .control-sidebar-heading,
 205   .control-sidebar-subheading {
 206     color: #fff;
 207   }
 208   //Sidebar list
 209   .control-sidebar-menu {
 210     > li {
 211       > a {
 212         &:hover {
 213           background: @sidebar-dark-hover-bg;
 214         }
 215         .menu-info {
 216           > p {
 217             color: @sidebar-dark-color;
 218           }
 219         }
 220       }
 221     }
 222   }
 223 }
 224
 225 //Light skin
 226 .control-sidebar-light {
 227   color: lighten(@sidebar-light-color, 10%);
 228   // Background
 229   &,
 230   + .control-sidebar-bg {
 231     background: @sidebar-light-bg;
 232     border-left: 1px solid @gray;
 233   }
 234   // Sidebar tabs
 235   .nav-tabs.control-sidebar-tabs {
 236     border-bottom: @gray;
 237     > li {
 238       > a {
 239         background: darken(@sidebar-light-bg, 5%);
 240         color: @sidebar-light-color;
 241         //Hover and active states
 242         &,
 243         &:hover,
 244         &:focus {
 245           border-left-color: @gray;
 246           border-bottom-color: @gray;
 247         }
 248         &:hover,
 249         &:focus,
 250         &:active {
 251           background: darken(@sidebar-light-bg, 3%);
 252         }
 253       }
 254       //Active state
 255       &.active {
 256         > a {
 257           &,
 258           &:hover,
 259           &:focus,
 260           &:active {
 261             background: @sidebar-light-bg;
 262             color: #111;
 263           }
 264         }
 265       }
 266     }
 267   }
 268   //Heading & subheading
 269   .control-sidebar-heading,
 270   .control-sidebar-subheading {
 271     color: #111;
 272   }
 273   //Sidebar list
 274   .control-sidebar-menu {
 275     margin-left: -14px;
 276     > li {
 277       > a {
 278         &:hover {
 279           background: @sidebar-light-hover-bg;
 280         }
 281         .menu-info {
 282           > p {
 283             color: lighten(@sidebar-light-color, 10%);
 284           }
 285         }
 286       }
 287     }
 288   }
 289 }