github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

improve main-header

pull/3891/head
Daniel 2021-05-29 13:45:25 +05:30
parent 3ef559ba08
commit f27cf39e33
15 changed files with 486 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index2.html
View File

@ -104,7 +104,7 @@
<button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-wrench"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="dropdown-menu dropdown-menu-end" role="menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>

122
src/partials/dashboard/_topbar.html
View File

@ -1,6 +1,7 @@
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light">
<div class="container-fluid">
<!-- Start navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
@ -12,8 +13,9 @@
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav mr-auto">
<!-- End navbar links -->
<ul class="navbar-nav ms-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
@ -23,17 +25,129 @@
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge bg-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="d-flex">
<img src="@@path/assets/img/AdminLTELogo.png" alt="User Avatar" class="img-size-50 img-circle me-3">
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge bg-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope me-2"></i> 4 new messages
<span class="float-end text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users me-2"></i> 8 friend requests
<span class="float-end text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file me-2"></i> 3 new reports
<span class="float-end text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img src="@@path/assets/img/AdminLTELogo.png" class="user-image img-circle shadow" alt="User Image">
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!-- User image -->
<li class="user-header bg-primary">
<img src="@@path/assets/img/AdminLTELogo.png" class="img-circle shadow" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">Profile</a>
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">

3
src/scss/_bootstrap-variables.scss
View File

@ -431,7 +431,8 @@ $font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-xs: $font-size-base * .75 !default; // adminlte-modified
$font-size-xl: $font-size-base * 2 !default; // adminlte-modified
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;

8
src/scss/_cards.scss
View File

@ -64,7 +64,7 @@
.nav.flex-column {
> li {
border-bottom: 1px solid $lte-card-border-color;
border-bottom: 1px solid $card-border-color;
margin: 0;
&:last-of-type {
@ -82,11 +82,11 @@
}
.border-end {
border-right: 1px solid $lte-card-border-color;
border-right: 1px solid $card-border-color;
}
.border-start {
border-left: 1px solid $lte-card-border-color;
border-left: 1px solid $card-border-color;
}
&.card-tabs {
@ -212,7 +212,7 @@ html.maximized-card {
// Box header
.card-header {
background-color: transparent;
border-bottom: 1px solid $lte-card-border-color;
border-bottom: 1px solid $card-border-color;
padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
position: relative;

245
src/scss/_dropdown.scss Normal file
View File

@ -0,0 +1,245 @@
//
// Component: Dropdown
//
// General Dropdown Rules
//.dropdown-item {
// &:first-of-type {
// @include border-top-radius($border-radius);
// }
// &:last-of-type {
// @include border-bottom-radius($border-radius);
// }
//}
.text-sm {
.dropdown-menu {
font-size: $font-size-sm !important;
}
.dropdown-toggle::after {
vertical-align: .2rem;
}
}
.dropdown-item-title {
font-size: $font-size-base;
margin: 0;
}
.dropdown-icon {
&::after {
margin-left: 0;
}
}
// Dropdown Sizes
.dropdown-menu-lg {
max-width: 300px;
min-width: 280px;
padding: 0;
.dropdown-divider {
margin: 0;
}
.dropdown-item {
padding: $dropdown-padding-y $dropdown-item-padding-x;
}
p {
margin: 0;
white-space: normal;
}
}
// Dropdown Submenu
.dropdown-submenu {
position: relative;
> a::after {
@include caret-end ();
float: right;
margin-left: .5rem;
margin-top: .5rem;
}
> .dropdown-menu {
left: 100%;
margin-left: 0;
margin-top: 0;
top: 0;
}
}
// Dropdown Hover
.dropdown-hover {
&:hover,
&.nav-item.dropdown:hover,
.dropdown-submenu:hover,
&.dropdown-submenu:hover {
> .dropdown-menu {
display: block;
}
}
}
// Dropdown Sizes
.dropdown-menu-xl {
max-width: 420px;
min-width: 360px;
padding: 0;
.dropdown-divider {
margin: 0;
}
.dropdown-item {
padding: $dropdown-padding-y $dropdown-item-padding-x;
}
p {
margin: 0;
white-space: normal;
}
}
// Dropdown header and footer
.dropdown-footer,
.dropdown-header {
display: block;
font-size: $font-size-sm;
padding: .5rem $dropdown-item-padding-x;
text-align: center;
}
// Add fade animation to dropdown menus by appending
// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
.open:not(.dropup) > .animated-dropdown-menu {
@include animation(flipInX .7s both);
backface-visibility: visible !important;
}
// Fix dropdown menu in navbars
.navbar-custom-menu > .navbar-nav {
> li {
position: relative;
> .dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
}
}
@include media-breakpoint-down(sm) {
.navbar-custom-menu > .navbar-nav {
float: right;
> li {
position: static;
> .dropdown-menu {
position: absolute;
right: 5%;
left: auto;
border: 1px solid #ddd;
background-color: $white;
}
}
}
}
// User Menu
.navbar-nav > .user-menu {
> .nav-link::after {
content: none;
}
> .dropdown-menu {
@include border-top-radius(0);
padding: 0;
width: 280px;
&,
> .user-body {
@include border-bottom-radius(4px);
}
// Header menu
> li.user-header {
height: 175px;
padding: 10px;
text-align: center;
// User image
> img {
z-index: 5;
height: 90px;
width: 90px;
border: 3px solid;
border-color: transparent;
border-color: rgba(255, 255, 255, .2);
}
> p {
z-index: 5;
font-size: 17px;
//text-shadow: 2px 2px 3px #333333;
margin-top: 10px;
> small {
display: block;
font-size: 12px;
}
}
}
// Menu Body
> .user-body {
@include clearfix ();
border-bottom: 1px solid $gray-700;
border-top: 1px solid $gray-300;
padding: 15px;
a {
@include media-breakpoint-up(sm) {
background-color: $white !important;
color: $gray-700 !important;
}
}
}
// Menu Footer
> .user-footer {
@include clearfix ();
background-color: $gray-100;
padding: 10px;
.btn-default {
color: $gray-600;
&:hover {
@include media-breakpoint-up(sm) {
background-color: $gray-100;
}
}
}
}
}
.user-image {
@include media-breakpoint-up(sm) {
float: none;
line-height: 10px;
margin-right: .4rem;
margin-top: -8px;
}
border-radius: 50%;
float: left;
height: $lte-sidebar-user-image-width;
margin-right: 10px;
margin-top: -2px;
width: $lte-sidebar-user-image-width;
}
}

6
src/scss/_main-header.scss
View File

@ -12,8 +12,12 @@
.main-header {
grid-area: main-header;
border-bottom: $lte-main-header-bottom-border;
width: inherit;
z-index: $lte-zindex-main-header;
.nav-link {
height: $nav-link-height;
position: relative;
}
}
// Navbar badge

4
src/scss/_miscellaneous.scss
View File

@ -52,7 +52,7 @@
}
.list-seperator {
background-color: $lte-card-border-color;
background-color: $card-border-color;
height: 1px;
margin: 15px 0 9px;
}
@ -217,7 +217,7 @@
// General attachemnt block
.attachment-block {
background-color: $gray-100;
border: 1px solid $lte-card-border-color;
border: 1px solid $card-border-color;
margin-bottom: 10px;
padding: 5px;

20
src/scss/_text.scss
View File

@ -11,6 +11,26 @@
}
}
.text-xs {
font-size: $font-size-xs !important;
}
.text-sm {
font-size: $font-size-sm !important;
}
.text-md {
font-size: $font-size-base !important;
}
.text-lg {
font-size: $font-size-lg !important;
}
.text-xl {
font-size: $font-size-xl !important;
}
// text color variations
@each $name, $color in $colors {
.text-#{$name} {

1
src/scss/_variables.scss
View File

@ -180,7 +180,6 @@ $lte-brand-link-border-buttom: 1px;
// Cards
// --------------------------------------------------------
$lte-card-border-color: $gray-100 !default;
$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
$lte-card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
$lte-card-title-font-size: 1.1rem !default;

4
src/scss/adminlte.scss
View File

@ -8,14 +8,14 @@
// Bootstrap
// ---------------------------------------------------
@import "bootstrap/scss/functions";
@import "bootstrap-variables";
@import "bootstrap-variables"; // little modified are here
@import "bootstrap/scss/variables";
@import "variables"; // little modified are here
@import "custom-utilities";
@import "bootstrap/scss/bootstrap";
// Variables and Mixins
// ---------------------------------------------------
@import "variables";
@import "mixins";
// AdiminLTE Parts

72
src/scss/dark/_direct-chat.scss Normal file
View File

@ -0,0 +1,72 @@
.direct-chat-text {
background-color: $gray-800-alt;
border-color: tint-color($gray-800-alt, 10%);
color: $white-alt;
&::after,
&::before {
border-right-color: $gray-800-alt;
}
}
.direct-chat-timestamp {
color: $gray-300-alt;
}
.end > .direct-chat-text {
&::after,
&::before {
border-right-color: transparent;
}
}
.direct-chat-contacts {
background-color: $gray-800-alt;
color: $white-alt;
}
.direct-chat-contacts-light {
background-color: $dark-alt;
.contacts-list-name {
color: $light-alt;
}
.contacts-list-date {
color: $gray-200-alt;
}
.contacts-list-msg {
color: $gray-300-alt;
}
}
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list > li {
border-bottom-color: rgba($white-alt, .2);
}
.contacts-list-info {
color: $white-alt;
}
.contacts-list-date {
color: $gray-300-alt;
}
.contacts-list-msg {
color: $gray-400-alt;
}
// Color variants
@each $name, $color in $theme-colors-alt {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}
@each $name, $color in $colors-alt {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}

9
src/scss/dark/_products.scss Normal file
View File

@ -0,0 +1,9 @@
.products-list > .item {
background-color: $body-bg-alt;
color: $body-color-alt;
border-bottom-color: $gray-600-alt;
}
.product-description {
color: $gray-200-alt;
}

2
src/scss/dark/parts/_extra-components.scss
View File

@ -3,3 +3,5 @@
//
@import "../info-box";
@import "../direct-chat";
@import "../products";

6
src/scss/mixins/_miscellaneous.scss
View File

@ -20,9 +20,9 @@
transform: rotate($value);
}
// @mixin animation($animation) {
// animation: $animation;
// }
@mixin animation($animation) {
animation: $animation;
}
// Gradient background
// @mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {

1
src/scss/parts/_core.scss
View File

@ -17,3 +17,4 @@
@import "../main-footer";
@import "../layout-fixed";
@import "../layout-mobile";
@import "../dropdown";