github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

added support for focus to expand functionality in main-sidebar 

- enhanced Layout.js to add .main-sidebar .sidebar-focused
- added focus style same as hover style in sidebar nav links etc
- added sidebar-focused in sidebar-mini collapsed state
pull/2143/head
REJack 2019-06-26 15:58:53 +02:00
parent c99806c497
commit e9163d3688
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
11 changed files with 113 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
build/js/Layout.js
View File

@ -22,6 +22,7 @@ const Layout = (($) => {
const Selector = { const Selector = {
HEADER : '.main-header', HEADER : '.main-header',
MAIN_SIDEBAR : '.main-sidebar',
SIDEBAR : '.main-sidebar .sidebar', SIDEBAR : '.main-sidebar .sidebar',
CONTENT : '.content-wrapper', CONTENT : '.content-wrapper',
BRAND : '.brand-link', BRAND : '.brand-link',
@ -33,12 +34,13 @@ const Layout = (($) => {
} }
const ClassName = { const ClassName = {
HOLD : 'hold-transition', HOLD : 'hold-transition',
SIDEBAR : 'main-sidebar', SIDEBAR : 'main-sidebar',
CONTENT_FIXED: 'content-fixed', CONTENT_FIXED : 'content-fixed',
LAYOUT_FIXED : 'layout-fixed', SIDEBAR_FOCUSED: 'sidebar-focused',
NAVBAR_FIXED : 'layout-navbar-fixed', LAYOUT_FIXED : 'layout-fixed',
FOOTER_FIXED : 'layout-footer-fixed', NAVBAR_FIXED : 'layout-navbar-fixed',
FOOTER_FIXED : 'layout-footer-fixed',
} }
const Default = { const Default = {
@ -176,6 +178,14 @@ const Layout = (($) => {
Layout._jQueryInterface.call($('body')) Layout._jQueryInterface.call($('body'))
}) })
$(Selector.SIDEBAR + ' a').on('focusin', () => {
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
})
$(Selector.SIDEBAR + ' a').on('focusout', () => {
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
})
/** /**
* jQuery API * jQuery API
* ==================================================== * ====================================================

21
build/scss/_mixins.scss
View File

@ -23,7 +23,8 @@
// Add color to the sidebar toggle button // Add color to the sidebar toggle button
.sidebar-toggle { .sidebar-toggle {
color: $font-color; color: $font-color;
&:hover { &:hover,
&:focus {
color: $hover-color; color: $hover-color;
background: $hover-bg; background: $hover-bg;
} }
@ -36,7 +37,8 @@
color: $color; color: $color;
border-bottom: $border-bottom-width solid $border-bottom-color; border-bottom: $border-bottom-width solid $border-bottom-color;
&:hover { &:hover,
&:focus {
background-color: darken($bg-color, 1%); background-color: darken($bg-color, 1%);
} }
} }
@ -141,15 +143,15 @@
// links // links
> .nav-link { > .nav-link {
// border-left: 3px solid transparent; // border-left: 3px solid transparent;
&:active, &:active {
&:focus {
color: $sidebar-dark-color; color: $sidebar-dark-color;
} }
} }
// Hover and active states // Hover and active states
&.menu-open > .nav-link, &.menu-open > .nav-link,
&:hover > .nav-link { &:hover > .nav-link,
& > .nav-link:focus {
color: $sidebar-dark-hover-color; color: $sidebar-dark-hover-color;
background-color: $sidebar-dark-hover-bg; background-color: $sidebar-dark-hover-bg;
} }
@ -177,7 +179,8 @@
// All links within the sidebar menu // All links within the sidebar menu
.sidebar a { .sidebar a {
color: $sidebar-dark-color; color: $sidebar-dark-color;
&:hover { &:hover,
&:focus {
text-decoration: none; text-decoration: none;
} }
} }
@ -188,7 +191,8 @@
> .nav-link { > .nav-link {
color: $sidebar-dark-submenu-color; color: $sidebar-dark-submenu-color;
&:hover { &:hover,
&:focus {
color: $sidebar-dark-submenu-hover-color; color: $sidebar-dark-submenu-hover-color;
background-color: $sidebar-dark-submenu-hover-bg background-color: $sidebar-dark-submenu-hover-bg
} }
@ -196,7 +200,8 @@
> .nav-link.active { > .nav-link.active {
&, &,
&:hover { &:hover,
&:focus {
color: $sidebar-dark-submenu-active-color; color: $sidebar-dark-submenu-active-color;
background-color: $sidebar-dark-submenu-active-bg; background-color: $sidebar-dark-submenu-active-bg;
} }

3
build/scss/_sidebar-mini.scss
View File

@ -60,7 +60,8 @@
} }
} }
&:hover { &:hover,
&.sidebar-focused {
width: $sidebar-width; width: $sidebar-width;
.user-panel { .user-panel {
text-align: left; text-align: left;

122
dist/css/adminlte.css vendored
View File

@ -10300,12 +10300,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-primary .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -10328,7 +10329,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-primary .sidebar a:hover { .sidebar-dark-primary .sidebar a:hover, .sidebar-dark-primary .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -10336,12 +10337,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -10445,12 +10446,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-secondary .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-secondary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-secondary .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-secondary .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -10473,7 +10475,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-secondary .sidebar a:hover { .sidebar-dark-secondary .sidebar a:hover, .sidebar-dark-secondary .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -10481,12 +10483,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-secondary .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -10590,12 +10592,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-success .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-success .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -10618,7 +10621,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-success .sidebar a:hover { .sidebar-dark-success .sidebar a:hover, .sidebar-dark-success .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -10626,12 +10629,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-success .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-success .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -10735,12 +10738,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-info .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-info .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-info .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-info .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-info .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-info .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -10763,7 +10767,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-info .sidebar a:hover { .sidebar-dark-info .sidebar a:hover, .sidebar-dark-info .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -10771,12 +10775,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-info .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-info .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-info .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-info .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-info .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-info .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-info .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-info .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -10880,12 +10884,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-warning .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-warning .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-warning .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-warning .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -10908,7 +10913,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-warning .sidebar a:hover { .sidebar-dark-warning .sidebar a:hover, .sidebar-dark-warning .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -10916,12 +10921,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-warning .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-warning .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-warning .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -11025,12 +11030,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-danger .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-danger .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-danger .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-danger .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -11053,7 +11059,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-danger .sidebar a:hover { .sidebar-dark-danger .sidebar a:hover, .sidebar-dark-danger .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -11061,12 +11067,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-danger .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-danger .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-danger .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -11170,12 +11176,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-light .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-light .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-light .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-light .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-light .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-light .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -11198,7 +11205,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-light .sidebar a:hover { .sidebar-dark-light .sidebar a:hover, .sidebar-dark-light .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -11206,12 +11213,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-light .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-light .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-light .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-light .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-light .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-light .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-light .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-light .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -11315,12 +11322,13 @@ body,
color: #212529; color: #212529;
} }
.sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link:active, .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link:focus { .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link:active {
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-dark .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-dark-dark .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-dark .nav-sidebar > .nav-item:hover > .nav-link { .sidebar-dark-dark .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
@ -11343,7 +11351,7 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-dark .sidebar a:hover { .sidebar-dark-dark .sidebar a:hover, .sidebar-dark-dark .sidebar a:focus {
text-decoration: none; text-decoration: none;
} }
@ -11351,12 +11359,12 @@ body,
color: #C2C7D0; color: #C2C7D0;
} }
.sidebar-dark-dark .nav-treeview > .nav-item > .nav-link:hover { .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link:hover, .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link:focus {
color: #ffffff; color: #ffffff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.sidebar-dark-dark .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link.active:hover { .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-dark-dark .nav-treeview > .nav-item > .nav-link.active:focus {
color: #343a40; color: #343a40;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
@ -11474,32 +11482,35 @@ body,
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image { .sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image {
float: none; float: none;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover { .sidebar-mini.sidebar-collapse .main-sidebar:hover, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
width: 250px; width: 250px;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel { .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel {
text-align: left; text-align: left;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image { .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel .image {
float: left; float: left;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text { .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
margin-left: 0; margin-left: 0;
display: inline-block; display: inline-block;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image { .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
margin-right: .5rem; margin-right: .5rem;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-form, .sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-form,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info { .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .sidebar-form,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info {
display: block !important; display: block !important;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link > span { .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link > span, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important; display: inline-block !important;
} }
.sidebar-mini.sidebar-collapse .visible-sidebar-mini { .sidebar-mini.sidebar-collapse .visible-sidebar-mini {
@ -11545,32 +11556,35 @@ body,
.sidebar-mini-md.sidebar-collapse .main-sidebar .user-panel .image { .sidebar-mini-md.sidebar-collapse .main-sidebar .user-panel .image {
float: none; float: none;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused {
width: 250px; width: 250px;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel {
text-align: left; text-align: left;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel .image { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel .image, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel .image {
float: left; float: left;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-text { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-text, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-text {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
margin-left: 0; margin-left: 0;
display: inline-block; display: inline-block;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-image { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
margin-right: .5rem; margin-right: .5rem;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .sidebar-form, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .sidebar-form,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .sidebar-form,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info {
display: block !important; display: block !important;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link > span { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link > span, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important; display: inline-block !important;
} }
.sidebar-mini-md.sidebar-collapse .visible-sidebar-mini { .sidebar-mini-md.sidebar-collapse .visible-sidebar-mini {

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

8
dist/js/adminlte.js vendored
View File

@ -159,6 +159,7 @@
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
var Selector = { var Selector = {
HEADER: '.main-header', HEADER: '.main-header',
MAIN_SIDEBAR: '.main-sidebar',
SIDEBAR: '.main-sidebar .sidebar', SIDEBAR: '.main-sidebar .sidebar',
CONTENT: '.content-wrapper', CONTENT: '.content-wrapper',
BRAND: '.brand-link', BRAND: '.brand-link',
@ -172,6 +173,7 @@
HOLD: 'hold-transition', HOLD: 'hold-transition',
SIDEBAR: 'main-sidebar', SIDEBAR: 'main-sidebar',
CONTENT_FIXED: 'content-fixed', CONTENT_FIXED: 'content-fixed',
SIDEBAR_FOCUSED: 'sidebar-focused',
LAYOUT_FIXED: 'layout-fixed', LAYOUT_FIXED: 'layout-fixed',
NAVBAR_FIXED: 'layout-navbar-fixed', NAVBAR_FIXED: 'layout-navbar-fixed',
FOOTER_FIXED: 'layout-footer-fixed' FOOTER_FIXED: 'layout-footer-fixed'
@ -312,6 +314,12 @@
$(window).on('load', function () { $(window).on('load', function () {
Layout._jQueryInterface.call($('body')); Layout._jQueryInterface.call($('body'));
}); });
$(Selector.SIDEBAR + ' a').on('focusin', function () {
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
});
$(Selector.SIDEBAR + ' a').on('focusout', function () {
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
});
/** /**
* jQuery API * jQuery API
* ==================================================== * ====================================================

2
dist/js/adminlte.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js.map vendored
View File

File diff suppressed because one or more lines are too long