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

Polish Nebula design system controls before release
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-29 16:07:16 +02:00
parent 817e21567b
commit 07de342fc2
31 changed files with 79 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

23
website/src/styles/design-system/_attributes.scss
View file

@ -262,6 +262,20 @@
@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;
}
@ -349,6 +363,15 @@
@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);
}

26
website/src/styles/toolboxes/_checklist.scss
View file

@ -16,7 +16,7 @@
}
.checklist-complete-mode-group {
@include controls.radio-button-group(xs);
@include controls.radio-button-group;
width: fit-content;
align-items: center;
}
@ -93,30 +93,30 @@
}
.timer-alert-mode-switch {
@include controls.radio-button-group(xs);
@include controls.radio-button-group;
width: fit-content;
align-items: center;
opacity: 0.78;
}
.checklist-complete-mode-button,
.timer-alert-mode-button {
@include controls.radio-button-group-option(xs);
.checklist-complete-mode-button {
@include controls.radio-button-group-option;
display: inline-grid;
width: 36px;
min-width: 36px;
place-items: center;
font-size: var(--font-size-xs);
}
.checklist-complete-mode-button .ui-icon,
.timer-alert-mode-button .ui-icon {
@include controls.radio-button-group-option-icon(xs);
.checklist-complete-mode-button .ui-icon {
@include controls.radio-button-group-option-icon;
}
.timer-alert-mode-button {
width: 24px;
min-width: 24px;
@include controls.radio-button-group-option;
display: inline-grid;
place-items: center;
}
.timer-alert-mode-button .ui-icon {
@include controls.radio-button-group-option-icon;
}
.checklist-section-items {

6
website/src/styles/toolboxes/_module-shell.scss
View file

@ -49,7 +49,8 @@
padding: 0;
}
.module-drag-handle {
.module-drag-handle,
.module-drag-handle.nds-icon-button {
flex: 0 0 40px;
cursor: grab;
opacity: 0.62;
@ -62,7 +63,8 @@
opacity: 1;
}
.module-drag-handle:active {
.module-drag-handle:active,
.module-drag-handle.nds-icon-button:active {
cursor: grabbing;
}

4
website/src/styles/toolboxes/_timer.scss
View file

@ -253,7 +253,7 @@
}
.timer-entry.has-drag-handle {
grid-template-columns: 30px minmax(0, 1fr) 34px;
grid-template-columns: 30px minmax(0, 1fr) 30px;
}
.tool-split-entry-list li.is-editing > .timer-entry.has-single-action {
@ -261,7 +261,7 @@
}
.tool-split-entry-list li.is-editing > .timer-entry.has-drag-handle {
grid-template-columns: 30px auto minmax(0, 1fr) 34px;
grid-template-columns: 30px auto minmax(0, 1fr) 30px;
}
.timer-drag-handle {

4
website/src/styles/toolboxes/layout/_preferences.scss
View file

@ -76,7 +76,3 @@
.toolbox-preferences-row + .cards {
margin-top: 0;
}
.toast-position-switch {
grid-template-columns: repeat(2, 30px);
}

2
website/src/styles/toolboxes/shared-controls/_entries.scss
View file

@ -29,7 +29,7 @@
position: relative;
}
.tool-split-entry-list .tool-split-entry-list > li::before {
.tool-split-entry-list .tool-split-entry-list > li::after {
content: "";
position: absolute;
top: 18px;

2
website/src/styles/toolboxes/task-planner/_items.scss
View file

@ -5,7 +5,7 @@
position: relative;
display: grid;
gap: 10px;
padding: 10px;
padding: 6px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.36);