1121 lines
25 KiB
SCSS
1121 lines
25 KiB
SCSS
// Rôle : expose l'API publique NDS par classes de famille et attributs data-*.
|
|
@use "controls";
|
|
|
|
.nds-input,
|
|
.nds-time,
|
|
.nds-select,
|
|
.nds-textarea {
|
|
@include controls.field-control;
|
|
}
|
|
|
|
.nds-input::placeholder,
|
|
.nds-textarea::placeholder {
|
|
@include controls.field-placeholder;
|
|
}
|
|
|
|
.nds-input[data-size="sm"],
|
|
.nds-textarea[data-size="sm"] {
|
|
@include controls.field-control(sm);
|
|
}
|
|
|
|
.nds-input[data-size="xs"],
|
|
.nds-textarea[data-size="xs"] {
|
|
@include controls.field-control(xs);
|
|
}
|
|
|
|
.nds-time {
|
|
@include controls.time-control;
|
|
}
|
|
|
|
.nds-time[data-size="sm"] {
|
|
@include controls.time-control(sm);
|
|
}
|
|
|
|
.nds-time[data-size="xs"] {
|
|
@include controls.time-control(xs);
|
|
}
|
|
|
|
.nds-select {
|
|
@include controls.select-control;
|
|
}
|
|
|
|
.nds-select[data-size="sm"] {
|
|
@include controls.select-control(sm);
|
|
}
|
|
|
|
.nds-select[data-size="xs"] {
|
|
@include controls.select-control(xs);
|
|
}
|
|
|
|
.nds-select:hover,
|
|
.nds-select:focus {
|
|
@include controls.select-control-hover;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nds-select:focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
|
|
}
|
|
|
|
.nds-select option {
|
|
@include controls.select-option;
|
|
}
|
|
|
|
.nds-textarea {
|
|
@include controls.field-textarea;
|
|
@include controls.scrollbar-resizer;
|
|
}
|
|
|
|
.nds-textarea[data-size="sm"] {
|
|
@include controls.field-textarea(sm);
|
|
}
|
|
|
|
.nds-textarea[data-size="xs"] {
|
|
@include controls.field-textarea(xs);
|
|
}
|
|
|
|
.nds-textarea[data-variant="ghost"] {
|
|
@include controls.field-textarea-ghost;
|
|
}
|
|
|
|
.nds-input:hover,
|
|
.nds-time:hover,
|
|
.nds-textarea:hover {
|
|
@include controls.field-hover;
|
|
}
|
|
|
|
.nds-textarea[data-variant="ghost"]:hover {
|
|
@include controls.inline-field-hover;
|
|
}
|
|
|
|
.nds-input:focus,
|
|
.nds-time:focus,
|
|
.nds-select:focus,
|
|
.nds-select-trigger:focus,
|
|
.nds-textarea:focus {
|
|
@include controls.field-focus;
|
|
}
|
|
|
|
.nds-inline-input {
|
|
@include controls.inline-field;
|
|
}
|
|
|
|
.nds-inline-input:hover,
|
|
.nds-inline-input:focus {
|
|
@include controls.inline-field-hover;
|
|
}
|
|
|
|
.nds-button {
|
|
@include controls.text-button;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.nds-button:hover:not(:disabled, [data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) {
|
|
@include controls.text-button-hover;
|
|
}
|
|
|
|
.nds-button[data-size="sm"] {
|
|
@include controls.text-button(sm);
|
|
}
|
|
|
|
.nds-button[data-size="xs"] {
|
|
@include controls.text-button(xs);
|
|
}
|
|
|
|
.nds-button[data-variant="primary"] {
|
|
@include controls.text-button-primary;
|
|
}
|
|
|
|
.nds-button[data-variant="primary"]:hover {
|
|
@include controls.text-button-primary-hover;
|
|
}
|
|
|
|
.nds-button[data-variant="secondary"] {
|
|
@include controls.text-button-secondary;
|
|
}
|
|
|
|
.nds-button[data-variant="ghost"] {
|
|
@include controls.text-button-ghost;
|
|
}
|
|
|
|
.nds-button[data-variant="ghost"]:hover {
|
|
@include controls.text-button-ghost-hover;
|
|
}
|
|
|
|
.nds-button[data-variant="dashed"] {
|
|
@include controls.text-button-dashed;
|
|
}
|
|
|
|
.nds-button[data-variant="dashed"]:hover {
|
|
@include controls.text-button-dashed-hover;
|
|
}
|
|
|
|
.nds-button[data-variant="danger"] {
|
|
@include controls.text-button-danger;
|
|
}
|
|
|
|
.nds-button[data-variant="danger"]:hover {
|
|
@include controls.text-button-danger-hover;
|
|
}
|
|
|
|
.nds-button[data-edge="left"] {
|
|
@include controls.button-edge(left);
|
|
}
|
|
|
|
.nds-button[data-edge="middle"] {
|
|
@include controls.button-edge(middle);
|
|
}
|
|
|
|
.nds-button[data-edge="top"] {
|
|
@include controls.button-edge(top);
|
|
}
|
|
|
|
.nds-button[data-edge="center"] {
|
|
@include controls.button-edge(center);
|
|
}
|
|
|
|
.nds-button[data-edge="right"] {
|
|
@include controls.button-edge(right);
|
|
}
|
|
|
|
.nds-button[data-edge="bottom"] {
|
|
@include controls.button-edge(bottom);
|
|
}
|
|
|
|
.nds-button[data-edge="top-left"] {
|
|
@include controls.button-edge(top-left);
|
|
}
|
|
|
|
.nds-button[data-edge="top-right"] {
|
|
@include controls.button-edge(top-right);
|
|
}
|
|
|
|
.nds-button[data-edge="bottom-right"] {
|
|
@include controls.button-edge(bottom-right);
|
|
}
|
|
|
|
.nds-button[data-edge="bottom-left"] {
|
|
@include controls.button-edge(bottom-left);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="left"] {
|
|
@include controls.button-joined-border(left);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="middle"] {
|
|
@include controls.button-joined-border(middle);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="top"] {
|
|
@include controls.button-joined-border(top);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="center"] {
|
|
@include controls.button-joined-border(center);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="right"] {
|
|
@include controls.button-joined-border(right);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="bottom"] {
|
|
@include controls.button-joined-border(bottom);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="top-left"] {
|
|
@include controls.button-joined-border(top-left);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="top-right"] {
|
|
@include controls.button-joined-border(top-right);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="bottom-right"] {
|
|
@include controls.button-joined-border(bottom-right);
|
|
}
|
|
|
|
.nds-button[data-border="joined"][data-edge="bottom-left"] {
|
|
@include controls.button-joined-border(bottom-left);
|
|
}
|
|
|
|
.nds-button[data-border="none"] {
|
|
@include controls.button-borderless;
|
|
}
|
|
|
|
.nds-button.is-active,
|
|
.nds-button.active,
|
|
.nds-button.active,
|
|
.nds-button.is-active,
|
|
.nds-button[aria-pressed="true"] {
|
|
@include controls.text-button-active;
|
|
}
|
|
|
|
.nds-icon-button {
|
|
@include controls.icon-button;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nds-icon-button .ui-icon {
|
|
@include controls.icon-button-icon;
|
|
}
|
|
|
|
.nds-icon-button[class*="drag-handle"] {
|
|
cursor: grab;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.nds-icon-button[class*="drag-handle"]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.nds-icon-button[class*="drag-handle"]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nds-icon-button:hover:not([data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) {
|
|
@include controls.icon-button-hover;
|
|
}
|
|
|
|
.nds-icon-button:hover:not([data-variant="primary"], [data-variant="danger"], [data-variant="ghost"], .active, .is-active, [aria-pressed="true"]) .ui-icon {
|
|
@include controls.icon-button-hover-icon;
|
|
}
|
|
|
|
.nds-icon-button[data-size="sm"] {
|
|
@include controls.icon-button(sm);
|
|
}
|
|
|
|
.nds-icon-button[data-size="sm"] .ui-icon {
|
|
@include controls.icon-button-icon(sm);
|
|
}
|
|
|
|
.nds-icon-button[data-size="xs"] {
|
|
@include controls.icon-button(xs);
|
|
}
|
|
|
|
.nds-icon-button[data-size="xs"] .ui-icon {
|
|
@include controls.icon-button-icon(xs);
|
|
}
|
|
|
|
.nds-icon-button[data-size="xxs"] {
|
|
@include controls.icon-button(xxs);
|
|
}
|
|
|
|
.nds-icon-button[data-size="xxs"] .ui-icon {
|
|
@include controls.icon-button-icon(xxs);
|
|
}
|
|
|
|
.nds-icon-button[data-size="tiny"] {
|
|
@include controls.icon-button(tiny);
|
|
}
|
|
|
|
.nds-icon-button[data-size="tiny"] .ui-icon {
|
|
@include controls.icon-button-icon(tiny);
|
|
}
|
|
|
|
.nds-icon-button[data-size="micro"] {
|
|
@include controls.icon-button(micro);
|
|
}
|
|
|
|
.nds-icon-button[data-size="micro"] .ui-icon {
|
|
@include controls.icon-button-icon(micro);
|
|
}
|
|
|
|
.nds-icon-button[data-variant="primary"] {
|
|
@include controls.icon-button-primary;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="primary"]:hover {
|
|
@include controls.icon-button-primary-hover;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="primary"]:hover .ui-icon {
|
|
@include controls.icon-button-primary-hover-icon;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="ghost"] {
|
|
@include controls.icon-button-ghost;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="panel-toggle"] {
|
|
@include controls.icon-button-panel-toggle;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="panel-toggle"]:hover,
|
|
.nds-icon-button[data-variant="panel-toggle"].active,
|
|
.nds-icon-button[data-variant="panel-toggle"].is-active,
|
|
.nds-icon-button[data-variant="panel-toggle"][aria-pressed="true"] {
|
|
@include controls.icon-button-panel-toggle-hover;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="danger"] {
|
|
@include controls.icon-button-danger;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="danger"]:hover {
|
|
@include controls.icon-button-danger-hover;
|
|
}
|
|
|
|
.nds-icon-button[data-variant="danger"]:hover .ui-icon {
|
|
@include controls.icon-button-danger-hover-icon;
|
|
}
|
|
|
|
.nds-icon-button[class*="drag-handle"]:hover {
|
|
cursor: grab;
|
|
}
|
|
|
|
.nds-icon-button[class*="drag-handle"]:active,
|
|
.nds-icon-button[class*="drag-handle"]:hover:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.nds-icon-button[data-edge="left"] {
|
|
@include controls.button-edge(left);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="middle"] {
|
|
@include controls.button-edge(middle);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="top"] {
|
|
@include controls.button-edge(top);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="center"] {
|
|
@include controls.button-edge(center);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="right"] {
|
|
@include controls.button-edge(right);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="bottom"] {
|
|
@include controls.button-edge(bottom);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="top-left"] {
|
|
@include controls.button-edge(top-left);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="top-right"] {
|
|
@include controls.button-edge(top-right);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="bottom-right"] {
|
|
@include controls.button-edge(bottom-right);
|
|
}
|
|
|
|
.nds-icon-button[data-edge="bottom-left"] {
|
|
@include controls.button-edge(bottom-left);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="left"] {
|
|
@include controls.button-joined-border(left);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="middle"] {
|
|
@include controls.button-joined-border(middle);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="top"] {
|
|
@include controls.button-joined-border(top);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="center"] {
|
|
@include controls.button-joined-border(center);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="right"] {
|
|
@include controls.button-joined-border(right);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="bottom"] {
|
|
@include controls.button-joined-border(bottom);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="top-left"] {
|
|
@include controls.button-joined-border(top-left);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="top-right"] {
|
|
@include controls.button-joined-border(top-right);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="bottom-right"] {
|
|
@include controls.button-joined-border(bottom-right);
|
|
}
|
|
|
|
.nds-icon-button[data-border="joined"][data-edge="bottom-left"] {
|
|
@include controls.button-joined-border(bottom-left);
|
|
}
|
|
|
|
.nds-icon-button[data-border="none"] {
|
|
@include controls.button-borderless;
|
|
}
|
|
|
|
.nds-icon-button.active,
|
|
.nds-icon-button.is-active,
|
|
.nds-icon-button[aria-pressed="true"] {
|
|
@include controls.icon-button-active;
|
|
}
|
|
|
|
.nds-quantity-stepper {
|
|
@include controls.quantity-stepper;
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="sm"] {
|
|
@include controls.quantity-stepper(sm);
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="xs"] {
|
|
@include controls.quantity-stepper(xs);
|
|
}
|
|
|
|
.nds-quantity-stepper button {
|
|
@include controls.quantity-stepper-button;
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="sm"] button {
|
|
@include controls.quantity-stepper-button(sm);
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="xs"] button {
|
|
@include controls.quantity-stepper-button(xs);
|
|
}
|
|
|
|
.nds-quantity-stepper button:hover {
|
|
@include controls.quantity-stepper-button-hover;
|
|
}
|
|
|
|
.nds-quantity-stepper .ui-icon {
|
|
@include controls.quantity-stepper-button-icon;
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="sm"] .ui-icon {
|
|
@include controls.quantity-stepper-button-icon(sm);
|
|
}
|
|
|
|
.nds-quantity-stepper[data-size="xs"] .ui-icon {
|
|
@include controls.quantity-stepper-button-icon(xs);
|
|
}
|
|
|
|
.nds-quantity-stepper-value {
|
|
@include controls.quantity-stepper-value;
|
|
}
|
|
|
|
.nds-quantity-stepper-input {
|
|
@include controls.quantity-stepper-input;
|
|
@include controls.number-spinner-reset;
|
|
}
|
|
|
|
.nds-quantity-stepper-input:hover,
|
|
.nds-quantity-stepper-input:focus {
|
|
@include controls.quantity-stepper-input-hover;
|
|
}
|
|
|
|
.nds-switch {
|
|
@include controls.switch-control;
|
|
}
|
|
|
|
.nds-switch[data-size="lg"] {
|
|
@include controls.switch-control(lg);
|
|
}
|
|
|
|
.nds-switch[data-size="sm"] {
|
|
@include controls.switch-control(sm);
|
|
}
|
|
|
|
.nds-switch[data-size="xs"] {
|
|
@include controls.switch-control(xs);
|
|
}
|
|
|
|
.nds-switch:has(> span:not(.ui-icon)) {
|
|
grid-template-columns: var(--nds-switch-icon-size) minmax(0, 1fr) var(--nds-switch-track-width);
|
|
min-width: max-content;
|
|
}
|
|
|
|
.nds-switch:has(> span:not(.ui-icon)) > span:not(.ui-icon) {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nds-switch .ui-icon {
|
|
@include controls.switch-icon;
|
|
}
|
|
|
|
.nds-switch i {
|
|
@include controls.switch-track;
|
|
}
|
|
|
|
.nds-switch i::before {
|
|
@include controls.switch-thumb;
|
|
}
|
|
|
|
.nds-switch:hover {
|
|
@include controls.switch-hover;
|
|
}
|
|
|
|
.nds-switch.active,
|
|
.nds-switch.is-active,
|
|
.nds-switch[aria-pressed="true"] {
|
|
@include controls.switch-active;
|
|
}
|
|
|
|
.nds-switch.active i,
|
|
.nds-switch.is-active i,
|
|
.nds-switch[aria-pressed="true"] i {
|
|
@include controls.switch-active-track;
|
|
}
|
|
|
|
.nds-switch.active i::before,
|
|
.nds-switch.is-active i::before,
|
|
.nds-switch[aria-pressed="true"] i::before {
|
|
@include controls.switch-active-thumb;
|
|
}
|
|
|
|
.nds-native-switch {
|
|
@include controls.native-switch-label;
|
|
}
|
|
|
|
.nds-native-switch input {
|
|
@include controls.native-switch-input;
|
|
}
|
|
|
|
.nds-native-switch > span:first-of-type {
|
|
--nds-switch-track-width: 36px;
|
|
--nds-switch-track-height: 20px;
|
|
--nds-switch-thumb-size: 12px;
|
|
--nds-switch-thumb-left: 3px;
|
|
--nds-switch-active-left: 19px;
|
|
@include controls.switch-track;
|
|
min-width: 36px;
|
|
}
|
|
|
|
.nds-native-switch > span:first-of-type::before {
|
|
@include controls.switch-thumb;
|
|
}
|
|
|
|
.nds-native-switch input:checked + span {
|
|
@include controls.switch-active-track;
|
|
}
|
|
|
|
.nds-native-switch input:checked + span::before {
|
|
@include controls.switch-active-thumb;
|
|
}
|
|
|
|
.nds-native-switch:has(input:disabled) {
|
|
@include controls.control-disabled;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nds-native-switch:has(input:disabled) > span:first-of-type,
|
|
.nds-native-switch:has(input:disabled) b {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.nds-radio-button-group {
|
|
@include controls.radio-button-group;
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="sm"] {
|
|
@include controls.radio-button-group(sm);
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="xs"] {
|
|
@include controls.radio-button-group(xs);
|
|
}
|
|
|
|
.nds-radio-button-group > button,
|
|
.nds-radio-button-group > span {
|
|
@include controls.radio-button-group-option;
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="sm"] > button,
|
|
.nds-radio-button-group[data-size="sm"] > span {
|
|
@include controls.radio-button-group-option(sm);
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="xs"] > button,
|
|
.nds-radio-button-group[data-size="xs"] > span {
|
|
@include controls.radio-button-group-option(xs);
|
|
}
|
|
|
|
.nds-radio-button-group > button:hover,
|
|
.nds-radio-button-group > span:hover {
|
|
@include controls.radio-button-group-option-hover;
|
|
}
|
|
|
|
.nds-radio-button-group > button.active,
|
|
.nds-radio-button-group > button.is-active,
|
|
.nds-radio-button-group > span.active,
|
|
.nds-radio-button-group > span.is-active {
|
|
@include controls.radio-button-group-option-active;
|
|
}
|
|
|
|
.nds-radio-button-group .ui-icon {
|
|
@include controls.radio-button-group-option-icon;
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="sm"] .ui-icon {
|
|
@include controls.radio-button-group-option-icon(sm);
|
|
}
|
|
|
|
.nds-radio-button-group[data-size="xs"] .ui-icon {
|
|
@include controls.radio-button-group-option-icon(xs);
|
|
}
|
|
|
|
.nds-radio-button-group[aria-disabled="true"] {
|
|
@include controls.control-disabled;
|
|
}
|
|
|
|
.nds-compound-toggle-field {
|
|
@include controls.compound-toggle-field;
|
|
}
|
|
|
|
.nds-compound-toggle-field button {
|
|
@include controls.compound-toggle-field-option;
|
|
}
|
|
|
|
.nds-compound-toggle-field button:hover:not(:disabled) {
|
|
@include controls.radio-button-group-option-hover;
|
|
}
|
|
|
|
.nds-compound-toggle-field button.is-active,
|
|
.nds-compound-toggle-field button.active,
|
|
.nds-compound-toggle-field button[aria-pressed="true"] {
|
|
@include controls.radio-button-group-option-active;
|
|
}
|
|
|
|
.nds-compound-toggle-field-input {
|
|
@include controls.compound-toggle-field-input;
|
|
}
|
|
|
|
.nds-compound-toggle-field-input:hover,
|
|
.nds-compound-toggle-field-input:focus {
|
|
@include controls.inline-field-hover;
|
|
}
|
|
|
|
.nds-checkbox {
|
|
@include controls.checkbox-control;
|
|
}
|
|
|
|
.nds-checkbox[data-size="xs"] {
|
|
@include controls.checkbox-control(xs);
|
|
}
|
|
|
|
.nds-checkbox[data-size="sm"] {
|
|
@include controls.checkbox-control(sm);
|
|
}
|
|
|
|
.nds-checkbox::before {
|
|
@include controls.checkbox-check;
|
|
}
|
|
|
|
.nds-checkbox[data-size="xs"]::before {
|
|
@include controls.checkbox-check(xs);
|
|
}
|
|
|
|
.nds-checkbox[data-size="sm"]::before {
|
|
@include controls.checkbox-check(sm);
|
|
}
|
|
|
|
.nds-checkbox:hover:not(:disabled) {
|
|
@include controls.checkbox-hover;
|
|
}
|
|
|
|
.nds-checkbox:checked {
|
|
@include controls.checkbox-checked;
|
|
}
|
|
|
|
.nds-checkbox:checked::before {
|
|
@include controls.checkbox-checked-check;
|
|
}
|
|
|
|
.nds-checkbox:disabled {
|
|
@include controls.checkbox-disabled;
|
|
}
|
|
|
|
.nds-checkbox:disabled::before {
|
|
opacity: 0.54;
|
|
}
|
|
|
|
.nds-swatch {
|
|
@include controls.color-swatch;
|
|
}
|
|
|
|
.nds-swatch[data-variant="rainbow"] {
|
|
@include controls.color-swatch-rainbow;
|
|
}
|
|
|
|
.nds-swatch.active,
|
|
.nds-swatch.is-active,
|
|
.nds-swatch[aria-pressed="true"] {
|
|
@include controls.color-swatch-active;
|
|
}
|
|
|
|
.nds-select-trigger,
|
|
.nds-date-trigger {
|
|
@include controls.select-trigger;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"],
|
|
.nds-date-trigger[data-size="sm"] {
|
|
@include controls.select-trigger(sm);
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"],
|
|
.nds-date-trigger[data-size="xs"] {
|
|
@include controls.select-trigger(xs);
|
|
}
|
|
|
|
.nds-select-trigger[data-variant="icon-picker"] {
|
|
grid-template-columns: minmax(18px, 1fr);
|
|
justify-items: center;
|
|
min-width: 52px;
|
|
padding-inline: 10px 30px;
|
|
}
|
|
|
|
.nds-select-trigger[data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
justify-items: start;
|
|
padding-inline: 10px 34px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"][data-variant="icon-picker"] {
|
|
grid-template-columns: minmax(18px, 1fr);
|
|
min-width: 50px;
|
|
padding-inline: 10px 30px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"][data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
padding-inline: 10px 34px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"][data-variant="icon-picker"] {
|
|
grid-template-columns: minmax(16px, 1fr);
|
|
min-width: 46px;
|
|
padding-inline: 9px 28px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"][data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) {
|
|
grid-template-columns: 16px minmax(0, 1fr);
|
|
padding-inline: 8px 30px;
|
|
}
|
|
|
|
.nds-select-trigger:hover:not(:disabled),
|
|
.nds-select-trigger.is-active,
|
|
.nds-select-trigger.active,
|
|
.nds-select-trigger[aria-pressed="true"],
|
|
.nds-date-trigger:hover:not(:disabled),
|
|
.nds-date-trigger.is-active,
|
|
.nds-date-trigger.active,
|
|
.nds-date-trigger[aria-pressed="true"] {
|
|
@include controls.select-trigger-hover;
|
|
}
|
|
|
|
.nds-select-trigger:focus,
|
|
.nds-date-trigger:focus {
|
|
@include controls.select-trigger-hover;
|
|
@include controls.field-focus;
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"]:hover:not(:disabled),
|
|
.nds-select-trigger[data-size="sm"].is-active,
|
|
.nds-select-trigger[data-size="sm"].active,
|
|
.nds-select-trigger[data-size="sm"][aria-pressed="true"],
|
|
.nds-date-trigger[data-size="sm"]:hover:not(:disabled),
|
|
.nds-date-trigger[data-size="sm"].is-active,
|
|
.nds-date-trigger[data-size="sm"].active,
|
|
.nds-date-trigger[data-size="sm"][aria-pressed="true"] {
|
|
@include controls.select-trigger-hover(sm);
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"]:focus,
|
|
.nds-date-trigger[data-size="sm"]:focus {
|
|
@include controls.select-trigger-hover(sm);
|
|
@include controls.field-focus;
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"]:hover:not(:disabled),
|
|
.nds-select-trigger[data-size="xs"].is-active,
|
|
.nds-select-trigger[data-size="xs"].active,
|
|
.nds-select-trigger[data-size="xs"][aria-pressed="true"],
|
|
.nds-date-trigger[data-size="xs"]:hover:not(:disabled),
|
|
.nds-date-trigger[data-size="xs"].is-active,
|
|
.nds-date-trigger[data-size="xs"].active,
|
|
.nds-date-trigger[data-size="xs"][aria-pressed="true"] {
|
|
@include controls.select-trigger-hover(xs);
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"]:focus,
|
|
.nds-date-trigger[data-size="xs"]:focus {
|
|
@include controls.select-trigger-hover(xs);
|
|
@include controls.field-focus;
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.nds-select-trigger .ui-icon,
|
|
.nds-date-trigger .ui-icon {
|
|
@include controls.select-trigger-icon;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="sm"] .ui-icon,
|
|
.nds-date-trigger[data-size="sm"] .ui-icon {
|
|
@include controls.select-trigger-icon(sm);
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"] .ui-icon,
|
|
.nds-date-trigger[data-size="xs"] .ui-icon {
|
|
@include controls.select-trigger-icon(xs);
|
|
}
|
|
|
|
.nds-select-trigger .ui-icon-chevron-down,
|
|
.nds-date-trigger .ui-icon-chevron-down {
|
|
@include controls.date-picker-trigger-chevron;
|
|
}
|
|
|
|
.nds-select-trigger[data-variant="icon-picker"] > .ui-icon:not(.ui-icon-chevron-down) {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.nds-select-trigger[data-variant="icon-picker"]:has(> span:not([aria-hidden="true"])) > .ui-icon:not(.ui-icon-chevron-down) {
|
|
justify-self: center;
|
|
}
|
|
|
|
.nds-select-trigger[data-size="xs"][data-variant="icon-picker"] > .ui-icon:not(.ui-icon-chevron-down) {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.nds-select-trigger span,
|
|
.nds-date-trigger span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nds-list-row {
|
|
@include controls.list-row-button;
|
|
}
|
|
|
|
.nds-list-row:hover,
|
|
.nds-list-row.is-active,
|
|
.nds-list-row.active {
|
|
@include controls.list-row-button-hover;
|
|
}
|
|
|
|
.nds-list-row.is-active,
|
|
.nds-list-row.active {
|
|
@include controls.list-row-button-active;
|
|
}
|
|
|
|
.nds-list-row button {
|
|
@include controls.list-row-button-content;
|
|
}
|
|
|
|
.nds-large-icon-picker-trigger {
|
|
@include controls.large-icon-picker-trigger;
|
|
}
|
|
|
|
.nds-large-icon-picker-trigger:hover {
|
|
@include controls.large-icon-picker-trigger-hover;
|
|
}
|
|
|
|
.nds-large-icon-picker-trigger.active,
|
|
.nds-large-icon-picker-trigger.is-active,
|
|
.nds-large-icon-picker-trigger[aria-pressed="true"] {
|
|
@include controls.large-icon-picker-trigger-hover;
|
|
border-color: rgba(246, 196, 83, 0.62);
|
|
box-shadow:
|
|
0 0 0 1px rgba(246, 196, 83, 0.22),
|
|
0 0 22px rgba(139, 92, 246, 0.24);
|
|
}
|
|
|
|
.nds-large-icon-picker-trigger img,
|
|
.nds-large-icon-picker-trigger .ui-icon {
|
|
width: 72px;
|
|
height: 72px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.nds-event-surface {
|
|
--nds-event-color: #8b5cf6;
|
|
box-sizing: border-box;
|
|
width: min(210px, 100%);
|
|
min-height: 44px;
|
|
overflow: hidden;
|
|
border: 1px solid color-mix(in srgb, var(--nds-event-color) 24%, rgba(255, 255, 255, 0.22));
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in srgb, var(--nds-event-color) 82%, transparent);
|
|
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
.nds-event-surface[data-size="md"] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.nds-event-surface[data-size="sm"] {
|
|
min-height: 22px;
|
|
}
|
|
|
|
.nds-event-surface[data-size="xs"] {
|
|
min-height: 10px;
|
|
border-width: 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.nds-event-surface[data-variant="dark"] {
|
|
border-color: color-mix(in srgb, var(--nds-event-color) 42%, rgba(11, 14, 27, 0.28));
|
|
background: color-mix(in srgb, var(--nds-event-color) 88%, transparent);
|
|
}
|
|
|
|
.nds-event-surface button {
|
|
@include controls.event-surface-button;
|
|
@include controls.event-surface-contrast-default;
|
|
}
|
|
|
|
.nds-event-surface button:hover,
|
|
.nds-event-surface button:focus-visible {
|
|
@include controls.event-surface-button-hover;
|
|
}
|
|
|
|
.nds-event-surface[data-size="sm"] button {
|
|
display: block;
|
|
padding: 4px 7px;
|
|
text-align: center;
|
|
}
|
|
|
|
.nds-event-surface[data-size="xs"] button {
|
|
position: relative;
|
|
display: block;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.nds-event-surface[data-size="xs"] button:hover,
|
|
.nds-event-surface[data-size="xs"] button:focus-visible {
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.nds-event-surface[data-size="sm"] button > span {
|
|
display: none;
|
|
}
|
|
|
|
.nds-event-surface[data-size="xs"] button > span {
|
|
display: none;
|
|
}
|
|
|
|
.nds-event-surface strong,
|
|
.nds-event-surface span {
|
|
display: block;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nds-event-surface[data-variant="dark"] button {
|
|
@include controls.event-surface-contrast-dark;
|
|
}
|
|
|
|
.nds-event-surface strong {
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.nds-event-surface[data-size="sm"] strong {
|
|
max-width: 100%;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.nds-event-surface[data-size="xs"] strong {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 4px;
|
|
left: 4px;
|
|
max-width: 100%;
|
|
height: 10px;
|
|
font-size: 8px;
|
|
line-height: 10px;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.nds-event-surface span {
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
opacity: 0.86;
|
|
}
|
|
|
|
.nds-scrollbox,
|
|
.nds-textarea {
|
|
width: 100%;
|
|
@include controls.scrollbar-control;
|
|
}
|
|
|
|
.nds-scrollbox {
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
border: 1px solid rgba(165, 180, 252, 0.12);
|
|
border-radius: var(--radius-md);
|
|
background: rgba(5, 7, 17, 0.34);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.nds-scrollbox[data-variant="ghost"] {
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.nds-scrollbox[data-axis="horizontal"] {
|
|
max-height: none;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nds-input:focus-visible,
|
|
.nds-time:focus-visible,
|
|
.nds-select:focus-visible,
|
|
.nds-textarea:focus-visible,
|
|
.nds-inline-input:focus-visible,
|
|
.nds-button:focus-visible,
|
|
.nds-icon-button:focus-visible,
|
|
.nds-switch:focus-visible,
|
|
.nds-radio-button-group button:focus-visible,
|
|
.nds-checkbox:focus-visible,
|
|
.nds-select-trigger:focus-visible,
|
|
.nds-date-trigger:focus-visible,
|
|
.nds-large-icon-picker-trigger:focus-visible {
|
|
@include controls.field-focus;
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.nds-button:disabled,
|
|
.nds-icon-button:disabled,
|
|
.nds-quantity-stepper button:disabled,
|
|
.nds-select:disabled,
|
|
.nds-select-trigger:disabled,
|
|
.nds-input:disabled,
|
|
.nds-time:disabled,
|
|
.nds-textarea:disabled,
|
|
.nds-date-trigger:disabled,
|
|
.nds-large-icon-picker-trigger:disabled {
|
|
@include controls.control-disabled;
|
|
}
|