Skip to content

Commit 6b1b53d

Browse files
simeonoffsimeonoff
authored
Merge pull request #7609 from IgniteUI/sivanov-bootstrap-fluent-theme-support
Bootstrap fluent theme support
2 parents bada3d4 + a3af8fd commit 6b1b53d

File tree

2 files changed

+190
-10
lines changed

2 files changed

+190
-10
lines changed

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,17 @@
2424
/// @requires $_light-dock-manager
2525
$_dark-dock-manager: extend(
2626
$_light-dock-manager, (
27-
accent-color: #424242,
27+
accent-color: (
28+
igx-color: (grays, 400),
29+
),
2830
border-color: #212121,
2931
button-text: #fff,
3032
context-menu-color-active: #fff,
3133
floating-pane-border-color: rgba(0, 0, 0, .26),
3234
flyout-shadow-color: rgba(0, 0, 0, .38),
33-
joystick-border-color: #424242,
35+
joystick-border-color: (
36+
igx-color: (grays, 400),
37+
),
3438
joystick-icon-color-active: #fff,
3539
pane-content-background: #212121,
3640
primary-color: #111,
@@ -44,11 +48,46 @@ $_dark-dock-manager: extend(
4448
/// @type {Map}
4549
/// @requires {function} extend
4650
/// @requires $_fluent-dock-manager
47-
$_dark-fluent-dock-manager: extend($_fluent-dock-manager);
51+
$_dark-fluent-dock-manager: extend(
52+
$_fluent-dock-manager, (
53+
accent-color: #111,
54+
background-color: #2a2a2a,
55+
button-text: #fff,
56+
context-menu-background-active: #111,
57+
context-menu-color-active: #fff,
58+
context-menu-background: #333,
59+
context-menu-color: #fff,
60+
dock-background: #2a2a2a,
61+
floating-pane-border-color: transparent,
62+
joystick-background-active: #111,
63+
joystick-background: #333,
64+
joystick-border-color: transparent,
65+
joystick-icon-color: #fff,
66+
joystick-icon-color-active: #fff,
67+
pane-header-backround: #2a2a2a,
68+
pinned-header-background: #2a2a2a,
69+
splitter-background: #151515,
70+
splitter-handle: #000,
71+
tab-text: #fff,
72+
text-color: #fff,
73+
)
74+
);
4875

4976
/// Generates a dark bootstrap dock-manager schema.
5077
/// @type {Map}
5178
/// @requires {function} extend
5279
/// @requires $_bootstrap-dock-manager
53-
$_dark-bootstrap-dock-manager: extend($_bootstrap-dock-manager);
54-
80+
$_dark-bootstrap-dock-manager: extend(
81+
$_bootstrap-dock-manager, (
82+
accent-color: #111,
83+
context-menu-background: #222,
84+
dock-background: #111,
85+
joystick-background: #222,
86+
pane-header-background: #111,
87+
pinned-header-background: #111,
88+
primary-color: #111,
89+
splitter-background: #1a1e29,
90+
splitter-handle: #000,
91+
text-color: #fff,
92+
)
93+
);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss

Lines changed: 146 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,14 @@
4040
/// @prop {Color} text-color [rgba(0, 0, 0, .72)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
4141
$_light-dock-manager: (
4242
accent-color: #fff,
43+
active-color: (
44+
igx-color: primary,
45+
),
46+
background-color: #e5e7e9,
4347
border-color: #f3f5f7,
44-
button-text: rgba(0, 0, 0, .72),
48+
button-text: (
49+
igx-color: (grays, 800),
50+
),
4551
context-menu-background-active: null,
4652
context-menu-background: null,
4753
context-menu-color-active: #000,
@@ -61,7 +67,6 @@ $_light-dock-manager: (
6167
pane-header-text: null,
6268
pinned-header-background: null,
6369
pinned-header-text: null,
64-
primary-color: #e5e7e9,
6570
splitter-background: #d3d6d9,
6671
splitter-handle: null,
6772
tab-background-active: #f3f5f7,
@@ -70,19 +75,155 @@ $_light-dock-manager: (
7075
tab-border-color: null,
7176
tab-text-active: null,
7277
tab-text: null,
73-
text-color: rgba(0, 0, 0, .72),
78+
text-color: (
79+
igx-color: (grays, 800),
80+
),
7481
);
7582

7683
/// Generates a fluent dock-manager schema.
7784
/// @type {Map}
7885
/// @requires {function} extend
7986
/// @requires $_light-dock-manager
80-
$_fluent-dock-manager: extend($_light-dock-manager);
87+
$_fluent-dock-manager: extend(
88+
$_light-dock-manager, (
89+
background-color: (
90+
igx-color: surface,
91+
),
92+
border-color: (
93+
igx-color: surface,
94+
),
95+
button-text: (
96+
igx-color: (grays, 800),
97+
),
98+
context-menu-background-active: (
99+
igx-color: (grays, 200),
100+
hexrgba: (),
101+
),
102+
context-menu-color-active: (
103+
igx-color: (grays, 800),
104+
),
105+
context-menu-color: (
106+
igx-color: (grays, 800),
107+
),
108+
dock-background: (
109+
igx-color: surface,
110+
),
111+
floating-pane-border-color: (
112+
igx-color: (grays, 400),
113+
hexrgba: (),
114+
),
115+
joystick-background-active: (
116+
igx-color: (grays, 200),
117+
hexrgba: (),
118+
),
119+
joystick-border-color: (
120+
igx-color: (grays, 400),
121+
hexrgba: (),
122+
),
123+
joystick-icon-color: (
124+
igx-color: (grays, 800),
125+
),
126+
joystick-icon-color-active: (
127+
igx-color: (grays, 800),
128+
),
129+
pane-content-background: (
130+
igx-color: surface,
131+
),
132+
pane-header-background: (
133+
igx-color: surface,
134+
),
135+
splitter-background: (
136+
igx-color: (grays, 100),
137+
hexrgba: (),
138+
),
139+
splitter-handle: #ccc,
140+
tab-background-active: (
141+
igx-color: surface,
142+
),
143+
tab-background: (
144+
igx-color: surface,
145+
),
146+
tab-border-color-active: (
147+
igx-color: surface,
148+
),
149+
tab-border-color: (
150+
igx-color: surface,
151+
),
152+
tab-text-active: (
153+
igx-color: primary,
154+
),
155+
tab-text: (
156+
igx-color: (grays, 700)
157+
),
158+
text-color: (
159+
igx-color: (grays, 800)
160+
),
161+
)
162+
);
81163

82164
/// Generates a bootstrap dock-manager schema.
83165
/// @type {Map}
84166
/// @requires {function} extend
85167
/// @requires $_light-dock-manager
86168
/// @requires $_bootstrap-shape-dock-manager
87-
$_bootstrap-dock-manager: extend($_light-dock-manager);
169+
$_bootstrap-dock-manager: extend(
170+
$_light-dock-manager, (
171+
border-color: (
172+
igx-color: surface
173+
),
174+
button-text: (
175+
igx-color: primary,
176+
),
177+
context-menu-background-active: (
178+
igx-color: primary,
179+
),
180+
context-menu-color-active: #fff,
181+
context-menu-color: (
182+
igx-color: primary,
183+
),
184+
dock-background: #f8f9fa,
185+
floating-pane-border-color: (
186+
igx-color: (grays, 300),
187+
),
188+
joystick-background-active: (
189+
igx-color: primary,
190+
),
191+
joystick-border-color: (
192+
igx-color: (grays, 300),
193+
),
194+
joystick-icon-color: (
195+
igx-color: primary,
196+
),
197+
joystick-icon-color-active: #fff,
198+
pane-content-background: (
199+
igx-color: surface
200+
),
201+
pinned-header-background: #f8f9fa,
202+
pane-header-background: #f8f9fa,
203+
primary-color: #f8f9fa,
204+
splitter-background: #e9ecef,
205+
splitter-handle: #bdc6d0,
206+
tab-background-active: (
207+
igx-color: surface
208+
),
209+
tab-background: (
210+
igx-color: surface
211+
),
212+
tab-border-color-active: (
213+
igx-color: (grays, 300)
214+
),
215+
tab-border-color: (
216+
igx-color: surface
217+
),
218+
tab-text-active: (
219+
igx-color: (grays, 800)
220+
),
221+
tab-text: (
222+
igx-color: primary,
223+
),
224+
text-color: (
225+
igx-color: (grays, 800)
226+
),
227+
)
228+
);
88229

0 commit comments

Comments
 (0)