Migrate site controls to Nebula design system
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
e3d0925eb1
commit
817e21567b
127 changed files with 5380 additions and 2363 deletions
|
|
@ -1,4 +1,6 @@
|
|||
// Rôle : stylise les détails, formulaires et traits equipment planner.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.equipment-planner-craft-tab {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
|
@ -134,8 +136,8 @@
|
|||
}
|
||||
|
||||
.equipment-planner-field textarea {
|
||||
@include controls.field-textarea;
|
||||
min-height: 70px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.equipment-planner-panel {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// Rôle : stylise les sections, items, onglets et modes d'édition equipment planner.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.equipment-planner-type-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -50,12 +52,6 @@
|
|||
height: 16px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-boundary-drop-zone {
|
||||
min-height: 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
|
|
@ -84,17 +80,13 @@
|
|||
|
||||
.equipment-planner-line {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px;
|
||||
grid-template-columns: 34px minmax(0, 1fr) minmax(190px, auto) 34px 34px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-identity {
|
||||
|
|
@ -105,53 +97,34 @@
|
|||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@include controls.native-switch-label;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@include controls.native-switch-input;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
--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;
|
||||
height: 20px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-muted);
|
||||
transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
|
||||
@include controls.switch-thumb;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span {
|
||||
border-color: rgba(246, 196, 83, 0.48);
|
||||
background: rgba(246, 196, 83, 0.16);
|
||||
@include controls.switch-active-track;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span::before {
|
||||
transform: translateX(16px);
|
||||
background: var(--color-accent-gold);
|
||||
@include controls.switch-active-thumb;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch b {
|
||||
|
|
@ -168,63 +141,17 @@
|
|||
}
|
||||
|
||||
.equipment-planner-tabs {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.equipment-planner-tab {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
min-height: 32px;
|
||||
padding: 0 8px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-tab + .equipment-planner-tab {
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
}
|
||||
|
||||
.equipment-planner-tab.active {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.64);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: 0;
|
||||
background: rgba(21, 26, 48, 0.42);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button.active {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.equipment-planner-tab .ui-icon,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// Rôle : stylise les sélecteurs et le formulaire d'ajout equipment planner.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.equipment-planner-module {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
|
|
@ -16,25 +18,15 @@
|
|||
.equipment-planner-picker-trigger,
|
||||
.equipment-planner-picker-option,
|
||||
.equipment-planner-color-option {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger {
|
||||
grid-template-columns: 1fr 10px;
|
||||
width: 44px;
|
||||
gap: 2px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger {
|
||||
grid-template-columns: 28px 10px;
|
||||
width: 50px;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.equipment-planner-add-form .equipment-planner-picker-trigger,
|
||||
|
|
@ -43,7 +35,11 @@
|
|||
min-height: 42px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:first-child,
|
||||
.equipment-planner-add-form input {
|
||||
@include controls.field-control;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:not(.ui-icon-chevron-down),
|
||||
.equipment-planner-picker-option .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
@ -73,19 +69,14 @@
|
|||
height: 26px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:last-child {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
.equipment-planner-picker-option:hover,
|
||||
.equipment-planner-color-option:hover {
|
||||
@include controls.compact-menu-button-hover;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger.active,
|
||||
.equipment-planner-picker-option.active,
|
||||
.equipment-planner-color-option.active {
|
||||
border-color: rgba(246, 196, 83, 0.55);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.76);
|
||||
color: var(--color-text-primary);
|
||||
@include controls.icon-button-active;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-menu {
|
||||
|
|
@ -93,11 +84,7 @@
|
|||
z-index: 12;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 16px);
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(9, 12, 28, 0.98);
|
||||
box-shadow: var(--shadow-md);
|
||||
@include controls.floating-control-menu;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-grid,
|
||||
|
|
@ -108,6 +95,7 @@
|
|||
}
|
||||
|
||||
.equipment-planner-picker-option {
|
||||
@include controls.compact-menu-button(sm);
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
|
|
@ -118,6 +106,7 @@
|
|||
}
|
||||
|
||||
.equipment-planner-color-option {
|
||||
@include controls.icon-button(xs);
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// Rôle : stylise les sertissages, couleurs et ajustements responsive equipment planner.
|
||||
@use "../../design-system/controls";
|
||||
|
||||
.equipment-planner-material-form {
|
||||
grid-template-columns: minmax(160px, 1fr) 82px auto;
|
||||
}
|
||||
|
|
@ -234,14 +236,14 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-links select {
|
||||
min-height: 32px;
|
||||
.module-content .equipment-planner-socket-links select {
|
||||
@include controls.select-control(xs);
|
||||
flex: 1 1 96px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls select {
|
||||
.module-content .equipment-planner-socket-controls select {
|
||||
@include controls.select-control(xs);
|
||||
width: min(150px, 100%);
|
||||
min-height: 32px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
|
@ -316,7 +318,7 @@
|
|||
}
|
||||
|
||||
.equipment-planner-line {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 34px 30px;
|
||||
grid-template-columns: 34px minmax(0, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
}
|
||||
|
||||
.equipment-planner-summary-header span,
|
||||
.equipment-planner-type-actions > span,
|
||||
.equipment-planner-trait-category-header span {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.18);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue