shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Split remaining large Sass files by responsibility
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-25 09:45:59 +02:00
parent a0d7e80a1a
commit fcabbe8029
37 changed files with 3248 additions and 3103 deletions
Download patch file Download diff file Expand all files Collapse all files

228
website/src/styles/toolboxes/goal-tree/_node-content.scss Normal file
View file

@ -0,0 +1,228 @@
// Rôle : gère le contenu, les checklists et la progression des noeuds.
.goal-tree-node-main {
grid-area: main;
display: grid;
align-content: start;
justify-items: stretch;
gap: 5px;
min-width: 0;
min-height: 46px;
padding: 5px;
border: 0;
background: transparent;
color: var(--color-text-primary);
cursor: pointer;
text-align: center;
box-shadow: none;
}
.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main {
justify-items: center;
min-height: 58px;
}
.goal-tree-node-main:hover,
.goal-tree-node-main:focus {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.goal-tree-node-heading {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 6px;
align-items: center;
min-width: 0;
}
.goal-tree-node-icon {
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 1px solid color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 45%, transparent);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--goal-tree-node-color, var(--color-accent-gold)) 14%, transparent);
color: var(--goal-tree-node-color, var(--color-accent-gold));
}
.goal-tree-node-icon .ui-icon {
width: 15px;
height: 15px;
}
.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon {
width: 42px;
height: 42px;
}
.goal-tree-node.is-step > .goal-tree-node-card > .goal-tree-node-main > .goal-tree-node-icon .ui-icon {
width: 27px;
height: 27px;
}
.goal-tree-node-title {
overflow: hidden;
min-width: 0;
color: var(--color-text-primary);
font-size: 0.78rem;
font-weight: 900;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-tree-node-content-preview {
display: grid;
width: 100%;
min-height: 0;
gap: 3px;
justify-items: stretch;
color: var(--color-text-primary);
}
.goal-tree-node-content-preview:empty {
display: none;
}
.goal-tree-node-content-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px;
align-items: center;
min-width: 0;
font-size: 0.72rem;
font-weight: 800;
text-align: left;
}
.goal-tree-node.is-checklist .goal-tree-node-content-row {
grid-template-columns: auto minmax(0, 1fr);
}
.goal-tree-node.is-text .goal-tree-node-content-row {
grid-template-columns: auto minmax(0, 1fr);
}
.goal-tree-node.is-text .goal-tree-node-content-row::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
}
.goal-tree-node-content-row strong {
color: var(--color-accent-gold);
font-size: 0.72rem;
}
.goal-tree-node-content-label {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-tree-node-content-add-button {
display: grid;
width: 100%;
min-height: 20px;
padding: 0;
place-items: center;
border-style: dashed;
border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 56%, transparent);
border-radius: var(--radius-sm);
background: rgba(7, 10, 24, 0.2);
color: var(--color-text-secondary);
}
.goal-tree-node-content-add-button:hover,
.goal-tree-node-content-add-button:focus-visible {
border-color: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 78%, transparent);
background: color-mix(in srgb, var(--goal-tree-card-color, var(--color-accent-gold)) 14%, transparent);
color: var(--color-text-primary);
}
.goal-tree-node-content-add-button .ui-icon {
width: 12px;
height: 12px;
}
.goal-tree-node.is-checklist .goal-tree-node-content-label {
padding-left: 2px;
}
.goal-tree-node-check {
display: grid;
width: 10px;
height: 10px;
margin: 0;
accent-color: var(--color-accent-cyan);
}
.goal-tree-step-check {
justify-self: center;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--color-accent-gold);
}
.goal-tree-step-qty-stepper {
justify-self: center;
grid-template-columns: 18px minmax(34px, auto) 18px;
gap: 2px;
font-size: 0.68rem;
}
.goal-tree-step-qty-stepper button {
display: grid;
width: 18px;
min-width: 18px;
height: 18px;
min-height: 18px;
padding: 0;
place-items: center;
}
.goal-tree-step-qty-stepper .ui-icon {
width: 10px;
height: 10px;
}
.goal-tree-node-content-row .goal-tree-content-qty-stepper {
justify-self: start;
grid-template-columns: 16px minmax(30px, auto) 16px;
gap: 2px;
font-size: 0.64rem;
}
.goal-tree-node-content-row .goal-tree-content-qty-stepper button {
min-width: 16px;
min-height: 16px;
padding: 0;
}
.goal-tree-node-content-row .goal-tree-content-qty-stepper .ui-icon {
width: 9px;
height: 9px;
}
.goal-tree-progress-track {
grid-column: 1 / -1;
justify-self: stretch;
width: 100%;
height: 5px;
overflow: hidden;
border-radius: var(--radius-pill);
background: rgba(150, 165, 205, 0.13);
}
.goal-tree-progress-track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-cyan));
}