/* ============================================================================
* bitting.css
*
* Visual design tokens + utility classes for the UnlockedData.Bitting package.
*
* Consumers link this once from their host page:
*
*
* Override the CSS variables in your own :root to re-skin without forking:
* :root {
* --bitting-md: clamp(12px, 1.1vw, 16px);
* --bitting-positive: #2ecc71;
* --bitting-negative: #e74c3c;
* (and so on for any token declared in :root below)
* }
*
* Extracted from src/Unlock8s.StaticContent/wwwroot/css/unlocked.css
* (the BITTING - LATCH sections).
* ============================================================================ */
:root {
/* -- Size scale --------------------------------------------------------
* Phi-stepped scale anchored on --bitting-md. Everything else (sizes, icon
* sizes, line heights) derives from it via calc(). Override md to scale
* the whole design system.
*/
--bitting-phi: calc(1.6180339887 * 0.8);
--bitting-md: clamp(10px, 1vw, 14px);
--bitting-half-md: calc(var(--bitting-md) / 2);
--bitting-qtr-md: calc(var(--bitting-md) / 4);
--bitting-xs: calc(var(--bitting-md) / (var(--bitting-phi) * var(--bitting-phi)));
--bitting-sm: calc(var(--bitting-md) / var(--bitting-phi));
--bitting-lg: calc(var(--bitting-md) * var(--bitting-phi));
--bitting-xl: calc(var(--bitting-md) * (var(--bitting-phi) * var(--bitting-phi)));
--bitting-icon-multiplier: 2;
--bitting-icon-xs: calc(var(--bitting-xs) * var(--bitting-icon-multiplier));
--bitting-icon-sm: calc(var(--bitting-sm) * var(--bitting-icon-multiplier));
--bitting-icon-md: calc(var(--bitting-md) * var(--bitting-icon-multiplier));
--bitting-icon-lg: calc(var(--bitting-lg) * var(--bitting-icon-multiplier));
--bitting-icon-xl: calc(var(--bitting-xl) * var(--bitting-icon-multiplier));
/* -- Cartesian chart spacing ----------------------------------------- */
--bitting-chart-entry-breadth: calc(var(--bitting-md) * 3);
/* -- Neutral background tint ----------------------------------------- */
--bitting-muted-gray: rgba(233, 236, 239, 0.6);
/* -- Semantic colour tokens (consumed by BittingSemanticColor) -------
* BittingSemanticColor.{Positive,Negative,Neutral,Muted} resolve to these
* via the BittingColor implicit operator. Defaults mirror the Bootstrap 5
* palette so the Unlock8s rendering doesn't shift when consuming the
* package. Override per-consumer in your own :root.
*/
--bitting-positive: var(--bs-success, #198754);
--bitting-negative: var(--bs-danger, #dc3545);
--bitting-neutral: var(--bs-secondary, #6c757d);
--bitting-muted: rgba(0, 0, 0, 0.5);
}
/* ============================================================================
* BITTING - LATCH: BASE FRAMEWORK
* ============================================================================ */
.bitting-font-xs { font-size: var(--bitting-xs); }
.bitting-font-sm { font-size: var(--bitting-sm); }
.bitting-font-md { font-size: var(--bitting-md); }
.bitting-font-lg { font-size: var(--bitting-lg); }
.bitting-font-xl { font-size: var(--bitting-xl); }
.bitting-solid-shadow {
box-shadow: 0 0 0 calc(var(--bitting-md) * 0.15) rgba(233, 236, 239, 0.8);
}
.bitting-solid-drop-shadow {
box-shadow:
0 0 0 calc(var(--bitting-md) * 0.15) rgba(233, 236, 239, 0.8),
0 calc(var(--bitting-md) * 0.2) 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray),
0 calc(var(--bitting-md) * 0.4) 0 calc(var(--bitting-md) * 0.1) rgba(233, 236, 239, 0.4);
}
.bitting-solid-inset-shadow {
box-shadow:
inset 0 0 0 calc(var(--bitting-md) * 0.15) rgba(233, 236, 239, 0.8),
inset 0 calc(var(--bitting-md) * 0.2) 0 calc(var(--bitting-md) * 0.15) rgba(233, 236, 239, 0.6),
inset 0 calc(var(--bitting-md) * 0.4) 0 calc(var(--bitting-md) * 0.10) rgba(233, 236, 239, 0.4);
}
.bitting-hover {
transition: background-color 0.2s ease;
}
.bitting-hover:hover {
cursor: pointer;
background-color: var(--bitting-muted-gray) !important;
}
.bitting-selected {
background-color: var(--bitting-muted-gray) !important;
}
.bitting-flat {
background-color: var(--bitting-muted-gray) !important;
}
/* -- Hover-opacity utilities --------------------------------------------
* Backing classes for the BittingHoverOpacityStyle enum, applied by every
* interactive Bitting component (PillButton, ArrowBookends, SelectableIcon,
* DropDownMenu, etc.). At rest the element renders at partial opacity;
* hovering lifts it to fully opaque.
* Subtle → default for pill buttons (gentle dim at rest).
* Normal → stronger affordance for icons + bookends.
*
* These classes were previously declared in
* Unlock8s.StaticContent/wwwroot/css/unlocked.css and did not ship to
* consumers of just this package, leaving the hover effect dead. Moved
* here so the Bitting package is self-contained.
*/
.opacity-hover {
opacity: 0.75;
transition: opacity 0.3s;
}
.opacity-hover:hover {
opacity: 1;
}
.subtle-opacity-hover {
opacity: 0.9;
transition: opacity 0.3s;
}
.subtle-opacity-hover:hover {
opacity: 1;
}
/* -- flex-centered: micro-utility used throughout Bitting markup --------- */
.flex-centered {
display: flex;
align-items: center;
justify-content: center;
}
/* -- bitting-spinner: dependency-free loading spinner --------------------
* Replaces the Font Awesome pattern so
* the package has no icon-font requirement on the consumer. Sizes from the
* current text font-size; inherits currentColor.
*/
.bitting-spinner {
display: inline-block;
width: 1em;
height: 1em;
border: 0.15em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: bitting-spinner-rotate 0.75s linear infinite;
}
@keyframes bitting-spinner-rotate {
to { transform: rotate(360deg); }
}
/* ============================================================================
* BITTING - LATCH: PRINT UTILITIES
*
* Bitting components reference these classes (BittingTile's screenshot button,
* BittingHorizontalNavigation, BittingVerticalNavigation, BittingRenderVeil,
* BittingQuestionTooltip, BittingSlide). Before this block they were defined
* only in Unlock8s.StaticContent/wwwroot/css/unlocked.css and so didn't ship
* to consumers of just this package, leaving the print behavior silently dead.
*
* .no-print / .print-none — hide chrome that doesn't belong in a printout
* (capture buttons, nav, loading overlays).
* .print-dont-break — keep a tile or row intact across a page break.
* ============================================================================ */
@media print {
.no-print,
.print-none {
display: none !important;
}
.print-dont-break {
break-inside: avoid;
page-break-inside: avoid !important;
}
}