218 lines
4.3 KiB
SCSS
218 lines
4.3 KiB
SCSS
// Rôle : expose les primitives NDS publiques pour surfaces, feedback et overlays.
|
|
@use "../controls";
|
|
@use "../surfaces";
|
|
|
|
.nds-panel {
|
|
@include controls.panel-surface;
|
|
}
|
|
|
|
.nds-panel[data-variant="interactive"] {
|
|
@include controls.panel-surface(true);
|
|
}
|
|
|
|
.nds-card {
|
|
@include controls.card-pattern;
|
|
}
|
|
|
|
@supports (corner-shape: scoop) {
|
|
.nds-card {
|
|
corner-shape: scoop;
|
|
}
|
|
}
|
|
|
|
.nds-card[data-variant="interactive"]:hover,
|
|
.nds-card[data-variant="interactive"]:focus-within {
|
|
@include controls.card-pattern-hover;
|
|
}
|
|
|
|
.nds-card-cover {
|
|
min-height: 124px;
|
|
@include surfaces.card-cover-divider;
|
|
}
|
|
|
|
.nds-card-body {
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.nds-card-actions {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.nds-tool-panel {
|
|
@include controls.tool-panel-surface;
|
|
}
|
|
|
|
.nds-tool-panel[data-variant="interactive"]:hover,
|
|
.nds-tool-panel[data-variant="tool"]:hover {
|
|
box-shadow:
|
|
var(--shadow-sm),
|
|
0 0 14px rgba(139, 92, 246, 0.14),
|
|
0 0 24px rgba(196, 181, 253, 0.08);
|
|
}
|
|
|
|
.nds-toolbar {
|
|
@include controls.toolbar-pattern;
|
|
}
|
|
|
|
.nds-section-heading {
|
|
@include controls.section-heading-pattern;
|
|
}
|
|
|
|
.nds-page-hero {
|
|
@include controls.page-hero-pattern(true);
|
|
}
|
|
|
|
.nds-badge {
|
|
@include controls.badge-pattern;
|
|
}
|
|
|
|
.nds-badge[data-variant="neutral"] {
|
|
@include controls.badge-pattern(neutral);
|
|
}
|
|
|
|
.nds-badge[data-variant="gold"] {
|
|
@include controls.badge-pattern(gold);
|
|
}
|
|
|
|
.nds-badge[data-variant="success"] {
|
|
@include controls.badge-pattern(success);
|
|
}
|
|
|
|
.nds-badge[data-variant="warning"] {
|
|
@include controls.badge-pattern(warning);
|
|
}
|
|
|
|
.nds-badge[data-variant="danger"] {
|
|
@include controls.badge-pattern(danger);
|
|
}
|
|
|
|
.nds-chip {
|
|
@include controls.chip-pattern;
|
|
}
|
|
|
|
.nds-chip:hover,
|
|
.nds-chip.active,
|
|
.nds-chip.is-active,
|
|
.nds-chip[aria-pressed="true"],
|
|
.nds-chip:has(input:checked) {
|
|
@include controls.chip-active;
|
|
}
|
|
|
|
.nds-chip[data-size="sm"] {
|
|
min-height: 30px;
|
|
padding: 4px 8px;
|
|
gap: 4px;
|
|
font-size: var(--font-size-xs);
|
|
> img, > .ui-icon { width: 16px; height: 16px; }
|
|
}
|
|
|
|
.nds-empty-state {
|
|
@include controls.empty-state-pattern;
|
|
}
|
|
|
|
.nds-inline-notice {
|
|
@include controls.inline-notice-pattern;
|
|
}
|
|
|
|
.nds-inline-notice[data-variant="success"] {
|
|
@include controls.inline-notice-pattern(success);
|
|
}
|
|
|
|
.nds-inline-notice[data-variant="warning"] {
|
|
@include controls.inline-notice-pattern(warning);
|
|
}
|
|
|
|
.nds-inline-notice[data-variant="danger"] {
|
|
@include controls.inline-notice-pattern(danger);
|
|
}
|
|
|
|
.nds-progress {
|
|
@include controls.progress-pattern;
|
|
}
|
|
|
|
.nds-progress[data-size="sm"] {
|
|
@include controls.progress-pattern(sm);
|
|
}
|
|
|
|
.nds-progress > span,
|
|
.nds-progress-bar {
|
|
@include controls.progress-bar-pattern;
|
|
}
|
|
|
|
.nds-progress[data-variant="success"] > span,
|
|
.nds-progress[data-variant="success"] .nds-progress-bar {
|
|
@include controls.progress-bar-pattern(success);
|
|
}
|
|
|
|
.nds-progress[data-variant="warning"] > span,
|
|
.nds-progress[data-variant="warning"] .nds-progress-bar {
|
|
@include controls.progress-bar-pattern(warning);
|
|
}
|
|
|
|
.nds-progress[data-variant="danger"] > span,
|
|
.nds-progress[data-variant="danger"] .nds-progress-bar {
|
|
@include controls.progress-bar-pattern(danger);
|
|
}
|
|
|
|
.nds-filter-panel {
|
|
@include controls.filter-panel-pattern;
|
|
}
|
|
|
|
.nds-reorder-indicator,
|
|
.nds-reorder-indicator[data-axis="vertical"][data-placement="before"] {
|
|
@include controls.reorder-indicator-pattern(vertical, before);
|
|
}
|
|
|
|
.nds-reorder-indicator[data-axis="vertical"][data-placement="after"] {
|
|
@include controls.reorder-indicator-pattern(vertical, after);
|
|
}
|
|
|
|
.nds-reorder-indicator[data-axis="horizontal"][data-placement="before"] {
|
|
@include controls.reorder-indicator-pattern(horizontal, before);
|
|
}
|
|
|
|
.nds-reorder-indicator[data-axis="horizontal"][data-placement="after"] {
|
|
@include controls.reorder-indicator-pattern(horizontal, after);
|
|
}
|
|
|
|
.nds-modal {
|
|
@include controls.modal-panel-pattern;
|
|
}
|
|
|
|
.nds-modal-backdrop {
|
|
@include controls.overlay-backdrop-pattern;
|
|
}
|
|
|
|
.nds-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nds-drawer-panel {
|
|
@include controls.drawer-panel-pattern;
|
|
}
|
|
|
|
.nds-drawer-resize-handle {
|
|
@include controls.drawer-resize-handle-pattern;
|
|
}
|
|
|
|
.nds-popover {
|
|
@include controls.popover-pattern;
|
|
}
|
|
|
|
.nds-toast-stack {
|
|
@include controls.toast-stack-pattern;
|
|
}
|
|
|
|
.nds-toast-stack[data-position="right"] {
|
|
right: var(--space-5);
|
|
}
|
|
|
|
.nds-toast-stack[data-position="left"] {
|
|
left: var(--space-5);
|
|
}
|
|
|
|
.nds-toast {
|
|
@include controls.toast-pattern;
|
|
}
|