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

   1 /*
   2  * Component: Sidebar
   3  * ------------------
   4  */
   5 //Main Sidebar
   6 // ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ```
   7
   8 .main-sidebar,
   9 .left-side {
  10   position: absolute;
  11   top: 0;
  12   left: 0;
  13   padding-top: 50px;
  14   min-height: 100%;
  15   width: @sidebar-width;
  16   z-index: 810;
  17   //Using disposable variable to join statements with a comma
  18   @transition-rule: @transition-speed @transition-fn,
  19   width @transition-speed @transition-fn;
  20   .transition-transform(@transition-rule);
  21   @media (max-width: @screen-header-collapse) {
  22     padding-top: 100px;
  23   }
  24   @media (max-width: @screen-xs-max) {
  25     .translate(-@sidebar-width, 0);
  26   }
  27   .sidebar-collapse & {
  28     @media (min-width: @screen-sm) {
  29       .translate(-@sidebar-width, 0);
  30     }
  31   }
  32   .sidebar-open & {
  33     @media (max-width: @screen-xs-max) {
  34       .translate(0, 0);
  35     }
  36   }
  37 }
  38
  39 .sidebar {
  40   padding-bottom: 10px;
  41 }
  42
  43 // remove border from form
  44 .sidebar-form {
  45   input:focus {
  46     border-color: transparent;
  47   }
  48 }
  49
  50 //Sidebar user panel
  51 .user-panel {
  52   position: relative;
  53   width: 100%;
  54   padding: 10px;
  55   overflow: hidden;
  56   .clearfix();
  57   > .image > img {
  58     width: 100%;
  59     max-width: 45px;
  60     height: auto;
  61   }
  62   > .info {
  63     padding: 5px 5px 5px 15px;
  64     line-height: 1;
  65     position: absolute;
  66     left: 55px;
  67     > p {
  68       font-weight: 600;
  69       margin-bottom: 9px;
  70     }
  71     > a {
  72       text-decoration: none;
  73       padding-right: 5px;
  74       margin-top: 3px;
  75       font-size: 11px;
  76       > .fa,
  77       > .ion,
  78       > .glyphicon {
  79         margin-right: 3px;
  80       }
  81     }
  82   }
  83 }
  84
  85 // Sidebar menu
  86 .sidebar-menu {
  87   list-style: none;
  88   margin: 0;
  89   padding: 0;
  90   //First Level
  91   > li {
  92     position: relative;
  93     margin: 0;
  94     padding: 0;
  95     > a {
  96       padding: 12px 5px 12px 15px;
  97       display: block;
  98       > .fa,
  99       > .glyphicon,
 100       > .ion {
 101         width: 20px;
 102       }
 103     }
 104     .label,
 105     .badge {
 106       margin-right: 5px;
 107     }
 108     .badge {
 109       margin-top: 3px;
 110     }
 111   }
 112   li.header {
 113     padding: 10px 25px 10px 15px;
 114     font-size: 12px;
 115   }
 116   li > a > .fa-angle-left,
 117   li > a > .pull-right-container > .fa-angle-left {
 118     width: auto;
 119     height: auto;
 120     padding: 0;
 121     margin-right: 10px;
 122   }
 123   li.active {
 124     > a > .fa-angle-left,
 125     > a > .pull-right-container > .fa-angle-left {
 126       .rotate(-90deg);
 127     }
 128     > .treeview-menu {
 129       display: block;
 130     }
 131   }
 132
 133   // Tree view menu
 134   .treeview-menu {
 135     display: none;
 136     list-style: none;
 137     padding: 0;
 138     margin: 0;
 139     padding-left: 5px;
 140     .treeview-menu {
 141       padding-left: 20px;
 142     }
 143     > li {
 144       margin: 0;
 145       > a {
 146         padding: 5px 5px 5px 15px;
 147         display: block;
 148         font-size: 14px;
 149         > .fa,
 150         > .glyphicon,
 151         > .ion {
 152           width: 20px;
 153         }
 154         > .pull-right-container > .fa-angle-left,
 155         > .pull-right-container > .fa-angle-down,
 156         > .fa-angle-left,
 157         > .fa-angle-down {
 158           width: auto;
 159         }
 160       }
 161     }
 162   }
 163 }