Skip to content

Commit 551d403

Browse files
simeonoffsimeonoff
committed
Merge branch 'vNext' into simeonoff/igniteui-theming
2 parents 1d1648e + 5afe60b commit 551d403

2 files changed

Lines changed: 192 additions & 124 deletions

File tree

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

Lines changed: 137 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,36 @@
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(
8-
$primary: #09f,
9-
$secondary: #ffbf00,
10-
$surface: #fff
11-
);
7+
$crm-grid-palette: palette($primary: #09f, $secondary: #ffbf00, $surface: #fff);
8+
$crm-grid-dark-palette: palette($primary: #09f, $secondary: #fff, $surface: #222);
129
@include theme($crm-grid-palette);
1310

11+
$checkbox-theme: checkbox-theme(
12+
$fill-color: color($crm-grid-palette, 'secondary', 500),
13+
$tick-color: black
14+
);
15+
$checkbox-dark-theme: checkbox-theme($fill-color: color($crm-grid-palette, 'gray', 50), $tick-color: black);
1416
$summary-theme: grid-summary-theme($background-color: #f0f8fe, $result-color: color($crm-grid-palette, 'primary', 500));
1517
$search-theme: input-group-theme($search-background: color($crm-grid-palette, 'primary', 600), $idle-text-color: color($crm-grid-palette, 'primary', 100), $filled-text-color: color($crm-grid-palette, 'gray', 600), $focused-text-color: color($crm-grid-palette, 'gray', 600));
1618
$crm-grid-theme: grid-theme($header-background: #f0f8fe, $header-border-color: #dde5eb);
19+
$crm-dark-grid-theme: grid-theme(
20+
$row-selected-background: color($crm-grid-palette, 'gray', 800),
21+
$row-hover-background: color($crm-grid-palette, 'gray', 700),
22+
$row-selected-hover-background: color($crm-grid-palette, 'gray', 700),
23+
$cell-active-border-color: color($crm-grid-palette, 'primary', 50),
24+
$cell-selected-background: color($crm-grid-palette, 'gray', 50),
25+
);
1726
$crm-grid-toolbar: grid-toolbar-theme($background-color: color($crm-grid-palette, 'primary', 500));
1827
$crm-grid-toolbar-button: button-theme($background: color($crm-grid-palette, 'primary', 800), $hover-background: color($crm-grid-palette, 'primary', 900), $focus-foreground: #fff);
1928
$crm-grid-search-button: button-theme($background: transparent, $focus-background: color($crm-grid-palette, 'gray', 200), $hover-background: color($crm-grid-palette, 'gray', 200));
29+
$crm-grid-dark-button: button-theme(
30+
$foreground: color($crm-grid-dark-palette, 'primary', 500),
31+
$hover-foreground: color($crm-grid-dark-palette, 'primary', 500),
32+
$focus-foreground: color($crm-grid-dark-palette, 'primary', 500),
33+
);
34+
$crm-grid-dark-progress: progress-linear-theme(
35+
$track-color: color($crm-grid-palette, 'gray', 500)
36+
);
2037
$crm-input-drop-down: input-group-theme($placeholder-color: color($crm-grid-palette, 'gray', 500), $idle-text-color: color($crm-grid-palette, 'gray', 900));
2138

2239
.grid__wrapper {
@@ -62,6 +79,26 @@
6279
}
6380
}
6481

82+
.sample-flex-container {
83+
display: flex;
84+
align-self: center;
85+
justify-content: flex-end;
86+
max-width: 500px;
87+
width: 70%
88+
}
89+
90+
@include css-vars($crm-grid-toolbar);
91+
92+
.igx-grid-toolbar__actions {
93+
.igx-button--outlined {
94+
border: none;
95+
}
96+
}
97+
98+
.igx-grid-toolbar__title {
99+
max-width: 68ch;
100+
}
101+
65102
.igx-grid-toolbar__button-space {
66103
.igx-icon {
67104
font-size: 1rem;
@@ -71,12 +108,24 @@
71108
}
72109
}
73110

74-
.sample-flex-container {
75-
display: flex;
76-
align-self: center;
77-
justify-content: flex-end;
78-
max-width: 500px;
79-
width: 70%
111+
.igx-grid-toolbar__custom-content {
112+
flex: 1 0 0%;
113+
}
114+
115+
.igx-grid-toolbar__actions {
116+
.igx-button--outlined {
117+
margin-left: 0.5rem;
118+
}
119+
}
120+
121+
.igx-grid-toolbar__actions {
122+
.igx-button--outlined {
123+
border: none;
124+
}
125+
}
126+
127+
.igx-grid-toolbar__actions {
128+
@include css-vars($crm-grid-toolbar-button);
80129
}
81130

82131
.crm-sample-toolbar__title {
@@ -93,16 +142,6 @@
93142
animation: slide-fade 1.25s .25s ease-out forwards;
94143
}
95144

96-
.igx-grid-toolbar__custom-content {
97-
flex: 1 0 0%;
98-
}
99-
100-
.igx-grid-toolbar__actions {
101-
.igx-button--outlined {
102-
margin-left: 0.5rem;
103-
}
104-
}
105-
106145
.igx-input-group--search {
107146
width: 100%;
108147
}
@@ -156,144 +195,118 @@
156195
margin-left: 4px;
157196
}
158197

159-
.igx-grid-toolbar__title {
160-
max-width: 68ch;
161-
}
198+
@include css-vars($search-theme);
162199

163-
// Not dark theme
164-
.grid__wrapper:not(.dark_grid) {
165-
@include css-vars($crm-grid-toolbar);
166-
@include css-vars($crm-grid-theme);
167-
@include css-vars($summary-theme);
168-
@include css-vars($search-theme);
200+
.case-sensitive--active {
201+
background: color($color: 'primary', $variant: 200);
202+
}
169203

170-
.case-sensitive--active {
171-
background: color($color: 'primary', $variant: 200);
172-
}
204+
.igx-grid__th-resize-line {
205+
background: color($color: 'secondary', $variant: 500);
206+
}
173207

174-
.igx-grid-toolbar__actions {
175-
.igx-button--outlined {
176-
border: none;
177-
}
178-
}
208+
.igx-input-group--search .igx-input-group__bundle,
209+
.igx-input-group--search .igx-input-group__bundle:hover {
210+
box-shadow: none;
211+
}
179212

180-
.igx-grid__th-resize-line {
181-
background: color($color: 'secondary', $variant: 500);
182-
}
213+
.igx-drop-down__list {
214+
@include css-vars($crm-input-drop-down)
215+
}
183216

184-
.igx-input-group--search .igx-input-group__bundle,
185-
.igx-input-group--search .igx-input-group__bundle:hover {
186-
box-shadow: none;
187-
}
217+
.sample-flex-container {
218+
.igx-input-group,
219+
.igx-input-group--focused {
220+
.igx-input-group__bundle {
221+
transition: all 250ms ease-in-out;
222+
}
188223

189-
.igx-drop-down__list {
190-
@include input-group($crm-input-drop-down)
224+
igx-icon {
225+
color: color($color: 'primary', $variant: 200);
226+
}
191227
}
192228

193-
.igx-grid-toolbar__actions {
194-
@include button($crm-grid-toolbar-button);
229+
.igx-input-group__textarea,
230+
.igx-input-group__input {
231+
color: color($color: 'primary', $variant: 100);
195232
}
196233

197-
.sample-flex-container {
198-
.igx-input-group,
199-
.igx-input-group--focused {
200-
.igx-input-group__bundle {
201-
transition: background 500ms ease-in-out;
202-
}
203-
204-
igx-icon {
205-
color: color($color: 'primary', $variant: 200);
206-
}
207-
}
208-
209-
.igx-input-group__textarea,
210-
.igx-input-group__input {
211-
color: color($color:'primary', $variant: 100);
234+
.igx-input-group {
235+
igx-icon {
236+
color: white;
212237
}
213238

214-
.igx-input-group {
239+
&:hover,
240+
&:focus,
241+
&.igx-input-group--focused {
215242
igx-icon {
216-
color: white;
243+
color: color($color: 'gray', $variant: 600);
217244
}
218245

219-
&:hover,
220-
&:focus,
221-
&.igx-input-group--focused {
222-
igx-icon {
223-
color: color($color: 'gray', $variant: 600);
224-
}
246+
.igx-input-group__bundle {
247+
background: contrast-color($color: 'gray', $variant: 900);
248+
color: color($color: 'gray', $variant: 600);
249+
}
225250

226-
.igx-input-group__bundle {
227-
background: contrast-color($color:'gray', $variant: 900);
251+
.igx-input-group__input {
252+
&::placeholder {
228253
color: color($color: 'gray', $variant: 600);
254+
opacity: 1;
229255
}
256+
}
230257

231-
.igx-input-group__input {
232-
&::placeholder {
233-
color: color($color: 'gray', $variant: 600);
234-
opacity: 1;
235-
}
236-
}
258+
.igx-input-group__textarea,
259+
.igx-input-group__input {
260+
color: color($color: 'gray', $variant: 600);
261+
}
237262

238-
.igx-input-group__textarea,
239-
.igx-input-group__input {
263+
.igx-button--icon {
264+
&:focus,
265+
&:active {
240266
color: color($color: 'gray', $variant: 600);
241267
}
242-
243-
.igx-button--icon {
244-
&:focus,
245-
&:active {
246-
color: color($color: 'gray', $variant: 600);
247-
}
248-
}
249268
}
250269
}
270+
}
251271

252-
.igx-button--icon {
253-
&:focus,
254-
&:active {
255-
color: color($color: 'primary', $variant: 100);
256-
background: transparent;
257-
}
272+
.igx-button--icon {
273+
&:focus,
274+
&:active {
275+
color: color($color: 'primary', $variant: 100);
276+
background: transparent;
258277
}
278+
}
259279

260-
.igx-input-group__input {
261-
&::placeholder {
262-
color: white;
263-
opacity: 1;
264-
}
280+
.igx-input-group__input {
281+
&::placeholder {
282+
color: white;
283+
opacity: 1;
265284
}
266285
}
286+
}
267287

268-
.igx-input-group--search .igx-input-group__bundle {
269-
background-color: color($color: 'primary', $variant: 800);
288+
.igx-input-group--search .igx-input-group__bundle {
289+
background-color: color($color: 'primary', $variant: 800);
270290

271-
@include button($crm-grid-search-button);
272-
}
291+
@include css-vars($crm-grid-search-button);
273292
}
274293

275-
.dark_grid {
276-
@include dark-theme($dark-material-palette);
277-
278-
.case-sensitive--active {
279-
background: color($color: 'secondary', $variant: 500);
280-
}
294+
// Not dark theme
295+
.grid__wrapper:not(.dark_grid) {
296+
@include css-vars($crm-grid-theme);
297+
@include css-vars($summary-theme);
298+
}
281299

282-
.sample-flex-container {
283-
.igx-input-group {
284-
.igx-input-group__bundle {
285-
background: color($color: 'gray', $variant: 800);
286-
transition: background-color 250ms ease-in-out;
287-
}
300+
.dark_grid {
301+
@include palette($crm-grid-dark-palette);
302+
@include css-vars($checkbox-dark-theme);
303+
@include css-vars($crm-grid-toolbar);
304+
@include css-vars($crm-dark-grid-theme);
305+
@include css-vars($crm-grid-dark-button);
306+
@include css-vars($crm-grid-dark-progress);
288307

289-
&:hover,
290-
&:focus,
291-
&.igx-input-group--focused {
292-
.igx-input-group__bundle {
293-
background: color($color: 'gray', $variant: 800, $opacity: .7);
294-
}
295-
}
296-
}
308+
.igx-grid-toolbar__actions {
309+
@include css-vars($crm-grid-toolbar-button);
297310
}
298311
}
299312
}

‎projects/app-crm/web.config‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<configuration>
3+
<system.webServer>
4+
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
5+
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
6+
<dynamicTypes>
7+
<add enabled="true" mimeType="text/*"/>
8+
<add enabled="true" mimeType="message/*"/>
9+
<add enabled="true" mimeType="application/javascript"/>
10+
<add enabled="true" mimeType="application/json"/>
11+
<add enabled="false" mimeType="*/*"/>
12+
</dynamicTypes>
13+
<staticTypes>
14+
<add enabled="true" mimeType="text/*"/>
15+
<add enabled="true" mimeType="message/*"/>
16+
<add enabled="true" mimeType="application/javascript"/>
17+
<add enabled="true" mimeType="application/json"/>
18+
<add enabled="false" mimeType="*/*"/>
19+
</staticTypes>
20+
</httpCompression>
21+
<rewrite>
22+
<rules>
23+
<rule name="Angular Routes" stopProcessing="true">
24+
<match url=".*" />
25+
<conditions logicalGrouping="MatchAll">
26+
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
27+
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
28+
</conditions>
29+
<action type="Rewrite" url="/angular-demos/" />
30+
</rule>
31+
</rules>
32+
</rewrite>
33+
<staticContent>
34+
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
35+
<remove fileExtension=".json" />
36+
<remove fileExtension=".csv" />
37+
<remove fileExtension=".shp" />
38+
<remove fileExtension=".dbf" />
39+
<remove fileExtension=".itf" />
40+
<remove fileExtension=".svg" />
41+
42+
<mimeMap fileExtension=".json" mimeType="application/json;charset=UTF-8;" />
43+
<mimeMap fileExtension=".csv" mimeType="application/csv;charset=UTF-8;" />
44+
<mimeMap fileExtension=".shp" mimeType="application/octet-stream" />
45+
<mimeMap fileExtension=".dbf" mimeType="application/octet-stream" />
46+
<mimeMap fileExtension=".itf" mimeType="application/octet-stream" />
47+
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
48+
</staticContent>
49+
<httpProtocol>
50+
<customHeaders>
51+
<add name="X-XSS-Protection" value="0" />
52+
</customHeaders>
53+
</httpProtocol>
54+
</system.webServer>
55+
</configuration>

0 commit comments

Comments
 (0)