/* ==========================================================================
BLUEPRIMES UI
Core reusable UI framework
Rules:
- All reusable classes use b- prefix
- Mobile-first / responsive from the start
- No dependency on a specific module
- Module themes customize through CSS variables
- Safe to use beside Bootstrap 4
========================================================================== */
/* ==========================================================================
01. DESIGN TOKENS
========================================================================== */
:root {
/* ---------- Brand ---------- */
/*
* MAIN BRAND COLOR
*
* Normally theme change karne ke liye
* sirf ye value change karni hai.
*/
/*--b-primary: #116dc1;*/
--b-primary: #2656b8;
/*
* Text/icon color placed ON primary surfaces.
*
* Isko separate rakhna intentional hai because
* agar future brand bohat light ho to isko dark
* color mein change kar sakte hain.
*/
--b-primary-contrast: #ffffff;
/*
* Automatically derived brand states.
*
* Example:
* --b-primary change hoga to ye sab bhi
* automatically usi color family mein rahenge.
*/
--b-primary-hover:
color-mix(
in srgb,
var(--b-primary) 86%,
#000000
);
--b-primary-active:
color-mix(
in srgb,
var(--b-primary) 74%,
#000000
);
--b-primary-soft:
color-mix(
in srgb,
var(--b-primary) 9%,
#ffffff
);
--b-primary-border:
color-mix(
in srgb,
var(--b-primary) 22%,
#ffffff
);
--b-secondary: #64748b;
--b-secondary-hover: #475569;
/* ---------- Page / Surfaces ---------- */
--b-bg: #f6f8fb;
--b-surface: #ffffff;
--b-surface-soft: #f8fafc;
--b-surface-hover: #f3f6f9;
/* ---------- Text ---------- */
--b-text: #172033;
--b-text-secondary: #475569;
--b-text-muted: #7b8798;
--b-text-light: #94a3b8;
/* ---------- Borders ---------- */
--b-border: #e2e8f0;
--b-border-strong: #cbd5e1;
/* ---------- Semantic ---------- */
--b-success: #16a34a;
--b-success-hover: #15803d;
--b-success-active: #166534;
--b-success-soft: #f0fdf4;
--b-danger: #dc2626;
--b-danger-hover: #b91c1c;
--b-danger-active: #991b1b;
--b-danger-soft: #fef2f2;
--b-warning: #d97706;
--b-warning-hover: #b45309;
--b-warning-active: #92400e;
--b-warning-soft: #fffbeb;
--b-info: #0284c7;
--b-info-hover: #0369a1;
--b-info-active: #075985;
--b-info-soft: #f0f9ff;
/* ---------- Neutral Button ---------- */
--b-neutral: #64748b;
--b-neutral-hover: #475569;
--b-neutral-active: #334155;
/* ---------- Typography ---------- */
--b-font-family: inherit;
--b-font-xs: 0.75rem;
--b-font-sm: 0.8125rem;
--b-font-md: 0.875rem;
--b-font-lg: 1rem;
--b-font-xl: 1.25rem;
--b-font-2xl: 1.5rem;
--b-font-normal: 400;
--b-font-medium: 500;
--b-font-semibold: 600;
--b-font-bold: 700;
/* ---------- Spacing ---------- */
--b-space-1: 0.25rem;
--b-space-2: 0.5rem;
--b-space-3: 0.75rem;
--b-space-4: 1rem;
--b-space-5: 1.25rem;
--b-space-6: 1.5rem;
--b-space-8: 2rem;
/* ---------- UI Density ---------- */
/* Page */
--b-page-padding: 12px;
--b-page-padding-tablet: 14px;
--b-page-padding-desktop: 16px;
--b-page-header-gap: 8px;
--b-page-header-margin: 12px;
/* Layout */
--b-layout-gap: 12px;
--b-inline-gap: 8px;
/* Card */
--b-card-padding-y: 10px;
--b-card-padding-x: 14px;
--b-card-body-padding: 14px;
--b-card-gap: 12px;
/* Forms */
--b-field-gap: 10px;
--b-label-gap: 4px;
--b-help-gap: 3px;
--b-form-column-gap: 12px;
--b-textarea-min-height: 82px;
--b-textarea-padding-y: 8px;
/* Buttons */
--b-btn-gap: 6px;
--b-btn-padding-x: 12px;
--b-btn-padding-x-sm: 10px;
--b-btn-padding-x-lg: 16px;
/* Tables */
--b-table-padding-y: 7px;
--b-table-padding-x: 10px;
/* ---------- Radius ---------- */
--b-radius-sm: 6px;
--b-radius: 10px;
--b-radius-lg: 14px;
--b-radius-pill: 999px;
/* ---------- Shadows ---------- */
--b-shadow-sm:
0 1px 2px rgba(15, 23, 42, 0.05);
--b-shadow:
0 4px 14px rgba(15, 23, 42, 0.07);
--b-shadow-lg:
0 12px 28px rgba(15, 23, 42, 0.10);
/* ---------- Controls ---------- */
/* Compact ERP / POS friendly control sizes */
--b-control-height-sm: 27px;
--b-control-height: 32px;
--b-control-height-lg: 38px;
--b-control-padding-x: 10px;
/* ---------- Layout ---------- */
--b-container-max: 1600px;
/* ---------- Focus ---------- */
--b-focus-ring:
0 0 0 3px
color-mix(
in srgb,
var(--b-primary) 16%,
transparent
);
/* ---------- Motion ---------- */
--b-transition-fast: 120ms ease;
--b-transition: 180ms ease;
/* ---------- Navigation ---------- */
/*
* Keep navbar visually compatible
* with the original BluePrimes shell.
*/
--b-navbar-height: 46px;
--b-navbar-bg: #01478f;
--b-navbar-text:
rgba(255, 255, 255, 0.94);
--b-navbar-text-hover:
#ffffff;
--b-navbar-hover:
rgba(255, 255, 255, 0.13);
--b-navbar-active:
rgba(255, 255, 255, 0.18);
--b-navbar-border:
rgba(255, 255, 255, 0.12);
--b-navbar-shadow:
0 2px 6px rgba(0, 0, 0, 0.10);
/*
* Dropdown uses the same blue
* as the original navbar.
*/
--b-navbar-menu-hover:
#01478f;
/* ---------- Mobile Navigation Drawer ---------- */
--b-nav-drawer-width:
clamp(
170px,
44vw,
220px
);
--b-z-nav-drawer-overlay: 1065;
--b-z-nav-drawer: 1070;
--b-z-nav-drawer-menu: 1080;
/* ---------- Sidebar ---------- */
/*
* Original BluePrimes slim sidebar appearance.
*/
--b-sidebar-width: 56px;
/* Original three-color gradient */
--b-sidebar-bg: #01478f;
--b-sidebar-bg-mid: #0f63b4;
--b-sidebar-bg-end: #1380db;
/* Icons */
--b-sidebar-text: #eaf1fb;
--b-sidebar-text-active: #ffffff;
/* Hover / active overlays */
--b-sidebar-hover:
rgba(255, 255, 255, 0.14);
--b-sidebar-active:
rgba(255, 255, 255, 0.22);
/* Borders / separators */
--b-sidebar-border:
rgba(255, 255, 255, 0.12);
/* Original shadow */
--b-sidebar-shadow:
0 6px 18px rgba(0, 0, 0, 0.18);
/* Sidebar controls */
--b-sidebar-control-bg: #0b5db0;
--b-sidebar-control-hover: #094f97;
/* Tooltip */
--b-sidebar-tooltip-bg:
rgba(1, 71, 143, 0.96);
/* ---------- Navigation Layers ---------- */
--b-z-navbar: 1040;
--b-z-sidebar: 1050;
--b-z-sidebar-overlay: 1045;
--b-z-dropdown: 1060;
--b-z-tooltip: 1100;
--b-z-toast: 1200;
/* ---------- Document / Iframe Viewer ---------- */
--b-z-viewer-backdrop: 1290;
--b-z-viewer: 1300;
}
/* ==========================================================================
02. APP / PAGE
========================================================================== */
.b-app {
min-height: 100%;
font-family: var(--b-font-family);
color: var(--b-text);
}
.b-page {
width: 100%;
min-height: 100%;
padding: var(--b-page-padding);
background: var(--b-bg);
}
.b-container {
width: 100%;
max-width: var(--b-container-max);
margin-left: auto;
margin-right: auto;
}
.b-page-header {
display: flex;
flex-direction: column;
gap: var(--b-page-header-gap);
margin-bottom: var(--b-page-header-margin);
}
.b-page-heading {
min-width: 0;
}
.b-page-title {
margin: 0;
color: var(--b-text);
font-size: var(--b-font-xl);
font-weight: var(--b-font-bold);
line-height: 1.25;
}
.b-page-subtitle {
margin-top: var(--b-space-1);
margin-bottom: 0;
color: var(--b-text-muted);
font-size: var(--b-font-sm);
}
.b-page-actions {
display: flex;
flex-wrap: wrap;
gap: var(--b-space-2);
}
/*
* Empty optional page-header areas should
* not consume layout space.
*/
.b-page-subtitle:empty {
display: none;
}
.b-page-actions:empty {
display: none;
}
/* ==========================================================================
03. FLEX / GRID HELPERS
========================================================================== */
.b-stack {
display: flex;
flex-direction: column;
gap: var(--b-layout-gap);
}
.b-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--b-inline-gap);
}
.b-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--b-layout-gap);
}
.b-grid-2,
.b-grid-3,
.b-grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: var(--b-layout-gap);
}
/* ==========================================================================
04. CARDS
========================================================================== */
.b-card {
width: 100%;
background: var(--b-surface);
border: 1px solid var(--b-border);
border-radius: var(--b-radius-lg);
box-shadow: var(--b-shadow-sm);
overflow: hidden;
}
.b-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--b-inline-gap);
padding:
var(--b-card-padding-y)
var(--b-card-padding-x);
border-bottom: 1px solid var(--b-border);
}
.b-card-title {
margin: 0;
color: var(--b-text);
font-size: var(--b-font-lg);
font-weight: var(--b-font-semibold);
line-height: 1.3;
}
.b-card-subtitle {
margin-top: 2px;
color: var(--b-text-muted);
font-size: var(--b-font-sm);
line-height: 1.3;
}
.b-card-body {
padding: var(--b-card-body-padding);
}
.b-card-footer {
padding:
var(--b-card-padding-y)
var(--b-card-padding-x);
background: var(--b-surface-soft);
border-top: 1px solid var(--b-border);
}
/* ==========================================================================
05. BUTTONS
Base:
b-btn
Variants:
b-btn-primary
b-btn-secondary
b-btn-success
b-btn-danger
b-btn-warning
b-btn-info
b-btn-neutral
b-btn-ghost
Sizes:
b-btn-sm
b-btn-lg
Utilities:
b-btn-icon
b-btn-icon-sm
b-btn-icon-lg
b-btn-block
States:
disabled
is-disabled
is-loading
========================================================================== */
/* ==========================================================================
BASE
========================================================================== */
.b-btn {
min-height: var(--b-control-height);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--b-btn-gap);
padding:
0
var(--b-btn-padding-x);
color: var(--b-text);
background: var(--b-surface);
border: 1px solid transparent;
border-radius: var(--b-radius-sm);
font-family: inherit;
font-size: var(--b-font-md);
font-weight: var(--b-font-semibold);
line-height: 1;
text-align: center;
text-decoration: none !important;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
appearance: none;
-webkit-appearance: none;
transition:
background-color var(--b-transition-fast),
border-color var(--b-transition-fast),
color var(--b-transition-fast),
box-shadow var(--b-transition-fast),
transform var(--b-transition-fast),
opacity var(--b-transition-fast);
}
/*
* Links using .b-btn should behave exactly
* like normal buttons.
*/
a.b-btn {
text-decoration: none !important;
}
/* Hover */
.b-btn:hover {
text-decoration: none !important;
}
/* Keyboard focus */
.b-btn:focus {
outline: none;
}
.b-btn:focus-visible {
outline: none;
box-shadow: var(--b-focus-ring);
}
/* Active */
.b-btn:active:not(:disabled):not(.is-disabled) {
transform: translateY(1px);
}
/* ==========================================================================
ICONS INSIDE NORMAL BUTTONS
========================================================================== */
.b-btn > i,
.b-btn > svg {
flex: 0 0 auto;
}
/*
* Font Awesome icons should not distort
* button height or spacing.
*/
.b-btn > i {
line-height: 1;
}
/*
* Generic SVG support.
*/
.b-btn > svg {
width: 1em;
height: 1em;
}
/* ==========================================================================
DISABLED
========================================================================== */
.b-btn:disabled,
.b-btn.is-disabled,
.b-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
transform: none;
}
/* ==========================================================================
PRIMARY
Main action:
Save / Create / Confirm / Apply
========================================================================== */
.b-btn-primary {
color: var(--b-primary-contrast);
background: var(--b-primary);
border-color: var(--b-primary);
}
.b-btn-primary:hover {
color: var(--b-primary-contrast);
background: var(--b-primary-hover);
border-color: var(--b-primary-hover);
}
.b-btn-primary:active:not(:disabled):not(.is-disabled) {
color: var(--b-primary-contrast);
background: var(--b-primary-active);
border-color: var(--b-primary-active);
}
/* ==========================================================================
SECONDARY
Normal secondary action:
Back / Cancel / Clear / Browse
========================================================================== */
.b-btn-secondary {
color: var(--b-text);
background: var(--b-surface);
border-color: var(--b-border-strong);
}
.b-btn-secondary:hover {
color: var(--b-text);
background: var(--b-surface-hover);
border-color: var(--b-border-strong);
}
.b-btn-secondary:active:not(:disabled):not(.is-disabled) {
color: var(--b-text);
background: var(--b-surface-soft);
border-color: var(--b-border-strong);
}
/* ==========================================================================
SUCCESS
Positive business action:
Approve / Complete / Receive / Paid
========================================================================== */
.b-btn-success {
color: #ffffff;
background: var(--b-success);
border-color: var(--b-success);
}
.b-btn-success:hover {
color: #ffffff;
background: var(--b-success-hover);
border-color: var(--b-success-hover);
}
.b-btn-success:active:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: var(--b-success-active);
border-color: var(--b-success-active);
}
/* ==========================================================================
DANGER
Destructive action:
Delete / Remove / Void / Cancel destructive
========================================================================== */
.b-btn-danger {
color: #ffffff;
background: var(--b-danger);
border-color: var(--b-danger);
}
.b-btn-danger:hover {
color: #ffffff;
background: var(--b-danger-hover);
border-color: var(--b-danger-hover);
}
.b-btn-danger:active:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: var(--b-danger-active);
border-color: var(--b-danger-active);
}
/* ==========================================================================
WARNING
Caution action:
Hold / Pending / Retry / Review
========================================================================== */
.b-btn-warning {
color: #ffffff;
background: var(--b-warning);
border-color: var(--b-warning);
}
.b-btn-warning:hover {
color: #ffffff;
background: var(--b-warning-hover);
border-color: var(--b-warning-hover);
}
.b-btn-warning:active:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: var(--b-warning-active);
border-color: var(--b-warning-active);
}
/* ==========================================================================
INFO
Informational action:
View / Details / Preview / Information
========================================================================== */
.b-btn-info {
color: #ffffff;
background: var(--b-info);
border-color: var(--b-info);
}
.b-btn-info:hover {
color: #ffffff;
background: var(--b-info-hover);
border-color: var(--b-info-hover);
}
.b-btn-info:active:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: var(--b-info-active);
border-color: var(--b-info-active);
}
/* ==========================================================================
NEUTRAL
Solid gray action.
Use when Secondary white button is too weak,
but semantic color is not appropriate.
========================================================================== */
.b-btn-neutral {
color: #ffffff;
background: var(--b-neutral);
border-color: var(--b-neutral);
}
.b-btn-neutral:hover {
color: #ffffff;
background: var(--b-neutral-hover);
border-color: var(--b-neutral-hover);
}
.b-btn-neutral:active:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: var(--b-neutral-active);
border-color: var(--b-neutral-active);
}
/* ==========================================================================
GHOST
Low-emphasis action.
Good for:
small toolbar actions
close actions
non-primary links
========================================================================== */
.b-btn-ghost {
color: var(--b-primary);
background: transparent;
border-color: transparent;
}
.b-btn-ghost:hover {
color: var(--b-primary-hover);
background: var(--b-primary-soft);
border-color: transparent;
}
.b-btn-ghost:active:not(:disabled):not(.is-disabled) {
color: var(--b-primary-active);
background: var(--b-primary-soft);
border-color: transparent;
}
/* ==========================================================================
SIZES
========================================================================== */
/* Small */
.b-btn-sm {
min-height: var(--b-control-height-sm);
padding-left: var(--b-btn-padding-x-sm);
padding-right: var(--b-btn-padding-x-sm);
font-size: var(--b-font-sm);
}
/* Large */
.b-btn-lg {
min-height: var(--b-control-height-lg);
padding-left: var(--b-btn-padding-x-lg);
padding-right: var(--b-btn-padding-x-lg);
font-size: var(--b-font-lg);
}
/* ==========================================================================
ICON-ONLY BUTTON
========================================================================== */
/*
* Standard icon button.
* Example:
*
*
*/
.b-btn-icon {
width: var(--b-control-height);
min-width: var(--b-control-height);
height: var(--b-control-height);
min-height: var(--b-control-height);
padding: 0;
gap: 0;
}
/* Small icon button */
.b-btn-icon-sm {
width: var(--b-control-height-sm);
min-width: var(--b-control-height-sm);
height: var(--b-control-height-sm);
min-height: var(--b-control-height-sm);
padding: 0;
gap: 0;
font-size: var(--b-font-sm);
}
/* Large icon button */
.b-btn-icon-lg {
width: var(--b-control-height-lg);
min-width: var(--b-control-height-lg);
height: var(--b-control-height-lg);
min-height: var(--b-control-height-lg);
padding: 0;
gap: 0;
font-size: var(--b-font-lg);
}
/* ==========================================================================
FULL WIDTH
========================================================================== */
.b-btn-block {
width: 100%;
display: flex;
}
/* ==========================================================================
LOADING STATE
========================================================================== */
/*
* Usage:
*
*
*
* Business/module JS decides WHEN loading starts/stops.
* BUI only owns its generic appearance.
*/
.b-btn.is-loading {
cursor: wait;
pointer-events: none;
}
.b-btn.is-loading::before {
content: "";
width: 0.95em;
height: 0.95em;
flex: 0 0 auto;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation:
b-btn-spin
0.7s
linear
infinite;
}
@keyframes b-btn-spin {
to {
transform: rotate(360deg);
}
}
/*
* Respect OS reduced-motion preference.
*/
@media (prefers-reduced-motion: reduce) {
.b-btn.is-loading::before {
animation-duration: 1.4s;
}
}
/* ==========================================================================
BUTTON CONTENT HELPERS
========================================================================== */
/*
* Optional label wrapper.
*
* Useful when module JS needs to replace only
* the text without touching the icon.
*/
.b-btn-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Prevent a long button inside flex/grid from
* expanding beyond its parent.
*/
.b-btn-truncate {
min-width: 0;
max-width: 100%;
}
.b-btn-truncate .b-btn-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
06. FORMS
========================================================================== */
.b-form {
width: 100%;
background: transparent;
padding: 0;
border: 0;
border-radius: 0;
}
.b-field {
width: 100%;
margin-bottom: var(--b-field-gap);
}
.b-label {
display: block;
margin-bottom: var(--b-label-gap);
color: var(--b-text-secondary);
font-size: var(--b-font-sm);
font-weight: var(--b-font-semibold);
line-height: 1.3;
}
.b-required {
color: var(--b-danger);
}
/* Common control style */
.b-input,
.b-select,
.b-textarea {
width: 100%;
color: var(--b-text);
background: var(--b-surface);
border: 1px solid var(--b-border-strong);
border-radius: var(--b-radius-sm);
font-family: inherit;
font-size: var(--b-font-md);
transition:
border-color var(--b-transition-fast),
box-shadow var(--b-transition-fast),
background-color var(--b-transition-fast);
}
/* Input / Select */
.b-input,
.b-select {
min-height: var(--b-control-height);
padding:
0
var(--b-control-padding-x);
}
.b-input:hover,
.b-select:hover,
.b-textarea:hover {
border-color: var(--b-primary);
}
.b-input:focus,
.b-select:focus,
.b-textarea:focus {
outline: none;
border-color: var(--b-primary);
box-shadow: var(--b-focus-ring);
}
.b-input::placeholder,
.b-textarea::placeholder {
color: var(--b-text-light);
}
.b-input:disabled,
.b-select:disabled,
.b-textarea:disabled {
cursor: not-allowed;
color: var(--b-text-muted);
background: var(--b-surface-soft);
}
.b-input[readonly],
.b-textarea[readonly] {
background: var(--b-surface-soft);
}
/* Help / error */
.b-help {
display: block;
margin-top: var(--b-help-gap);
color: var(--b-text-muted);
font-size: var(--b-font-xs);
line-height: 1.3;
}
.b-error {
display: block;
margin-top: var(--b-help-gap);
color: var(--b-danger);
font-size: var(--b-font-xs);
font-weight: var(--b-font-medium);
line-height: 1.3;
}
.b-field.has-error .b-input,
.b-field.has-error .b-select,
.b-field.has-error .b-textarea {
border-color: var(--b-danger);
}
/* Form row */
.b-form-row {
display: grid;
grid-template-columns: 1fr;
row-gap: 0;
column-gap: var(--b-form-column-gap);
}
/* ==========================================================================
07. SELECT2 SUPPORT
========================================================================== */
.b-form .select2-container {
width: 100% !important;
max-width: 100%;
}
.b-form
.select2-container--bootstrap4
.select2-selection {
min-height: var(--b-control-height);
border-color: var(--b-border-strong);
border-radius: var(--b-radius-sm);
background: var(--b-surface);
transition:
border-color var(--b-transition-fast),
box-shadow var(--b-transition-fast);
}
.b-form
.select2-container--bootstrap4.select2-container--focus
.select2-selection,
.b-form
.select2-container--bootstrap4.select2-container--open
.select2-selection {
border-color: var(--b-primary);
box-shadow: var(--b-focus-ring);
}
/* Single Select2 control should match normal BUI input height */
.b-form
.select2-container--bootstrap4
.select2-selection--single {
height: var(--b-control-height);
}
.b-form
.select2-container--bootstrap4
.select2-selection--single
.select2-selection__rendered {
height: calc(var(--b-control-height) - 2px);
padding-left: var(--b-control-padding-x);
padding-right: calc(
var(--b-control-padding-x) * 3
);
line-height: calc(
var(--b-control-height) - 2px
);
}
.b-form
.select2-container--bootstrap4
.select2-selection--single
.select2-selection__arrow {
height: calc(
var(--b-control-height) - 2px
);
}
/* ==========================================================================
08. BADGES
========================================================================== */
.b-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding:
3px
8px;
border-radius: var(--b-radius-pill);
font-size: var(--b-font-xs);
font-weight: var(--b-font-semibold);
line-height: 1;
white-space: nowrap;
}
.b-badge-primary {
color: var(--b-primary);
background: var(--b-primary-soft);
}
.b-badge-success {
color: var(--b-success);
background: var(--b-success-soft);
}
.b-badge-warning {
color: var(--b-warning);
background: var(--b-warning-soft);
}
.b-badge-danger {
color: var(--b-danger);
background: var(--b-danger-soft);
}
.b-badge-info {
color: var(--b-info);
background: var(--b-info-soft);
}
.b-badge-neutral {
color: var(--b-text-secondary);
background: var(--b-surface-soft);
border: 1px solid var(--b-border);
}
/* ==========================================================================
09. ALERTS
========================================================================== */
.b-alert {
width: 100%;
padding:
var(--b-space-3)
var(--b-space-4);
border: 1px solid var(--b-border);
border-radius: var(--b-radius);
font-size: var(--b-font-sm);
}
.b-alert-success {
color: var(--b-success);
background: var(--b-success-soft);
}
.b-alert-warning {
color: var(--b-warning);
background: var(--b-warning-soft);
}
.b-alert-danger {
color: var(--b-danger);
background: var(--b-danger-soft);
}
.b-alert-info {
color: var(--b-info);
background: var(--b-info-soft);
}
/* ==========================================================================
09A. TOASTS
Temporary application notifications.
Types:
b-toast-success
b-toast-danger
b-toast-warning
b-toast-info
JS owns:
creation
timer
hover pause/resume
close
removal
========================================================================== */
/* ==========================================================================
CONTAINER
========================================================================== */
.b-toast-container {
position: fixed;
top: calc(
var(--b-navbar-height) +
var(--b-space-3)
);
right: var(--b-space-3);
width: min(
360px,
calc(100vw - 24px)
);
display: flex;
flex-direction: column;
gap: var(--b-space-2);
z-index: var(--b-z-toast);
pointer-events: none;
}
/* ==========================================================================
TOAST
========================================================================== */
.b-toast {
width: 100%;
display: flex;
align-items: flex-start;
gap: var(--b-space-3);
padding:
var(--b-space-3)
var(--b-space-3);
color: var(--b-text);
background: var(--b-surface);
border: 1px solid var(--b-border);
border-left-width: 4px;
border-radius: var(--b-radius);
box-shadow: var(--b-shadow-lg);
opacity: 0;
transform: translateY(-8px);
pointer-events: auto;
transition:
opacity var(--b-transition),
transform var(--b-transition),
box-shadow var(--b-transition-fast);
}
/*
* Visible state.
*/
.b-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
/*
* Removal state.
*/
.b-toast.is-hiding {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
/*
* Slight visual feedback while user
* is interacting with the toast.
*/
.b-toast:hover,
.b-toast:focus-within {
box-shadow:
0 14px 32px rgba(15, 23, 42, 0.14);
}
/* ==========================================================================
SEMANTIC TYPES
========================================================================== */
/* Success */
.b-toast-success {
border-left-color: var(--b-success);
}
.b-toast-success .b-toast-icon {
color: var(--b-success);
background: var(--b-success-soft);
}
/* Danger / Error */
.b-toast-danger {
border-left-color: var(--b-danger);
}
.b-toast-danger .b-toast-icon {
color: var(--b-danger);
background: var(--b-danger-soft);
}
/* Warning */
.b-toast-warning {
border-left-color: var(--b-warning);
}
.b-toast-warning .b-toast-icon {
color: var(--b-warning);
background: var(--b-warning-soft);
}
/* Info */
.b-toast-info {
border-left-color: var(--b-info);
}
.b-toast-info .b-toast-icon {
color: var(--b-info);
background: var(--b-info-soft);
}
/* ==========================================================================
ICON
========================================================================== */
.b-toast-icon {
width: 28px;
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: var(--b-font-sm);
font-weight: var(--b-font-bold);
line-height: 1;
}
/* ==========================================================================
CONTENT
========================================================================== */
.b-toast-content {
min-width: 0;
flex: 1 1 auto;
}
.b-toast-title {
margin: 0;
color: var(--b-text);
font-size: var(--b-font-sm);
font-weight: var(--b-font-semibold);
line-height: 1.3;
}
.b-toast-message {
margin-top: 2px;
color: var(--b-text-secondary);
font-size: var(--b-font-sm);
line-height: 1.4;
overflow-wrap: anywhere;
}
/* ==========================================================================
CLOSE BUTTON
========================================================================== */
.b-toast-close {
width: 26px;
min-width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: -2px -2px 0 0;
padding: 0;
color: var(--b-text-muted);
background: transparent;
border: 0;
border-radius: var(--b-radius-sm);
font-family: inherit;
font-size: 20px;
font-weight: var(--b-font-normal);
line-height: 1;
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast);
}
.b-toast-close:hover {
color: var(--b-text);
background: var(--b-surface-hover);
}
.b-toast-close:focus-visible {
outline: none;
box-shadow: var(--b-focus-ring);
}
/* ==========================================================================
MOBILE
========================================================================== */
@media (max-width: 767.98px) {
.b-toast-container {
top: calc(
var(--b-navbar-height) +
var(--b-space-2)
);
left: var(--b-space-3);
right: var(--b-space-3);
width: auto;
}
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.b-toast {
transition-duration: 0.01ms;
}
}
/* ==========================================================================
10. TOOLBAR / SEARCH
========================================================================== */
.b-toolbar {
display: flex;
flex-direction: column;
gap: var(--b-space-3);
margin-bottom: var(--b-space-4);
}
.b-toolbar-main,
.b-toolbar-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--b-space-2);
}
.b-search {
position: relative;
width: 100%;
}
.b-search .b-input {
padding-left: 38px;
}
.b-search-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--b-text-muted);
pointer-events: none;
}
/* ==========================================================================
11. TABLES
========================================================================== */
.b-table-wrap {
width: 100%;
overflow-x: auto;
background: var(--b-surface);
border: 1px solid var(--b-border);
border-radius: var(--b-radius);
-webkit-overflow-scrolling: touch;
}
.b-table {
width: 100%;
min-width: 650px;
border-collapse: collapse;
background: var(--b-surface);
}
.b-table th,
.b-table td {
padding:
var(--b-table-padding-y)
var(--b-table-padding-x);
border-bottom: 1px solid var(--b-border);
color: var(--b-text);
font-size: var(--b-font-sm);
vertical-align: middle;
}
.b-table th {
color: var(--b-text-secondary);
background: var(--b-surface-soft);
font-weight: var(--b-font-semibold);
text-align: left;
white-space: nowrap;
}
.b-table tbody tr {
transition: background-color var(--b-transition-fast);
}
.b-table tbody tr:hover {
background: var(--b-surface-hover);
}
.b-table tbody tr:last-child td {
border-bottom: 0;
}
.b-table-number {
text-align: right !important;
font-variant-numeric: tabular-nums;
}
.b-table-actions {
text-align: right;
white-space: nowrap;
}
/* ==========================================================================
12. EMPTY STATE
========================================================================== */
.b-empty {
width: 100%;
padding:
var(--b-space-8)
var(--b-space-4);
text-align: center;
}
.b-empty-title {
margin: 0 0 var(--b-space-2);
color: var(--b-text);
font-size: var(--b-font-lg);
font-weight: var(--b-font-semibold);
}
.b-empty-text {
margin: 0;
color: var(--b-text-muted);
font-size: var(--b-font-sm);
}
/* ==========================================================================
13. RESPONSIVE
Mobile is default.
========================================================================== */
/* Tablet */
@media (min-width: 768px) {
.b-page {
padding: var(--b-page-padding-tablet);
}
.b-page-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.b-grid-2 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.b-grid-3 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.b-grid-4 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.b-form-row-2 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.b-toolbar {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.b-search {
max-width: 340px;
}
}
/* Desktop */
@media (min-width: 992px) {
.b-page {
padding: var(--b-page-padding-desktop);
}
.b-grid-3 {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.b-grid-4 {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.b-form-row-3 {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.b-form-row-4 {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
}
/* ==========================================================================
14. SMALL UTILITIES
Keep this section intentionally small.
========================================================================== */
.b-w-100 {
width: 100% !important;
}
.b-text-muted {
color: var(--b-text-muted) !important;
}
.b-text-primary {
color: var(--b-primary) !important;
}
.b-text-right {
text-align: right !important;
}
.b-mb-0 {
margin-bottom: 0 !important;
}
.b-mt-2 {
margin-top: var(--b-space-2) !important;
}
.b-mb-2 {
margin-bottom: var(--b-space-2) !important;
}
.b-mb-4 {
margin-bottom: var(--b-space-4) !important;
}
/* ==========================================================================
14A. DOCUMENT / IFRAME VIEWER
Generic BUI overlay viewer.
Intended for:
invoice details
report previews
stock documents
vouchers
internal detail pages
PDFs / browser-viewable documents
Business modules only provide:
URL
title
BUI owns:
overlay
header
iframe
loading state
refresh
open-new-tab
close
========================================================================== */
/* ==========================================================================
PAGE LOCK
========================================================================== */
body.b-viewer-open {
overflow: hidden;
}
/* ==========================================================================
BACKDROP
========================================================================== */
.b-viewer-backdrop {
position: fixed;
inset: 0;
background:
rgba(15, 23, 42, 0.62);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index:
var(--b-z-viewer-backdrop);
transition:
opacity var(--b-transition-fast),
visibility var(--b-transition-fast);
}
.b-viewer-backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ==========================================================================
VIEWER ROOT
========================================================================== */
.b-viewer {
position: fixed;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
color: var(--b-text);
background:
var(--b-surface);
border:
1px solid
var(--b-border);
border-radius:
var(--b-radius-lg);
box-shadow:
0 24px 70px
rgba(15, 23, 42, 0.28);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(8px)
scale(0.995);
z-index:
var(--b-z-viewer);
transition:
opacity var(--b-transition-fast),
visibility var(--b-transition-fast),
transform var(--b-transition-fast);
}
.b-viewer.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0)
scale(1);
}
/* ==========================================================================
HEADER
========================================================================== */
.b-viewer-header {
min-height: 46px;
flex:
0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap:
var(--b-space-3);
padding:
0
10px
0
14px;
background:
var(--b-surface);
border-bottom:
1px solid
var(--b-border);
}
/* ==========================================================================
TITLE
========================================================================== */
.b-viewer-title-wrap {
min-width: 0;
flex:
1 1 auto;
display: flex;
align-items: center;
gap:
var(--b-space-2);
}
.b-viewer-title-icon {
flex:
0 0 auto;
color:
var(--b-primary);
font-size:
var(--b-font-md);
}
.b-viewer-title {
min-width: 0;
margin: 0;
color:
var(--b-text);
font-size:
var(--b-font-lg);
font-weight:
var(--b-font-semibold);
line-height:
1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
HEADER ACTIONS
========================================================================== */
.b-viewer-actions {
flex:
0 0 auto;
display: flex;
align-items: center;
gap:
4px;
}
.b-viewer-action {
width: 32px;
min-width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
padding: 0;
color:
var(--b-text-secondary);
background:
transparent;
border:
1px solid
transparent;
border-radius:
var(--b-radius-sm);
font-family:
inherit;
font-size:
var(--b-font-md);
line-height: 1;
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast),
border-color var(--b-transition-fast);
}
.b-viewer-action:hover {
color:
var(--b-text);
background:
var(--b-surface-hover);
border-color:
var(--b-border);
}
.b-viewer-action:focus-visible {
outline: none;
box-shadow:
var(--b-focus-ring);
}
.b-viewer-action-close {
font-size: 22px;
font-weight: 400;
}
.b-viewer-action-close:hover {
color:
var(--b-danger);
background:
var(--b-danger-soft);
border-color:
color-mix(
in srgb,
var(--b-danger) 20%,
transparent
);
}
/* ==========================================================================
BODY
========================================================================== */
.b-viewer-body {
position: relative;
min-width: 0;
min-height: 0;
flex:
1 1 auto;
background:
#eef2f7;
overflow: hidden;
}
/* ==========================================================================
IFRAME
========================================================================== */
.b-viewer-frame {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
background:
#ffffff;
border: 0;
}
/* ==========================================================================
LOADING STATE
========================================================================== */
.b-viewer-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap:
var(--b-space-3);
color:
var(--b-text-secondary);
background:
rgba(248, 250, 252, 0.92);
font-size:
var(--b-font-sm);
font-weight:
var(--b-font-medium);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--b-transition-fast),
visibility var(--b-transition-fast);
}
.b-viewer.is-loading
.b-viewer-loading {
opacity: 1;
visibility: visible;
}
.b-viewer-spinner {
width: 22px;
height: 22px;
flex:
0 0 22px;
border:
2px solid
var(--b-border-strong);
border-top-color:
var(--b-primary);
border-radius:
50%;
animation:
b-viewer-spin
0.7s
linear
infinite;
}
@keyframes b-viewer-spin {
to {
transform:
rotate(360deg);
}
}
/* ==========================================================================
MOBILE
========================================================================== */
@media (max-width: 767.98px) {
.b-viewer {
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0;
border: 0;
}
.b-viewer-header {
min-height: 44px;
padding-left:
10px;
padding-right:
6px;
}
.b-viewer-title {
font-size:
var(--b-font-md);
}
.b-viewer-action {
width: 30px;
min-width: 30px;
height: 30px;
}
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.b-viewer,
.b-viewer-backdrop,
.b-viewer-loading {
transition-duration:
0.01ms;
}
.b-viewer-spinner {
animation-duration:
1.4s;
}
}
/* ==========================================================================
15. TOP NAVBAR
========================================================================== */
.b-navbar {
position: sticky;
top: 0;
width: 100%;
min-height: var(--b-navbar-height);
display: flex;
align-items: center;
color: var(--b-navbar-text);
background: var(--b-navbar-bg);
border-bottom: 1px solid var(--b-navbar-border);
box-shadow: var(--b-navbar-shadow);
z-index: var(--b-z-navbar);
}
.b-navbar-inner {
width: 100%;
min-height: var(--b-navbar-height);
display: flex;
align-items: center;
gap: var(--b-space-2);
padding:
0
12px;
}
/* Brand */
.b-navbar-brand {
color:
var(--b-primary-contrast);
}
.b-navbar-brand:hover {
color:
var(--b-primary-contrast);
}
/* Main navigation */
.b-navbar-nav {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.b-navbar-item {
position: relative;
}
.b-navbar-link {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
padding:
0
10px;
color: var(--b-navbar-text);
background: transparent;
border: 0;
border-radius: var(--b-radius-sm);
font-size: 0.9375rem; /* 15px */
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast);
}
.b-navbar-link:hover,
.b-navbar-link:focus,
.b-navbar-item.active > .b-navbar-link,
.b-navbar-item.is-open > .b-navbar-link {
color: #ffffff;
background: var(--b-navbar-hover);
outline: none;
}
/* Navbar middle area */
.b-navbar-center {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
Navbar current branch / context
========================================================================== */
.b-navbar-context {
min-width: 0;
max-width: 100%;
display: inline-flex;
align-items: center;
gap: var(--b-space-2);
padding:
6px
10px;
color: var(--b-primary-contrast);
background:
rgba(255, 255, 255, 0.12);
border:
1px solid
rgba(255, 255, 255, 0.20);
border-radius: var(--b-radius-sm);
font-size: var(--b-font-sm);
font-weight: var(--b-font-semibold);
line-height: 1;
text-decoration: none !important;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast),
border-color var(--b-transition-fast);
}
.b-navbar-context:hover {
color: var(--b-primary-contrast);
background:
rgba(255, 255, 255, 0.18);
border-color:
rgba(255, 255, 255, 0.28);
text-decoration: none;
}
.b-navbar-context-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
Navbar user avatar
========================================================================== */
.b-navbar-avatar {
width: 28px;
height: 28px;
display: block;
object-fit: cover;
border-radius: var(--b-radius-pill);
}
/* Navbar right actions */
.b-navbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--b-space-2);
}
.b-navbar-icon-btn {
width: 36px;
height: 36px;
display: inline-grid;
place-items: center;
padding: 0;
color: var(--b-navbar-text);
background: transparent;
border: 0;
border-radius: var(--b-radius-sm);
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast);
}
.b-navbar-icon-btn:hover,
.b-dropdown.is-open > .b-navbar-icon-btn {
color:
var(--b-primary-contrast);
background:
var(--b-navbar-hover);
}
/* Mobile menu toggle */
.b-navbar-toggle {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
padding: 0;
color: #ffffff;
background: transparent;
border:
1px solid
rgba(255, 255, 255, 0.24);
border-radius: var(--b-radius-sm);
cursor: pointer;
transition:
background-color var(--b-transition-fast),
border-color var(--b-transition-fast);
}
.b-navbar-toggle:hover {
background: var(--b-navbar-hover);
border-color:
rgba(255, 255, 255, 0.35);
}
/* ==========================================================================
16. BUI DROPDOWNS
Fully owned by BUI.
No Bootstrap dropdown classes or dropdown JS required.
Structure:
.b-dropdown
.b-dropdown-toggle
.b-dropdown-menu
.b-dropdown-item
Nested:
.b-dropdown-submenu
.b-dropdown-toggle
.b-dropdown-menu
========================================================================== */
/* ==========================================================================
ROOT DROPDOWN
========================================================================== */
.b-dropdown {
position: relative;
}
/* ==========================================================================
MENU
========================================================================== */
.b-dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
/*
* Original menu minimum width.
*/
min-width: 220px;
display: none;
margin: 0;
padding:
6px
0;
list-style: none;
color: #333333;
background: #ffffff;
/*
* Original navbar dropdown
* did not use a visible border.
*/
border: 0;
/*
* Original:
* border-radius: 0.6rem;
*/
border-radius: 0.6rem;
/*
* Original dropdown shadow.
*/
box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.12);
z-index: var(--b-z-dropdown);
}
/*
* Open root dropdown.
*/
.b-dropdown.is-open > .b-dropdown-menu {
display: block;
}
/*
* Right aligned menu.
*
* Useful for profile/user dropdown.
*/
.b-dropdown-menu-right {
left: auto;
right: 0;
}
/* ==========================================================================
DROPDOWN ITEM
========================================================================== */
.b-dropdown-item {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
gap: var(--b-space-2);
/*
* Original:
* padding: .5rem 1rem
*/
padding:
8px
16px;
color: #333333;
background: transparent;
border: 0;
font-family: inherit;
/*
* Old dropdown menu text was
* normal weight.
*/
font-size: var(--b-font-md);
font-weight: var(--b-font-semibold);
line-height: 1.25;
text-align: left;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast);
}
.b-dropdown-item:hover,
.b-dropdown-item:focus {
color: #ffffff;
background:
var(--b-navbar-menu-hover);
outline: none;
text-decoration: none;
}
/* ==========================================================================
ITEM ICON
========================================================================== */
.b-dropdown-item > i,
.b-dropdown-item > svg {
flex: 0 0 auto;
}
.b-dropdown-item > i {
width: 16px;
text-align: center;
}
/* ==========================================================================
TOGGLE CARET
========================================================================== */
.b-dropdown-toggle::after {
content: "";
width: 6px;
height: 6px;
flex: 0 0 auto;
margin-left: 3px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform:
rotate(45deg)
translateY(-2px);
transform-origin: center;
transition:
transform var(--b-transition-fast);
}
.b-dropdown.is-open >
.b-dropdown-toggle::after {
transform:
rotate(225deg)
translate(-1px, -1px);
}
/*
* Profile/avatar button should not show a caret.
*/
.b-navbar-icon-btn.b-dropdown-toggle::after {
display: none;
}
/* ==========================================================================
DIVIDER
========================================================================== */
.b-dropdown-divider {
height: 1px;
margin:
var(--b-space-2)
0;
background: var(--b-border);
border: 0;
list-style: none;
}
/* ==========================================================================
HEADER
========================================================================== */
.b-dropdown-header {
padding:
8px
12px
5px;
color: var(--b-text-muted);
font-size: var(--b-font-xs);
font-weight: var(--b-font-semibold);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ==========================================================================
NESTED DROPDOWN
========================================================================== */
.b-dropdown-submenu {
position: relative;
list-style: none;
}
.b-dropdown-submenu > .b-dropdown-menu {
top: 0;
left: calc(100% + 5px);
margin: 0;
}
.b-dropdown-submenu.is-open >
.b-dropdown-menu {
display: block;
}
/*
* Nested arrow points to the right.
*/
.b-dropdown-submenu >
.b-dropdown-toggle::after {
margin-left: auto;
transform:
rotate(-45deg);
}
.b-dropdown-submenu.is-open >
.b-dropdown-toggle::after {
transform:
rotate(135deg);
}
/* ==========================================================================
17. SLIM SIDEBAR
Original BluePrimes slim-sidebar appearance
with BUI behavior.
========================================================================== */
.b-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--b-sidebar-width);
display: flex;
flex-direction: column;
align-items: center;
background:
linear-gradient(
180deg,
var(--b-sidebar-bg) 0%,
var(--b-sidebar-bg-mid) 55%,
var(--b-sidebar-bg-end) 100%
);
border-right: 0;
box-shadow:
var(--b-sidebar-shadow);
z-index:
var(--b-z-sidebar);
transform:
translateX(-100%);
transition:
transform var(--b-transition);
}
/* Mobile / tablet open */
.b-sidebar.is-open {
transform:
translateX(0);
}
/* ==========================================================================
BRAND
========================================================================== */
.b-sidebar-brand {
width: 100%;
height: 56px;
flex:
0 0 56px;
display: grid;
place-items: center;
color: #ffffff;
border-bottom:
1px solid
rgba(255, 255, 255, 0.12);
text-decoration:
none !important;
}
.b-sidebar-brand-mark {
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: #ffffff;
background:
rgba(255, 255, 255, 0.14);
border-radius: 8px;
font-size: 15px;
}
/* ==========================================================================
NAVIGATION
========================================================================== */
.b-sidebar-nav {
width: 100%;
flex:
1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
/*
* Old sidebar had 4px top/bottom
* margin around every item.
*/
gap: 8px;
padding:
6px
0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.b-sidebar-nav::-webkit-scrollbar {
width: 0;
display: none;
}
/* ==========================================================================
ITEM
========================================================================== */
.b-sidebar-item {
width: 100%;
display: flex;
justify-content: center;
position: relative;
margin: 0;
}
.b-sidebar-link {
width: 36px;
height: 36px;
display: grid;
place-items: center;
color:
var(--b-sidebar-text);
background:
transparent;
border-radius: 10px;
text-decoration:
none !important;
cursor: pointer;
transition:
color var(--b-transition-fast),
background-color var(--b-transition-fast),
box-shadow var(--b-transition-fast),
transform 40ms ease;
}
/* Original hover */
.b-sidebar-link:hover {
color:
var(--b-sidebar-text-active);
background:
var(--b-sidebar-hover);
box-shadow:
0 6px 14px
rgba(0, 0, 0, 0.18);
}
/* Original active item */
.b-sidebar-item.active
.b-sidebar-link {
color:
var(--b-sidebar-text-active);
background:
var(--b-sidebar-active);
box-shadow:
0 6px 14px
rgba(0, 0, 0, 0.20);
}
.b-sidebar-link:active {
transform:
scale(0.98);
}
.b-sidebar-link i {
font-size: 16px;
}
/*
* New BUI previously used a white
* active indicator on the left.
*
* Original sidebar did NOT have it.
*/
.b-sidebar-item.active::before {
display: none;
}
/* ==========================================================================
DESTRUCTIVE ACTION
========================================================================== */
.b-sidebar-link-danger:hover {
color: #ffffff;
background:
rgba(220, 53, 69, 0.18);
}
/* ==========================================================================
SEPARATOR
========================================================================== */
.b-sidebar-separator {
width: 28px;
height: 1px;
flex-shrink: 0;
margin:
6px
auto;
background:
rgba(255, 255, 255, 0.18);
}
/* ==========================================================================
BOTTOM CONTROLS
========================================================================== */
.b-sidebar-bottom {
width: 100%;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding:
6px
0
10px;
border-top:
1px solid
rgba(255, 255, 255, 0.12);
}
/* ==========================================================================
HIDE BUTTON
========================================================================== */
.b-sidebar-btn {
width: 28px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
color: #ffffff;
background:
var(--b-sidebar-control-bg);
border: 0;
border-radius: 50%;
box-shadow:
0 6px 16px
rgba(0, 0, 0, 0.25);
outline: none;
cursor: pointer;
transition:
background-color var(--b-transition-fast),
transform 40ms ease;
}
.b-sidebar-btn:hover {
color: #ffffff;
background:
var(--b-sidebar-control-hover);
}
.b-sidebar-btn:active {
transform:
scale(0.98);
}
/* ==========================================================================
18. SIDEBAR TOOLTIP
========================================================================== */
/* ==========================================================================
18. SIDEBAR TOOLTIP
Matches original BluePrimes hover badge.
========================================================================== */
.b-sidebar-tooltip {
position: fixed;
display: none;
padding:
6px
10px;
color: #ffffff;
background:
var(--b-sidebar-tooltip-bg);
border-radius: 10px;
box-shadow:
0 10px 22px
rgba(0, 0, 0, 0.18);
font-size: 0.82rem;
font-weight: var(--b-font-medium);
line-height: 1.2;
letter-spacing: 0.2px;
white-space: nowrap;
pointer-events: none;
z-index:
var(--b-z-tooltip);
}
/*
* Tooltip arrow pointing toward sidebar.
*/
.b-sidebar-tooltip::after {
content: "";
position: absolute;
left: -12px;
top: 50%;
width: 0;
height: 0;
transform:
translateY(-50%);
border:
6px solid transparent;
border-right-color:
var(--b-sidebar-tooltip-bg);
}
.b-sidebar-tooltip.is-visible {
display: block;
}
/* ==========================================================================
19. SIDEBAR BACKDROP
Mobile / tablet only
========================================================================== */
.b-sidebar-backdrop {
position: fixed;
inset: 0;
display: none;
background:
rgba(15, 23, 42, 0.42);
z-index: var(--b-z-sidebar-overlay);
}
.b-sidebar-backdrop.is-visible {
display: block;
}
.b-sidebar-reveal {
position: fixed;
left: 8px;
bottom: 14px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
color:
var(--b-primary-contrast);
background:
var(--b-primary);
border: 0;
border-radius: var(--b-radius-pill);
box-shadow: var(--b-shadow);
cursor: pointer;
z-index: var(--b-z-sidebar);
transition:
background-color var(--b-transition-fast),
transform var(--b-transition-fast);
}
.b-sidebar-reveal:hover {
background:
var(--b-primary-hover);
}
.b-sidebar-reveal:active {
background:
var(--b-primary-active);
transform: scale(0.97);
}
.b-sidebar-reveal[hidden] {
display: none !important;
}
/* ==========================================================================
20. PAGE + SIDEBAR INTEGRATION
Compatible with existing #content-wrapper structure.
========================================================================== */
body.b-has-sidebar #content-wrapper {
margin-left: 0;
transition:
margin-left var(--b-transition);
}
/* ==========================================================================
MOBILE NAVIGATION DRAWER
Top navbar hamburger opens this drawer.
This is intentionally separate from the slim sidebar.
Slim sidebar:
shortcuts / icon navigation
Navigation drawer:
File / Invoice / Reports / etc.
========================================================================== */
/* Desktop default */
.b-nav-drawer,
.b-nav-drawer-backdrop {
display: none;
}
/* ==========================================================================
MOBILE / TABLET
========================================================================== */
@media (max-width: 991.98px) {
/* ----------------------------------------------------------------------
Drawer
---------------------------------------------------------------------- */
.b-nav-drawer {
position: fixed;
top:
var(--b-navbar-height);
left: 0;
bottom: 0;
width:
var(--b-nav-drawer-width);
display: block;
color: #ffffff;
background:
var(--b-navbar-bg);
border-right:
1px solid
rgba(255, 255, 255, 0.12);
box-shadow:
8px 0 24px
rgba(15, 23, 42, 0.18);
z-index:
var(--b-z-nav-drawer);
/*
* Important:
* visible overflow lets dropdown menus
* pop OUTSIDE the drawer to the right.
*/
overflow:
visible;
transform:
translateX(-105%);
transition:
transform
var(--b-transition);
}
.b-nav-drawer.is-open {
transform:
translateX(0);
}
/* ----------------------------------------------------------------------
Drawer Header
---------------------------------------------------------------------- */
.b-nav-drawer-header {
height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap:
var(--b-space-2);
padding:
0
10px
0
14px;
border-bottom:
1px solid
rgba(255, 255, 255, 0.12);
}
.b-nav-drawer-title {
color:
#ffffff;
font-size:
var(--b-font-md);
font-weight:
var(--b-font-bold);
}
.b-nav-drawer-close {
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
color:
#ffffff;
background:
transparent;
border:
0;
border-radius:
var(--b-radius-sm);
cursor:
pointer;
}
.b-nav-drawer-close:hover {
background:
rgba(255, 255, 255, 0.14);
}
/* ----------------------------------------------------------------------
Root Menu List
---------------------------------------------------------------------- */
.b-nav-drawer-list {
width: 100%;
margin: 0;
padding:
8px
6px;
list-style: none;
overflow:
visible;
}
.b-nav-drawer-item {
width: 100%;
position: relative;
margin:
2px
0;
}
/* ----------------------------------------------------------------------
Root Menu Link
---------------------------------------------------------------------- */
.b-nav-drawer-link {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap:
var(--b-space-2);
padding:
0
10px;
color:
rgba(255, 255, 255, 0.95);
background:
transparent;
border:
0;
border-radius:
var(--b-radius-sm);
font-family:
inherit;
font-size:
var(--b-font-md);
font-weight:
var(--b-font-bold);
line-height:
1;
text-align:
left;
text-decoration:
none !important;
cursor:
pointer;
white-space:
nowrap;
transition:
color
var(--b-transition-fast),
background-color
var(--b-transition-fast);
}
.b-nav-drawer-link:hover,
.b-nav-drawer-link:focus,
.b-nav-drawer-item.b-dropdown.is-open
> .b-nav-drawer-link {
color:
#ffffff;
background:
rgba(255, 255, 255, 0.15);
outline:
none;
}
.b-nav-drawer-link-main {
min-width: 0;
display: flex;
align-items: center;
gap:
9px;
}
.b-nav-drawer-link-main > i {
width: 18px;
flex:
0 0 18px;
text-align:
center;
}
.b-nav-drawer-arrow {
flex:
0 0 auto;
font-size:
10px;
opacity:
0.8;
transition:
transform
var(--b-transition-fast);
}
.b-nav-drawer-item.b-dropdown.is-open
> .b-nav-drawer-link
.b-nav-drawer-arrow {
transform:
translateX(2px);
}
/*
* Generic b-dropdown-toggle already has
* its own caret.
*
* Drawer uses explicit right chevron instead.
*/
.b-nav-drawer-link.b-dropdown-toggle::after {
display:
none;
}
/* ----------------------------------------------------------------------
Right-side Popout Menu
---------------------------------------------------------------------- */
.b-nav-drawer-menu {
top: 0;
left:
calc(
100% + 6px
);
width:
clamp(
170px,
42vw,
260px
);
max-width:
calc(
100vw -
var(--b-nav-drawer-width) -
12px
);
max-height:
calc(
100dvh -
var(--b-navbar-height) -
12px
);
overflow-y:
auto;
overflow-x:
visible;
z-index:
var(--b-z-nav-drawer-menu);
}
/*
* Keep existing BluePrimes dropdown appearance:
*
* white popup
* dark text
* blue hover
*/
.b-nav-drawer-menu
.b-dropdown-item {
min-height:
38px;
}
/* ----------------------------------------------------------------------
Backdrop
---------------------------------------------------------------------- */
.b-nav-drawer-backdrop {
position: fixed;
top:
var(--b-navbar-height);
right: 0;
bottom: 0;
left: 0;
display: block;
background:
rgba(15, 23, 42, 0.42);
opacity: 0;
visibility:
hidden;
pointer-events:
none;
z-index:
var(--b-z-nav-drawer-overlay);
transition:
opacity
var(--b-transition-fast),
visibility
var(--b-transition-fast);
}
.b-nav-drawer-backdrop.is-visible {
opacity: 1;
visibility:
visible;
pointer-events:
auto;
}
/*
* Avoid page scrolling while menu drawer is open.
*/
body.b-nav-drawer-open {
overflow:
hidden;
}
}
/* ============================================================
MOBILE DRAWER - NESTED MENU
Root dropdown:
opens beside drawer.
Deeper submenu:
occupies the SAME popout panel area.
============================================================ */
@media (max-width: 991.98px) {
/*
* Nested menu must NOT continue moving
* farther to the right on mobile.
*/
.b-nav-drawer-menu
.b-dropdown-submenu
> .b-dropdown-menu {
/*
* Fill the SAME white popup panel.
* Do not create another panel farther right.
*/
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
background:
var(--b-surface);
border-radius:
inherit;
overflow-y:
auto;
overflow-x:
hidden;
z-index:
calc(
var(--b-z-nav-drawer-menu) + 1
);
}
/*
* Parent popup becomes the positioning
* reference for drill-down levels.
*/
.b-nav-drawer-menu {
position: absolute;
}
/*
* Important:
* nested submenu list item should not
* constrain child popup width.
*/
.b-nav-drawer-menu
.b-dropdown-submenu {
position: static;
}
}
.b-dropdown-mobile-back {
display: none;
}
@media (max-width: 991.98px) {
.b-nav-drawer
.b-dropdown-mobile-back {
display: block;
position: sticky;
top: 0;
z-index: 2;
background:
var(--b-surface);
border-bottom:
1px solid
var(--b-border);
}
.b-nav-drawer
.b-dropdown-back {
color:
var(--b-primary);
font-weight:
var(--b-font-bold);
}
}/* ==========================================================================
DESKTOP
========================================================================== */
@media (min-width: 992px) {
.b-nav-drawer,
.b-nav-drawer-backdrop {
display:
none !important;
}
}
/* ==========================================================================
21. NAVIGATION RESPONSIVE
Mobile first
========================================================================== */
/* Mobile / Tablet */
@media (max-width: 991.98px) {
.b-navbar-inner {
padding:
0
var(--b-space-3);
}
.b-navbar-nav {
display: none;
}
.b-navbar-center {
justify-content: flex-start;
}
.b-sidebar-tooltip {
display: none !important;
}
}
/* Desktop */
@media (min-width: 992px) {
.b-navbar-toggle {
display: none;
}
.b-sidebar {
transform: translateX(0);
}
body.b-has-sidebar #content-wrapper {
margin-left: var(--b-sidebar-width);
}
body.b-sidebar-hidden #content-wrapper {
margin-left: 0;
}
body.b-sidebar-hidden .b-sidebar {
transform: translateX(
calc(-1 * var(--b-sidebar-width) - 10px)
);
}
.b-sidebar-backdrop {
display: none !important;
}
.b-sidebar-tooltip {
display: block;
}
}
/* ==========================================================================
22. VERY SMALL SCREENS
========================================================================== */
@media (max-width: 575.98px) {
.b-navbar-brand {
font-size: var(--b-font-md);
}
.b-navbar-inner {
gap: var(--b-space-2);
}
.b-navbar-actions {
gap: var(--b-space-1);
}
.b-navbar-icon-btn {
width: 34px;
height: 34px;
}
.b-page {
padding: var(--b-space-3);
}
}