-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add sb-sidenav-primary style #1
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
@charset "UTF-8"; | ||
/*! | ||
* Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin) | ||
* Copyright 2013-2023 Start Bootstrap | ||
* Copyright 2013-2024 Start Bootstrap | ||
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) | ||
*/ | ||
/*! | ||
|
@@ -11076,6 +11076,35 @@ body { | |
background-color: #e9ecef; | ||
} | ||
|
||
.sb-sidenav-primary { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This whole file is generated. |
||
background-color: #0d6efd; | ||
color: rgba(255, 255, 255, 0.9); | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .sb-sidenav-menu-heading { | ||
color: rgba(255, 255, 255, 0.8); | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link { | ||
color: rgba(255, 255, 255, 0.9); | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link .sb-nav-link-icon { | ||
color: rgba(255, 255, 255, 0.8); | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow { | ||
color: rgba(255, 255, 255, 0.8); | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link:hover { | ||
color: #fff; | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link.active { | ||
color: #fff; | ||
} | ||
.sb-sidenav-primary .sb-sidenav-menu .nav-link.active .sb-nav-link-icon { | ||
color: #fff; | ||
} | ||
.sb-sidenav-primary .sb-sidenav-footer { | ||
background-color: #052c65; | ||
} | ||
|
||
.datatable-wrapper .datatable-container { | ||
font-size: 0.875rem; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,7 @@ block config | |
- var bodyClass = 'sb-nav-fixed' | ||
- var pageTitle = 'Dashboard'; | ||
- var index = true; | ||
- var sidenavStyle = 'sb-sidenav-dark' | ||
- var sidenavStyle = 'sb-sidenav-primary' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To preview it in this repo at index.html. |
||
|
||
prepend css | ||
//- Load Simple DataTables Stylesheet | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
// | ||
// Sidenav Primary | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is a new file for the |
||
// | ||
|
||
// Primary color theme for sidenav | ||
// Append .sb-sidenav-primary to .sb-sidenav to use | ||
|
||
.sb-sidenav-primary { | ||
background-color: $sidenav-primary-bg; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. perhaps if we add below or in place of background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%); that would bring back that slightly paler blue from the sb-admin-2 theme |
||
color: $sidenav-primary-color; | ||
|
||
.sb-sidenav-menu { | ||
.sb-sidenav-menu-heading { | ||
color: $sidenav-primary-heading-color; | ||
} | ||
|
||
.nav-link { | ||
color: $sidenav-primary-link-color; | ||
|
||
.sb-nav-link-icon { | ||
color: $sidenav-primary-icon-color; | ||
} | ||
|
||
.sb-sidenav-collapse-arrow { | ||
color: $sidenav-primary-icon-color; | ||
} | ||
|
||
&:hover { | ||
color: $sidenav-primary-link-active-color; | ||
} | ||
|
||
&.active { | ||
color: $sidenav-primary-link-active-color; | ||
|
||
.sb-nav-link-icon { | ||
color: $sidenav-primary-link-active-color; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.sb-sidenav-footer { | ||
background-color: $sidenav-primary-footer-bg; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,6 +27,15 @@ $sidenav-light-link-active-color: $primary; | |
$sidenav-light-icon-color: $gray-500; | ||
$sidenav-light-footer-bg: $gray-200; | ||
|
||
// -- Sidenav Dark | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. New scss variables for our new style. |
||
$sidenav-primary-bg: $primary; | ||
$sidenav-primary-color: fade-out($white, 0.1); | ||
$sidenav-primary-heading-color: fade-out($white, 0.2); | ||
$sidenav-primary-link-color: fade-out($white, 0.1); | ||
$sidenav-primary-link-active-color: $white; | ||
$sidenav-primary-icon-color: fade-out($white, 0.2); | ||
$sidenav-primary-footer-bg: $blue-800; | ||
|
||
// Color variables for the topnav | ||
$topnav-dark-toggler-color: fade-out($white, 0.5); | ||
$topnav-light-toggler-color: $gray-900; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just updated by the generation scripts.