lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reworked layout-fixed & added layout-fixed-complete

Browse Source
This commit is contained in:
REJack
2023-06-03 00:53:46 +02:00
parent d6a4e1ce37
commit ea99a09d7b
12 changed files with 332 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/scss/_app-content.scss Normal file
View File

@@ -0,0 +1,36 @@
.app-content {
padding: $lte-content-padding-y $lte-content-padding-x;
}
.app-content-bottom-area {
display: flex;
align-items: center;
padding: $lte-content-padding-y $lte-content-padding-x;
overflow: auto;
background: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top;
> .row {
display: contents;
}
&:not(.app-content-bottom-area-md),
&:not(.app-content-bottom-area-lg),
&:not(.app-content-bottom-area-xl) {
min-height: $lte-app-content-bottom-area-height-sm;
max-height: $lte-app-content-bottom-area-height-sm;
}
&.app-content-bottom-area-md {
min-height: $lte-app-content-bottom-area-height-md;
max-height: $lte-app-content-bottom-area-height-md;
}
&.app-content-bottom-area-lg {
min-height: $lte-app-content-bottom-area-height-lg;
max-height: $lte-app-content-bottom-area-height-lg;
}
&.app-content-bottom-area-xl {
min-height: $lte-app-content-bottom-area-height-xl;
max-height: $lte-app-content-bottom-area-height-xl;
}
}

3
src/scss/_app-footer.scss
View File

@@ -6,11 +6,10 @@
grid-area: #{$lte-prefix}app-footer;
width: inherit;
max-width: 100vw;
min-height: 3rem;
padding: $lte-app-footer-padding;
min-height: $lte-app-footer-height;
color: $lte-app-footer-color;
background-color: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top;
@include transition($lte-transition-speed $lte-transition-fn);
}

61
src/scss/_app-main.scss
View File

@@ -1,8 +1,8 @@
.app-main {
position: relative;
grid-area: #{$lte-prefix}app-main;
max-width: 100vw;
padding-bottom: 1rem;
position: relative;
@include transition($lte-transition-speed $lte-transition-fn);
.app-content-header {
@@ -14,63 +14,4 @@
line-height: 2.5rem;
}
}
.app-content-bottom-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: $lte-content-padding-y $lte-content-padding-x;
display: flex;
align-items: center;
background: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top;
overflow: auto;
> .row {
display: contents;
}
}
&.app-content-bottom-area-sm,
&.app-content-bottom-area-md,
&.app-content-bottom-area-lg {
height: calc(100vh - #{$lte-app-header-height} - #{$lte-app-footer-height});
.compact-mode & {
height: calc(100vh - #{$lte-app-header-height-compact} - #{$lte-app-footer-height});
}
.content {
height: 100%;
overflow: auto;
padding-bottom: 1rem;
}
}
&.app-content-bottom-area-sm {
padding-bottom: $lte-app-content-bottom-area-height-sm * 2;
.app-content-bottom-area {
height: $lte-app-content-bottom-area-height-sm;
}
}
&.app-content-bottom-area-md {
padding-bottom: $lte-app-content-bottom-area-height-md * 2;
.app-content-bottom-area {
height: $lte-app-content-bottom-area-height-md;
}
}
&.app-content-bottom-area-lg {
padding-bottom: $lte-app-content-bottom-area-height-lg * 2;
.app-content-bottom-area {
height: $lte-app-content-bottom-area-height-lg;
}
}
.app-content {
padding: $lte-content-padding-y $lte-content-padding-x;
}
}

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

@@ -22,13 +22,13 @@
.sidebar-brand {
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
height: $lte-app-header-height;
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);
@@ -67,8 +67,8 @@
}
.brand-text {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
margin-left: .5rem;
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
@@ -81,17 +81,19 @@
padding-right: $lte-sidebar-padding-x;
padding-bottom: $lte-sidebar-padding-y;
padding-left: $lte-sidebar-padding-x;
overflow-x: hidden;
overflow-y: auto;
@include scrollbar-color-gray();
@include scrollbar-width-thin();
.nav-link {
display: flex;
justify-content: flex-start;
}
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
max-width: 1.5rem;
}
// Sidebar Menu. First level links
@@ -184,6 +186,9 @@
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
}
}
@@ -193,6 +198,10 @@
.nav-link > p > .nav-badge {
position: absolute;
right: 1rem;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
animation-delay: $lte-transition-speed;
}
.nav-link > .nav-arrow,
@@ -200,6 +209,10 @@
position: absolute;
top: 50%;
right: 1rem;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
animation-delay: $lte-transition-speed;
}
.nav-link {
@@ -297,15 +310,20 @@
.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-badge,
.nav-arrow {
display: none;
animation-name: fadeOut;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
animation-delay: $lte-transition-speed;
}
}
@@ -317,13 +335,15 @@
.sidebar-menu .nav-link p,
.brand-text,
.logo-xl {
.logo-xl,
.nav-arrow {
visibility: hidden;
animation-name: fadeOut;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
.logo-xs {
display: inline-block;
visibility: visible;
@@ -357,16 +377,23 @@
.brand-text {
display: inline;
max-width: inherit;
overflow: auto;
margin-left: .5rem;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
.badge,
.nav-badge,
.nav-arrow {
display: inherit;
display: inline-block;
visibility: visible;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
animation-delay: $lte-transition-speed;
}
.nav-link p {
padding-left: inherit;
padding-left: .5rem;
}
.logo-xs {
visibility: hidden;
@@ -379,8 +406,7 @@
.sidebar-collapse:not(.sidebar-mini) {
.app-sidebar {
// stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
}
}
@@ -392,46 +418,34 @@
/* stylelint-disable-next-line scss/selector-no-union-class-name */
&#{$infix} {
@include media-breakpoint-up($next) {
&.layout-fixed-complete,
&.layout-fixed {
.app-main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.app-sidebar-wrapper {
position: relative;
}
.app-main {
flex: 1 1 auto;
overflow: auto;
}
.app-sidebar {
position: fixed;
position: sticky;
top: 0;
bottom: 0;
left: 0;
max-height: 100vh;
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width));
height: subtract(100vh, add($lte-app-header-height, 1px));
}
}
.app-header,
.app-main,
.app-footer {
margin-left: var(--#{$lte-prefix}sidebar-width);
}
&.sidebar-collapse {
.app-header,
.app-main,
.app-footer {
margin-left: 0;
}
}
&.sidebar-mini.sidebar-collapse {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width;
}
&.compact-mode {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width-compact;
}
}
}
&.layout-fixed-complete {
.app-main-wrapper {
max-height: 100vh;
}
}
}
@@ -445,36 +459,24 @@
}
.app-sidebar {
position: fixed;
position: sticky;
top: 0;
bottom: 0;
left: 0;
max-height: 100vh;
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, $lte-app-header-bottom-border-width));
overflow-x: hidden;
overflow-y: auto;
height: subtract(100vh, add($lte-app-header-height, 1px));
}
}
&.sidebar-mini .app-sidebar {
margin-left: -$lte-sidebar-mini-width;
}
&.sidebar-open {
.app-sidebar {
margin-left: 0;
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
position: absolute;
inset: 0;
z-index: $lte-zindex-sidebar-overlay;
width: 100%;
height: 100%;
cursor: pointer;
visibility: visible;
background-color: rgba(0, 0, 0, .2);
animation-name: fadeIn;

4
src/scss/_bootstrap-variables.scss
View File

@@ -1248,7 +1248,7 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
@@ -1439,7 +1439,7 @@ $popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;

7
src/scss/_compact-mode.scss
View File

@@ -1,5 +1,7 @@
.compact-mode {
.app-header {
max-height: $lte-app-header-height-compact;
.nav-link {
max-height: $nav-link-height-compact;
}
@@ -29,15 +31,12 @@
}
.brand-image {
height: $nav-link-height-compact;
width: $nav-link-height-compact;
height: $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;

10
src/scss/_variables.scss
View File

@@ -63,20 +63,20 @@ $lte-content-padding-y: 0 !default;
$lte-content-padding-x: .5rem !default;
// MAIN CONTENT
$lte-app-content-bottom-area-height-sm: 3rem !default;
$lte-app-content-bottom-area-height-md: 4.5rem !default;
$lte-app-content-bottom-area-height-lg: 6rem !default;
$lte-app-content-bottom-area-height-sm: 3.5rem !default;
$lte-app-content-bottom-area-height-md: 6rem !default;
$lte-app-content-bottom-area-height-lg: 9rem !default;
$lte-app-content-bottom-area-height-xl: 12rem !default;
// MAIN FOOTER
// --------------------------------------------------------
$lte-app-footer-padding: 1rem !default;
$lte-app-footer-padding-compact: 0.5rem !default;
$lte-app-footer-padding-compact: .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;
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
$lte-app-footer-height: 2.5rem !default;
// BRAND LINK
// --------------------------------------------------------

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

@@ -46,8 +46,6 @@
to {
opacity: 0;
padding-left: 0;
margin-left: 0;
}
}

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

@@ -4,6 +4,7 @@
@import "../root";
@import "../app-wrapper";
@import "../app-content";
@import "../app-header";
@import "../app-sidebar";
@import "../app-main";