maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

revert main-brand

Browse source
This commit is contained in:
Daniel 2021-05-14 22:09:11 +05:30
parent b46482d258
commit 160009f70b
13 changed files with 342 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
index.html
View file

@ -44,20 +44,19 @@
</nav>
<!-- /.navbar -->
<div class="main-brand">
<a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<div class="brand-icons mx-2">
<a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
<a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</div>
</div>
<!-- Main Sidebar Container -->
<aside class="main-sidebar shadow">
<div class="brand-container">
<a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<span class="brand-icons mx-2">
<a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
<a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</span>
</div>
<!-- Sidebar -->
<nav class="sidebar">
<!-- Sidebar Menu -->
@ -139,6 +138,70 @@
</div>
<div class="content">
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success">
<div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3>
<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning">
<div class="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-danger">
<div class="inner">
<h3>65</h3>
<p>Unique Visitors</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

24
scss/_custom-variables.scss
View file

@ -105,6 +105,13 @@ $header-mobile-light-color: $dark;
$content-padding-y: 0 !default;
$content-padding-x: .5rem !default;
// IMAGE SIZES
// --------------------------------------------------------
$img-size-sm: 1.875rem !default;
$img-size-md: 3.75rem !default;
$img-size-lg: 6.25rem !default;
$img-size-push: .625rem !default;
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-padding: 1rem !default;
@ -124,14 +131,27 @@ $main-footer-color: tint-color($gray-700, 25%) !default;
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
$brand-link-border-buttom: 1px;
// Cards
// --------------------------------------------------------
$card-border-color: $gray-100 !default;
$card-dark-border-color: tint-color($gray-900, 10%) !default;
$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
$card-title-font-size: 1.1rem !default;
$card-title-font-size-sm: 1rem !default;
$card-title-font-weight: $font-weight-normal !default;
$card-nav-link-padding-sm-y: .4rem !default;
$card-nav-link-padding-sm-x: .8rem !default;
$card-img-size: $img-size-sm !default;
// Z-INDEX
// --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default;
$zindex-sidebar: $zindex-fixed + 8 !default;
$zindex-main-brand: $zindex-main-header !default;
// $zindex-main-brand: $zindex-main-header !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
$zindex-header-mobile: $zindex-main-brand + 2 !default;
// $zindex-header-mobile: $zindex-main-brand + 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-sidebar + 2 !default;
$zindex-content-wrapper: $zindex-sidebar - 2 !default;

2
scss/_layout.scss
View file

@ -1,6 +1,6 @@
@import "layout/wrapper";
@import "layout/main-header";
@import "layout/main-brand";
@import "layout/brand-container";
@import "layout/main-sidebar";
@import "layout/sidebar";
@import "layout/nav-sidebar";

165
scss/_small-box.scss Normal file
View file

@ -0,0 +1,165 @@
//
// Component: Small Box
//
.small-box {
@include border-radius($border-radius);
@include box-shadow($card-shadow);
display: block;
margin-bottom: 20px;
position: relative;
// content wrapper
> .inner {
padding: 10px;
}
> .small-box-footer {
background-color: rgba($black, .1);
color: rgba($white, .8);
display: block;
padding: 3px 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 10;
&:hover {
background-color: rgba($black, .15);
color: $white;
}
}
h3 {
@include font-size(2.2rem);
font-weight: 700;
margin: 0 0 10px;
padding: 0;
white-space: nowrap;
}
@include media-breakpoint-up(lg) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
h3 {
@include font-size(1.6rem);
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
h3 {
@include font-size(1.6rem);
}
}
}
@include media-breakpoint-up(xl) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
h3 {
@include font-size(2.2rem);
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
h3 {
@include font-size(2.2rem);
}
}
}
p {
font-size: 1rem;
> small {
color: $gray-100;
display: block;
font-size: .9rem;
margin-top: 5px;
}
}
h3,
p {
z-index: 5;
}
// the icon
.icon {
color: rgba($black, .15);
z-index: 0;
> i {
font-size: 90px;
position: absolute;
right: 15px;
top: 15px;
transition: transform $transition-speed linear;
&.fa,
&.fas,
&.far,
&.fab,
&.fal,
&.fad,
&.ion {
font-size: 70px;
top: 20px;
}
}
svg {
font-size: 70px;
position: absolute;
right: 15px;
top: 15px;
transition: transform $transition-speed linear;
}
}
// Small box hover state
&:hover {
text-decoration: none;
// Animate icons on small box hover
.icon {
> i {
&,
&.fa,
&.fas,
&.far,
&.fab,
&.fal,
&.fad,
&.ion {
transform: scale(1.1);
}
}
> svg {
transform: scale(1.1);
}
}
}
}
@include media-breakpoint-down(sm) {
// No need for icons on very small devices
.small-box {
text-align: center;
.icon {
display: none;
}
p {
font-size: 12px;
}
}
}

2
scss/adminlte.scss
View file

@ -27,3 +27,5 @@
@import "mixins";
@import "parts/core";
@import "small-box";
@import "miscellaneous";

51
scss/layout/_main-brand.scss → scss/layout/_brand-container.scss
View file

@ -4,8 +4,8 @@
@include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
.main-brand {
grid-area: main-brand;
.brand-container {
// grid-area: main-brand;
display: grid;
grid-template-areas: "brand-link sidebar-mini-icon";
grid-auto-flow: column;
@ -14,11 +14,11 @@
padding: $brand-link-padding-y $sidebar-padding-x;
white-space: nowrap;
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
min-width: $sidebar-width;
max-width: $sidebar-width;
height: min-content;
@include transition($sidebar-transition);
z-index: $zindex-main-brand;
// min-width: $sidebar-width;
// max-width: $sidebar-width;
// height: min-content;
// @include transition($sidebar-transition);
// z-index: $zindex-main-brand;
.brand-link {
grid-area: brand-link;
@ -45,13 +45,13 @@
}
}
.brand-icons {
display: inline-flex;
// .brand-icons {
// display: inline-flex;
> * {
color: $gray-400;
}
}
// > * {
// color: $gray-400;
// }
// }
.sidebar-full-icon,
.header-full-icon {
@ -60,27 +60,28 @@
.sidebar-mini-icon {
grid-area: sidebar-mini-icon;
color: $gray-400;
}
}
.sidebar-collapse:not(.sidebar-hover) {
.main-brand {
.brand-container {
grid-template-areas: "sidebar-mini-icon brand-link";
justify-content: center;
min-width: $sidebar-mini-width;
max-width: $sidebar-mini-width;
// min-width: $sidebar-mini-width;
// max-width: $sidebar-mini-width;
.brand-link {
display: none;
}
}
}
@include media-breakpoint-down(md) {
.main-brand {
min-width: unset;
max-width: unset;
.sidebar-mini-icon {
display: none;
}
}
}
// @include media-breakpoint-down(md) {
// .main-brand {
// min-width: unset;
// max-width: unset;
// .sidebar-mini-icon {
// display: none;
// }
// }
// }

14
scss/layout/_layout-fixed.scss
View file

@ -1,12 +1,12 @@
@include media-breakpoint-up(md) {
.layout-fixed:not(.sidebar-horizontal) {
.main-brand {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: 0;
}
// .main-brand {
// bottom: 0;
// float: none;
// left: 0;
// position: fixed;
// top: 0;
// }
.main-sidebar {
bottom: 0;

72
scss/layout/_layout-mobile.scss
View file

@ -1,10 +1,10 @@
@include media-breakpoint-down(md) {
.wrapper {
grid-template-areas:
"main-sidebar main-brand main-header"
"main-sidebar content-wrapper main-header"
"main-sidebar main-footer main-header";
grid-template-columns: auto 1fr auto;
// grid-template-areas:
// "main-sidebar main-header"
// "main-sidebar content-wrapper"
// "main-sidebar main-footer";
// grid-template-columns: auto 1fr auto;
.main-sidebar {
position: fixed;
@ -19,34 +19,34 @@
}
}
.main-header {
position: fixed;
top: 0;
bottom: 0;
min-height: 100vh;
z-index: $zindex-header-mobile;
width: $sidebar-width;
margin-left: -#{$sidebar-width};
align-items: baseline;
@include transition($sidebar-transition);
// .main-header {
// position: fixed;
// top: 0;
// bottom: 0;
// min-height: 100vh;
// z-index: $zindex-header-mobile;
// width: $sidebar-width;
// margin-left: -#{$sidebar-width};
// align-items: baseline;
// @include transition($sidebar-transition);
.navbar-nav {
flex-direction: column;
}
// .navbar-nav {
// flex-direction: column;
// }
.sidebar-full-icon {
display: none;
}
}
// .sidebar-full-icon {
// display: none;
// }
// }
.brand-link {
animation: none;
}
// .brand-link {
// animation: none;
// }
.sidebar-full-icon,
.header-full-icon {
display: block;
}
// .sidebar-full-icon,
// .header-full-icon {
// display: block;
// }
}
.sidebar-open {
@ -55,11 +55,11 @@
}
}
@include media-breakpoint-down(md) {
.header-mobile-open {
.main-header {
margin-left: 0;
}
}
}
// @include media-breakpoint-down(md) {
// .header-mobile-open {
// .main-header {
// margin-left: 0;
// }
// }
// }
}

10
scss/layout/_sidebar-close.scss
View file

@ -2,11 +2,11 @@
.main-sidebar {
margin-left: -#{$sidebar-width};
}
@include media-breakpoint-up(md) {
.main-brand {
margin-left: -#{$sidebar-width};
}
}
// @include media-breakpoint-up(md) {
// .main-brand {
// margin-left: -#{$sidebar-width};
// }
// }
}
@include media-breakpoint-up(sm) {

2
scss/layout/_sidebar-horizontal.scss
View file

@ -19,7 +19,7 @@
z-index: $zindex-sidebar-horizontal;
}
.main-brand {
.brand-container {
display: none;
}

2
scss/layout/_wrapper.scss
View file

@ -8,7 +8,7 @@
display: grid;
grid-gap: 0;
grid-template-areas:
"main-brand main-header"
"main-sidebar main-header"
"main-sidebar content-wrapper"
"main-sidebar main-footer";
grid-template-columns: auto 1fr;

2
scss/mixins/_brand-variant.scss
View file

@ -2,7 +2,7 @@
$brand-bg,
$brand-color
) {
.main-brand {
.brand-container {
background-color: $brand-bg;
color: $brand-color;
}

1
scss/parts/_core.scss
View file

@ -3,4 +3,3 @@
//
@import "../layout";
@import "../miscellaneous";