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

Rework custom bootstrap theme to include all of bootstrap

Browse source 
I already had most of it anyway. This also fixes our buttons to have the
correct contrast.
This commit is contained in:
Eli Ribble 2026-01-30 15:08:11 +00:00
parent 207ad95840
commit 38d492e9da
No known key found for this signature in database
2 changed files with 53 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

86
scss/custom.scss
View file

@ -1,65 +1,39 @@
// 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
// 1. Include specific theme variables
$primary: #F76436;
$secondary: #3C552D;
$success: #8BAE67;
$danger: #FFC01B;
$warning: #FFC01B;
$danger: #6b2737;
$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/mixins/border-radius";
@import "./bootstrap/scss/mixins/box-shadow";
@import "./bootstrap/scss/mixins/breakpoints";
@import "./bootstrap/scss/mixins/buttons";
@import "./bootstrap/scss/mixins/color-mode";
@import "./bootstrap/scss/mixins/forms";
@import "./bootstrap/scss/mixins/gradients";
@import "./bootstrap/scss/mixins/transition";
@import "./bootstrap/scss/vendor/rfs";
@import "./bootstrap/scss/alert";
@import "./bootstrap/scss/buttons";
@import "./bootstrap/scss/card";
@import "./bootstrap/scss/forms";
@import "./bootstrap/scss/maps";
@import "./bootstrap/scss/mixins";
@import "./bootstrap/scss/root";
@import "./bootstrap/scss/transitions";
// 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";
// 2. Configure color contrast
$color-contrast-dark: #000;
$color-contrast-light: #fff;
$min-contrast-ratio: 2.0;
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
$custom-colors: (
"color1": $primary,
"color2": $secondary,
"color3": $success,
"color4": $danger,
"color5": $warning,
"color6": $info,
);
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"danger": $danger,
"warning": $warning,
"info": $info
),
$custom-colors
);
@import "./bootstrap/scss/bootstrap";
@import "./sidebar.scss";

35
sync/template/layout-test.html
View file

@ -1,24 +1,35 @@
{{template "authenticated.html" . }}
{{define "title"}}Layout Test{{end}}
{{define "extraheader"}}
<style>
.bd-example {
padding: 1.5rem;
margin-right: 0;
margin-left: 0;
border-width: 1px;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->
<div id="content">
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Welcome to the Dashboard</h5>
<p class="card-text">This is an example of a Bootstrap layout with a collapsible sidebar.</p>
<p>The sidebar can be toggled using the button in the navigation bar. When the sidebar collapses, only the icons remain visible.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="bd-example">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">