Skip to content

Commit 9c94f60

Browse files
committed
fix(query-builder): apply theme to styling sample
1 parent be217d1 commit 9c94f60

File tree

1 file changed

+61
-73
lines changed

1 file changed

+61
-73
lines changed

src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss

Lines changed: 61 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -4,87 +4,75 @@ $yellow: #ffcd0f;
44
$black: #292826;
55
$muted-yellow: #ffe482;
66

7-
$custom-query-builder: query-builder-theme(
8-
$background: $black,
9-
$tree-background: $black,
10-
$header-background: $black,
11-
$header-foreground: $yellow
12-
);
13-
14-
$custom-button: button-theme(
15-
$schema: $dark-material-schema,
16-
$background: $black,
17-
$foreground: $yellow,
18-
$hover-foreground: $black,
19-
$hover-background: $yellow,
20-
$focus-foreground: $yellow,
21-
$focus-background: $black,
22-
$border-color: $yellow
23-
);
24-
25-
$custom-contained-button: button-theme(
26-
$schema: $dark-material-schema,
27-
$background: $yellow,
28-
$foreground: $black,
29-
$active-background: $muted-yellow,
30-
$active-foreground: $black,
31-
$hover-background: $muted-yellow,
32-
$hover-foreground: $black,
33-
$border-color: $yellow,
34-
$active-border-color: $muted-yellow,
35-
$hover-border-color: $muted-yellow,
36-
$focus-border-color: $yellow
37-
);
38-
39-
$custom-button-group: button-group-theme(
40-
$schema: $dark-material-schema,
41-
$item-background: $black,
42-
$item-text-color: $yellow,
43-
$item-border-color: $yellow,
44-
$item-selected-background: $yellow,
45-
$item-hover-background: $yellow,
46-
$item-selected-hover-background: $yellow
47-
);
48-
49-
$custom-input-group: input-group-theme(
50-
$schema: $dark-material-schema,
51-
$idle-text-color: $yellow,
52-
$focused-text-color: $yellow,
53-
$filled-text-color: $yellow,
54-
$idle-bottom-line-color: $muted-yellow,
55-
$focused-secondary-color: $yellow
56-
);
57-
58-
$custom-chip: chip-theme(
59-
$schema: $dark-material-schema,
60-
$background: $yellow,
61-
$text-color: $black
62-
);
63-
64-
$custom-drop-down: drop-down-theme(
65-
$schema: $dark-material-schema,
66-
$background-color: $black,
67-
$item-text-color: $yellow,
68-
$hover-item-background: $yellow,
69-
$hover-item-text-color: $black,
70-
$focused-item-background: $yellow,
71-
$focused-item-text-color: $black,
72-
$selected-item-background: $yellow,
73-
$selected-item-text-color: $black,
74-
$selected-focus-item-background: $yellow,
75-
$selected-focus-item-text-color: $black,
76-
$selected-hover-item-background: $yellow,
77-
$selected-hover-item-text-color: $black
78-
);
7+
$custom-query-builder: query-builder-theme($background: $black,
8+
$tree-background: $black,
9+
$header-background: $black,
10+
$header-foreground: $yellow);
11+
12+
$custom-button: button-theme($schema: $dark-material-schema,
13+
$background: $black,
14+
$foreground: $yellow,
15+
$hover-foreground: $black,
16+
$hover-background: $yellow,
17+
$focus-foreground: $yellow,
18+
$focus-background: $black,
19+
$border-color: $yellow);
20+
21+
$custom-contained-button: button-theme($schema: $dark-material-schema,
22+
$background: $yellow,
23+
$foreground: $black,
24+
$active-background: $muted-yellow,
25+
$active-foreground: $black,
26+
$hover-background: $muted-yellow,
27+
$hover-foreground: $black,
28+
$border-color: $yellow,
29+
$active-border-color: $muted-yellow,
30+
$hover-border-color: $muted-yellow,
31+
$focus-border-color: $yellow);
32+
33+
$custom-button-group: button-group-theme($schema: $dark-material-schema,
34+
$item-background: $black,
35+
$item-text-color: $yellow,
36+
$item-border-color: $yellow,
37+
$item-selected-background: $yellow,
38+
$item-hover-background: $yellow,
39+
$item-selected-hover-background: $yellow);
40+
41+
$custom-input-group: input-group-theme($schema: $dark-material-schema,
42+
$idle-text-color: $yellow,
43+
$focused-text-color: $yellow,
44+
$filled-text-color: $yellow,
45+
$idle-bottom-line-color: $muted-yellow,
46+
$focused-secondary-color: $yellow);
47+
48+
$custom-chip: chip-theme($schema: $dark-material-schema,
49+
$background: $yellow,
50+
$text-color: $black);
51+
52+
$custom-drop-down: drop-down-theme($schema: $dark-material-schema,
53+
$background-color: $black,
54+
$item-text-color: $yellow,
55+
$hover-item-background: $yellow,
56+
$hover-item-text-color: $black,
57+
$focused-item-background: $yellow,
58+
$focused-item-text-color: $black,
59+
$selected-item-background: $yellow,
60+
$selected-item-text-color: $black,
61+
$selected-focus-item-background: $yellow,
62+
$selected-focus-item-text-color: $black,
63+
$selected-hover-item-background: $yellow,
64+
$selected-hover-item-text-color: $black);
7965

8066

8167
:host {
8268
display: block;
8369
margin: 16px;
8470

8571
::ng-deep {
86-
@include css-vars($custom-drop-down);
72+
@include theme($palette: $dark-material-palette );
73+
8774
@include css-vars($custom-query-builder);
75+
@include css-vars($custom-drop-down);
8876
@include css-vars($custom-button-group);
8977
@include css-vars($custom-input-group);
9078
@include css-vars($custom-chip);

0 commit comments

Comments
 (0)