Skip to content

fix(*): styling discrepancies #16604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SisIvanova wants to merge 2 commits into
base: simeonoff/scoped-styles
Choose a base branch
from
Open

fix(*): styling discrepancies #16604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4083a1
fix(*): styling discrepancies
SisIvanova Dec 8, 2025
688bfd5
fix(slider): remove flex-grow
SisIvanova Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
"@types/source-map": "0.5.2",
"express": "^5.1.0",
"fflate": "^0.8.1",
"igniteui-theming": "^23.0.0",
"igniteui-theming": "^24.0.1",
"igniteui-trial-watermark": "^3.1.0",
"lodash-es": "^4.17.21",
"rxjs": "^7.8.2",
Expand Down
7 changes: 3 additions & 4 deletions projects/igniteui-angular/src/lib/card/themes/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,9 @@ $theme: $material;
@include b(igx-card-header) {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
align-items: center;
width: 100%;
padding: rem(16px, 16px);
padding: rem(16px);
color: var-get($theme, 'header-text-color');

&:empty {
Expand All @@ -101,7 +101,6 @@ $theme: $material;
}

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

&:empty {
Expand Down Expand Up @@ -155,7 +154,7 @@ $theme: $material;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
padding: rem(8px);
padding: rem(8px) rem(16px);

&:first-child {
margin-block-end: auto;
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

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

> *:not(igx-icon) {
@include type-style(body-1) {
Expand Down
2 changes: 0 additions & 2 deletions projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
@use 'styles/themes/standalone' as *;

@include themed-block(igx-card-header, fluent) {
padding: rem(16px) rem(8px);

@include e(title) {
@include type-style(subtitle-1) {
margin: 0;
Expand Down
9 changes: 3 additions & 6 deletions projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,13 @@ $_theme: $indigo;
}
}

@include e(label) {
@include type-style(body-2);
transition: color 0.2s $ease-out-quad;
transition-delay: var(--_transition-delay);
}

@include e(label) {
@include type-style(body-2) {
margin-block: 0;
}

transition: color 0.2s $ease-out-quad;
transition-delay: var(--_transition-delay);
}

@include m(checked) {
Expand Down
40 changes: 20 additions & 20 deletions projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,18 @@
// subtitle: 'body-1',
// content: 'body-1',
// ));
@include checkbox-typography($categories: (
label: 'body-1',
));
// @include checkbox-typography($categories: (
// label: 'body-1',
// ));
// @include chip-typography();
// @include column-actions-typography();
// @include date-range-typography($categories: (
// label: 'body-1',
// ));
@include dialog-typography($categories: (
title: 'h5',
content: 'body-1'
));
// @include dialog-typography($categories: (
// title: 'h5',
// content: 'body-1'
// ));
@include dock-manager-typography();
// @include drop-down-typography($categories: (
// header: 'overline',
Expand All @@ -79,35 +79,35 @@
// ));
@include excel-filtering-typography();
@include icon-button-typography();
//@include input-group-typography($categories: (
// @include input-group-typography($categories: (
// helper-text: 'body-2',
// input-text: 'body-1'
//));
// ));
@include file-input-typography($categories: (
file-text: 'body-1'
));
@include linear-bar-typography();
// @include linear-bar-typography();
// @include list-typography($categories: (
// item: 'body-2',
// title: 'body-1',
// subtitle: 'body-2',
// header: 'overline',
// ));
@include navbar-typography($categories: (
title: 'h5'
));
// @include navbar-typography($categories: (
// title: 'h5'
// ));
// @include navdrawer-typography($categories: (
// item: 'body-2',
// header: 'caption'
// ));
@include radio-typography($categories: (
label: 'body-1'
));
// @include radio-typography($categories: (
// label: 'body-1'
// ));
// @include slider-typography();
@include snackbar-typography();
@include switch-typography($categories: (
label: 'body-1'
));
// @include snackbar-typography();
// @include switch-typography($categories: (
// label: 'body-1'
// ));
//@include tabs-typography();
// @include time-picker-typography($categories: (
// header-hour: 'h4',
Expand Down
48 changes: 24 additions & 24 deletions projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,31 @@
// @include bottom-nav-typography();
@include button-typography();
// @include button-group-typography();
//@include calendar-typography($categories: (
// @include calendar-typography($categories: (
// header-year: 'overline',
// header-date: 'h4',
// weekday-label: 'body-1',
// picker-date: 'subtitle-2',
// content: 'body-1',
//));
// ));
// @include card-typography($categories: (
// title: 'subtitle-1',
// title-small: 'subtitle-2',
// subtitle: 'body-2',
// content: 'body-2'
// ));
@include checkbox-typography($categories: (
label: 'body-2'
));
// @include checkbox-typography($categories: (
// label: 'body-2'
// ));
// @include chip-typography($categories: (
// text: 'subtitle-2'
// ));
// @include column-actions-typography();
// @include date-range-typography();
@include dialog-typography($categories: (
title: 'h6',
content: 'body-2'
));
// @include dialog-typography($categories: (
// title: 'h6',
// content: 'body-2'
// ));
@include dock-manager-typography();
// @include drop-down-typography($categories: (
// header: 'subtitle-2',
Expand All @@ -80,42 +80,42 @@
// ));
@include excel-filtering-typography();
@include icon-button-typography();
//@include input-group-typography($categories: (
// @include input-group-typography($categories: (
// helper-text: 'caption',
// input-text: 'body-2'
//));
// ));
@include file-input-typography($categories: (
file-text: 'body-2'
));
@include linear-bar-typography();
// @include linear-bar-typography();
// @include list-typography($categories: (
// header: 'overline',
// item: 'caption',
// title: 'caption',
// subtitle: 'caption'
// ));
@include navbar-typography($categories: (
title: 'subtitle-2'
));
// @include navbar-typography($categories: (
// title: 'subtitle-2'
// ));
// @include navdrawer-typography($categories: (
// item: 'body-2',
// header: 'subtitle-1'
// ));
@include radio-typography($categories: (
label: 'body-2'
));
// @include radio-typography($categories: (
// label: 'body-2'
// ));
// @include slider-typography();
// @include snackbar-typography($categories: (
// text: 'caption'
// ));
@include switch-typography($categories: (
label: 'body-2'
));
//@include tabs-typography($categories: (
// @include switch-typography($categories: (
// label: 'body-2'
// ));
// @include tabs-typography($categories: (
// label: 'body-2'
//));
// ));
// @include time-picker-typography();
//@include stepper-typography();
// @include stepper-typography();
// @include toast-typography($categories: (
// text: 'caption'
// ));
Expand Down
51 changes: 25 additions & 26 deletions projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,28 +42,28 @@
// @include button-group-typography($categories: (
// text: 'body-2',
// ));
//@include calendar-typography($categories: (
// @include calendar-typography($categories: (
// header-year: 'body-2',
// header-date: 'h5',
// weekday-label: 'body-2',
// picker-date: 'subtitle-2',
//));
// ));
// @include card-typography($categories: (
// title: 'h6',
// title-small: 'body-2',
// subtitle: 'body-2',
// content: 'body-2'
// ));
@include checkbox-typography($categories: (
label: 'body-2',
));
// @include checkbox-typography($categories: (
// label: 'body-2',
// ));
// @include chip-typography();
// @include column-actions-typography();
// @include date-range-typography();
@include dialog-typography($categories: (
title: 'h5',
content: 'body-1',
));
// @include dialog-typography($categories: (
// title: 'h5',
// content: 'body-1',
// ));
@include dock-manager-typography();
// @include drop-down-typography();
// @include expansion-panel-typography($categories: (
Expand All @@ -80,52 +80,51 @@
@include file-input-typography($categories: (
file-text: 'body-2'
));

@include linear-bar-typography();
// @include linear-bar-typography();
// @include list-typography($categories: (
// header: 'overline',
// item: 'body-2',
// title: 'body-2',
// subtitle: 'body-2'
// ));
@include navbar-typography($categories: (
title: 'h5',
));
// @include navbar-typography($categories: (
// title: 'h5',
// ));
// @include navdrawer-typography($categories: (
// item: 'subtitle-2',
// header: 'overline'
// ));
@include radio-typography($categories: (
label: 'body-2'
));
// @include radio-typography($categories: (
// label: 'body-2'
// ));
// @include slider-typography($categories: (
// ticks-label: 'body-2',
// thumb-label: 'subtitle-2',
// ));
// @include snackbar-typography();
@include switch-typography($categories: (
label: 'body-2'
));
//@include tabs-typography($categories: (
// @include switch-typography($categories: (
// label: 'body-2'
// ));
// @include tabs-typography($categories: (
// label: 'subtitle-2',
//)) {
// )) {
// --ig-subtitle-2-text-transform: uppercase;
//};
// };
// @include time-picker-typography($categories: (
// header-hour: 'h5',
// selected-time: 'h6'
// ));
//@include stepper-typography($categories: (
// @include stepper-typography($categories: (
// title: 'body-2',
// subtitle: 'caption',
// indicator: 'button',
// body-content: 'body-2'
//));
// ));
// @include toast-typography();
@include tooltip-typography($categories: (
tooltip-text: 'subtitle-2'
));
//@include tree-typography();
// @include tree-typography();
@include label-typography($categories: (
label: 'caption'
));
Expand Down
Loading