Skip to content

Commit 38fd2db

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Merge from base.
2 parents 5242428 + d6de681 commit 38fd2db

File tree

14 files changed

+306
-169
lines changed

14 files changed

+306
-169
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.
@@ -126,6 +128,9 @@
126128
$header-border-style: null,
127129
$header-border-color: null,
128130
131+
$header-selected-background: null,
132+
$header-selected-text-color: null,
133+
129134
$sorted-header-icon-color: null,
130135
131136
$content-background: null,
@@ -230,7 +235,22 @@
230235

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

235255
@if not($ghost-header-icon-color) and $ghost-header-background {
236256
@if type-of($ghost-header-background) == 'color' {
@@ -250,6 +270,10 @@
250270
$header-text-color: text-contrast($header-background);
251271
}
252272

273+
@if not($header-selected-text-color) and $header-selected-background {
274+
$header-selected-text-color: text-contrast($header-selected-background);
275+
}
276+
253277
@if not($header-border-color) and $header-background {
254278
@if type-of($header-background) == 'color' {
255279
$header-border-color: rgba(text-contrast($header-background), .24);
@@ -442,6 +466,8 @@
442466

443467
header-background: $header-background,
444468
header-text-color: $header-text-color,
469+
header-selected-background: $header-selected-background,
470+
header-selected-text-color: $header-selected-text-color,
445471
header-border-width: $header-border-width,
446472
header-border-style: $header-border-style,
447473
header-border-color: $header-border-color,
@@ -979,6 +1005,15 @@
9791005
&:hover {
9801006
background: --var($theme, 'row-hover-background');
9811007
color: --var($theme, 'row-hover-text-color');
1008+
1009+
%grid-cell--column-selected {
1010+
background: --var($theme, 'row-selected-hover-background');
1011+
}
1012+
1013+
%grid-cell--cross-selected {
1014+
color: --var($theme, 'row-selected-text-color');
1015+
background: --var($theme, 'row-selected-cell-background');
1016+
}
9821017
}
9831018

9841019
&%igx-grid__tr--ghost {
@@ -1059,6 +1094,11 @@
10591094
&:hover {
10601095
background: --var($theme, 'row-selected-hover-background');
10611096
color: --var($theme, 'row-selected-text-color');
1097+
1098+
%grid-cell--column-selected {
1099+
color: --var($theme, 'row-selected-text-color');
1100+
background: --var($theme, 'row-selected-hover-background');
1101+
}
10621102
}
10631103

10641104
%igx-grid__tree-grouping-indicator {
@@ -1289,14 +1329,10 @@
12891329
%grid-cell--column-selected {
12901330
color: --var($theme, 'row-selected-text-color');
12911331
background: --var($theme, 'row-selected-background');
1292-
1293-
&:hover {
1294-
background: --var($theme, 'row-selected-hover-background');
1295-
color: --var($theme, 'row-selected-text-color');
1296-
}
12971332
}
12981333

12991334
%grid-cell--cross-selected {
1335+
color: --var($theme, 'row-selected-text-color');
13001336
background: --var($theme, 'row-selected-cell-background');
13011337
}
13021338

@@ -1472,14 +1508,14 @@
14721508
}
14731509

14741510
%igx-grid__th--selectable {
1475-
color: --var($theme, 'row-selected-text-color');
1476-
background: --var($theme, 'row-selected-background');
1511+
color: --var($theme, 'header-selected-text-color');
1512+
background: --var($theme, 'header-selected-background');
14771513
opacity: .7;
14781514
}
14791515

14801516
%igx-grid__th--selected {
1481-
color: --var($theme, 'row-selected-text-color');
1482-
background: --var($theme, 'row-selected-cell-background');
1517+
color: --var($theme, 'header-selected-text-color');
1518+
background: --var($theme, 'header-selected-background');
14831519
}
14841520

14851521
%igx-grid__th--sortable {
@@ -2208,8 +2244,8 @@
22082244
}
22092245

22102246
%igx-grid__filtering-cell--selected {
2211-
color: --var($theme, 'row-selected-text-color');
2212-
background: --var($theme, 'row-selected-cell-background');
2247+
color: --var($theme, 'header-selected-text-color');
2248+
background: --var($theme, 'header-selected-background');
22132249
}
22142250

22152251
%igx-grid__filtering-cell-indicator {

‎projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss‎

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,68 @@
5252
@mixin igx-splitter($theme) {
5353
@include igx-root-css-vars($theme);
5454
$splitter-color: --var($theme, 'bar-color');
55+
$hitbox-size: 4px;
56+
$debug-hitbox: false;
57+
$hitbox-debug-color: rgba(coral, .24);
58+
59+
%handle-area {
60+
position: absolute;
61+
content: '';
62+
width: 100%;
63+
height: $hitbox-size;
64+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
65+
}
66+
67+
%handle-area--vertical {
68+
width: $hitbox-size;
69+
height: 100%;
70+
}
5571

5672
%igx-splitter-bar {
73+
position: relative;
5774
display: flex;
5875
flex-grow: 1;
5976
justify-content: center;
6077
align-items: center;
6178
background: $splitter-color;
6279
border: 1px solid $splitter-color;
80+
cursor: row-resize;
81+
z-index: 99;
82+
opacity: .68;
83+
transition: opacity .15s $ease-out-quad !important;
84+
85+
&::before {
86+
@extend %handle-area;
87+
top: 100%;
88+
}
89+
90+
&::after {
91+
@extend %handle-area;
92+
bottom: 100%;
93+
}
94+
95+
&:hover {
96+
transition: all .25s ease-out;
97+
opacity: 1;
98+
}
6399
}
64100

65101
%igx-splitter-bar--vertical {
66102
flex-direction: column;
67103
height: 100%;
104+
cursor: col-resize;
105+
106+
&::before {
107+
@extend %handle-area--vertical;
108+
top: 0;
109+
right: 100%;
110+
}
111+
112+
&::after {
113+
@extend %handle-area--vertical;
114+
top: 0;
115+
left: 100%;
116+
}
68117
}
69118

70119
%igx-splitter-handle {
@@ -73,48 +122,85 @@
73122
}
74123

75124
%igx-splitter-handle--horizontal {
76-
cursor: row-resize;
77125
width: 25%;
78126
height: --var($theme, 'size');
79127
margin: 0 rem(48px);
80128
}
81129

82130
%igx-splitter-handle--vertical {
83-
cursor: col-resize;
84131
width: --var($theme, 'size');
85132
height: 25%;
86133
margin: rem(48px) 0;
87134
}
88135

136+
%igx-splitter-hitbox {
137+
position: absolute;
138+
content: '';
139+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
140+
}
141+
89142
%igx-splitter-expander {
90143
position: relative;
91144
width: 0;
92145
height: 0;
93146
border-right: --var($theme, 'size') solid transparent;
94147
border-left: --var($theme, 'size') solid transparent;
95148
cursor: pointer;
149+
z-index: 1;
96150
}
97151

98152
%igx-splitter-expander--start {
99153
border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color');
154+
155+
&::before {
156+
@extend %igx-splitter-hitbox;
157+
top: calc(100% - #{map-get($theme, 'size')});
158+
left: calc(100% - #{map-get($theme, 'size') * 2});
159+
width: #{map-get($theme, 'size') * 4};
160+
height: #{map-get($theme, 'size') * 3};
161+
}
100162
}
101163

102164
%igx-splitter-expander--end {
103165
border-bottom: unset;
104166
border-top: --var($theme, 'size') solid --var($theme, 'expander-color');
167+
168+
&::before {
169+
@extend %igx-splitter-hitbox;
170+
top: calc(100% - #{map-get($theme, 'size') * 2});
171+
left: calc(100% - #{map-get($theme, 'size') * 2});
172+
width: #{map-get($theme, 'size') * 4};
173+
height: #{map-get($theme, 'size') * 3};
174+
}
105175
}
106176

107177
%igx-splitter-expander--start-vertical {
108178
border-top: --var($theme, 'size') solid transparent;
109179
border-right: --var($theme, 'size') solid --var($theme, 'expander-color');
110180
border-bottom: --var($theme, 'size') solid transparent;
111181
border-left: unset;
182+
183+
&::before {
184+
@extend %igx-splitter-hitbox;
185+
top: calc(100% - #{map-get($theme, 'size') * 2});
186+
left: calc(100% - #{map-get($theme, 'size')});
187+
width: #{map-get($theme, 'size') * 3};
188+
height: #{map-get($theme, 'size') * 4};
189+
}
112190
}
113191

114192
%igx-splitter-expander--end-vertical {
115193
border-top: --var($theme, 'size') solid transparent;
116194
border-right: unset;
117195
border-bottom: --var($theme, 'size') solid transparent;
118196
border-left: --var($theme, 'size') solid --var($theme, 'expander-color');
197+
198+
&::before {
199+
@extend %igx-splitter-hitbox;
200+
left: calc(100% - #{map-get($theme, 'size') * 2});
201+
top: calc(100% - #{map-get($theme, 'size') * 2});
202+
height: #{map-get($theme, 'size') * 4};
203+
width: #{map-get($theme, 'size') * 3};
204+
}
119205
}
120206
}

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

Lines changed: 24 additions & 25 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
5453
$default-dark-palette: igx-palette(
5554
$primary: igx-color($default-palette, 'primary'),
5655
$secondary: igx-color($default-palette, 'secondary'),
57-
$surface: #222,
58-
$grays: #fff
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)
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+

0 commit comments

Comments
 (0)