mirror of https://github.com/ColorlibHQ/AdminLTE
feat: reworked layout-fixed & added layout-fixed-complete
parent
d6a4e1ce37
commit
ea99a09d7b
|
@ -124,7 +124,7 @@ const htmlPath = convertPathToHtml(path);
|
|||
<i class="nav-icon fa-solid fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<span class="nav-badge badge text-bg-secondary opacity-75 me-3"
|
||||
<span class="nav-badge badge text-bg-secondary me-3"
|
||||
>6</span
|
||||
>
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
|
@ -140,7 +140,7 @@ const htmlPath = convertPathToHtml(path);
|
|||
]}
|
||||
>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Unfixed Sidebar</p>
|
||||
<p>Default Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
|
@ -152,6 +152,15 @@ const htmlPath = convertPathToHtml(path);
|
|||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Fixed Complete</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/sidebar-mini.html"}
|
||||
|
|
|
@ -53,7 +53,7 @@ The sidebar used in this page to the left provides an example of what your sideb
|
|||
<p>
|
||||
Level 2 (Badge)
|
||||
<span
|
||||
class="nav-badge badge text-bg-secondary opacity-75 me-3"
|
||||
class="nav-badge badge text-bg-secondary me-3"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
|
|
|
@ -0,0 +1,208 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Fixed Complete";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-complete";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed-complete sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
<div class="app-main-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0">Fixed Complete <small>(Sidebar, Header & Footer)</small></h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-dismiss="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
||||
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
|
||||
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
|
||||
accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
|
||||
justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
|
||||
voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
||||
</p>
|
||||
<p>
|
||||
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
|
||||
<div class="app-content-bottom-area">
|
||||
<div class="row">
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
// --------------------------------------------------------
|
||||
|
|
|
@ -46,8 +46,6 @@
|
|||
|
||||
to {
|
||||
opacity: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
@import "../root";
|
||||
@import "../app-wrapper";
|
||||
@import "../app-content";
|
||||
@import "../app-header";
|
||||
@import "../app-sidebar";
|
||||
@import "../app-main";
|
||||
|
|
Loading…
Reference in New Issue