fix(theme): More CSS variables for themes
Add CSS variables for header cell background and toast message border for more flexible themeing
This commit is contained in:
parent
1b5292a7f0
commit
78666f8ab2
18
src/dark.css
18
src/dark.css
@ -1,17 +1,11 @@
|
||||
.datatable {
|
||||
--border-color: #424242;
|
||||
--light-bg: #2e3538;
|
||||
--text-color: #dfe2e5;
|
||||
--text-light: #dfe2e5;
|
||||
--border-color: #424242;
|
||||
--light-bg: #2e3538;
|
||||
--text-color: #dfe2e5;
|
||||
--text-light: #dfe2e5;
|
||||
--cell-bg: #1c1f20;
|
||||
--focus-border-width: 1px;
|
||||
--selection-highlight-color: var(--light-bg);
|
||||
--toast-message-border: 1px solid var(--border-color);
|
||||
--header-cell-bg: #262c2e;
|
||||
}
|
||||
|
||||
.dt-header .dt-cell:not(.dt-cell--highlight) {
|
||||
background-color: #262c2e;
|
||||
}
|
||||
|
||||
.dt-toast__message {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
@ -17,6 +17,8 @@
|
||||
--cell-bg: #fff;
|
||||
--focus-border-width: 2px;
|
||||
--selection-highlight-color: var(--light-yellow);
|
||||
--toast-message-border: none;
|
||||
--header-cell-bg: var(--cell-bg);
|
||||
}
|
||||
|
||||
.datatable {
|
||||
@ -132,6 +134,10 @@
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
&--header {
|
||||
background-color: var(--header-cell-bg);
|
||||
}
|
||||
|
||||
&--header &__content {
|
||||
padding-right: var(--spacer-3);
|
||||
font-weight: bold;
|
||||
@ -217,6 +223,7 @@
|
||||
color: var(--text-light);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacer-2) var(--spacer-3);
|
||||
border: var(--toast-message-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user