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

enhance brand-link with pushmenu inside brand (#2910)

Browse source
This commit is contained in:
REJack 2020-07-22 16:08:19 +02:00 committed by GitHub
parent b48419b23b
commit 1666fa3a46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
build/scss/_brand.scss
View file

@ -22,12 +22,38 @@
[class*="sidebar-dark"] & {
border-bottom: 1px solid lighten($dark, 10%);
color: rgba($white, .8);
&,
.pushmenu {
color: rgba($white, .8);
&:hover {
color: $white;
}
}
}
[class*="sidebar-light"] & {
border-bottom: 1px solid $gray-300;
color: rgba($black, .8);
&,
.pushmenu {
color: rgba($black, .8);
&:hover {
color: $black;
}
}
}
.pushmenu {
margin-right: $sidebar-padding-x;
font-size: $font-size-base;
}
.brand-link {
padding: 0;
border-bottom: none;
}
.brand-image {

13
docs/components/main-sidebar.md
View file

@ -88,6 +88,19 @@ You can use two logo images instead of logo with text, you only need to change t
Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with `.brand-image-xs` or vice versa on `.logo-xl` for changed logo sizes.
#### Brand with Pushmenu Button
You can place the pushmenu button inside the brand, simply replace the brand-link code with the code below:
```html
<div class="brand-link d-flex justify-content-between align-items-center">
<a class="brand-link" href="index3.html">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<a class="pushmenu" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</div>
```
#### Search Form in Sidebar