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

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
@@ -1,6 +1,10 @@
@use './cuesheetRows' as rows;
$table-font-size: 1rem;
$table-header-font-size: calc(1rem - 2px);
@include rows.cuesheet-row-columns($table-header-font-size);
.cuesheet {
font-size: $table-font-size;
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 {
line-height: 2rem;
position: sticky;
@@ -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;
}
}
@@ -1,4 +1,5 @@
@import '../CuesheetTable.module.scss';
@use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.delayRow {
color: $ontime-delay-text;
@@ -1,4 +1,5 @@
@import "../CuesheetTable.module.scss";
@use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.eventRow {
background: color-mix(in srgb, transparent 92%, var(--user-bg, $gray-500) 8%);
@@ -1,4 +1,5 @@
@import '../CuesheetTable.module.scss';
@use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.groupRow {
margin-top: 2em;
@@ -1,4 +1,5 @@
@import "../CuesheetTable.module.scss";
@use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;
.milestoneRow {
background: color-mix(in srgb, transparent 98%, var(--user-bg, $gray-500) 2%);