Skip to content

Commit

Permalink
refactor themes
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@AlexanderSchmidtCE
AlexanderSchmidtCE committed Dec 18, 2024
1 parent cc7bf85 commit 74993c5
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 305 deletions.
8 changes: 4 additions & 4 deletions packages/components/src/components/table-stateless/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,7 @@ export class KolTableStateless implements TableStatelessAPI {
}

return (
<tr class="kol-table__body-cell-row" key={`row-${key}`}>
<tr class="kol-table__body-row" key={`row-${key}`}>
{this.renderSelectionCell(row, rowIndex)}
{row.map((cell, colIndex) => this.renderTableCell(cell, rowIndex, colIndex, isVertical))}
</tr>
Expand Down Expand Up @@ -567,7 +567,7 @@ export class KolTableStateless implements TableStatelessAPI {
*/
private renderHeadingSelectionCell(): JSX.Element {
const selection = this.state._selection;
if (!selection || (!selection.multiple && selection.multiple !== undefined)) return <th key={`thead-0`}></th>;
if (!selection || (!selection.multiple && selection.multiple !== undefined)) return <th class="kol-table__header-cell" key={`thead-0`}></th>;
const keyPropertyName = selection.keyPropertyName ?? 'id';
const selectedKeyLength = selection.selectedKeys?.length;
const dataLength = this.state._data.length;
Expand All @@ -582,7 +582,7 @@ export class KolTableStateless implements TableStatelessAPI {
}
const label = translate(translationKey);
return (
<th key={`thead-0-selection`} class="kol-table__selection-cell">
<th key={`thead-0-selection`} class="kol-table__header-cell">
<div
class={clsx({
'kol-table__selection-indeterminate': indeterminate,
Expand Down Expand Up @@ -766,7 +766,7 @@ export class KolTableStateless implements TableStatelessAPI {
<thead class="kol-table__head">
{[
this.state._headerCells.horizontal.map((cols, rowIndex) => (
<tr key={`thead-${rowIndex}`}>
<tr class="kol-table__head-row" key={`thead-${rowIndex}`}>
{this.state._selection && this.renderHeadingSelectionCell()}
{rowIndex === 0 && this.renderHeaderTdCell()}
{Array.isArray(cols) &&
Expand Down
15 changes: 7 additions & 8 deletions packages/themes/default/src/mixins/kol-table-stateless-wc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
display: table-row;
height: rem(24);
}

&__foot-spacer-line,
&__head-spacer-line {
border-width: 0;
Expand All @@ -89,7 +90,7 @@
border-top-width: calc(var(--border-width) * 2);
}

&__body-cell-row:nth-child(even) {
&__body-row:nth-child(even) {
background-color: var(--color-mute);
}

Expand Down Expand Up @@ -135,19 +136,17 @@
}
}
}
}

&__selection-icon {
color: var(--color-light);
}

&__selection-indeterminate {
input {
@at-root #{$root}__selection-indeterminate & {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
}

&__selection-icon {
color: var(--color-light);
}

.kol-icon:hover ~ &__selection-input[type='checkbox'],
&__selection-input[type='checkbox']:hover {
border-color: var(--color-primary);
Expand Down
214 changes: 107 additions & 107 deletions packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,146 +2,146 @@

@mixin kol-table-stateless-wc {
@layer kol-theme-component {
:host,
.kol-table-stateless-wc {
.kol-table {
$root: &;

display: block;
font-family: var(--font-family);
}

:host > div,
.kol-table-stateless-wc > div {
overflow-x: auto;
overflow-y: hidden;
}

caption {
padding: 0.5em;
}

th {
font-weight: normal;
color: var(--color-midnight);
}

table thead tr:first-child th,
table thead tr:first-child td {
border-width: 0;
border-top-width: rem(2);
border-style: solid;
border-color: var(--color-ice);
}

.table {
padding: 0.5em;
}

.table:has(.focus-element:focus) {
outline-color: var(--color-blue);
outline-offset: rem(2);
outline-style: solid;
outline-width: rem(2);
}
&__caption {
padding: 0.5em;
}

table {
width: 100%;
border-spacing: 0;
}
&__header-cell {
font-weight: normal;
color: var(--color-midnight);
}

table,
table thead tr:last-child th,
table thead tr:last-child td {
border-width: 0;
border-bottom-width: rem(2);
border-style: solid;
border-color: var(--color-ice);
}
&__selection-cell,
&__header-cell {
@at-root #{$root}__head-row:first-child & {
border-width: 0;
border-top-width: rem(2);
border-style: solid;
border-color: var(--color-ice);
}

th {
background-color: var(--color-white);
}
@at-root #{$root}__head-row:last-child & {
border-width: 0;
border-bottom-width: rem(2);
border-style: solid;
border-color: var(--color-ice);
}
}

th[aria-sort='ascending'] .kol-button,
th[aria-sort='descending'] .kol-button {
font-weight: 700;
}
&__focus-element {
&:focus {
outline-color: var(--color-blue);
outline-offset: rem(2);
outline-style: solid;
outline-width: rem(2);
}
}

th div {
display: flex;
gap: 0.5em;
grid-template-columns: 1fr auto;
align-items: center;
}
&__container {
width: 100%;
border-spacing: 0;
border-width: 0;
border-bottom-width: rem(2);
border-style: solid;
border-color: var(--color-ice);
}

tbody tr:nth-child(odd) {
background-color: var(--color-grey-10);
}
&__header-cell {
background-color: var(--color-white);

th,
td {
padding: 0.5em;
}
&[aria-sort='ascending'],
&[aria-sort='descending'] {
font-weight: 700;
.kol-button {
font-weight: 700;
}
}
}

th[aria-sort='ascending'],
th[aria-sort='descending'] {
font-weight: 700;
}
&__body-row {
&:nth-child(odd) {
background-color: var(--color-grey-10);
}
}

.input {
input:focus {
border-color: var(--color-blue);
outline-color: var(--color-blue);
outline-style: solid;
outline-offset: rem(2);
outline-width: rem(2);
&__selection-cell,
&__header-cell,
&__body-cell {
padding: 0.5em;
}

// CHECKBOX
input[type='checkbox'] {
border-color: var(--color-grey-75);
&__selection-checked,
&__selection-indeterminate {
display: flex;
gap: 0.5em;
grid-template-columns: 1fr auto;
align-items: center;
}

&:checked {
background-color: var(--color-blue);
&__selection-input {
&:focus {
border-color: var(--color-blue);
outline-color: var(--color-blue);
outline-style: solid;
outline-offset: rem(2);
outline-width: rem(2);
}
}

.icon {
color: var(--color-white);
}
// CHECKBOX
&[type='checkbox'] {
border-color: var(--color-grey-75);

&.indeterminate {
input {
background-color: var(--color-white);
&:checked {
background-color: var(--color-blue);
border-color: var(--color-blue);
}
}

.icon {
color: var(--color-blue);
}
}
// RADIO
&[type='radio'] {
display: block;
border-color: var(--color-grey-75);

kol-icon:hover ~ input[type='checkbox'],
input[type='checkbox']:hover {
border-color: var(--color-blue);
}
&:hover {
border-color: var(--color-blue);
}

// RADIO
input[type='radio'] {
display: block;
border-color: var(--color-grey-75);
&:checked {
border-color: var(--color-blue);
border-width: rem(7);

&:hover {
border-color: var(--color-blue);
&:before {
background-color: var(--color-white);
}
}
}

&:checked {
border-color: var(--color-blue);
border-width: rem(7);
@at-root #{$root}__selection-indeterminate & {
background-color: var(--color-white);
}
}

&:before {
background-color: var(--color-white);
}
&__selection-icon {
color: var(--color-white);
@at-root #{$root}__selection-indeterminate & {
color: var(--color-blue);
}
}

.kol-icon:hover ~ &__selection-input[type='checkbox'],
&__selection-input[type='checkbox']:hover {
border-color: var(--color-blue);
}
}
}
}
Loading

0 comments on commit 74993c5

Please sign in to comment.