Skip to content

Commit 5ab9919

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into skrastev/hgrid-row-pinning
2 parents 368bff3 + ba9b15b commit 5ab9919

File tree

11 files changed

+207
-159
lines changed

11 files changed

+207
-159
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@
177177
&:hover,
178178
&:focus {
179179
@extend %cal-value--month-hover !optional;
180+
@extend %cal-value--month-current !optional;
180181
}
181182
}
182183

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -743,7 +743,7 @@
743743
}
744744

745745
%cal-value--month-current {
746-
color: --var($theme, 'month-current-text-color') ;
746+
color: --var($theme, 'month-current-text-color');
747747
}
748748

749749
%cal-value--inactive {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
/// @param {String} $header-border-width [null] - The border width used for header borders.
1818
/// @param {String} $header-border-style [null] - The border style used for header borders.
1919
/// @param {Color} $header-border-color [null] - The color used for header borders.
20+
/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).
21+
/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).
2022
///
2123
/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
2224
/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
@@ -127,6 +129,9 @@
127129
$header-border-style: null,
128130
$header-border-color: null,
129131
132+
$header-selected-background: null,
133+
$header-selected-text-color: null,
134+
130135
$sorted-header-icon-color: null,
131136
132137
$content-background: null,
@@ -232,7 +237,22 @@
232237

233238
$tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
234239
$tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
235-
$row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);
240+
241+
$rs-bg: if(
242+
$row-selected-background,
243+
$row-selected-background,
244+
map-get($theme, 'row-selected-background')
245+
);
246+
247+
$row-selected-cell-background: null;
248+
249+
@if type-of($rs-bg) == 'color' {
250+
@if luminance($rs-bg) < .5 {
251+
$row-selected-cell-background: lighten-color($rs-bg, 8%);
252+
} @else {
253+
$row-selected-cell-background: darken-color($rs-bg, 8%);
254+
}
255+
}
236256

237257
@if not($ghost-header-icon-color) and $ghost-header-background {
238258
@if type-of($ghost-header-background) == 'color' {
@@ -252,6 +272,10 @@
252272
$header-text-color: text-contrast($header-background);
253273
}
254274

275+
@if not($header-selected-text-color) and $header-selected-background {
276+
$header-selected-text-color: text-contrast($header-selected-background);
277+
}
278+
255279
@if not($header-border-color) and $header-background {
256280
@if type-of($header-background) == 'color' {
257281
$header-border-color: rgba(text-contrast($header-background), .24);
@@ -444,6 +468,8 @@
444468

445469
header-background: $header-background,
446470
header-text-color: $header-text-color,
471+
header-selected-background: $header-selected-background,
472+
header-selected-text-color: $header-selected-text-color,
447473
header-border-width: $header-border-width,
448474
header-border-style: $header-border-style,
449475
header-border-color: $header-border-color,
@@ -983,6 +1009,15 @@
9831009
&:hover {
9841010
background: --var($theme, 'row-hover-background');
9851011
color: --var($theme, 'row-hover-text-color');
1012+
1013+
%grid-cell--column-selected {
1014+
background: --var($theme, 'row-selected-hover-background');
1015+
}
1016+
1017+
%grid-cell--cross-selected {
1018+
color: --var($theme, 'row-selected-text-color');
1019+
background: --var($theme, 'row-selected-cell-background');
1020+
}
9861021
}
9871022

9881023
&%igx-grid__tr--ghost {
@@ -1063,6 +1098,11 @@
10631098
&:hover {
10641099
background: --var($theme, 'row-selected-hover-background');
10651100
color: --var($theme, 'row-selected-text-color');
1101+
1102+
%grid-cell--column-selected {
1103+
color: --var($theme, 'row-selected-text-color');
1104+
background: --var($theme, 'row-selected-hover-background');
1105+
}
10661106
}
10671107

10681108
%igx-grid__tree-grouping-indicator {
@@ -1293,14 +1333,10 @@
12931333
%grid-cell--column-selected {
12941334
color: --var($theme, 'row-selected-text-color');
12951335
background: --var($theme, 'row-selected-background');
1296-
1297-
&:hover {
1298-
background: --var($theme, 'row-selected-hover-background');
1299-
color: --var($theme, 'row-selected-text-color');
1300-
}
13011336
}
13021337

13031338
%grid-cell--cross-selected {
1339+
color: --var($theme, 'row-selected-text-color');
13041340
background: --var($theme, 'row-selected-cell-background');
13051341
}
13061342

@@ -1485,14 +1521,14 @@
14851521
}
14861522

14871523
%igx-grid__th--selectable {
1488-
color: --var($theme, 'row-selected-text-color');
1489-
background: --var($theme, 'row-selected-background');
1524+
color: --var($theme, 'header-selected-text-color');
1525+
background: --var($theme, 'header-selected-background');
14901526
opacity: .7;
14911527
}
14921528

14931529
%igx-grid__th--selected {
1494-
color: --var($theme, 'row-selected-text-color');
1495-
background: --var($theme, 'row-selected-cell-background');
1530+
color: --var($theme, 'header-selected-text-color');
1531+
background: --var($theme, 'header-selected-background');
14961532
}
14971533

14981534
%igx-grid__th--sortable {
@@ -2221,8 +2257,8 @@
22212257
}
22222258

22232259
%igx-grid__filtering-cell--selected {
2224-
color: --var($theme, 'row-selected-text-color');
2225-
background: --var($theme, 'row-selected-cell-background');
2260+
color: --var($theme, 'header-selected-text-color');
2261+
background: --var($theme, 'header-selected-background');
22262262
}
22272263

22282264
%igx-grid__filtering-cell-indicator {

‎projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -47,37 +47,14 @@
4747
/// @requires igx-palette
4848
$default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
4949

50-
5150
/// Default dark palette
5251
/// @type {Map}
5352
/// @group palettes
54-
$default-dark-palette: extend(
55-
$default-palette,
56-
(
57-
surface: (500: #222)
58-
)
59-
) !default;
60-
61-
/// Global Overlay Color
62-
/// @group palettes
63-
/// @type Color
64-
/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
65-
/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
66-
/// @requires igx-color
67-
$overlay-color: igx-color($default-palette, 'grays') !default;
68-
69-
/// Default elevations. Work in progress.
70-
/// Subject to change.
71-
/// @group elevations
72-
/// @type Map
73-
/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
74-
/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
75-
/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
76-
/// @requires igx-elevations
77-
$elevations: igx-elevations(
78-
rgba(0, 0, 0, .26),
79-
rgba(0, 0, 0, .12),
80-
rgba(0, 0, 0, .08)
53+
$default-dark-palette: igx-palette(
54+
$primary: igx-color($default-palette, 'primary'),
55+
$secondary: igx-color($default-palette, 'secondary'),
56+
$grays: #fff,
57+
$surface: #222
8158
) !default;
8259

8360
/// Green palette
@@ -191,3 +168,25 @@ $bootstrap-dark-palette: igx-palette(
191168
$grays: #fff
192169
) !default;
193170

171+
/// Global Overlay Color
172+
/// @group palettes
173+
/// @type Color
174+
/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
175+
/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
176+
/// @requires igx-color
177+
$overlay-color: igx-color($default-palette, 'grays') !default;
178+
179+
/// Default elevations. Work in progress.
180+
/// Subject to change.
181+
/// @group elevations
182+
/// @type Map
183+
/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
184+
/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
185+
/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
186+
/// @requires igx-elevations
187+
$elevations: igx-elevations(
188+
rgba(0, 0, 0, .26),
189+
rgba(0, 0, 0, .12),
190+
rgba(0, 0, 0, .08)
191+
) !default;
192+

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

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../light/grid';
2+
23
////
34
/// @group schemas
45
/// @access private
@@ -8,13 +9,15 @@
89
/// Generates the base dark grid schema.
910
/// @type {Map}
1011
/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #222] - The table header background color.
12+
/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%] - The table header background color when selected (ex. column selection).
13+
/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%, text-contrast: ()] - The table header text color when selected (ex. column selection).
1114
/// @prop {Color} content-background [#222] - The table body background color.
1215
/// @prop {Color} row-odd-background [#222] - The background color of odd rows.
1316
/// @prop {Color} row-even-background [#222] - The background color of even rows.
1417
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
1518
/// @prop {Color} row-hover-text-color [#fff] - The hover row text color.
1619
/// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
17-
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover.
20+
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222, lighten-color: 5%] - The selected row background color on hover.
1821
/// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
1922
/// @prop {Color} ghost-header-background [#222] - The dragged header background color.
2023
/// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
@@ -37,6 +40,21 @@ $_base-dark-grid: (
3740
hexrgba: #222
3841
),
3942

43+
header-selected-background: (
44+
igx-color: ('secondary', 500),
45+
rgba: .24,
46+
hexrgba: #222,
47+
lighten-color: 8%
48+
),
49+
50+
header-selected-text-color: (
51+
igx-color: ('secondary', 500),
52+
rgba: .24,
53+
hexrgba: #222,
54+
lighten-color: 8%,
55+
text-contrast: ()
56+
),
57+
4058
content-background: #222,
4159

4260
row-odd-background: #222,
@@ -59,7 +77,8 @@ $_base-dark-grid: (
5977
row-selected-hover-background: (
6078
igx-color: ('secondary', 'A700'),
6179
rgba: .24,
62-
hexrgba: #222
80+
hexrgba: #222,
81+
lighten-color: 5%
6382
),
6483

6584
row-selected-text-color: #fff,
@@ -135,6 +154,8 @@ $_dark-grid: extend($_light-grid, $_base-dark-grid);
135154

136155

137156
/// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid.
157+
/// @prop {Map} header-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The table header background color when selected (ex. column selection).
158+
/// @prop {Map} header-selected-text-color [igx-color: ('grays', 200), hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
138159
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
139160
/// @prop {Map} row-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The selected row background color.
140161
/// @prop {Map} row-selected-hover-background [igx-color: ('grays', '300'), hexrgba: #222] - The selected row background color on hover.
@@ -145,6 +166,17 @@ $_dark-fluent-grid: extend(
145166
$_fluent-grid,
146167
$_base-dark-grid,
147168
(
169+
header-selected-background: (
170+
igx-color: ('grays', 200),
171+
hexrgba: #222
172+
),
173+
174+
header-selected-text-color: (
175+
igx-color: ('grays', 200),
176+
hexrgba: #222,
177+
text-contrast: ()
178+
),
179+
148180
row-hover-background: (
149181
igx-color: ('grays', 100),
150182
hexrgba: #222
@@ -168,6 +200,8 @@ $_dark-fluent-grid: extend(
168200
///
169201
/// @prop {Color} header-background [#222] - The table header background color.
170202
/// @prop {Color} header-text-color [#fff] - The table header text color.
203+
/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The table header background color when selected (ex. column selection).
204+
/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
171205
///
172206
/// @requires {function} extend
173207
/// @requires $_bootstrap-grid
@@ -178,5 +212,18 @@ $_dark-bootstrap-grid: extend(
178212
(
179213
header-background: #222,
180214
header-text-color: #fff,
215+
216+
header-selected-background: (
217+
igx-color: ('secondary', 500),
218+
rgba: .24,
219+
hexrgba: #222,
220+
),
221+
222+
header-selected-text-color: (
223+
igx-color: ('secondary', 500),
224+
rgba: .24,
225+
hexrgba: #222,
226+
text-contrast: ()
227+
),
181228
)
182229
);

0 commit comments

Comments
 (0)