Skip to content

Commit d3b7ec8

Browse files
simeonoffsimeonoff
authored
Merge branch '20.1.x' into sivanova/input-refinement
2 parents 20e0004 + f2d56e0 commit d3b7ec8

File tree

12 files changed

+123
-240
lines changed

12 files changed

+123
-240
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@types/source-map": "0.5.2",
7676
"express": "^5.1.0",
7777
"fflate": "^0.8.1",
78-
"igniteui-theming": "^21.0.2",
78+
"igniteui-theming": "^22.0.0",
7979
"igniteui-trial-watermark": "^3.1.0",
8080
"lodash-es": "^4.17.21",
8181
"rxjs": "^7.8.2",

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.1.0",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^21.0.2",
76+
"igniteui-theming": "^22.0.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,6 @@
22
@use '../../base' as *;
33
@use '../../themes/schemas' as *;
44

5-
////
6-
/// @group themes
7-
/// @access public
8-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
9-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
10-
////
11-
12-
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
13-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
14-
///
15-
/// @param {Color} $icon-color [null] - The color used for the actions icons.
16-
/// @param {Color} $background [null] - The color used for the action strip component content background.
17-
/// @param {Color} $actions-background [null] - The color used for the actions background.
18-
/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
19-
/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
20-
///
21-
/// @example scss Change the background and icon colors in action strip
22-
/// $my-action-strip-theme: action-strip-theme($background: black);
23-
/// // Pass the theme to the css-vars() mixin
24-
/// @include css-vars($my-action-strip-theme);
25-
@function action-strip-theme(
26-
$schema: $light-material-schema,
27-
28-
$background: null,
29-
$actions-background: null,
30-
$icon-color: null,
31-
$delete-action: null,
32-
$actions-border-radius: null,
33-
) {
34-
$name: 'igx-action-strip';
35-
$action-strip-schema: ();
36-
37-
@if map.has-key($schema, 'action-strip') {
38-
$action-strip-schema: map.get($schema, 'action-strip');
39-
} @else {
40-
$action-strip-schema: $schema;
41-
}
42-
43-
$theme: digest-schema($action-strip-schema);
44-
45-
@if not($icon-color) and $actions-background {
46-
$icon-color: adaptive-contrast(var(--actions-background));
47-
}
48-
49-
@if not($actions-border-radius) {
50-
$actions-border-radius: map.get($theme, 'actions-border-radius');
51-
}
52-
53-
@return extend($theme, (
54-
name: $name,
55-
background: $background,
56-
actions-background: $actions-background,
57-
icon-color: $icon-color,
58-
delete-action: $delete-action,
59-
actions-border-radius: $actions-border-radius,
60-
));
61-
}
62-
635
/// @deprecated Use the `css-vars` mixin instead.
646
/// @see {mixin} css-vars
657
/// @param {Map} $theme - The theme used to style the component.

‎projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,6 @@
247247
background: var-get($theme, 'indicator-dot-color');
248248

249249
@if $variant != 'indigo' {
250-
@include animation('scale-out-center' .15s $ease-out-quad forwards);
251250
inset: rem(1px);
252251
} @else {
253252
width: rem(8px);
@@ -261,11 +260,11 @@
261260
&:hover {
262261
border-color: var-get($theme, 'indicator-active-border-color');
263262

264-
@if $variant == 'indigo' {
265-
&::after {
266-
background: var-get($theme, 'indicator-hover-dot-color');
267-
}
263+
&::after {
264+
background: var-get($theme, 'indicator-hover-dot-color');
265+
}
268266

267+
@if $variant == 'indigo' {
269268
&::before {
270269
position: absolute;
271270
content: '';
@@ -290,7 +289,7 @@
290289
content: '';
291290
width: inherit;
292291
height: inherit;
293-
border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
292+
border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
294293
inset-inline-start: 0;
295294
top: 0;
296295
border-radius: border-radius(50%);
@@ -304,12 +303,14 @@
304303
}
305304
}
306305

307-
@if $variant == 'indigo' {
308-
&:hover {
309-
&::after {
310-
background: var-get($theme, 'indicator-active-hover-dot-color');
311-
}
306+
&:hover {
307+
border-color: var-get($theme, 'indicator-active-hover-dot-color');
312308

309+
&::after {
310+
background: var-get($theme, 'indicator-active-hover-dot-color');
311+
}
312+
313+
@if $variant == 'indigo' {
313314
&::before {
314315
border-color: var-get($theme, 'indicator-active-hover-dot-color');
315316
}

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* stylelint-disable max-nesting-depth */
12
@use 'sass:map';
23
@use 'sass:math';
34
@use '../../base' as *;
@@ -49,13 +50,6 @@
4950
'indigo': rem(8px),
5051
), $variant);
5152

52-
$mark-stroke: map.get((
53-
'material': 3,
54-
'fluent': 1,
55-
'bootstrap': 3,
56-
'indigo': 3,
57-
), $variant);
58-
5953
$mark-offset: map.get((
6054
'material': 0,
6155
'fluent': -1px,
@@ -64,7 +58,7 @@
6458
), $variant);
6559

6660
$mark-length: 24;
67-
$mark-x-factor: math.div($mark-stroke, $mark-length);
61+
$mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
6862

6963
$ripple-size: rem(40px);
7064
$ripple-radius: math.div($ripple-size, 2);
@@ -205,7 +199,7 @@
205199
inset: 0;
206200
stroke: var-get($theme, 'tick-color');
207201
stroke-linecap: square;
208-
stroke-width: $mark-stroke;
202+
stroke-width: var-get($theme, 'tick-width');
209203
stroke-dasharray: $mark-length;
210204
stroke-dashoffset: $mark-length;
211205
fill: none;
@@ -366,7 +360,7 @@
366360
%cbx-composite-mark--in {
367361
stroke-dashoffset: 41; /* length of path - adjacent line length */
368362
opacity: 1;
369-
transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
363+
transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
370364
}
371365

372366
%cbx-composite-mark--fluent {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,6 @@
33
@use '../../base' as *;
44
@use '../../themes/schemas' as *;
55

6-
/// @deprecated Use the `css-vars` mixin instead.
7-
/// @see {mixin} css-vars
8-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
9-
@function pivot-data-selector-theme(
10-
$schema: $light-material-schema,
11-
$background: null
12-
) {
13-
$name: 'igx-pivot-data-selector';
14-
$selector: '.igx-pivot-data-selector';
15-
$pivot-data-selector-schema: ();
16-
17-
@if map.has-key($schema, 'pivot-data-selector') {
18-
$pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
19-
} @else {
20-
$pivot-data-selector-schema: $schema;
21-
}
22-
23-
$theme: digest-schema($pivot-data-selector-schema);
24-
25-
@return extend($theme, (
26-
name: $name,
27-
selector: $selector,
28-
));
29-
}
30-
316
/// @deprecated Use the `css-vars` mixin instead.
327
/// @see {mixin} css-vars
338
/// @param {Map} $theme - The theme used to style the component.

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

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,88 +4,6 @@
44
@use '../../themes/schemas' as *;
55
@use 'igniteui-theming/sass/animations/easings' as *;
66

7-
////
8-
/// @group themes
9-
/// @access public
10-
////
11-
12-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
13-
/// @param {Color} $file-names-background [null] - The file names container background color.
14-
/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
15-
/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
16-
/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
17-
/// @param {Color} $file-names-foreground [null] - The file names color.
18-
/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
19-
/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
20-
/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
21-
/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
22-
/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
23-
/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
24-
/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
25-
/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
26-
/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
27-
/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
28-
/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
29-
/// @example scss Change the focused border and label colors
30-
/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
31-
/// // Pass the theme to the css-vars() mixin
32-
/// @include css-vars($my-file-input-theme);
33-
@function file-input-theme(
34-
$schema: $light-material-schema,
35-
$file-names-background: null,
36-
$file-names-background--focused: null,
37-
$file-names-background--filled: null,
38-
$file-names-background--disabled: null,
39-
$file-names-foreground: null,
40-
$file-names-foreground--focused: null,
41-
$file-names-foreground--filled: null,
42-
$file-names-foreground--disabled: null,
43-
44-
$file-selector-button-background: null,
45-
$file-selector-button-background--focused: null,
46-
$file-selector-button-background--filled: null,
47-
$file-selector-button-background--disabled: null,
48-
$file-selector-button-foreground: null,
49-
$file-selector-button-foreground--focused: null,
50-
$file-selector-button-foreground--filled: null,
51-
$file-selector-button-foreground--disabled: null,
52-
) {
53-
$name: 'igx-file-input';
54-
$file-input-schema: ();
55-
56-
@if map.has-key($schema, 'file-input') {
57-
$file-input-schema: map.get($schema, 'file-input');
58-
} @else {
59-
$file-input-schema: $schema;
60-
}
61-
62-
$theme: digest-schema($file-input-schema);
63-
64-
@return extend(
65-
$theme,
66-
(
67-
name: $name,
68-
file-names-background: $file-names-background,
69-
file-names-background--focused: $file-names-background--focused,
70-
file-names-background--filled: $file-names-background--filled,
71-
file-names-background--disabled: $file-names-background--disabled,
72-
file-names-foreground: $file-names-foreground,
73-
file-names-foreground--focused: $file-names-foreground--focused,
74-
file-names-foreground--filled: $file-names-foreground--filled,
75-
file-names-foreground--disabled: $file-names-foreground--disabled,
76-
77-
file-selector-button-background: $file-selector-button-background,
78-
file-selector-button-background--focused: $file-selector-button-background--focused,
79-
file-selector-button-background--filled: $file-selector-button-background--filled,
80-
file-selector-button-background--disabled: $file-selector-button-background--disabled,
81-
file-selector-button-foreground: $file-selector-button-foreground,
82-
file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
83-
file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
84-
file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
85-
),
86-
);
87-
}
88-
897
/// @deprecated Use the `css-vars` mixin instead.
908
/// @see {mixin} css-vars
919
/// @param {Map} $theme - The theme used to style the component.

0 commit comments

Comments
 (0)