Skip to content

Commit 716714a

Browse files
ChronosSFChronosSF
authored
Merge pull request #3140 from IgniteUI/mpopov/update_crm_grid_dark_theme
Update grid-crm dark theme
2 parents bb78f91 + 52a9897 commit 716714a

1 file changed

Lines changed: 110 additions & 120 deletions

File tree

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

Lines changed: 110 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,26 @@
5959
}
6060
}
6161

62+
.sample-flex-container {
63+
display: flex;
64+
align-self: center;
65+
justify-content: flex-end;
66+
max-width: 500px;
67+
width: 70%
68+
}
69+
70+
@include grid-toolbar($crm-grid-toolbar);
71+
72+
.igx-grid-toolbar__actions {
73+
.igx-button--outlined {
74+
border: none;
75+
}
76+
}
77+
78+
.igx-grid-toolbar__title {
79+
max-width: 68ch;
80+
}
81+
6282
.igx-grid-toolbar__button-space {
6383
.igx-icon {
6484
font-size: 1rem;
@@ -68,12 +88,24 @@
6888
}
6989
}
7090

71-
.sample-flex-container {
72-
display: flex;
73-
align-self: center;
74-
justify-content: flex-end;
75-
max-width: 500px;
76-
width: 70%
91+
.igx-grid-toolbar__custom-content {
92+
flex: 1 0 0%;
93+
}
94+
95+
.igx-grid-toolbar__actions {
96+
.igx-button--outlined {
97+
margin-left: 0.5rem;
98+
}
99+
}
100+
101+
.igx-grid-toolbar__actions {
102+
.igx-button--outlined {
103+
border: none;
104+
}
105+
}
106+
107+
.igx-grid-toolbar__actions {
108+
@include button($crm-grid-toolbar-button);
77109
}
78110

79111
.crm-sample-toolbar__title {
@@ -90,16 +122,6 @@
90122
animation: slide-fade 1.25s .25s ease-out forwards;
91123
}
92124

93-
.igx-grid-toolbar__custom-content {
94-
flex: 1 0 0%;
95-
}
96-
97-
.igx-grid-toolbar__actions {
98-
.igx-button--outlined {
99-
margin-left: 0.5rem;
100-
}
101-
}
102-
103125
.igx-input-group--search {
104126
width: 100%;
105127
}
@@ -153,145 +175,113 @@
153175
margin-left: 4px;
154176
}
155177

156-
.igx-grid-toolbar__title {
157-
max-width: 68ch;
158-
}
178+
@include input-group($search-theme);
159179

160-
// Not dark theme
161-
.grid__wrapper:not(.dark_grid) {
162-
@include grid-toolbar($crm-grid-toolbar);
163-
@include grid($crm-grid-theme);
164-
@include grid-summary($summary-theme);
165-
@include input-group($search-theme);
166-
@include grid-toolbar($crm-grid-toolbar);
180+
.case-sensitive--active {
181+
background: color($crm-grid-palette, 'primary', 200);
182+
}
167183

168-
.case-sensitive--active {
169-
background: color($crm-grid-palette, 'primary', 200);
170-
}
184+
.igx-grid__th-resize-line {
185+
background: color($crm-grid-palette, 'secondary', 500);
186+
}
171187

172-
.igx-grid-toolbar__actions {
173-
.igx-button--outlined {
174-
border: none;
175-
}
176-
}
188+
.igx-input-group--search .igx-input-group__bundle,
189+
.igx-input-group--search .igx-input-group__bundle:hover {
190+
box-shadow: none;
191+
}
177192

178-
.igx-grid__th-resize-line {
179-
background: color($crm-grid-palette, 'secondary', 500);
180-
}
193+
.igx-drop-down__list {
194+
@include input-group($crm-input-drop-down)
195+
}
181196

182-
.igx-input-group--search .igx-input-group__bundle,
183-
.igx-input-group--search .igx-input-group__bundle:hover {
184-
box-shadow: none;
185-
}
197+
.sample-flex-container {
198+
.igx-input-group,
199+
.igx-input-group--focused {
200+
.igx-input-group__bundle {
201+
transition: all 250ms ease-in-out;
202+
}
186203

187-
.igx-drop-down__list {
188-
@include input-group($crm-input-drop-down)
204+
igx-icon {
205+
color: color($crm-grid-palette, 'primary', 200);
206+
}
189207
}
190208

191-
.igx-grid-toolbar__actions {
192-
@include button($crm-grid-toolbar-button);
209+
.igx-input-group__textarea,
210+
.igx-input-group__input {
211+
color: color($crm-grid-palette, 'primary', 100);
193212
}
194213

195-
.sample-flex-container {
196-
.igx-input-group,
197-
.igx-input-group--focused {
198-
.igx-input-group__bundle {
199-
transition: background 500ms ease-in-out;
200-
}
201-
202-
igx-icon {
203-
color: color($crm-grid-palette, 'primary', 200);
204-
}
205-
}
206-
207-
.igx-input-group__textarea,
208-
.igx-input-group__input {
209-
color: color($crm-grid-palette, 'primary', 100);
214+
.igx-input-group {
215+
igx-icon {
216+
color: white;
210217
}
211218

212-
.igx-input-group {
219+
&:hover,
220+
&:focus,
221+
&.igx-input-group--focused {
213222
igx-icon {
214-
color: white;
223+
color: color($crm-grid-palette, 'grays', 600);
215224
}
216225

217-
&:hover,
218-
&:focus,
219-
&.igx-input-group--focused {
220-
igx-icon {
221-
color: color($crm-grid-palette, 'grays', 600);
222-
}
226+
.igx-input-group__bundle {
227+
background: contrast-color($crm-grid-palette, 'grays', 900);
228+
color: color($crm-grid-palette, 'grays', 600);
229+
}
223230

224-
.igx-input-group__bundle {
225-
background: contrast-color($crm-grid-palette, 'grays', 900);
231+
.igx-input-group__input {
232+
&::placeholder {
226233
color: color($crm-grid-palette, 'grays', 600);
234+
opacity: 1;
227235
}
236+
}
228237

229-
.igx-input-group__input {
230-
&::placeholder {
231-
color: color($crm-grid-palette, 'grays', 600);
232-
opacity: 1;
233-
}
234-
}
238+
.igx-input-group__textarea,
239+
.igx-input-group__input {
240+
color: color($crm-grid-palette, 'grays', 600);
241+
}
235242

236-
.igx-input-group__textarea,
237-
.igx-input-group__input {
243+
.igx-button--icon {
244+
&:focus,
245+
&:active {
238246
color: color($crm-grid-palette, 'grays', 600);
239247
}
240-
241-
.igx-button--icon {
242-
&:focus,
243-
&:active {
244-
color: color($crm-grid-palette, 'grays', 600);
245-
}
246-
}
247248
}
248249
}
250+
}
249251

250-
.igx-button--icon {
251-
&:focus,
252-
&:active {
253-
color: color($crm-grid-palette, 'primary', 100);
254-
background: transparent;
255-
}
252+
.igx-button--icon {
253+
&:focus,
254+
&:active {
255+
color: color($crm-grid-palette, 'primary', 100);
256+
background: transparent;
256257
}
258+
}
257259

258-
.igx-input-group__input {
259-
&::placeholder {
260-
color: white;
261-
opacity: 1;
262-
}
260+
.igx-input-group__input {
261+
&::placeholder {
262+
color: white;
263+
opacity: 1;
263264
}
264265
}
266+
}
265267

266-
.igx-input-group--search .igx-input-group__bundle {
267-
background-color: color($crm-grid-palette, 'primary', 800);
268+
.igx-input-group--search .igx-input-group__bundle {
269+
background-color: color($crm-grid-palette, 'primary', 800);
268270

269-
@include button($crm-grid-search-button);
270-
}
271+
@include button($crm-grid-search-button);
272+
}
273+
274+
// Not dark theme
275+
.grid__wrapper:not(.dark_grid) {
276+
@include grid($crm-grid-theme);
277+
@include grid-summary($summary-theme);
271278
}
272279

273280
.dark_grid {
274281
@include dark-theme($dark-material-palette);
275-
276-
.case-sensitive--active {
277-
background: color($dark-material-palette, 'secondary', 500);
278-
}
279-
280-
.sample-flex-container {
281-
.igx-input-group {
282-
.igx-input-group__bundle {
283-
background: color($crm-grid-palette, 'grays', 800);
284-
transition: background-color 250ms ease-in-out;
285-
}
286-
287-
&:hover,
288-
&:focus,
289-
&.igx-input-group--focused {
290-
.igx-input-group__bundle {
291-
background: color($crm-grid-palette, 'grays', 800, .7);
292-
}
293-
}
294-
}
282+
@include grid-toolbar($crm-grid-toolbar);
283+
.igx-grid-toolbar__actions {
284+
@include button($crm-grid-toolbar-button);
295285
}
296286
}
297287
}

0 commit comments

Comments
 (0)