mirror of https://github.com/ColorlibHQ/AdminLTE
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 statepull/2143/head
REJack
parent
c99806c497
commit
e9163d3688
|
|
@ -22,6 +22,7 @@ const Layout = (($) => {
|
|||
|
||||
const Selector = {
|
||||
HEADER : '.main-header',
|
||||
MAIN_SIDEBAR : '.main-sidebar',
|
||||
SIDEBAR : '.main-sidebar .sidebar',
|
||||
CONTENT : '.content-wrapper',
|
||||
BRAND : '.brand-link',
|
||||
|
|
@ -36,6 +37,7 @@ const Layout = (($) => {
|
|||
HOLD : 'hold-transition',
|
||||
SIDEBAR : 'main-sidebar',
|
||||
CONTENT_FIXED : 'content-fixed',
|
||||
SIDEBAR_FOCUSED: 'sidebar-focused',
|
||||
LAYOUT_FIXED : 'layout-fixed',
|
||||
NAVBAR_FIXED : 'layout-navbar-fixed',
|
||||
FOOTER_FIXED : 'layout-footer-fixed',
|
||||
|
|
@ -176,6 +178,14 @@ const Layout = (($) => {
|
|||
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
|
||||
* ====================================================
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
// Add color to the sidebar toggle button
|
||||
.sidebar-toggle {
|
||||
color: $font-color;
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $hover-color;
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
|
@ -36,7 +37,8 @@
|
|||
color: $color;
|
||||
border-bottom: $border-bottom-width solid $border-bottom-color;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($bg-color, 1%);
|
||||
}
|
||||
}
|
||||
|
|
@ -141,15 +143,15 @@
|
|||
// links
|
||||
> .nav-link {
|
||||
// border-left: 3px solid transparent;
|
||||
&:active,
|
||||
&:focus {
|
||||
&:active {
|
||||
color: $sidebar-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover and active states
|
||||
&.menu-open > .nav-link,
|
||||
&:hover > .nav-link {
|
||||
&:hover > .nav-link,
|
||||
& > .nav-link:focus {
|
||||
color: $sidebar-dark-hover-color;
|
||||
background-color: $sidebar-dark-hover-bg;
|
||||
}
|
||||
|
|
@ -177,7 +179,8 @@
|
|||
// All links within the sidebar menu
|
||||
.sidebar a {
|
||||
color: $sidebar-dark-color;
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -188,7 +191,8 @@
|
|||
> .nav-link {
|
||||
color: $sidebar-dark-submenu-color;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-dark-submenu-hover-color;
|
||||
background-color: $sidebar-dark-submenu-hover-bg
|
||||
}
|
||||
|
|
@ -196,7 +200,8 @@
|
|||
|
||||
> .nav-link.active {
|
||||
&,
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $sidebar-dark-submenu-active-color;
|
||||
background-color: $sidebar-dark-submenu-active-bg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -10300,12 +10300,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -10328,7 +10329,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-primary .sidebar a:hover {
|
||||
.sidebar-dark-primary .sidebar a:hover, .sidebar-dark-primary .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -10336,12 +10337,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -10445,12 +10446,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -10473,7 +10475,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-secondary .sidebar a:hover {
|
||||
.sidebar-dark-secondary .sidebar a:hover, .sidebar-dark-secondary .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -10481,12 +10483,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -10590,12 +10592,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -10618,7 +10621,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-success .sidebar a:hover {
|
||||
.sidebar-dark-success .sidebar a:hover, .sidebar-dark-success .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -10626,12 +10629,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -10735,12 +10738,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -10763,7 +10767,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-info .sidebar a:hover {
|
||||
.sidebar-dark-info .sidebar a:hover, .sidebar-dark-info .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -10771,12 +10775,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -10880,12 +10884,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -10908,7 +10913,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-warning .sidebar a:hover {
|
||||
.sidebar-dark-warning .sidebar a:hover, .sidebar-dark-warning .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -10916,12 +10921,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -11025,12 +11030,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -11053,7 +11059,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-danger .sidebar a:hover {
|
||||
.sidebar-dark-danger .sidebar a:hover, .sidebar-dark-danger .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -11061,12 +11067,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -11170,12 +11176,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -11198,7 +11205,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-light .sidebar a:hover {
|
||||
.sidebar-dark-light .sidebar a:hover, .sidebar-dark-light .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -11206,12 +11213,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -11315,12 +11322,13 @@ body,
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -11343,7 +11351,7 @@ body,
|
|||
color: #C2C7D0;
|
||||
}
|
||||
|
||||
.sidebar-dark-dark .sidebar a:hover {
|
||||
.sidebar-dark-dark .sidebar a:hover, .sidebar-dark-dark .sidebar a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -11351,12 +11359,12 @@ body,
|
|||
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;
|
||||
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;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
@ -11474,32 +11482,35 @@ body,
|
|||
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 .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;
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
-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;
|
||||
}
|
||||
.sidebar-mini.sidebar-collapse .visible-sidebar-mini {
|
||||
|
|
@ -11545,32 +11556,35 @@ body,
|
|||
.sidebar-mini-md.sidebar-collapse .main-sidebar .user-panel .image {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 .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;
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
-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;
|
||||
}
|
||||
.sidebar-mini-md.sidebar-collapse .visible-sidebar-mini {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -159,6 +159,7 @@
|
|||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var Selector = {
|
||||
HEADER: '.main-header',
|
||||
MAIN_SIDEBAR: '.main-sidebar',
|
||||
SIDEBAR: '.main-sidebar .sidebar',
|
||||
CONTENT: '.content-wrapper',
|
||||
BRAND: '.brand-link',
|
||||
|
|
@ -172,6 +173,7 @@
|
|||
HOLD: 'hold-transition',
|
||||
SIDEBAR: 'main-sidebar',
|
||||
CONTENT_FIXED: 'content-fixed',
|
||||
SIDEBAR_FOCUSED: 'sidebar-focused',
|
||||
LAYOUT_FIXED: 'layout-fixed',
|
||||
NAVBAR_FIXED: 'layout-navbar-fixed',
|
||||
FOOTER_FIXED: 'layout-footer-fixed'
|
||||
|
|
@ -312,6 +314,12 @@
|
|||
$(window).on('load', function () {
|
||||
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
|
||||
* ====================================================
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue