mirror of https://github.com/ColorlibHQ/AdminLTE
removed layout-fixed-complete and added layout-custom-area
Daniel
parent
79703897f0
commit
1774b42fad
|
|
@ -163,11 +163,11 @@ const htmlPath = convertPathToHtml(path);
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
href={htmlPath + "/layout/layout-custom-area.html"}
|
||||
class:list={["nav-link", page === "layout-custom-area" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Fixed Complete</p>
|
||||
<p>Layout <small>+ Custom Area </small></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
|
|
|
|||
|
|
@ -1,209 +0,0 @@
|
|||
---
|
||||
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 data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></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,144 @@
|
|||
---
|
||||
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 | Layout Custom Area";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "layout-custom-area";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Top Area-->
|
||||
<div class="app-content-top-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Top Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
<!--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"> Layout Custom Area </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 data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">Footer</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
|
||||
<!--begin::App Content Bottom Area-->
|
||||
<div class="app-content-bottom-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Bottom Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-secondary" name="save" value="create">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -1,52 +1,3 @@
|
|||
.app-content {
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.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;
|
||||
|
||||
> .row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
&.app-content-top-area-sm,
|
||||
&.app-content-bottom-area-sm{
|
||||
min-height: $lte-app-content-bottom-area-height-sm;
|
||||
}
|
||||
|
||||
&.app-content-top-area-md,
|
||||
&.app-content-bottom-area-md{
|
||||
min-height: $lte-app-content-bottom-area-height-md;
|
||||
}
|
||||
&.app-content-top-area-lg,
|
||||
&.app-content-bottom-area-lg{
|
||||
min-height: $lte-app-content-bottom-area-height-lg;
|
||||
}
|
||||
&.app-content-top-area-xl,
|
||||
&.app-content-bottom-area-xl{
|
||||
min-height: $lte-app-content-bottom-area-height-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .625;
|
||||
padding-bottom: $grid-gutter-width * .625;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
border-top: $lte-app-footer-border-top;
|
||||
}
|
||||
.app-content-top-area {
|
||||
border-bottom: $lte-app-footer-border-top;
|
||||
|
||||
+ .app-main {
|
||||
padding-top: $grid-gutter-width * .5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
.app-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: #{$lte-prefix}app-main;
|
||||
max-width: 100vw;
|
||||
padding-bottom: $grid-gutter-width * .5;
|
||||
padding-bottom: $lte-app-main-padding-bottom;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.app-content-header {
|
||||
|
|
@ -18,4 +20,22 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area {
|
||||
color: $lte-app-content-bottom-area-color;
|
||||
background-color: $lte-app-content-bottom-area-bg;
|
||||
}
|
||||
|
||||
.app-content-top-area {
|
||||
padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
|
||||
border-bottom: $lte-app-content-top-area-top-border;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
|
||||
margin-top: auto;
|
||||
margin-bottom: $lte-app-content-bottom-area-margin-bottom;
|
||||
border-top: $lte-app-content-bottom-area-top-border;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -452,7 +452,6 @@
|
|||
/* 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;
|
||||
|
|
@ -477,11 +476,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.layout-fixed-complete {
|
||||
.app-main-wrapper {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,4 @@
|
|||
.compact-mode {
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .425;
|
||||
padding-bottom: $grid-gutter-width * .425;
|
||||
}
|
||||
.app-content-top-area-sm,
|
||||
.app-content-bottom-area-sm {
|
||||
min-height: $lte-app-content-bottom-area-height-sm * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-md,
|
||||
.app-content-bottom-area-md {
|
||||
min-height: $lte-app-content-bottom-area-height-md * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-lg,
|
||||
.app-content-bottom-area-lg {
|
||||
min-height: $lte-app-content-bottom-area-height-lg * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-xl,
|
||||
.app-content-bottom-area-xl {
|
||||
min-height: $lte-app-content-bottom-area-height-xl * .825;
|
||||
}
|
||||
|
||||
|
||||
.app-header {
|
||||
max-height: $lte-app-header-height-compact;
|
||||
|
||||
|
|
|
|||
|
|
@ -59,18 +59,15 @@ $lte-app-header-link-padding-y: $navbar-padding-y !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;
|
||||
|
||||
// APP MAIN
|
||||
// --------------------------------------------------------
|
||||
$lte-app-main-padding-bottom: $grid-gutter-width * .5 !default;
|
||||
|
||||
// CONTENT PADDING
|
||||
// --------------------------------------------------------
|
||||
$lte-content-padding-y: 0 !default;
|
||||
$lte-content-padding-x: .5rem !default;
|
||||
|
||||
// MAIN CONTENT
|
||||
// --------------------------------------------------------
|
||||
$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;
|
||||
|
|
@ -81,6 +78,21 @@ $lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-a
|
|||
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
|
||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||
|
||||
// CONTENT BOTTOM AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
|
||||
$lte-app-content-bottom-area-color: $lte-app-footer-color !default;
|
||||
$lte-app-content-bottom-area-bg: $lte-app-footer-bg !default;
|
||||
$lte-app-content-bottom-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-bottom-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-bottom-area-padding-x: 0 !default;
|
||||
|
||||
// CONTENT TOP AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-top-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-top-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-top-area-padding-x: 0 !default;
|
||||
|
||||
// BRAND LINK
|
||||
// --------------------------------------------------------
|
||||
$navbar-brand-padding-y-compact: $navbar-brand-padding-y * .75 !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue