Skip to content
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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add sb-sidenav-primary style #1

wants to merge 1 commit into from

Conversation

mkasberg
Copy link

@mkasberg mkasberg commented Jun 4, 2024

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:
image

Original:
image

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
Copy link
Author

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 {
Copy link
Author

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'
Copy link
Author

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
Copy link
Author

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
Copy link
Author

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.

@mkasberg mkasberg requested a review from JohnRDOrazio June 4, 2024 20:52
@JohnRDOrazio
Copy link
Member

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;
Copy link
Member

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

@JohnRDOrazio
Copy link
Member

JohnRDOrazio commented Jun 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants