审查视图

public/assets/less/fastadmin/sidebar-mini.less 3.6 KB
王智 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
/*
 * Component: Sidebar Mini
 */

//Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini {
  //Sidebar mini should work only on devices larger than @screen-sm
  @media (min-width: @screen-sm) {
    //When the sidebar is collapsed...
    &.sidebar-collapse {

      //Apply the new margining to the main content and footer
      .content-wrapper,
      .right-side,
      .main-footer {
        margin-left: 50px !important;
        z-index: 840;
      }

      //Modify the sidebar to shrink instead of disappearing
      .main-sidebar {
        //Don't go away! Just shrink
        .translate(0, 0);
        width: 50px !important;
        z-index: 850;
      }

      .sidebar-menu {
        > li {
          position: relative;
          > a {
            margin-right: 0;
          }
          > a > span {
            border-top-right-radius: 4px;
          }

          &:not(.treeview) {
            > a > span {
              border-bottom-right-radius: 4px;
            }
          }

          > .treeview-menu {
            //Add some padding to the treeview menu
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-right-radius: 4px;
          }

          //Show menu items on hover
          &:hover {
            > a {
              //overflow: visible;
            }
            > a > span:not(.pull-right),//:not(.pull-right-container),
            > .treeview-menu {
              display: block !important;
              position: absolute;
              width: @sidebar-width - 50;
              left: 50px;
            }

            //position the header & treeview menus
            > a > span {
              top: 0;
              margin-left: -3px;
              padding: 12px 5px 12px 20px;
              background-color: inherit;
            }
            > a > .pull-right-container {
              //display: block!important;
              float: right;
              width: auto!important;
              left: 200px!important;
              top: 10px!important;
              > .label:not(:first-of-type) {
                display: none;
              }
            }
            > .treeview-menu {
              top: 44px;
              margin-left: 0;
            }
          }
        }
      }

      //Make the sidebar links, menus, labels, badges
      //and angle icons disappear
      .main-sidebar .user-panel > .info,
      .sidebar-form,
      .sidebar-menu > li > a > span,
      .sidebar-menu > li > .treeview-menu,
      .sidebar-menu > li > a > .pull-right,
      .sidebar-menu li.header {
        display: none !important;
        -webkit-transform: translateZ(0);
      }

      .main-header {
        //Let's make the logo also shrink and the mini logo to appear
        .logo {
          width: 50px;
          > .logo-mini {
            display: block;
            margin-left: -15px;
            margin-right: -15px;
            font-size: 18px;
          }
          > .logo-lg {
            display: none;
          }
        }

        //Since the logo got smaller, we need to fix the navbar's position
        .navbar {
          margin-left: 50px;
        }
      }
    }
  }
}

//A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.main-sidebar .user-panel,
.sidebar-menu > li.header {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu:hover {
  overflow: visible;
}

.sidebar-form,
.sidebar-menu > li.header {
  overflow: hidden;
  text-overflow: clip;
}

.sidebar-menu li > a {
  position: relative;
  > .pull-right-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
  }
}