Skip to content

Commit 6a8db64

Browse files
desig9steindesig9stein
authored
Merge branch '20.1.x' into mpopov/refactoring/calendar
2 parents 2ebd9b7 + 8adf257 commit 6a8db64

File tree

20 files changed

+378
-186
lines changed

20 files changed

+378
-186
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -353,12 +353,12 @@
353353
&:active {
354354
@extend %item-overlay;
355355

356-
color: var-get($theme, 'item-selected-text-color');
356+
color: var-get($theme, 'item-selected-hover-text-color');
357357
background: var-get($theme, 'item-selected-background');
358358
border-color: var-get($theme, 'item-selected-border-color');
359359

360360
igx-icon {
361-
color: var-get($theme, 'item-selected-icon-color');
361+
color: var-get($theme, 'item-selected-hover-icon-color');
362362
}
363363

364364
&::before {

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,11 @@
407407
border-color: var-get($flat-theme, 'focus-visible-border-color');
408408

409409
igx-icon {
410-
color: var-get($flat-theme, 'icon-color');
410+
@if $variant == 'material' {
411+
color: var-get($flat-theme, 'icon-color-hover');
412+
} @else {
413+
color: var-get($flat-theme, 'icon-color');
414+
}
411415
}
412416

413417
&:hover {
@@ -547,7 +551,16 @@
547551
&:active {
548552
background: var-get($outlined-theme, 'focus-background');
549553
color: var-get($outlined-theme, 'focus-foreground');
550-
border-color: var-get($outlined-theme, 'active-border-color');
554+
555+
@if $variant == 'material' {
556+
border-color: var-get($outlined-theme, 'focus-border-color');
557+
558+
igx-icon {
559+
color: var-get($outlined-theme, 'focus-foreground');
560+
}
561+
} @else {
562+
border-color: var-get($outlined-theme, 'active-border-color');
563+
}
551564

552565
@if $variant == 'indigo' {
553566
igx-icon {

‎projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,8 +276,8 @@
276276

277277
.igx-input-group--disabled {
278278
%igx-combo__toggle-button {
279-
background: var-get($theme, 'toggle-button-background-disabled') !important;
280-
color: var-get($theme, 'toggle-button-foreground-disabled') !important;
279+
background: var-get($theme, 'toggle-button-background-disabled');
280+
color: var-get($theme, 'toggle-button-foreground-disabled');
281281
}
282282

283283
%igx-combo__clear-button {

‎projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@
66
/// @param {Map} $theme - The theme used to style the component.
77
@mixin date-range-picker($theme) {
88
@include css-vars($theme);
9+
$variant: map.get($theme, '_meta', 'theme');
910

1011
%igx-date-range-picker {
12+
@include sizable();
13+
--input-group-size: #{map.get($theme, 'size')};
14+
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
1115
display: flex;
1216

1317
> igx-icon {
@@ -32,6 +36,8 @@
3236
igx-date-range-end,
3337
%igx-date-range-picker__start,
3438
%igx-date-range-picker__end {
39+
--size: var(--input-group-size) !important;
40+
3541
flex: 1 0 0%;
3642
}
3743

@@ -40,6 +46,21 @@
4046
align-items: center;
4147
color: var-get($theme, 'label-color');
4248
margin: 0 rem(8px);
49+
height: var(--input-group-size);
50+
51+
@if $variant != 'material' {
52+
align-self: flex-end;
53+
54+
&.input-has-hint {
55+
align-self: center;
56+
57+
&:not(.input-has-label) {
58+
align-self: flex-start;
59+
}
60+
}
61+
} @else {
62+
align-self: flex-start;
63+
}
4364
}
4465

4566
%igx-date-range-picker-buttons {

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

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,12 @@
292292
box-shadow: none !important;
293293
border: none !important;
294294
}
295+
296+
.igx-input-group--disabled,
297+
.igx-input-group--disabled igx-prefix,
298+
.igx-input-group--disabled igx-suffix {
299+
color: var-get($theme, 'cell-disabled-color');
300+
}
295301
}
296302

297303
@if $variant != 'indigo' {
@@ -888,7 +894,7 @@
888894
@include css-vars((
889895
name: 'igx-grid-row',
890896
row-ghost-background: map.get($theme, 'row-ghost-background'),
891-
row-drag-color: map.get($theme, 'row-drago-color')
897+
row-drag-color: map.get($theme, 'row-drag-color')
892898
));
893899
}
894900
}
@@ -1000,7 +1006,11 @@
10001006
}
10011007

10021008
%igx-icon--error {
1003-
color: color($color: 'gray', $variant: 500);
1009+
@if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
1010+
color: color($color: 'gray', $variant: 600);
1011+
} @else {
1012+
color: color($color: 'gray', $variant: 500);
1013+
}
10041014
}
10051015
}
10061016

@@ -1192,6 +1202,21 @@
11921202
align-items: center;
11931203
outline-style: none;
11941204

1205+
@extend %cell-input-overrides;
1206+
1207+
> igx-input-group,
1208+
igx-combo,
1209+
igx-simple-combo,
1210+
igx-select,
1211+
igx-date-picker,
1212+
igx-time-picker {
1213+
height: auto;
1214+
}
1215+
1216+
igx-input-group {
1217+
background: transparent;
1218+
}
1219+
11951220
@if $variant != 'indigo' {
11961221
padding-inline: pad-inline(
11971222
map.get($grid-cell-padding-inline, 'compact'),
@@ -1407,8 +1432,6 @@
14071432
&%grid-cell-number {
14081433
justify-content: flex-start !important;
14091434
}
1410-
1411-
@extend %cell-input-overrides;
14121435
}
14131436

14141437
%grid-cell--pinned {

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -754,12 +754,6 @@
754754
@include mx(fluent, search, focused) {
755755
@extend %igx-input-group-fluent-search--focused !optional;
756756
}
757-
758-
@include mx(fluent, search, disabled) {
759-
@include e(bundle) {
760-
@extend %form-group-bundle-search--disabled !optional;
761-
}
762-
}
763757
// FLUENT END
764758

765759
// ============================== //

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,7 @@
9696
display: inline-flex;
9797
width: max-content;
9898
align-items: center;
99-
100-
@if $indigo-theme {
101-
min-height: calc(100% - #{rem(1px)}) !important;
102-
} @else {
103-
min-height: 100% !important;
104-
}
105-
99+
min-height: 100% !important;
106100
transition: color $transition-timing, background $transition-timing;
107101

108102
&:not(:empty) {
@@ -155,12 +149,30 @@
155149
[igxPrefix] {
156150
@extend %form-group-prefix;
157151
outline-style: none;
152+
153+
&:first-child {
154+
@if $variant == 'fluent' {
155+
border-start-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
156+
border-end-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
157+
} @else if $variant == "indigo" {
158+
border-start-start-radius: var-get($theme, 'box-border-radius');
159+
}
160+
}
158161
}
159162

160163
igx-suffix,
161164
[igxSuffix] {
162165
@extend %form-group-suffix;
163166
outline-style: none;
167+
168+
&:last-child {
169+
@if $variant == 'fluent' {
170+
border-start-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
171+
border-end-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
172+
} @else if $variant == "indigo" {
173+
border-start-end-radius: var-get($theme, 'box-border-radius');
174+
}
175+
}
164176
}
165177

166178
input,
@@ -364,7 +376,7 @@
364376
%form-group-display--disabled {
365377
pointer-events: none;
366378
user-select: none;
367-
color: var-get($theme, 'disabled-text-color') !important;
379+
color: var-get($theme, 'disabled-text-color');
368380

369381
igx-prefix,
370382
[igxPrefix] {
@@ -680,7 +692,7 @@
680692
%bootstrap-file-warning,
681693
%bootstrap-file-invalid {
682694
%form-group-bundle {
683-
border-radius: var-get($theme, 'box-border-radius');
695+
border-radius: var-get($theme, 'border-border-radius');
684696
transition: box-shadow .15s ease-out, border .15s ease-out;
685697

686698
&:hover {
@@ -793,7 +805,7 @@
793805

794806
.igx-input-group--bootstrap:not(.igx-input-group--prefixed) {
795807
.igx-input-group__upload-button {
796-
border-radius: var-get($theme, 'box-border-radius') 0 0 var-get($theme, 'box-border-radius');
808+
border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');
797809
}
798810

799811
.igx-input-group__file-input {
@@ -1025,9 +1037,9 @@
10251037
%form-group-bundle--search {
10261038
background: var-get($theme, 'search-background');
10271039
box-shadow: var-get($theme, 'search-resting-elevation');
1040+
border-radius: var-get($theme, 'search-border-radius');
10281041

10291042
@if $variant != 'bootstrap' {
1030-
border-radius: var-get($theme, 'search-border-radius');
10311043
overflow: hidden;
10321044
}
10331045

@@ -1433,7 +1445,7 @@
14331445
%form-group-input--disabled {
14341446
cursor: default;
14351447

1436-
color: var-get($theme, 'disabled-text-color') !important;
1448+
color: var-get($theme, 'disabled-text-color');
14371449

14381450
&::placeholder {
14391451
color: var-get($theme, 'disabled-placeholder-color');
@@ -1483,7 +1495,7 @@
14831495
}
14841496

14851497
%form-group-textarea--disabled {
1486-
color: var-get($theme, 'disabled-text-color') !important;
1498+
color: var-get($theme, 'disabled-text-color');
14871499
cursor: default;
14881500

14891501
&::placeholder {
@@ -1500,7 +1512,7 @@
15001512
align-self: end;
15011513
transform: scaleX(0);
15021514
transform-origin: center;
1503-
background: var-get($theme, 'focused-secondary-color');
1515+
background: var-get($theme, 'focused-bottom-line-color');
15041516
z-index: 1;
15051517
}
15061518
}
@@ -2053,15 +2065,15 @@
20532065
}
20542066

20552067
%fluent-label-success {
2056-
color: var-get($theme, 'idle-text-color');
2068+
color: var-get($theme, 'idle-secondary-color');
20572069
}
20582070

20592071
%fluent-label-error {
2060-
color: var-get($theme, 'idle-text-color');
2072+
color: var-get($theme, 'idle-secondary-color');
20612073
}
20622074

20632075
%fluent-label-disabled {
2064-
color: var-get($theme, 'disabled-text-color') !important;
2076+
color: var-get($theme, 'disabled-text-color');
20652077
}
20662078

20672079
%fluent-label-filled {
@@ -2087,23 +2099,6 @@
20872099
}
20882100
}
20892101

2090-
.igx-input-group--fluent [igxPrefix],
2091-
.igx-input-group--fluent igx-prefix {
2092-
&:first-child {
2093-
[igxButton]::after,
2094-
button::after {
2095-
border: {
2096-
start: {
2097-
start-radius: var-get($theme, 'border-border-radius');
2098-
};
2099-
end: {
2100-
start-radius: var-get($theme, 'border-border-radius');
2101-
};
2102-
}
2103-
}
2104-
}
2105-
}
2106-
21072102
%form-group-prefix-fluent,
21082103
%form-group-suffix-fluent,
21092104
%form-group-prefix-fluent-search,
@@ -2233,10 +2228,10 @@
22332228
end-width: rem(1px);
22342229
};
22352230
start: {
2236-
start-radius: var-get($theme, 'box-border-radius');
2231+
start-radius: var-get($theme, 'border-border-radius');
22372232
};
22382233
end: {
2239-
start-radius: var-get($theme, 'box-border-radius');
2234+
start-radius: var-get($theme, 'border-border-radius');
22402235
};
22412236
}
22422237
}
@@ -2253,10 +2248,10 @@
22532248
end-width: rem(1px);
22542249
};
22552250
start: {
2256-
end-radius: var-get($theme, 'box-border-radius');
2251+
end-radius: var-get($theme, 'border-border-radius');
22572252
};
22582253
end: {
2259-
end-radius: var-get($theme, 'box-border-radius');
2254+
end-radius: var-get($theme, 'border-border-radius');
22602255
};
22612256
}
22622257
}
@@ -2323,7 +2318,7 @@
23232318
map.get($bootstrap-inline-padding, 'cosy'),
23242319
map.get($bootstrap-inline-padding, 'comfortable')
23252320
);
2326-
border-radius: var-get($theme, 'box-border-radius');
2321+
border-radius: var-get($theme, 'border-border-radius');
23272322

23282323
}
23292324

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,8 @@
229229
display: none;
230230
}
231231

232-
> * {
232+
> *,
233+
[class^='igx'] {
233234
--component-size: #{if($variant == 'indigo', 2, var(--list-size))};
234235
}
235236

‎projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@
133133
}
134134

135135
&:hover {
136+
@include e(label) {
137+
@extend %radio-label--invalid--hover !optional;
138+
}
139+
136140
@include e(ripple) {
137141
@extend %radio-ripple--hover !optional;
138142
@extend %radio-ripple--hover-invalid !optional;

0 commit comments

Comments
 (0)