cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 06:04:05 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(css): migrate use of deprecated import in cuesheet

Browse Source
This commit is contained in:
Carlos Valente
2025-12-21 12:52:09 +01:00
committed by Carlos Valente
parent ac40292813
commit b0f02e726d
6 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
+4 -21
View File
@@ -1,6 +1,10 @@
@use './cuesheetRows' as rows;
$table-font-size: 1rem; $table-font-size: 1rem;
$table-header-font-size: calc(1rem - 2px); $table-header-font-size: calc(1rem - 2px);
@include rows.cuesheet-row-columns($table-header-font-size);
.cuesheet { .cuesheet {
font-size: $table-font-size; font-size: $table-font-size;
font-weight: 400; font-weight: 400;
@@ -49,27 +53,6 @@ $table-header-font-size: calc(1rem - 2px);
} }
} }
.actionColumn {
padding-inline: 0.5rem;
padding-top: 0.5rem !important; // fighting the table styles
background-color: transparent;
display: flex;
align-items: start;
justify-content: center;
}
.indexColumn {
display: flex;
align-items: start;
justify-content: end;
min-width: 3em; // allow for 3-digit numbers
font-size: $table-header-font-size;
line-height: 2rem; // match input height
background-color: $gray-1300; // will be overridden inline
font-weight: 600;
}
.tableHeader { .tableHeader {
line-height: 2rem; line-height: 2rem;
position: sticky; position: sticky;
apps/client/src/views/cuesheet/cuesheet-table/_cuesheetRows.scss
+24
View File
@@ -0,0 +1,24 @@
@use '@/theme/themeTokens' as *;
@mixin cuesheet-row-columns($header-font-size: calc(1rem - 2px)) {
.actionColumn {
padding-inline: 0.5rem;
padding-top: 0.5rem !important; // fighting the table styles
background-color: transparent;
display: flex;
align-items: start;
justify-content: center;
}
.indexColumn {
display: flex;
align-items: start;
justify-content: end;
min-width: 3em; // allow for 3-digit numbers
font-size: $header-font-size;
line-height: 2rem; // match input height
background-color: $gray-1300; // will be overridden inline
font-weight: 600;
}
}
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import '../CuesheetTable.module.scss'; @use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.delayRow { .delayRow {
color: $ontime-delay-text; color: $ontime-delay-text;
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import "../CuesheetTable.module.scss"; @use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.eventRow { .eventRow {
background: color-mix(in srgb, transparent 92%, var(--user-bg, $gray-500) 8%); background: color-mix(in srgb, transparent 92%, var(--user-bg, $gray-500) 8%);
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import '../CuesheetTable.module.scss'; @use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.groupRow { .groupRow {
margin-top: 2em; margin-top: 2em;
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import "../CuesheetTable.module.scss"; @use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.milestoneRow { .milestoneRow {
background: color-mix(in srgb, transparent 98%, var(--user-bg, $gray-500) 2%); background: color-mix(in srgb, transparent 98%, var(--user-bg, $gray-500) 2%);