Skip to content

Commit 7bab7ed

Browse files
desig9steindesig9stein
committed
style(grid-crm): Refactor styles.
1 parent ef2ed10 commit 7bab7ed

1 file changed

Lines changed: 117 additions & 53 deletions

File tree

‎projects/app-crm/src/app/grid-crm/grid-crm.component.scss‎

Lines changed: 117 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,50 @@
44
@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css');
55

66
:host ::ng-deep {
7-
$crm-grid-palette: palette(
7+
$light-palette: palette(
88
$primary: #09f,
99
$secondary: #ffbf00,
1010
$surface: #fff
1111
);
12-
$crm-grid-dark-palette: palette(
13-
$primary: #09f,
14-
$secondary: #fff,
15-
$surface: #222
16-
);
17-
@include palette($crm-grid-palette);
12+
13+
@include palette($light-palette);
1814

1915
$checkbox-theme: checkbox-theme(
2016
$fill-color: color($color: 'secondary', $variant: 500),
2117
$tick-color: contrast-color($color: 'secondary', $variant: 500)
2218
);
23-
$checkbox-dark-theme: checkbox-theme(
24-
$fill-color: color($color: 'gray', $variant: 900),
25-
$tick-color: contrast-color($color: 'gray', $variant: 900)
26-
);
19+
2720
$summary-theme: grid-summary-theme(
2821
$background-color: #f0f8fe,
2922
$result-color: color($color: 'primary', $variant: 500)
3023
);
31-
$search-theme: input-group-theme(
32-
$search-background: color($color: 'primary', $variant: 600),
33-
$idle-text-color: color($color: 'primary', $variant: 100),
34-
$filled-text-color: color($color: 'gray', $variant: 600),
35-
$focused-text-color: color($color: 'gray', $variant: 600)
36-
);
37-
38-
@debug $search-theme;
3924

4025
$crm-grid-theme: grid-theme(
4126
$header-background: #f0f8fe,
4227
$header-border-color: #dde5eb
4328
);
44-
$crm-dark-grid-theme: grid-theme(
45-
$row-selected-background: color($crm-grid-palette, 'gray', 800),
46-
$row-hover-background: color($crm-grid-palette, 'gray', 700),
47-
$row-selected-hover-background: color($crm-grid-palette, 'gray', 700),
48-
$cell-active-border-color: color($crm-grid-palette, 'primary', 50),
49-
$cell-selected-background: color($crm-grid-palette, 'gray', 50),
50-
);
29+
5130
$crm-grid-toolbar: grid-toolbar-theme(
52-
$background-color: color($crm-grid-palette, 'primary', 500)
31+
$background-color: color($color: 'primary', $variant: 500),
32+
$title-text-color: contrast-color($color: 'primary', $variant: 500)
5333
);
34+
5435
$crm-grid-toolbar-button: button-theme(
55-
$background: color($crm-grid-palette, 'primary', 800),
56-
$hover-background: color($crm-grid-palette, 'primary', 900),
57-
$focus-foreground: #fff
36+
$background: color($light-palette, 'primary', 800),
37+
$hover-background: color($light-palette, 'primary', 900),
38+
$active-foreground: contrast-color($light-palette, 'primary', 900),
39+
$focus-foreground: contrast-color($light-palette, 'primary', 900)
5840
);
41+
5942
$crm-grid-search-button: button-theme(
6043
$background: transparent,
61-
$focus-background: color($crm-grid-palette, 'gray', 200),
62-
$hover-background: color($crm-grid-palette, 'gray', 200)
44+
$focus-background: color($light-palette, 'gray', 200),
45+
$hover-background: color($light-palette, 'gray', 200)
6346
);
64-
$crm-grid-dark-button: button-theme(
65-
$foreground: color($crm-grid-dark-palette, 'primary', 500),
66-
$hover-foreground: color($crm-grid-dark-palette, 'primary', 500),
67-
$focus-foreground: color($crm-grid-dark-palette, 'primary', 500),
68-
);
69-
$crm-grid-dark-progress: progress-linear-theme(
70-
$track-color: color($crm-grid-palette, 'gray', 500)
71-
);
47+
7248
$crm-input-drop-down: input-group-theme(
73-
$placeholder-color: color($crm-grid-palette, 'gray', 500),
74-
$idle-text-color: color($crm-grid-palette, 'gray', 900)
49+
$placeholder-color: color($light-palette, 'gray', 500),
50+
$idle-text-color: color($light-palette, 'gray', 900)
7551
);
7652

7753
.grid__wrapper {
@@ -233,8 +209,6 @@
233209
margin-left: 4px;
234210
}
235211

236-
@include css-vars($search-theme);
237-
238212
.case-sensitive--active {
239213
background: color($color: 'primary', $variant: 200);
240214
}
@@ -248,9 +222,9 @@
248222
box-shadow: none;
249223
}
250224

251-
.igx-drop-down__list {
252-
@include css-vars($crm-input-drop-down)
253-
}
225+
226+
@include css-vars($crm-input-drop-down);
227+
254228

255229
.sample-flex-container {
256230
.igx-input-group,
@@ -271,7 +245,7 @@
271245

272246
.igx-input-group {
273247
igx-icon {
274-
color: white;
248+
color: contrast-color($color: 'gray', $variant: 900);
275249
}
276250

277251
&:hover,
@@ -317,7 +291,7 @@
317291

318292
.igx-input-group__input {
319293
&::placeholder {
320-
color: white;
294+
color: contrast-color($color: 'gray', $variant: 900);
321295
opacity: 1;
322296
}
323297
}
@@ -329,25 +303,115 @@
329303
@include css-vars($crm-grid-search-button);
330304
}
331305

332-
// Not dark theme
333306
.grid__wrapper:not(.dark_grid) {
334307
@include css-vars($crm-grid-theme);
335308
@include css-vars($summary-theme);
336309
@include css-vars($checkbox-theme);
337310
}
338311

312+
313+
// DARK THEME
314+
$dark-palette: palette(
315+
$primary: #09f,
316+
$secondary: #fff,
317+
$surface: #222,
318+
);
319+
320+
$checkbox-dark-theme: checkbox-theme(
321+
$fill-color: color($color: 'gray', $variant: 900),
322+
$tick-color: contrast-color($color: 'gray', $variant: 900)
323+
);
324+
325+
$crm-dark-grid-theme: grid-theme(
326+
$row-selected-background: color($color: 'gray', $variant: 100),
327+
$row-selected-text-color: contrast-color($color: 'gray', $variant: 100),
328+
$row-hover-background: color($color: 'gray', $variant: 200),
329+
$row-hover-text-color: contrast-color($color: 'gray', $variant: 200),
330+
$row-selected-hover-background: color($color: 'gray', $variant: 200),
331+
$row-selected-hover-text-color: contrast-color($color: 'gray', $variant: 200),
332+
$cell-selected-background: color($color: 'gray', $variant: 900),
333+
$cell-selected-text-color: contrast-color($color: 'gray', $variant: 900),
334+
$cell-active-border-color: color($color: 'gray', $variant: 900),
335+
);
336+
337+
$crm-grid-dark-button: button-theme(
338+
$foreground: color($color: 'primary', $variant: 500),
339+
$hover-foreground: color($color: 'primary', $variant: 500),
340+
$focus-foreground: color($color: 'primary', $variant: 500),
341+
);
342+
343+
$crm-grid-dark-progress: progress-linear-theme(
344+
$track-color: color($color: 'gray', $variant: 500)
345+
);
346+
339347
.dark_grid {
340-
@include palette($crm-grid-dark-palette);
348+
@include palette($dark-palette);
341349
@include css-vars($checkbox-dark-theme);
342-
@include css-vars($crm-grid-toolbar);
343350
@include css-vars($crm-dark-grid-theme);
344351
@include css-vars($crm-grid-dark-button);
345352
@include css-vars($crm-grid-dark-progress);
346353

347354
.igx-grid-toolbar__actions {
348355
@include css-vars($crm-grid-toolbar-button);
349356
}
350-
}
357+
358+
.sample-flex-container {
359+
.igx-input-group,
360+
.igx-input-group--focused {
361+
igx-icon {
362+
color: color($color: 'primary', $variant: 200);
363+
}
364+
}
365+
366+
.igx-input-group__textarea,
367+
.igx-input-group__input {
368+
color: color($color: 'primary', $variant: 100);
369+
}
370+
371+
.igx-input-group {
372+
igx-icon {
373+
color: contrast-color($color: 'gray', $variant: 50);
374+
}
375+
376+
&:hover,
377+
&:focus,
378+
&.igx-input-group--focused {
379+
igx-icon {
380+
color: color($color: 'gray', $variant: 400);
381+
}
382+
383+
.igx-input-group__bundle {
384+
background: contrast-color($color: 'gray', $variant: 50);
385+
color: color($color: 'gray', $variant: 400);
386+
}
387+
388+
.igx-input-group__input {
389+
&::placeholder {
390+
color: color($color: 'gray', $variant: 400);
391+
}
392+
}
393+
394+
.igx-input-group__textarea,
395+
.igx-input-group__input {
396+
color: color($color: 'gray', $variant: 400);
397+
}
398+
399+
.igx-button--icon {
400+
&:focus,
401+
&:active {
402+
color: color($color: 'gray', $variant: 400);
403+
}
404+
}
405+
}
406+
}
407+
408+
.igx-input-group__input {
409+
&::placeholder {
410+
color: contrast-color($color: 'gray', $variant: 50);
411+
}
412+
}
413+
}
414+
}
351415
}
352416

353417
.animated-fan {

0 commit comments

Comments
 (0)