mirror of https://github.com/ColorlibHQ/AdminLTE
feat: reworked layout-fixed & added layout-fixed-complete
REJack
parent
d6a4e1ce37
commit
ea99a09d7b
|
|
@ -124,7 +124,7 @@ const htmlPath = convertPathToHtml(path);
|
||||||
<i class="nav-icon fa-solid fa-copy"></i>
|
<i class="nav-icon fa-solid fa-copy"></i>
|
||||||
<p>
|
<p>
|
||||||
Layout Options
|
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
|
>6</span
|
||||||
>
|
>
|
||||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
<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>
|
<i class="nav-icon fa-regular fa-circle"></i>
|
||||||
<p>Unfixed Sidebar</p>
|
<p>Default Sidebar</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|
@ -152,6 +152,15 @@ const htmlPath = convertPathToHtml(path);
|
||||||
<p>Fixed Sidebar</p>
|
<p>Fixed Sidebar</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item">
|
||||||
<a
|
<a
|
||||||
href={htmlPath + "/layout/sidebar-mini.html"}
|
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>
|
<p>
|
||||||
Level 2 (Badge)
|
Level 2 (Badge)
|
||||||
<span
|
<span
|
||||||
class="nav-badge badge text-bg-secondary opacity-75 me-3"
|
class="nav-badge badge text-bg-secondary me-3"
|
||||||
>
|
>
|
||||||
6
|
6
|
||||||
</span>
|
</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;
|
grid-area: #{$lte-prefix}app-footer;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
|
min-height: 3rem;
|
||||||
padding: $lte-app-footer-padding;
|
padding: $lte-app-footer-padding;
|
||||||
min-height: $lte-app-footer-height;
|
|
||||||
color: $lte-app-footer-color;
|
color: $lte-app-footer-color;
|
||||||
background-color: $lte-app-footer-bg;
|
background-color: $lte-app-footer-bg;
|
||||||
border-top: $lte-app-footer-border-top;
|
border-top: $lte-app-footer-border-top;
|
||||||
@include transition($lte-transition-speed $lte-transition-fn);
|
@include transition($lte-transition-speed $lte-transition-fn);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
.app-main {
|
.app-main {
|
||||||
|
position: relative;
|
||||||
grid-area: #{$lte-prefix}app-main;
|
grid-area: #{$lte-prefix}app-main;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
position: relative;
|
|
||||||
@include transition($lte-transition-speed $lte-transition-fn);
|
@include transition($lte-transition-speed $lte-transition-fn);
|
||||||
|
|
||||||
.app-content-header {
|
.app-content-header {
|
||||||
|
|
@ -14,63 +14,4 @@
|
||||||
line-height: 2.5rem;
|
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 {
|
.sidebar-brand {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: $lte-app-header-height;
|
||||||
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
|
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: $navbar-brand-font-size;
|
font-size: $navbar-brand-font-size;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
height: $lte-app-header-height;
|
|
||||||
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
|
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
|
||||||
@include transition(width $lte-transition-speed $lte-transition-fn);
|
@include transition(width $lte-transition-speed $lte-transition-fn);
|
||||||
|
|
||||||
|
|
@ -67,8 +67,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-text {
|
.brand-text {
|
||||||
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
|
|
||||||
margin-left: .5rem;
|
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);
|
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--#{$prefix}emphasis-color);
|
color: var(--#{$prefix}emphasis-color);
|
||||||
|
|
@ -81,17 +81,19 @@
|
||||||
padding-right: $lte-sidebar-padding-x;
|
padding-right: $lte-sidebar-padding-x;
|
||||||
padding-bottom: $lte-sidebar-padding-y;
|
padding-bottom: $lte-sidebar-padding-y;
|
||||||
padding-left: $lte-sidebar-padding-x;
|
padding-left: $lte-sidebar-padding-x;
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
@include scrollbar-color-gray();
|
@include scrollbar-color-gray();
|
||||||
@include scrollbar-width-thin();
|
@include scrollbar-width-thin();
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
.nav-icon {
|
.nav-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 1.5rem;
|
||||||
|
max-width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sidebar Menu. First level links
|
// Sidebar Menu. First level links
|
||||||
|
|
@ -184,6 +186,9 @@
|
||||||
.nav-arrow {
|
.nav-arrow {
|
||||||
@include transition(transform $lte-transition-fn $lte-transition-speed);
|
@include transition(transform $lte-transition-fn $lte-transition-speed);
|
||||||
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
|
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 {
|
.nav-link > p > .nav-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
animation-duration: $lte-transition-speed;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-delay: $lte-transition-speed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link > .nav-arrow,
|
.nav-link > .nav-arrow,
|
||||||
|
|
@ -200,6 +209,10 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
animation-duration: $lte-transition-speed;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-delay: $lte-transition-speed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
|
|
@ -297,15 +310,20 @@
|
||||||
.sidebar-menu {
|
.sidebar-menu {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
|
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0;
|
width: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.badge,
|
.nav-badge,
|
||||||
.nav-arrow {
|
.nav-arrow {
|
||||||
display: none;
|
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,
|
.sidebar-menu .nav-link p,
|
||||||
.brand-text,
|
.brand-text,
|
||||||
.logo-xl {
|
.logo-xl,
|
||||||
|
.nav-arrow {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
animation-name: fadeOut;
|
animation-name: fadeOut;
|
||||||
animation-duration: $lte-transition-speed;
|
animation-duration: $lte-transition-speed;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.logo-xs {
|
.logo-xs {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
|
@ -357,16 +377,23 @@
|
||||||
.brand-text {
|
.brand-text {
|
||||||
display: inline;
|
display: inline;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
overflow: auto;
|
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
animation-duration: $lte-transition-speed;
|
||||||
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
.badge,
|
.nav-badge,
|
||||||
.nav-arrow {
|
.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 {
|
.nav-link p {
|
||||||
padding-left: inherit;
|
padding-left: .5rem;
|
||||||
}
|
}
|
||||||
.logo-xs {
|
.logo-xs {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
@ -379,8 +406,7 @@
|
||||||
|
|
||||||
.sidebar-collapse:not(.sidebar-mini) {
|
.sidebar-collapse:not(.sidebar-mini) {
|
||||||
.app-sidebar {
|
.app-sidebar {
|
||||||
// stylelint-disable-next-line
|
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
|
||||||
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -392,46 +418,34 @@
|
||||||
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
||||||
&#{$infix} {
|
&#{$infix} {
|
||||||
@include media-breakpoint-up($next) {
|
@include media-breakpoint-up($next) {
|
||||||
|
&.layout-fixed-complete,
|
||||||
&.layout-fixed {
|
&.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 {
|
.app-sidebar {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
|
|
||||||
.sidebar-wrapper {
|
.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 {
|
.app-sidebar {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
|
|
||||||
|
|
||||||
.sidebar-wrapper {
|
.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));
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-mini .app-sidebar {
|
|
||||||
margin-left: -$lte-sidebar-mini-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-open {
|
&.sidebar-open {
|
||||||
.app-sidebar {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-overlay {
|
.sidebar-overlay {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 0;
|
inset: 0;
|
||||||
left: 0;
|
|
||||||
z-index: $lte-zindex-sidebar-overlay;
|
z-index: $lte-zindex-sidebar-overlay;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
background-color: rgba(0, 0, 0, .2);
|
background-color: rgba(0, 0, 0, .2);
|
||||||
animation-name: fadeIn;
|
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-color: var(--#{$prefix}border-color-translucent) !default;
|
||||||
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
$dropdown-border-width: var(--#{$prefix}border-width) !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-bg: $dropdown-border-color !default;
|
||||||
$dropdown-divider-margin-y: $spacer * .5 !default;
|
$dropdown-divider-margin-y: $spacer * .5 !default;
|
||||||
$dropdown-box-shadow: $box-shadow !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-width: var(--#{$prefix}border-width) !default;
|
||||||
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||||
$popover-border-radius: var(--#{$prefix}border-radius-lg) !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-box-shadow: $box-shadow !default;
|
||||||
|
|
||||||
$popover-header-font-size: $font-size-base !default;
|
$popover-header-font-size: $font-size-base !default;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
.compact-mode {
|
.compact-mode {
|
||||||
.app-header {
|
.app-header {
|
||||||
|
max-height: $lte-app-header-height-compact;
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
max-height: $nav-link-height-compact;
|
max-height: $nav-link-height-compact;
|
||||||
}
|
}
|
||||||
|
|
@ -29,15 +31,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-image {
|
.brand-image {
|
||||||
height: $nav-link-height-compact;
|
|
||||||
width: $nav-link-height-compact;
|
width: $nav-link-height-compact;
|
||||||
|
height: $nav-link-height-compact;
|
||||||
}
|
}
|
||||||
.sidebar-brand {
|
.sidebar-brand {
|
||||||
height: $lte-app-header-height-compact;
|
height: $lte-app-header-height-compact;
|
||||||
}
|
}
|
||||||
.app-header {
|
|
||||||
max-height: $lte-app-header-height-compact;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-footer {
|
.app-footer {
|
||||||
padding: $lte-app-footer-padding-compact;
|
padding: $lte-app-footer-padding-compact;
|
||||||
|
|
|
||||||
|
|
@ -63,20 +63,20 @@ $lte-content-padding-y: 0 !default;
|
||||||
$lte-content-padding-x: .5rem !default;
|
$lte-content-padding-x: .5rem !default;
|
||||||
|
|
||||||
// MAIN CONTENT
|
// MAIN CONTENT
|
||||||
$lte-app-content-bottom-area-height-sm: 3rem !default;
|
$lte-app-content-bottom-area-height-sm: 3.5rem !default;
|
||||||
$lte-app-content-bottom-area-height-md: 4.5rem !default;
|
$lte-app-content-bottom-area-height-md: 6rem !default;
|
||||||
$lte-app-content-bottom-area-height-lg: 6rem !default;
|
$lte-app-content-bottom-area-height-lg: 9rem !default;
|
||||||
|
$lte-app-content-bottom-area-height-xl: 12rem !default;
|
||||||
|
|
||||||
// MAIN FOOTER
|
// MAIN FOOTER
|
||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
$lte-app-footer-padding: 1rem !default;
|
$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-width: 1px !default;
|
||||||
$lte-app-footer-border-top-color: var(--#{$prefix}border-color) !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-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-bg: var(--#{$prefix}body-bg) !default;
|
||||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$lte-app-footer-height: 2.5rem !default;
|
|
||||||
|
|
||||||
// BRAND LINK
|
// BRAND LINK
|
||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,6 @@
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
padding-left: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
@import "../root";
|
@import "../root";
|
||||||
@import "../app-wrapper";
|
@import "../app-wrapper";
|
||||||
|
@import "../app-content";
|
||||||
@import "../app-header";
|
@import "../app-header";
|
||||||
@import "../app-sidebar";
|
@import "../app-sidebar";
|
||||||
@import "../app-main";
|
@import "../app-main";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue