Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add customized CSS theme for bootstrap

Browse source
This commit is contained in:
Eli Ribble 2026-01-28 22:25:02 +00:00
parent 082fdeebdd
commit 5d4a7a4155
No known key found for this signature in database
11 changed files with 279 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

51
scss/custom.scss Normal file
View file

@ -0,0 +1,51 @@
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../bootstrap/scss/functions";
// 2. Include any default variable overrides here
$primary: #F76436;
$secondary: #3C552D;
$success: #8BAE67;
$danger: #FFC01B;
$info: #D7B26D;
// 3. Include remainder of required Bootstrap stylesheets
@import "../bootstrap/scss/variables";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../bootstrap/scss/maps";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/containers";
@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../bootstrap/scss/utilities/api";
// 8. Add additional custom code here
$custom-colors: (
"color1": $primary,
"color2": $danger,
"color3": #8C552D,
"color4": $success,
"color5": $info,
);
$off-white: #F8F9FA;
$off-black: #495057;
@import "./sidebar.scss";
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

90
scss/sidebar.scss Normal file
View file

@ -0,0 +1,90 @@
#sidebar {
background-color: $off-white;
min-height: 100vh;
transition: all 0.3s;
width: 250px;
position: fixed;
z-index: 1000;
padding: 20px;
}
#sidebar.collapsed {
width: 70px;
padding: 20px 10px;
}
#content {
transition: all 0.3s;
margin-left: 250px;
width: calc(100% - 250px);
}
#content.expanded {
margin-left: 70px;
width: calc(100% - 70px);
}
.sidebar-header {
padding-bottom: 20px;
border-bottom: 1px solid #dee2e6;
margin-bottom: 20px;
overflow: hidden;
white-space: nowrap;
}
.sidebar-menu {
list-style: none;
padding: 0;
}
.sidebar-menu li {
padding: 10px 0;
}
.sidebar-menu li a {
text-decoration: none;
color: $off-black;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
.sidebar-menu li a:hover {
color: $primary;
}
.sidebar-menu .menu-icon {
font-size: 1.2rem;
min-width: 30px;
display: flex;
justify-content: center;
}
.sidebar-menu .menu-text {
transition: opacity 0.3s;
}
#sidebar.collapsed .menu-text {
opacity: 0;
visibility: hidden;
width: 0;
}
#sidebar.collapsed .sidebar-header h4 {
opacity: 0;
visibility: hidden;
}
#sidebar.collapsed .sidebar-menu .menu-icon {
min-width: 100%;
font-size: 1.5rem;
}
#sidebarToggle i {
transition: transform 0.3s;
}
#sidebar.collapsed + #content #sidebarToggle i {
transform: rotate(180deg);
}