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

   1 /*
   2  * Component: Sidebar Mini
   3  */
   4
   5 //Add sidebar-mini class to the body tag to activate this feature
   6 .sidebar-mini {
   7   //Sidebar mini should work only on devices larger than @screen-sm
   8   @media (min-width: @screen-sm) {
   9     //When the sidebar is collapsed...
  10     &.sidebar-collapse {
  11
  12       //Apply the new margining to the main content and footer
  13       .content-wrapper,
  14       .right-side,
  15       .main-footer {
  16         margin-left: 50px !important;
  17         z-index: 840;
  18       }
  19
  20       //Modify the sidebar to shrink instead of disappearing
  21       .main-sidebar {
  22         //Don't go away! Just shrink
  23         .translate(0, 0);
  24         width: 50px !important;
  25         z-index: 850;
  26       }
  27
  28       .sidebar-menu {
  29         > li {
  30           position: relative;
  31           > a {
  32             margin-right: 0;
  33           }
  34           > a > span {
  35             border-top-right-radius: 4px;
  36           }
  37
  38           &:not(.treeview) {
  39             > a > span {
  40               border-bottom-right-radius: 4px;
  41             }
  42           }
  43
  44           > .treeview-menu {
  45             //Add some padding to the treeview menu
  46             padding-top: 5px;
  47             padding-bottom: 5px;
  48             border-bottom-right-radius: 4px;
  49           }
  50
  51           //Show menu items on hover
  52           &:hover {
  53             > a {
  54               //overflow: visible;
  55             }
  56             > a > span:not(.pull-right),//:not(.pull-right-container),
  57             > .treeview-menu {
  58               display: block !important;
  59               position: absolute;
  60               width: @sidebar-width - 50;
  61               left: 50px;
  62             }
  63
  64             //position the header & treeview menus
  65             > a > span {
  66               top: 0;
  67               margin-left: -3px;
  68               padding: 12px 5px 12px 20px;
  69               background-color: inherit;
  70             }
  71             > a > .pull-right-container {
  72               //display: block!important;
  73               float: right;
  74               width: auto!important;
  75               left: 200px!important;
  76               top: 10px!important;
  77               > .label:not(:first-of-type) {
  78                 display: none;
  79               }
  80             }
  81             > .treeview-menu {
  82               top: 44px;
  83               margin-left: 0;
  84             }
  85           }
  86         }
  87       }
  88
  89       //Make the sidebar links, menus, labels, badges
  90       //and angle icons disappear
  91       .main-sidebar .user-panel > .info,
  92       .sidebar-form,
  93       .sidebar-menu > li > a > span,
  94       .sidebar-menu > li > .treeview-menu,
  95       .sidebar-menu > li > a > .pull-right,
  96       .sidebar-menu li.header {
  97         display: none !important;
  98         -webkit-transform: translateZ(0);
  99       }
 100
 101       .main-header {
 102         //Let's make the logo also shrink and the mini logo to appear
 103         .logo {
 104           width: 50px;
 105           > .logo-mini {
 106             display: block;
 107             margin-left: -15px;
 108             margin-right: -15px;
 109             font-size: 18px;
 110           }
 111           > .logo-lg {
 112             display: none;
 113           }
 114         }
 115
 116         //Since the logo got smaller, we need to fix the navbar's position
 117         .navbar {
 118           margin-left: 50px;
 119         }
 120       }
 121     }
 122   }
 123 }
 124
 125 //A fix for text overflow while transitioning from sidebar mini to full sidebar
 126 .sidebar-menu,
 127 .main-sidebar .user-panel,
 128 .sidebar-menu > li.header {
 129   white-space: nowrap;
 130   overflow: hidden;
 131 }
 132
 133 .sidebar-menu:hover {
 134   overflow: visible;
 135 }
 136
 137 .sidebar-form,
 138 .sidebar-menu > li.header {
 139   overflow: hidden;
 140   text-overflow: clip;
 141 }
 142
 143 .sidebar-menu li > a {
 144   position: relative;
 145   > .pull-right-container {
 146     position: absolute;
 147     right: 10px;
 148     top: 50%;
 149     margin-top: -7px;
 150   }
 151 }