feat(DimensionFilter): dark/light theme via CSS variables and dimension-filter class
This commit is contained in:
parent
1034b53341
commit
c726b95714
@ -978,3 +978,16 @@ hr {
|
|||||||
background-color: var(--sage-brand, #6366f1) !important;
|
background-color: var(--sage-brand, #6366f1) !important;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
[data-theme="dark"] .dimension-btn-active {
|
||||||
|
background-color: var(--sage-brand, #818cf8) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DimensionFilter base */
|
||||||
|
.dimension-filter {
|
||||||
|
background: var(--sage-bg, #fff);
|
||||||
|
color: var(--sage-text, #333);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .dimension-filter {
|
||||||
|
background: var(--sage-bg-dark, #1e1e2e);
|
||||||
|
color: var(--sage-text-dark, #e0e0e0);
|
||||||
|
}
|
||||||
|
|||||||
@ -19,6 +19,7 @@ bricks.DimensionFilter = class extends bricks.VBox {
|
|||||||
super(opts);
|
super(opts);
|
||||||
this.dom_element.style.display = 'flex';
|
this.dom_element.style.display = 'flex';
|
||||||
this.dom_element.style.flexDirection = 'column';
|
this.dom_element.style.flexDirection = 'column';
|
||||||
|
this.set_css('dimension-filter');
|
||||||
this.selected_h_id = 'all';
|
this.selected_h_id = 'all';
|
||||||
this.selected_v_id = 'all';
|
this.selected_v_id = 'all';
|
||||||
this.search_keyword = '';
|
this.search_keyword = '';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user