Skip to content

Commit b1b9a73

Browse files
kdinevkdinev
authored
Merge branch 'master' into mdragnev/fix-12189
2 parents 6983c14 + 1facdca commit b1b9a73

File tree

4 files changed

+58
-46
lines changed

4 files changed

+58
-46
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'sass:map';
2+
@use 'sass:meta';
23
@use 'sass:color';
34
@use '../../base' as *;
45
@use '../../themes/schemas' as *;
@@ -114,11 +115,15 @@
114115
}
115116

116117
@if not($hover-background) and $background {
117-
$hover-background: color.scale($background, $lightness: 5%);
118+
@if meta.type-of($background) == 'color' {
119+
$hover-background: color.scale($background, $lightness: 5%);
120+
}
118121
}
119122

120123
@if not($hover-foreground) and $hover-background {
121-
$hover-foreground: text-contrast($hover-background);
124+
@if meta.type-of($hover-background) == 'color' {
125+
$hover-foreground: text-contrast($hover-background);
126+
}
122127
}
123128

124129
@if not($focus-background) and $background {

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

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -92,17 +92,6 @@
9292
));
9393
}
9494

95-
@mixin _offset-sibling-elements($offset) {
96-
+ igx-grid-header-row,
97-
+ igx-grid-group-by-area {
98-
margin-top: $offset;
99-
}
100-
101-
+ igx-grid-group-by-area {
102-
height: auto;
103-
}
104-
}
105-
10695
/// @param {Map} $theme - The theme used to style the component.
10796
@mixin grid-toolbar($theme) {
10897
@include css-vars($theme);
@@ -132,10 +121,6 @@
132121
);
133122

134123
%igx-grid-toolbar {
135-
$height: map.get($grid-toolbar-height, 'comfortable');
136-
@include _offset-sibling-elements($height);
137-
138-
position: absolute;
139124
width: 100%;
140125
display: flex;
141126
align-items: center;
@@ -151,7 +136,7 @@
151136

152137
background: var-get($theme, 'background-color');
153138
height: auto;
154-
min-height: $height;
139+
min-height: map.get($grid-toolbar-height, 'comfortable');
155140
padding-block: 0;
156141
padding-inline: map.get($grid-toolbar-padding, 'comfortable');
157142

@@ -182,10 +167,7 @@
182167
}
183168

184169
%igx-grid-toolbar--cosy {
185-
$height: map.get($grid-toolbar-height, 'cosy');
186-
@include _offset-sibling-elements($height);
187-
188-
min-height: $height;
170+
min-height: map.get($grid-toolbar-height, 'cosy');
189171
padding-inline: map.get($grid-toolbar-padding, 'cosy');
190172

191173
[igxButton] {
@@ -194,10 +176,7 @@
194176
}
195177

196178
%igx-grid-toolbar--compact {
197-
$height: map.get($grid-toolbar-height, 'compact');
198-
@include _offset-sibling-elements($height);
199-
200-
min-height: $height;
179+
min-height: map.get($grid-toolbar-height, 'compact');
201180
padding-inline: map.get($grid-toolbar-padding, 'compact');
202181

203182
[igxButton] {

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

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -393,10 +393,12 @@
393393
}
394394

395395
@if not($filtering-header-background) and $header-background {
396-
@if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {
397-
$filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
398-
} @else {
399-
$filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
396+
@if meta.type-of($header-background) == 'color' {
397+
@if luminance($header-background) < .5 {
398+
$filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
399+
} @else {
400+
$filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
401+
}
400402
}
401403
}
402404

@@ -405,10 +407,12 @@
405407
}
406408

407409
@if not($filtering-row-background) and $header-background {
408-
@if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {
409-
$filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
410-
} @else {
411-
$filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
410+
@if meta.type-of($header-background) == 'color' {
411+
@if luminance($header-background) < .5 {
412+
$filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
413+
} @else {
414+
$filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
415+
}
412416
}
413417
}
414418

@@ -696,7 +700,7 @@
696700
position: relative;
697701
display: grid;
698702
grid-template-rows: auto auto auto 1fr auto auto;
699-
grid-template-columns: 1fr;
703+
grid-template-columns: 100%;
700704
overflow: hidden;
701705
box-shadow: $grid-shadow;
702706

@@ -1476,17 +1480,26 @@
14761480
}
14771481

14781482
%igx-grid__td--editing {
1483+
$editing-outline-width: rem(2px);
14791484
background: var-get($theme, 'cell-editing-background') !important;
1480-
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'edit-mode-color');
1485+
box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
14811486
padding: 0 !important;
14821487

14831488
// Have a more stable visual editing experience
14841489
igx-input-group,
14851490
igx-select,
14861491
igx-date-picker,
14871492
igx-time-picker {
1488-
width: 100%;
1489-
height: 100%;
1493+
height: calc(100% - (#{$editing-outline-width} * 2));
1494+
width: calc(100% - (#{$editing-outline-width} * 2));
1495+
margin-inline-start: $editing-outline-width;
1496+
overflow: hidden;
1497+
1498+
igx-input-group {
1499+
width: calc(100% - #{$editing-outline-width}) !important;
1500+
margin-inline-start: 0;
1501+
height: 100% !important;
1502+
}
14901503
}
14911504

14921505
igx-input-group {
@@ -1495,11 +1508,17 @@
14951508
}
14961509

14971510
.igx-input-group__bundle {
1511+
height: 100% !important;
1512+
min-height: 100% !important;
14981513
border: none !important;
14991514

15001515
&::before {
15011516
content: none !important;
15021517
}
1518+
1519+
&::after {
1520+
display: none;
1521+
}
15031522
}
15041523

15051524
&.igx-grid__td--invalid {
@@ -1509,6 +1528,7 @@
15091528

15101529
igx-prefix,
15111530
igx-suffix {
1531+
border-radius: 0 !important;
15121532
padding-top: 0 !important;
15131533
padding-bottom: 0 !important;
15141534
}
@@ -1535,6 +1555,10 @@
15351555
font-size: $grid-cell-fs !important;
15361556
line-height: $grid-cell-lh !important;
15371557
}
1558+
1559+
&%grid-cell-number {
1560+
justify-content: flex-start !important;
1561+
}
15381562
}
15391563

15401564
%grid-cell--pinned {

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,22 @@
100100
}
101101

102102
@if not($item-background-hover) and $item-background {
103-
@if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 {
104-
$item-background-hover: color.scale($item-background, $lightness: 8%);
105-
} @else {
106-
$item-background-hover: color.scale($item-background, $lightness: -8%);
103+
@if meta.type-of($item-background) == 'color' {
104+
@if luminance($item-background) < .5 {
105+
$item-background-hover: color.scale($item-background, $lightness: 8%);
106+
} @else {
107+
$item-background-hover: color.scale($item-background, $lightness: -8%);
108+
}
107109
}
108110
}
109111

110112
@if not($item-background-active) and $item-background {
111-
@if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 {
112-
$item-background-active: color.scale($item-background, $lightness: 8%);
113-
} @else {
114-
$item-background-active: color.scale($item-background, $lightness: -8%);
113+
@if meta.type-of($item-background) == 'color' {
114+
@if luminance($item-background) < .5 {
115+
$item-background-active: color.scale($item-background, $lightness: 8%);
116+
} @else {
117+
$item-background-active: color.scale($item-background, $lightness: -8%);
118+
}
115119
}
116120
}
117121

0 commit comments

Comments
 (0)