mirror of https://github.com/ColorlibHQ/AdminLTE
Sidebar mini is here
Abdullah Almsaeed
parent
a771ce89ea
commit
b4cde82b74
|
|
@ -25,6 +25,7 @@
|
|||
//-----------
|
||||
@import "header.less";
|
||||
@import "sidebar.less";
|
||||
@import "sidebar-mini.less";
|
||||
@import "dropdown.less";
|
||||
@import "forms.less";
|
||||
@import "progress-bars.less";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* 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) {
|
||||
&.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 sidbar to shrink instead of disappearing
|
||||
.main-sidebar {
|
||||
//Don't go away! Just shrink
|
||||
.translate(0, 0);
|
||||
width: 50px!important;
|
||||
z-index: 850;
|
||||
|
||||
//Keep only the image of the user in the user panel
|
||||
.user-panel {
|
||||
> .info {
|
||||
display: none;
|
||||
}
|
||||
//Make the image fit
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
//Make the sidebar links, menus, labels, badeges
|
||||
//and angle icons disappear
|
||||
> li {
|
||||
position: relative;
|
||||
> a {
|
||||
margin-right: 0;
|
||||
}
|
||||
> a > span,
|
||||
> .treeview-menu,
|
||||
> a > .pull-right,
|
||||
&.header {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
> 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 > span:not(.pull-right),
|
||||
> .treeview-menu {
|
||||
display: block!important;
|
||||
position: absolute;
|
||||
width: @sidebar-width - 50;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
//position the header & treeview menus
|
||||
> a > span {
|
||||
top: 0;
|
||||
padding: 12px 5px 12px 20px;
|
||||
background-color: inherit;
|
||||
}
|
||||
> .treeview-menu {
|
||||
top: 44px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//One more thing to remove because it doesn't fit :-z
|
||||
.sidebar-form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
|
||||
/*!
|
||||
* AdminLTE v2.0.
|
||||
* AdminLTE v2.0.5
|
||||
* Author: Almsaeed Studio
|
||||
* Website: Almsaeed Studio <http://almsaeedstudio.com>
|
||||
* License: Open source - MIT
|
||||
|
|
@ -57,13 +57,10 @@ body {
|
|||
.content-wrapper,
|
||||
.right-side,
|
||||
.main-footer {
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-webkit-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-o-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
margin-left: 230px;
|
||||
z-index: 820;
|
||||
}
|
||||
|
|
@ -391,10 +388,10 @@ a:focus {
|
|||
min-height: 100%;
|
||||
width: 230px;
|
||||
z-index: 810;
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
-o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15), width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.main-sidebar,
|
||||
|
|
@ -540,6 +537,74 @@ a:focus {
|
|||
.sidebar-menu .treeview-menu > li > a > .fa-angle-down {
|
||||
width: auto;
|
||||
}
|
||||
/*
|
||||
* Component: Sidebar Mini
|
||||
*/
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-mini.sidebar-collapse .content-wrapper,
|
||||
.sidebar-mini.sidebar-collapse .right-side,
|
||||
.sidebar-mini.sidebar-collapse .main-footer {
|
||||
margin-left: 50px!important;
|
||||
z-index: 840;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
width: 50px!important;
|
||||
z-index: 850;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
|
||||
margin-right: 0;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li.header {
|
||||
display: none!important;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
|
||||
display: block!important;
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
left: 50px;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
|
||||
top: 0;
|
||||
padding: 12px 5px 12px 20px;
|
||||
background-color: inherit;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
|
||||
top: 44px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .sidebar-form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* Component: Dropdown menus
|
||||
* -------------------------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -252,7 +252,6 @@
|
|||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.skin-black .sidebar > .sidebar-menu > li > a {
|
||||
margin-right: 1px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.skin-black .sidebar > .sidebar-menu > li:hover > a,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -101,7 +101,6 @@
|
|||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.skin-black .sidebar > .sidebar-menu > li > a {
|
||||
margin-right: 1px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.skin-black .sidebar > .sidebar-menu > li:hover > a,
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo>a{color:#333}.skin-black .main-header>.logo:hover{background:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo>a{color:#fff}.skin-black .main-header>.logo:hover{background:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .user-panel>.image>img{border:1px solid #444}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#eee}.skin-black .main-sidebar,.skin-black .left-side,.skin-black .wrapper{background:#222}.skin-black .sidebar>.sidebar-menu>li.header{background:#1d1d1d;color:rgba(255,255,255,0.4)}.skin-black .sidebar>.sidebar-menu>li>a{margin-right:1px;border-left:3px solid transparent}.skin-black .sidebar>.sidebar-menu>li:hover>a,.skin-black .sidebar>.sidebar-menu>li.active>a{color:#fff;background:#444;border-left-color:#fff}.skin-black .sidebar>.sidebar-menu>li>.treeview-menu{background:#333}.skin-black .sidebar a{color:#eee}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#ccc}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #3c3c3c;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#3c3c3c;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
|
||||
.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo>a{color:#333}.skin-black .main-header>.logo:hover{background:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo>a{color:#fff}.skin-black .main-header>.logo:hover{background:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .user-panel>.image>img{border:1px solid #444}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#eee}.skin-black .main-sidebar,.skin-black .left-side,.skin-black .wrapper{background:#222}.skin-black .sidebar>.sidebar-menu>li.header{background:#1d1d1d;color:rgba(255,255,255,0.4)}.skin-black .sidebar>.sidebar-menu>li>a{border-left:3px solid transparent}.skin-black .sidebar>.sidebar-menu>li:hover>a,.skin-black .sidebar>.sidebar-menu>li.active>a{color:#fff;background:#444;border-left-color:#fff}.skin-black .sidebar>.sidebar-menu>li>.treeview-menu{background:#333}.skin-black .sidebar a{color:#eee}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#ccc}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #3c3c3c;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#3c3c3c;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
|
||||
Loading…
Reference in New Issue