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

feat: add compact-mode class for sidebar-mini, header & footer

pull/5153/head
REJack 2023-06-01 00:55:57 +02:00
parent 8648b45361
commit ec65db906b
5 changed files with 110 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/scss/_app-sidebar.scss
View File

@ -22,16 +22,20 @@
.sidebar-brand {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
height: $lte-app-header-height;
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
flex: 1;
display: flex;
align-items: center;
&:hover {
text-decoration: none;
}
@ -40,9 +44,6 @@
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
@ -67,6 +68,7 @@
.brand-text {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
margin-left: .5rem;
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
@ -173,7 +175,7 @@
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: none #{"/*rtl:rotate(180deg)*/"};
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
}
}
}
@ -188,7 +190,7 @@
.nav-link > .nav-arrow,
.nav-link > p > .nav-arrow {
position: absolute;
top: .7rem;
top: 50%;
right: 1rem;
}
@ -203,10 +205,6 @@
padding-left: .5rem;
margin: 0;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
@ -228,7 +226,7 @@
> .nav-link {
.nav-arrow {
transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
}
}
}
@ -291,12 +289,22 @@
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
p {
display: inline-block;
width: 0;
white-space: nowrap;
}
}
.badge,
.nav-arrow {
display: none;
}
}
.sidebar-menu .nav-link p {
width: 0;
white-space: nowrap;
.brand-text {
display: inline-block;
max-width: 0;
overflow: hidden;
}
.sidebar-menu .nav-link p,
@ -338,6 +346,20 @@
animation-fill-mode: both;
}
.brand-text {
display: inline;
max-width: inherit;
overflow: auto;
margin-left: .5rem;
}
.badge,
.nav-arrow {
display: inherit;
}
.nav-link p {
padding-left: inherit;
}
.logo-xs {
visibility: hidden;
animation-name: fadeOut;
@ -371,7 +393,7 @@
max-height: 100vh;
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width));
}
}
@ -395,6 +417,13 @@
.app-footer {
margin-left: $lte-sidebar-mini-width;
}
&.compact-mode {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width-compact;
}
}
}
}
}
@ -416,7 +445,7 @@
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width));
overflow-x: hidden;
overflow-y: auto;
}

46
src/scss/_compact-mode.scss Normal file
View File

@ -0,0 +1,46 @@
.compact-mode {
.app-header {
.nav-link {
max-height: $nav-link-height-compact;
}
}
.nav-link {
--bs-nav-link-padding-y: .25rem;
--bs-nav-link-padding-x: .5rem;
}
&.sidebar-mini.sidebar-collapse {
.app-sidebar:not(:hover) {
min-width: $lte-sidebar-mini-width-compact;
max-width: $lte-sidebar-mini-width-compact;
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width-compact - $lte-sidebar-padding-x * 2 !important;
}
}
}
}
.logo-xs,
.logo-xl {
max-height: $lte-app-header-height-compact;
}
.brand-image {
height: $nav-link-height-compact;
width: $nav-link-height-compact;
}
.sidebar-brand {
height: $lte-app-header-height-compact;
}
.app-header {
max-height: $lte-app-header-height-compact;
}
.app-footer {
padding: $lte-app-footer-padding-compact;
}
}

15
src/scss/_variables.scss
View File

@ -15,7 +15,9 @@ $lte-transition-fn: ease-in-out !default;
$lte-sidebar-width: 250px !default;
$lte-sidebar-breakpoint: lg !default;
$lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-x-compact: .5rem !default;
$lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-padding-y-compact: .25rem !default;
$lte-sidebar-transition: min-width $lte-transition-speed $lte-transition-fn,
max-width $lte-transition-speed $lte-transition-fn,
margin-left $lte-transition-speed $lte-transition-fn,
@ -40,17 +42,21 @@ $lte-sidebar-header-color: shade-color($gray-800, 5%) !default;
// SIDEBAR MINI
// --------------------------------------------------------
$nav-link-padding-x-compact: .25rem !default;
$lte-sidebar-mini-width: ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
$lte-sidebar-mini-width-compact: ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
$lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
// MAIN HEADER
// --------------------------------------------------------
$nav-link-height-compact: 1.75rem !default;
$lte-app-header-bottom-border-width: $border-width !default;
$lte-app-header-bottom-border-color: var(--#{$prefix}border-color) !default;
$lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
$lte-app-header-link-padding-y: $navbar-padding-y !default;
$lte-app-header-height-inner: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
$lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
$lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
// Content padding
$lte-content-padding-y: 0 !default;
@ -59,6 +65,7 @@ $lte-content-padding-x: .5rem !default;
// MAIN FOOTER
// --------------------------------------------------------
$lte-app-footer-padding: 1rem !default;
$lte-app-footer-padding-compact: 0.5rem !default;
$lte-app-footer-border-top-width: 1px !default;
$lte-app-footer-border-top-color: var(--#{$prefix}border-color) !default;
$lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
@ -67,8 +74,12 @@ $lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
// BRAND LINK
// --------------------------------------------------------
$navbar-brand-padding-y-compact: $navbar-brand-padding-y * .75 !default;
$navbar-padding-y-compact: $navbar-padding-y * .5 !default;
$lte-brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y !default;
$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
$lte-brand-link-padding-x: $lte-sidebar-padding-x !default;
$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
$lte-brand-link-border-buttom: 1px !default;

3
src/scss/mixins/_animations.scss
View File

@ -29,7 +29,6 @@
}
}
@keyframes fadeIn {
from {
opacity: 0;
@ -47,6 +46,8 @@
to {
opacity: 0;
padding-left: 0;
margin-left: 0;
}
}

1
src/scss/parts/_core.scss
View File

@ -10,4 +10,5 @@
@import "../app-footer";
@import "../dropdown";
@import "../callouts";
@import "../compact-mode";
@import "../docs";