Skip to content

Commit 04f3493

Browse files
fix(*): styling discrepancies (#16604)
* fix(*): styling discrepancies * fix(slider): remove flex-grow --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent f63317f commit 04f3493

File tree

23 files changed

+117
-141
lines changed

23 files changed

+117
-141
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
@@ -77,7 +77,7 @@
7777
"@types/source-map": "0.5.2",
7878
"express": "^5.1.0",
7979
"fflate": "^0.8.1",
80-
"igniteui-theming": "^23.2.0",
80+
"igniteui-theming": "^24.0.1",
8181
"igniteui-trial-watermark": "^3.1.0",
8282
"lodash-es": "^4.17.21",
8383
"rxjs": "^7.8.2",

projects/igniteui-angular/src/lib/card/themes/_base.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ $theme: $material;
9090
@include b(igx-card-header) {
9191
display: flex;
9292
flex-flow: row wrap;
93-
align-content: flex-start;
93+
align-items: center;
9494
width: 100%;
95-
padding: rem(16px, 16px);
95+
padding: rem(16px);
9696
color: var-get($theme, 'header-text-color');
9797

9898
&:empty {
@@ -101,7 +101,6 @@ $theme: $material;
101101
}
102102

103103
@include e(thumbnail) {
104-
align-self: flex-start;
105104
margin-inline-end: rem(16px);
106105

107106
&:empty {
@@ -155,7 +154,7 @@ $theme: $material;
155154
flex-flow: row wrap;
156155
justify-content: space-between;
157156
align-items: center;
158-
padding: rem(8px);
157+
padding: rem(8px) rem(16px);
159158

160159
&:first-child {
161160
margin-block-end: auto;

projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
@include themed-block(igx-card-content, bootstrap) {
2626
padding-block: rem(16px) rem(24px);
27-
padding-inline: rem(24px);
27+
padding-inline: rem(16px);
2828

2929
> *:not(igx-icon) {
3030
@include type-style(body-1) {

projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
@use 'styles/themes/standalone' as *;
44

55
@include themed-block(igx-card-header, fluent) {
6-
padding: rem(16px) rem(8px);
7-
86
@include e(title) {
97
@include type-style(subtitle-1) {
108
margin: 0;

projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,13 @@ $_theme: $indigo;
3131
}
3232
}
3333

34-
@include e(label) {
35-
@include type-style(body-2);
36-
transition: color 0.2s $ease-out-quad;
37-
transition-delay: var(--_transition-delay);
38-
}
39-
4034
@include e(label) {
4135
@include type-style(body-2) {
4236
margin-block: 0;
4337
}
38+
39+
transition: color 0.2s $ease-out-quad;
40+
transition-delay: var(--_transition-delay);
4441
}
4542

4643
@include m(checked) {

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,18 @@
5454
// subtitle: 'body-1',
5555
// content: 'body-1',
5656
// ));
57-
@include checkbox-typography($categories: (
58-
label: 'body-1',
59-
));
57+
// @include checkbox-typography($categories: (
58+
// label: 'body-1',
59+
// ));
6060
// @include chip-typography();
6161
// @include column-actions-typography();
6262
// @include date-range-typography($categories: (
6363
// label: 'body-1',
6464
// ));
65-
@include dialog-typography($categories: (
66-
title: 'h5',
67-
content: 'body-1'
68-
));
65+
// @include dialog-typography($categories: (
66+
// title: 'h5',
67+
// content: 'body-1'
68+
// ));
6969
@include dock-manager-typography();
7070
// @include drop-down-typography($categories: (
7171
// header: 'overline',
@@ -79,35 +79,35 @@
7979
// ));
8080
@include excel-filtering-typography();
8181
@include icon-button-typography();
82-
//@include input-group-typography($categories: (
82+
// @include input-group-typography($categories: (
8383
// helper-text: 'body-2',
8484
// input-text: 'body-1'
85-
//));
85+
// ));
8686
@include file-input-typography($categories: (
8787
file-text: 'body-1'
8888
));
89-
@include linear-bar-typography();
89+
// @include linear-bar-typography();
9090
// @include list-typography($categories: (
9191
// item: 'body-2',
9292
// title: 'body-1',
9393
// subtitle: 'body-2',
9494
// header: 'overline',
9595
// ));
96-
@include navbar-typography($categories: (
97-
title: 'h5'
98-
));
96+
// @include navbar-typography($categories: (
97+
// title: 'h5'
98+
// ));
9999
// @include navdrawer-typography($categories: (
100100
// item: 'body-2',
101101
// header: 'caption'
102102
// ));
103-
@include radio-typography($categories: (
104-
label: 'body-1'
105-
));
103+
// @include radio-typography($categories: (
104+
// label: 'body-1'
105+
// ));
106106
// @include slider-typography();
107-
@include snackbar-typography();
108-
@include switch-typography($categories: (
109-
label: 'body-1'
110-
));
107+
// @include snackbar-typography();
108+
// @include switch-typography($categories: (
109+
// label: 'body-1'
110+
// ));
111111
//@include tabs-typography();
112112
// @include time-picker-typography($categories: (
113113
// header-hour: 'h4',

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,31 @@
4242
// @include bottom-nav-typography();
4343
@include button-typography();
4444
// @include button-group-typography();
45-
//@include calendar-typography($categories: (
45+
// @include calendar-typography($categories: (
4646
// header-year: 'overline',
4747
// header-date: 'h4',
4848
// weekday-label: 'body-1',
4949
// picker-date: 'subtitle-2',
5050
// content: 'body-1',
51-
//));
51+
// ));
5252
// @include card-typography($categories: (
5353
// title: 'subtitle-1',
5454
// title-small: 'subtitle-2',
5555
// subtitle: 'body-2',
5656
// content: 'body-2'
5757
// ));
58-
@include checkbox-typography($categories: (
59-
label: 'body-2'
60-
));
58+
// @include checkbox-typography($categories: (
59+
// label: 'body-2'
60+
// ));
6161
// @include chip-typography($categories: (
6262
// text: 'subtitle-2'
6363
// ));
6464
// @include column-actions-typography();
6565
// @include date-range-typography();
66-
@include dialog-typography($categories: (
67-
title: 'h6',
68-
content: 'body-2'
69-
));
66+
// @include dialog-typography($categories: (
67+
// title: 'h6',
68+
// content: 'body-2'
69+
// ));
7070
@include dock-manager-typography();
7171
// @include drop-down-typography($categories: (
7272
// header: 'subtitle-2',
@@ -80,42 +80,42 @@
8080
// ));
8181
@include excel-filtering-typography();
8282
@include icon-button-typography();
83-
//@include input-group-typography($categories: (
83+
// @include input-group-typography($categories: (
8484
// helper-text: 'caption',
8585
// input-text: 'body-2'
86-
//));
86+
// ));
8787
@include file-input-typography($categories: (
8888
file-text: 'body-2'
8989
));
90-
@include linear-bar-typography();
90+
// @include linear-bar-typography();
9191
// @include list-typography($categories: (
9292
// header: 'overline',
9393
// item: 'caption',
9494
// title: 'caption',
9595
// subtitle: 'caption'
9696
// ));
97-
@include navbar-typography($categories: (
98-
title: 'subtitle-2'
99-
));
97+
// @include navbar-typography($categories: (
98+
// title: 'subtitle-2'
99+
// ));
100100
// @include navdrawer-typography($categories: (
101101
// item: 'body-2',
102102
// header: 'subtitle-1'
103103
// ));
104-
@include radio-typography($categories: (
105-
label: 'body-2'
106-
));
104+
// @include radio-typography($categories: (
105+
// label: 'body-2'
106+
// ));
107107
// @include slider-typography();
108108
// @include snackbar-typography($categories: (
109109
// text: 'caption'
110110
// ));
111-
@include switch-typography($categories: (
112-
label: 'body-2'
113-
));
114-
//@include tabs-typography($categories: (
111+
// @include switch-typography($categories: (
112+
// label: 'body-2'
113+
// ));
114+
// @include tabs-typography($categories: (
115115
// label: 'body-2'
116-
//));
116+
// ));
117117
// @include time-picker-typography();
118-
//@include stepper-typography();
118+
// @include stepper-typography();
119119
// @include toast-typography($categories: (
120120
// text: 'caption'
121121
// ));

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,28 +42,28 @@
4242
// @include button-group-typography($categories: (
4343
// text: 'body-2',
4444
// ));
45-
//@include calendar-typography($categories: (
45+
// @include calendar-typography($categories: (
4646
// header-year: 'body-2',
4747
// header-date: 'h5',
4848
// weekday-label: 'body-2',
4949
// picker-date: 'subtitle-2',
50-
//));
50+
// ));
5151
// @include card-typography($categories: (
5252
// title: 'h6',
5353
// title-small: 'body-2',
5454
// subtitle: 'body-2',
5555
// content: 'body-2'
5656
// ));
57-
@include checkbox-typography($categories: (
58-
label: 'body-2',
59-
));
57+
// @include checkbox-typography($categories: (
58+
// label: 'body-2',
59+
// ));
6060
// @include chip-typography();
6161
// @include column-actions-typography();
6262
// @include date-range-typography();
63-
@include dialog-typography($categories: (
64-
title: 'h5',
65-
content: 'body-1',
66-
));
63+
// @include dialog-typography($categories: (
64+
// title: 'h5',
65+
// content: 'body-1',
66+
// ));
6767
@include dock-manager-typography();
6868
// @include drop-down-typography();
6969
// @include expansion-panel-typography($categories: (
@@ -80,52 +80,51 @@
8080
@include file-input-typography($categories: (
8181
file-text: 'body-2'
8282
));
83-
84-
@include linear-bar-typography();
83+
// @include linear-bar-typography();
8584
// @include list-typography($categories: (
8685
// header: 'overline',
8786
// item: 'body-2',
8887
// title: 'body-2',
8988
// subtitle: 'body-2'
9089
// ));
91-
@include navbar-typography($categories: (
92-
title: 'h5',
93-
));
90+
// @include navbar-typography($categories: (
91+
// title: 'h5',
92+
// ));
9493
// @include navdrawer-typography($categories: (
9594
// item: 'subtitle-2',
9695
// header: 'overline'
9796
// ));
98-
@include radio-typography($categories: (
99-
label: 'body-2'
100-
));
97+
// @include radio-typography($categories: (
98+
// label: 'body-2'
99+
// ));
101100
// @include slider-typography($categories: (
102101
// ticks-label: 'body-2',
103102
// thumb-label: 'subtitle-2',
104103
// ));
105104
// @include snackbar-typography();
106-
@include switch-typography($categories: (
107-
label: 'body-2'
108-
));
109-
//@include tabs-typography($categories: (
105+
// @include switch-typography($categories: (
106+
// label: 'body-2'
107+
// ));
108+
// @include tabs-typography($categories: (
110109
// label: 'subtitle-2',
111-
//)) {
110+
// )) {
112111
// --ig-subtitle-2-text-transform: uppercase;
113-
//};
112+
// };
114113
// @include time-picker-typography($categories: (
115114
// header-hour: 'h5',
116115
// selected-time: 'h6'
117116
// ));
118-
//@include stepper-typography($categories: (
117+
// @include stepper-typography($categories: (
119118
// title: 'body-2',
120119
// subtitle: 'caption',
121120
// indicator: 'button',
122121
// body-content: 'body-2'
123-
//));
122+
// ));
124123
// @include toast-typography();
125124
@include tooltip-typography($categories: (
126125
tooltip-text: 'subtitle-2'
127126
));
128-
//@include tree-typography();
127+
// @include tree-typography();
129128
@include label-typography($categories: (
130129
label: 'caption'
131130
));

0 commit comments

Comments
 (0)