Skip to content

refactor: echo-433: scss feature rewrites ls label studioweb #9531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
robot-ci-heartex merged 8 commits into from
Mar 10, 2026
+328 −395
Merged

refactor: echo-433: scss feature rewrites ls label studioweb #9531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
785568b
refactor: ECHO-433: SCSS Feature Rewrites — LS (label-studio/web)
luarmr Mar 5, 2026
fdfce01
refactor: convert inlined SCSS variables to CSS custom properties
luarmr Mar 6, 2026
4b9ff36
refactor: consolidate duplicate scrollbar styles using shared selectors
luarmr Mar 6, 2026
af60781
refactor: add breakpoint alias comments to media queries
luarmr Mar 6, 2026
6b548fd
refactor: replace @extend %settings-title with shared selector
luarmr Mar 7, 2026
e02d009
refactor: replace @at-root/selector-append with flat CSS selectors in…
luarmr Mar 7, 2026
8675516
refactor: convert SCSS // comments to CSS /* */ comments
luarmr Mar 7, 2026
4e5f76c
Merge branch 'develop' into 'fb-echo-433/scss-feature-rewrites--ls-la…
luarmr Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,4 @@ libs/datamanager/.cache
dist
.cursor/rules/nx-rules.mdc
.github/instructions/nx.instructions.md
.scss-snapshots/
2 changes: 1 addition & 1 deletion web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
background: var(--color-neutral-surface);
box-sizing: border-box;

// box-shadow: 0 0 0 1px rgba(var(--color-neutral-shadow-raw) / 16%) inset;
/* box-shadow: 0 0 0 1px rgba(var(--color-neutral-shadow-raw) / 16%) inset; */
border: 1px solid var(--color-neutral-border);
transition: all 150ms ease;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion web/apps/labelstudio/src/components/Form/Form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
&_focused {
outline: 4px solid var(--color-primary-focus-outline);

// box-shadow: 0 0 0 6px var(--color-primary-surface-content-subtle), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--color-primary-surface-content-subtle);
/* box-shadow: 0 0 0 6px var(--color-primary-surface-content-subtle), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--color-primary-surface-content-subtle); */
border-color: var(--color-neutral-border-bolder);
}

Expand Down
20 changes: 10 additions & 10 deletions web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
$scroll-width: 5px;

.panel {
display: none;
}
Expand Down Expand Up @@ -31,30 +29,32 @@ $scroll-width: 5px;
}

.wizard .configure__container {
--scroll-width: 5px;

display: grid;
position: relative;
padding: 0;
overflow-y: scroll;
background-color: var(--color-neutral-background);

&>div {
padding: var(--spacing-base) 24px - $scroll-width var(--spacing-base) 20px;
padding: var(--spacing-base) calc(24px - var(--scroll-width)) var(--spacing-base) 20px;

&:first-child {
height: calc(100vh - var(--header-height));
}
}

&::-webkit-scrollbar {
width: $scroll-width;
width: var(--scroll-width);
}

&::-webkit-scrollbar-track {
background: none;
}
}

// Apply max-height only in Create Project wizard context (not in Labeling Settings)
/* Apply max-height only in Create Project wizard context (not in Labeling Settings) */
.create-project .wizard .configure__container>div {
--create-project-header-height: 73px;
--create-project-modal-padding: calc(var(--spacing-widest) * 2);
Expand Down Expand Up @@ -137,12 +137,12 @@ $scroll-width: 5px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-wide);

// Better space utilization on larger screens
@media (width >=1200px) {
/* Better space utilization on larger screens */
@media (width >=1200px) { /* desktop */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (width >=1600px) {
@media (width >=1600px) { /* wide desktop */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
Expand All @@ -160,7 +160,7 @@ $scroll-width: 5px;
background: var(--color-neutral-background);
box-shadow: 0 4px 8px 0 rgb(var(--color-neutral-shadow-raw) / 8%);

// Smooth transitions for hover/focus interactions
/* Smooth transitions for hover/focus interactions */
transition:
transform 0.2s ease-in-out,
border-color 0.15s ease-in-out,
Expand All @@ -178,7 +178,7 @@ $scroll-width: 5px;
border: 1px solid var(--color-primary-border);
box-shadow: 0 0 0 4px var(--color-primary-focus-outline);
background: var(--color-primary-background);
transform: translateY(-1px); // Subtle lift effect
transform: translateY(-1px); /* Subtle lift effect */
}

& h3 {
Expand Down
67 changes: 32 additions & 35 deletions web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,3 @@
// Custom scrollbar styling mixin
@mixin custom-scrollbar {
scrollbar-color: var(--color-neutral-border-bold) transparent;
scrollbar-width: thin;

&::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: var(--color-neutral-surface);
}

&::-webkit-scrollbar-track {
background: var(--color-neutral-surface);
border-radius: 3px;
}

&::-webkit-scrollbar-thumb {
background: var(--color-neutral-border-bold);
border-radius: 3px;
transition: background-color 0.2s ease;

&:hover {
background: var(--color-neutral-border-boldest);
}
}

&::-webkit-scrollbar-corner {
background: var(--color-neutral-surface);
}
}

.upload_page {
flex: 1;
min-height: 0;
Expand Down Expand Up @@ -98,9 +67,39 @@
font-weight: 500;
}

&>main {
@include custom-scrollbar;
/* Shared custom scrollbar styles */
&>main,
&__code-wrapper>div {
scrollbar-color: var(--color-neutral-border-bold) transparent;
scrollbar-width: thin;

&::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: var(--color-neutral-surface);
}

&::-webkit-scrollbar-track {
background: var(--color-neutral-surface);
border-radius: 3px;
}

&::-webkit-scrollbar-thumb {
background: var(--color-neutral-border-bold);
border-radius: 3px;
transition: background-color 0.2s ease;

&:hover {
background: var(--color-neutral-border-boldest);
}
}

&::-webkit-scrollbar-corner {
background: var(--color-neutral-surface);
}
}

&>main {
flex: 1;
overflow-y: auto;
background: linear-gradient(var(--color-neutral-background) 30%, rgb(255 255 255 / 0%)), linear-gradient(rgb(0 0 0 / 10%), var(--color-neutral-background) 100%);
Expand Down Expand Up @@ -181,8 +180,6 @@
height: calc(100% - var(--spacing-tight));

&>div {
@include custom-scrollbar;

height: 100%;
overflow-y: auto;
font-size: var(--font-size-14);
Expand Down
4 changes: 2 additions & 2 deletions web/apps/labelstudio/src/pages/Projects/Projects.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@
box-sizing: border-box;
}

@media (width >= 1200px) {
@media (width >= 1200px) { /* desktop */
&__list {
grid-template-columns: repeat(3, 1fr);
}
}

@media (width >= 1360px) {
@media (width >= 1360px) { /* wide desktop */
&__list {
grid-template-columns: repeat(4, 1fr);
}
Expand Down
4 changes: 2 additions & 2 deletions web/libs/datamanager/src/components/Common/TaskSourceViewer/CodeView.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
border-radius: var(--corner-radius-small);
overflow: hidden;

// Fill parent container for consistent modal height
/* Fill parent container for consistent modal height */
height: 100%;
box-shadow: inset 0 2px 8px rgba(var(--color-neutral-shadow-raw) / 12%);
border: 1px solid var(--color-neutral-border);
Expand Down Expand Up @@ -39,5 +39,5 @@
line-height: 20px;
white-space: pre;
color: var(--color-neutral-content-subtle);
padding-right: 40px; // space for copy button
padding-right: 40px; /* space for copy button */
}
4 changes: 2 additions & 2 deletions web/libs/datamanager/src/components/Common/TaskSourceViewer/TaskSourceViewer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
gap: var(--spacing-base);
width: 100%;

// Fixed height prevents modal from resizing when switching Code/Interactive views
// that leads to accidental clicks outside and unexpecteddd modal closing
/* Fixed height prevents modal from resizing when switching Code/Interactive views */
/* that leads to accidental clicks outside and unexpecteddd modal closing */
height: 600px;
}

Expand Down
2 changes: 1 addition & 1 deletion web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.orderButton {
// Hide the caret icon when Select is used in ButtonGroup
/* Hide the caret icon when Select is used in ButtonGroup */
& button[data-testid^="select-trigger"] > svg {
display: none;
}
Expand Down
2 changes: 1 addition & 1 deletion web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
position: relative;
width: 100%;

// Apply the same grid layout as the parent filters container
/* Apply the same grid layout as the parent filters container */
display: grid;
grid-template-columns: 80px minmax(120px, max-content) minmax(100px, max-content) 1fr 24px;
grid-gap: var(--spacing-tightest);
Expand Down
12 changes: 6 additions & 6 deletions web/libs/datamanager/src/components/Filters/Filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,29 +82,29 @@
align-items: center;
}

// Note: Dropdown padding is now controlled via triggerProps in FilterDropdown component
/* Note: Dropdown padding is now controlled via triggerProps in FilterDropdown component */

:global(.filter-dropdown-content) {
min-width: 270px !important;
width: max-content;
max-width: min(500px, 90vw);

// Decorative items (headers) are disabled in cmdk. Override the default
// disabled styles so they look like clean section labels, not grayed-out options.
/* Decorative items (headers) are disabled in cmdk. Override the default */
/* disabled styles so they look like clean section labels, not grayed-out options. */
[data-disabled] {
pointer-events: auto !important;
cursor: default !important;
opacity: 1;
}

// Suppress the hover highlight on the inner div of disabled/decorative items.
/* Suppress the hover highlight on the inner div of disabled/decorative items. */
[data-disabled="true"] > div[data-disabled="true"] {
background: transparent !important;
cursor: default !important;
}

// Section headers (Recent, All fields): reduce left padding so they sit further left
// than list items, making section boundaries easier to spot.
/* Section headers (Recent, All fields): reduce left padding so they sit further left */
/* than list items, making section boundaries easier to spot. */
[data-value="__recent_header__"] > div,
[data-value="__all_fields_header__"] > div {
padding-left: 8px !important;
Expand Down
17 changes: 15 additions & 2 deletions web/libs/datamanager/src/components/Label/Label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
@import "../../styles/waiting";
@keyframes waiting {
0% {
background-position: 0 0;
}

100% {
background-position: 37px 0;
}
}

.label-view {
height: 100%;
Expand All @@ -17,8 +25,13 @@
border-radius: 4px;
transform: translate(-50%, -50%);
box-shadow: 0 5px 20px var(--black_20);
background-image: repeating-linear-gradient(-63.43deg, rgb(255 255 255 / 20%) 1px, var(--color-primary-surface) 2px, var(--color-primary-surface) 6px, rgb(255 255 255 / 20%) 7px, rgb(255 255 255 / 20%) 12px);
background-color: #fff;
background-size: 37px 100%;

@include waiting(var(--color-primary-surface));
&_animated {
animation: waiting 1s linear infinite;
}
}

&__header {
Expand Down
21 changes: 14 additions & 7 deletions web/libs/datamanager/src/components/MainView/GridView/GridView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,20 @@
}

&_columnCount {
@for $i from 1 to 15 {
&_#{ $i } {
& .grid-view__cell:nth-child(#{$i}n) {
padding-right: 0;
}
}
}
&_1 { & .grid-view__cell:nth-child(1n) { padding-right: 0; } }
&_2 { & .grid-view__cell:nth-child(2n) { padding-right: 0; } }
&_3 { & .grid-view__cell:nth-child(3n) { padding-right: 0; } }
&_4 { & .grid-view__cell:nth-child(4n) { padding-right: 0; } }
&_5 { & .grid-view__cell:nth-child(5n) { padding-right: 0; } }
&_6 { & .grid-view__cell:nth-child(6n) { padding-right: 0; } }
&_7 { & .grid-view__cell:nth-child(7n) { padding-right: 0; } }
&_8 { & .grid-view__cell:nth-child(8n) { padding-right: 0; } }
&_9 { & .grid-view__cell:nth-child(9n) { padding-right: 0; } }
&_10 { & .grid-view__cell:nth-child(10n) { padding-right: 0; } }
&_11 { & .grid-view__cell:nth-child(11n) { padding-right: 0; } }
&_12 { & .grid-view__cell:nth-child(12n) { padding-right: 0; } }
&_13 { & .grid-view__cell:nth-child(13n) { padding-right: 0; } }
&_14 { & .grid-view__cell:nth-child(14n) { padding-right: 0; } }
}

&__cell {
Expand Down
22 changes: 0 additions & 22 deletions web/libs/datamanager/src/styles/waiting.scss
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions web/libs/editor/src/assets/styles/_functions.scss
View file
Open in desktop

This file was deleted.

Loading
Loading