Skip to content

Commit 0c402e3

Browse files
desig9steindesig9stein
committed
style(finjs): refactor styling and disable legacy-support
1 parent 716714a commit 0c402e3

4 files changed

Lines changed: 585 additions & 495 deletions

File tree

‎projects/app-lob/src/_variables.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
@use 'igniteui-angular/theming' as *;
22
@forward 'igniteui-angular/theming';
33

4-
$legacy-support: true;
54
$palette: $light-material-palette;
65
$schema: $light-material-schema;
76

87
$default-palette: $palette;
9-
$igx-legacy-support: $legacy-support;
108

119
$green-palette: palette(
1210
$primary: #09f,

‎projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss‎

Lines changed: 128 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,183 @@
11
@use '~igniteui-dockmanager/dist/collection/styles/igc.themes';
2+
@use 'igniteui-angular/theming' as *;
23

34
.actionItem {
4-
margin-bottom: 20px;
5+
margin-block-end: rem(20px);
56
}
67

78
.finjs-icons {
8-
display: flex;
9-
align-items: center;
10-
igx-icon {
11-
font-size: 16px;
12-
width: 16px;
13-
height: 16px;
14-
margin-left: 4px;
15-
}
9+
display: flex;
10+
align-items: center;
11+
12+
igx-icon {
13+
font-size: rem(16px);
14+
width: rem(16px);
15+
height: rem(16px);
16+
margin-inline-start: rem(4px);
17+
}
1618
}
1719

1820
.changePos,
1921
.changeNeg,
2022
.strongPositive,
2123
.strongNegative {
22-
color: #fff !important;
23-
.igx-grid__td-text {
24-
padding: 2px 5px;
25-
}
24+
color: contrast-color(null, 'grays', 500) !important;
25+
26+
.igx-grid__td-text {
27+
padding: rem(2px) rem(5px);
28+
}
2629
}
30+
2731
.positive {
28-
color: #4eb862 !important;
32+
color: color(null, 'success', 500) !important;
2933
}
34+
3035
.positive.strongPositive {
31-
.igx-grid__td-text {
32-
color: rgba(78, 184, 98, 0.8) !important;
33-
}
36+
.igx-grid__td-text {
37+
color: color(null, 'success', 500, .8) !important;
38+
}
3439
}
40+
3541
.negative {
36-
color: #d31642 !important;
42+
color: color(null, 'error', 500) !important;
3743
}
44+
3845
.negative.strongNegative {
39-
.igx-grid__td-text {
40-
color: rgba(255, 19, 74, 0.8) !important;
41-
}
46+
.igx-grid__td-text {
47+
color: color(null, 'success', 500, .8) !important;
48+
}
4249
}
50+
4351
// NORMAL
4452
// positive
4553
.changePos {
46-
.igx-grid__td-text {
47-
background: #335e3b;
48-
}
54+
.igx-grid__td-text {
55+
background: color(null, 'success', 500, .5);
56+
}
4957
}
58+
5059
.changePos1 {
51-
background: #335e3b;
52-
color: #fff;
60+
background: color(null, 'success', 500, .5);
61+
color: contrast-color(null, 'grays', 900);
5362
}
63+
5464
.changePos2 {
55-
.igx-grid__td-text {
56-
border-right: 4px solid #335e3b;
57-
padding-right: 15px;
58-
}
65+
.igx-grid__td-text {
66+
border-inline-end: rem(4px) solid color(null, 'success', 500, .5);
67+
padding-inline-end: rem(15px);
68+
}
5969
}
70+
6071
// negative
6172
.changeNeg {
62-
.igx-grid__td-text {
63-
background: #7a1c32;
64-
}
73+
.igx-grid__td-text {
74+
background: color(null, 'error', 500, .5);
75+
}
6576
}
77+
6678
.changeNeg1 {
67-
color: #fff;
68-
background: #7a1c32;
79+
background: color(null, 'error', 500, .5);
80+
color: contrast-color(null, 'grays', 900);
6981
}
82+
7083
.changeNeg2 {
71-
.igx-grid__td-text {
72-
border-right: 4px solid #7a1c32;
73-
padding-right: 9px;
74-
}
84+
.igx-grid__td-text {
85+
border-inline-end: rem(4px) solid color(null, 'error', 500, .5);
86+
padding-inline-end: rem(9px);
87+
}
7588
}
7689

7790
// STRONG
7891
// positive
7992
.strongPositive {
80-
.igx-grid__td-text {
81-
background: #459a55;
82-
}
93+
.igx-grid__td-text {
94+
background: color(null, 'success', 500);
95+
}
8396
}
97+
8498
.strongPositive1 {
85-
background: #459a55;
86-
color: #fff;
99+
background: color(null, 'success', 500);
100+
color: contrast-color(null, 'grays', 900);
87101
}
102+
88103
.strongPositive2 {
89-
.igx-grid__td-text {
90-
border-right: 4px solid #459a55;
91-
padding-right: 15px;
92-
}
104+
.igx-grid__td-text {
105+
border-inline-end: rem(4px) solid color(null, 'success', 500);
106+
padding-inline-end: rem(15px);
107+
}
93108
}
109+
94110
// negative
95111
.strongNegative {
96-
.igx-grid__td-text {
97-
background: #d31642;
98-
color: #fff;
99-
}
112+
.igx-grid__td-text {
113+
background: color(null, 'error', 500);
114+
color: contrast-color(null, 'grays', 900);
115+
}
100116
}
117+
101118
.strongNegative1 {
102-
background: #d31642;
103-
color: #fff;
119+
background: color(null, 'error', 500);
120+
color: contrast-color(null, 'grays', 900);
104121
}
122+
105123
.strongNegative2 {
106-
.igx-grid__td-text {
107-
border-right: 4px solid #d31642;
108-
padding-right: 9px;
109-
}
124+
.igx-grid__td-text {
125+
border-inline-end: rem(4px) solid color(null, 'error', 500);
126+
padding-inline-end: rem(9px);
127+
}
110128
}
111129

112130
:host ::ng-deep {
113-
.grid-area {
114-
margin-top: 1rem;
115-
overflow-y: hidden;
116-
overflow-x: hidden;
117-
width: 100%;
118-
}
119-
120-
// selected
121-
.igx-grid__td--column-selected.changePos1,
122-
.igx-grid__td--column-selected.changePos2,
123-
.igx-grid__td--column-selected.changePos {
124-
background-color: #335e3b !important;
125-
.finjs-icons,
126-
.igx-grid__td-text {
127-
color: #fff;
128-
}
129-
}
130-
.igx-grid__td--column-selected.changeNeg1,
131-
.igx-grid__td--column-selected.changeNeg2,
132-
.igx-grid__td--column-selected.changeNeg {
133-
background-color: #7a1c32 !important;
134-
.finjs-icons,
135-
.igx-grid__td-text {
136-
color: #fff;
137-
}
138-
}
139-
140-
// selected
141-
.igx-grid__td--column-selected.strongPositive1,
142-
.igx-grid__td--column-selected.strongPositive2,
143-
.igx-grid__td--column-selected.strongPositive {
144-
background-color: #459a55 !important;
145-
.finjs-icons,
146-
.igx-grid__td-text {
147-
color: #fff;
148-
}
149-
}
150-
.igx-grid__td--column-selected.strongNegative1,
151-
.igx-grid__td--column-selected.strongNegative2,
152-
.igx-grid__td--column-selected.strongNegative {
153-
background-color: #d31642 !important;
154-
.finjs-icons,
155-
.igx-grid__td-text {
156-
color: #fff;
157-
}
158-
}
131+
.grid-area {
132+
margin-block-start: 1rem;
133+
overflow-y: hidden;
134+
overflow-x: hidden;
135+
width: 100%;
136+
}
137+
138+
// selected
139+
.igx-grid__td--column-selected.changePos1,
140+
.igx-grid__td--column-selected.changePos2,
141+
.igx-grid__td--column-selected.changePos {
142+
background-color: color(null, 'success', 500) !important;
143+
144+
.finjs-icons,
145+
.igx-grid__td-text {
146+
color: contrast-color(null, 'grays', 900);;
147+
}
148+
}
149+
150+
.igx-grid__td--column-selected.changeNeg1,
151+
.igx-grid__td--column-selected.changeNeg2,
152+
.igx-grid__td--column-selected.changeNeg {
153+
background-color: color(null, 'error', 500) !important;
154+
155+
.finjs-icons,
156+
.igx-grid__td-text {
157+
color: contrast-color(null, 'grays', 900);
158+
}
159+
}
160+
161+
// selected
162+
.igx-grid__td--column-selected.strongPositive1,
163+
.igx-grid__td--column-selected.strongPositive2,
164+
.igx-grid__td--column-selected.strongPositive {
165+
background-color: color(null, 'success', 500) !important;
166+
167+
.finjs-icons,
168+
.igx-grid__td-text {
169+
color: contrast-color(null, 'grays', 900);
170+
}
171+
}
172+
173+
.igx-grid__td--column-selected.strongNegative1,
174+
.igx-grid__td--column-selected.strongNegative2,
175+
.igx-grid__td--column-selected.strongNegative {
176+
background-color: color(null, 'error', 500) !important;
177+
178+
.finjs-icons,
179+
.igx-grid__td-text {
180+
color: contrast-color(null, 'grays', 900);
181+
}
182+
}
159183
}

0 commit comments

Comments
 (0)