-
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?
Conversation
We want to have a style that uses the primary color (blue, in this case) as the background color for the sidenav. To use, just add `sb-sidenav-primary` to existing sidenav.
@@ -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 |
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.
@@ -11076,6 +11076,35 @@ body { | |||
background-color: #e9ecef; | |||
} | |||
|
|||
.sb-sidenav-primary { |
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.
This whole file is generated.
@@ -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 comment
The reason will be displayed to describe this comment to others. Learn more.
To preview it in this repo at index.html.
@@ -0,0 +1,45 @@ | |||
// | |||
// Sidenav Primary |
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.
This is a new file for the sb-sidenav-primary
style, based on sb-sidenav-dark
.
@@ -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 comment
The reason will be displayed to describe this comment to others. Learn more.
New scss variables for our new style.
that was quick! you know what you're doing 😉 I think the blue is maybe a bit harsh, a bit too bright? The primary blue for action buttons isn't necessarily the blue that we want for a sidebar... I'll write a suggested line in a note |
// 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 comment
The reason will be displayed to describe this comment to others. Learn more.
perhaps if we add below or in place of background-color
:
background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
that would bring back that slightly paler blue from the sb-admin-2 theme
just a thought about handling branches: perhaps the changes that bring back the sb-admin-2 theme styles could be kept here in this branch, without creating a PR against the master branch. This would allow us to create a PR against the upstream repo, so that if anyone else using the sb-admin theme/template finds it handy, it would be our contribution to the community? Or we could do both, create a PR against the upstream repo, but also pull into the master branch here and do any further development that is specifically for the LitCal project in the master branch after the general "community" fixes are in place. Thoughts? I figure we can handle any further developments just fine in any branch, seeing that jsdelivr can deliver from any branch of a repo on GitHub. You just need to create a tag from the branch and then load the tag: https://github.com/jsdelivr/jsdelivr?tab=readme-ov-file#load-any-github-release-commit-or-branch |
We want to have a style that uses the primary color (blue, in this case) as the background color for the sidenav.
To use, just add
sb-sidenav-primary
to existing sidenav.New Style:
Original: