leo/essence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle Sidebar. Make table hover shade lighter.

Browse Source
This commit is contained in:
Leo
2024-09-11 13:43:05 -05:00
parent 57e993b536
commit e74c42372f
3 changed files with 24 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/bootstrap/_variables.scss
View File

@@ -1,6 +1,6 @@
// Color system // Color system
$gray-100: hsl(210, 20%, 98%) !default; $gray-100: hsl(210, 20%, 98%) !default;
$gray-200: hsl(210, 20%, 93%) !default; $gray-200: hsl(210, 20%, 95%) !default;
$gray-300: hsl(210, 20%, 89%) !default; $gray-300: hsl(210, 20%, 89%) !default;
$gray-400: hsl(210, 20%, 81%) !default; $gray-400: hsl(210, 20%, 81%) !default;
$gray-500: hsl(210, 20%, 71%) !default; $gray-500: hsl(210, 20%, 71%) !default;
@@ -73,7 +73,7 @@ $headings-font-weight: bold !default; // Make headings bold
$lead-font-weight: normal; $lead-font-weight: normal;
// Tables // Tables
$table-hover-bg-factor: .03 !default; $table-hover-bg-factor: .02 !default;
// Buttons + Forms // Buttons + Forms

5
scss/elements/_footer.scss
View File

@@ -7,10 +7,7 @@
.footer-brand { .footer-brand {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: bold; font-weight: bold;
} color: white;
p {
font-size: $font-size-base;
} }
.footer-header { .footer-header {

79
scss/elements/_sidebar.scss
View File

@@ -8,15 +8,13 @@
flex-shrink: 0; flex-shrink: 0;
min-height: 100vh; min-height: 100vh;
width: 200px; width: 240px;
padding: 5px 10px; padding: 0.25rem 0.75rem;
background-color: $white; background-color: $white;
transition: none; .sidebar-brand {
margin: 0.75rem 1rem;
&-brand {
margin: 10px;
font-size: 1.125rem; font-size: 1.125rem;
text-decoration: none; text-decoration: none;
@@ -25,65 +23,28 @@
} }
} }
&-header {
margin: 10px 10px 5px;
font-weight: bold;
color: $secondary;
}
&-link {
padding: 10px 10px;
border-radius: 5px;
color: $secondary;
text-decoration: none;
&:hover {
color: $primary;
background-color: $primary-50;
text-decoration: none;
}
}
&-btn-collapse {
margin-top: 10px;
}
.sidebar-collapsed-shown {
display: none;
}
}
.sidebar-collapsed {
width: 60px;
padding: 5px 5px;
overflow-y: overlay;
transition: width 0.25s;
.sidebar-brand {
text-align: center;
span {
display: none;
}
}
.sidebar-header { .sidebar-header {
display: none; margin: 1rem 1rem 0.25rem;
color: $secondary;
font-weight: bold;
font-size: 0.875rem;
} }
.sidebar-link { .sidebar-link {
padding: 10px 15px; padding: 0.5rem 1rem;
border-radius: 0.5rem;
color: $secondary;
text-decoration: none;
span { &.active {
display: none; color: $primary;
} background-color: $primary-50;
} }
.sidebar-collapsed-hidden { &:hover {
display: none; color: $gray-800;
} background-color: $gray-200;
.sidebar-collapsed-shown { text-decoration: none;
display: inline; }
} }
} }