Skip to content

refactor(grid): scope styles to grid components #16813

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
desig9stein wants to merge 15 commits into
base: simeonoff/scoped-styles
Choose a base branch
from
+16,542 −5,942
Open

refactor(grid): scope styles to grid components #16813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9dc3aab
refactor(grid): scope styles to grid components
desig9stein Jan 26, 2026
3273999
refactor(grid): standardize padding and indentation variables across …
desig9stein Jan 28, 2026
6122945
refactor(grid): update grid styling and layout, introduce banner comp…
desig9stein Jan 28, 2026
3e23751
refactor(grid): Add Excel-style filtering update border styles
desig9stein Feb 5, 2026
9cfb385
refactor(grid): consolidate border styling variables and replace hard…
desig9stein Feb 6, 2026
7db1603
refactor(grid): standardize z-index values by replacing hardcoded val…
desig9stein Feb 6, 2026
fb9d117
refactor(grid): update grid and Excel-style filtering styles, improve…
desig9stein Feb 13, 2026
1587272
refactor(grid): update styles
desig9stein Feb 16, 2026
7ae7ea1
refactor(grid): update border, background, and layout styles for cons…
desig9stein Feb 23, 2026
1032925
Merge remote-tracking branch 'origin/simeonoff/scoped-styles' into mp…
desig9stein Feb 23, 2026
8c0e657
refactor(query-builder): Scope styles for query builder
desig9stein Feb 26, 2026
87f1292
refactor(grid): update grid styles
desig9stein Feb 26, 2026
7e2ca28
refactor(grid): replace `igx-` CSS variable prefixes with `ig-` for c…
desig9stein Mar 4, 2026
7ebb9c2
Merge remote-tracking branch 'origin/simeonoff/scoped-styles' into mp…
desig9stein Mar 4, 2026
2f66f5c
refactor(grid, query-builder): update styles for improved consistency…
desig9stein Mar 5, 2026
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
361 changes: 185 additions & 176 deletions ...cts/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,180 +3,189 @@
/// @access private
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@mixin excel-filtering-partial {
@include b(igx-excel-filter) {
@extend %grid-excel-filter !optional;

@include e(loading) {
@extend %igx-excel-filter__loading !optional;
}

@include e(sizing) {
@extend %igx-excel-filter__sizing !optional;
}

@include e(tree) {
@extend %igx-excel-filter__tree !optional;
}

@include e(empty) {
@extend %igx-excel-filter__empty !optional;
}

@include e(tree-alike) {
@extend %igx-excel-filter__tree-alike !optional;
}

@include e(tree-alike-item) {
@extend %igx-excel-filter__tree-alike-item !optional;
}

@include e(menu) {
@include sizable();
@extend %grid-excel-menu !optional;
}

@include e(menu, $m: 'cosy') {
@extend %grid-excel-menu--cosy !optional;
}

@include e(menu, $m: 'compact') {
@extend %grid-excel-menu--compact !optional;
}

@include e(icon) {
@extend %grid-excel-icon !optional;
}

@include e(icon, $m: 'filtered') {
@extend %grid-excel-icon !optional;
@extend %grid-excel-icon--filtered !optional;
}

@include e(menu-header) {
@extend %grid-excel-menu__header !optional;
}

@include e(menu-header-actions) {
@extend %grid-excel-menu__header-actions !optional;
}

@include e(menu-main) {
@extend %grid-excel-main !optional;
}

@include e(menu-footer) {
@extend %grid-excel-menu__footer !optional;
}

@include e(sort) {
@extend %grid-excel-sort !optional;
}

@include e(move) {
@extend %grid-excel-move !optional;
}

@include e(actions) {
@extend %grid-excel-actions !optional;
}

@include e(actions-pin) {
@extend %grid-excel-actions__action !optional;
}

@include e(actions-pin, $m: disabled) {
@extend %grid-excel-actions__action !optional;
@extend %grid-excel-actions__action--disabled !optional;
}

@include e(actions-unpin) {
@extend %grid-excel-actions__action !optional;
}

@include e(actions-hide) {
@extend %grid-excel-actions__action !optional;
}

@include e(actions-select) {
@extend %grid-excel-actions__action !optional;
}

@include e(actions-selected) {
@extend %grid-excel-actions__action !optional;
@extend %grid-excel-actions--selected !optional;
}

@include e(actions-filter) {
@extend %grid-excel-actions__action !optional;
@extend %grid-excel-actions__action-filter !optional;
}

@include e(actions-filter, $m: active) {
@extend %grid-excel-actions__action !optional;
@extend %grid-excel-actions__action--active !optional;
}

@include e(actions-clear) {
@extend %grid-excel-actions__action !optional;
}

@include e(actions-clear, $m: disabled) {
@extend %grid-excel-actions__action !optional;
@extend %grid-excel-actions__action--disabled !optional;
}

@include e(secondary) {
@extend %grid-excel-menu__secondary !optional;
}

@include e(secondary, $m: 'cosy') {
@extend %grid-excel-menu__secondary--cosy !optional;
}

@include e(secondary, $m: 'compact') {
@extend %grid-excel-menu__secondary--compact !optional;
}

@include e(secondary-header) {
@extend %grid-excel-menu__header !optional;
@extend %grid-excel-menu__secondary-header !optional;
}

@include e(secondary-main) {
@extend %grid-excel-menu__secondary-main !optional;
}

@include e(secondary-footer) {
@extend %grid-excel-menu__footer !optional;
@extend %grid-excel-menu__secondary-footer !optional;
}

@include e(condition) {
@extend %grid-excel-menu__condition !optional;
}

@include e(add-filter) {
@extend %grid-excel-menu__add-filter !optional;
}

@include e(clear) {
@extend %grid-excel-filter__clear !optional;
}

@include e(cancel) {
@extend %grid-excel-filter__cancel !optional;
}

@include e(apply) {
@extend %grid-excel-filter__apply !optional;
}

@include m(inline) {
@extend %grid-excel-filter--inline !optional;
}

@include e(filter-results) {
@extend %grid-excel-menu__filter-results !optional;
}
}
//@include b(igx-excel-filter) {
// @extend %grid-excel-filter !optional;
//
// @include e(loading) {
// @extend %igx-excel-filter__loading !optional;
// }
//
// @include e(sizing) {
// @extend %igx-excel-filter__sizing !optional;
// }
//
// @include e(tree) {
// @extend %igx-excel-filter__tree !optional;
// }
//
// @include e(empty) {
// @extend %igx-excel-filter__empty !optional;
// }
//
// @include e(tree-alike) {
// @extend %igx-excel-filter__tree-alike !optional;
// }
//
// @include e(tree-alike-item) {
// @extend %igx-excel-filter__tree-alike-item !optional;
// }
//
// @include e(menu) {
// @include sizable();
// @extend %grid-excel-menu !optional;
// }
//
// @include e(menu, $m: 'cosy') {
// @extend %grid-excel-menu--cosy !optional;
// }
//
// @include e(menu, $m: 'compact') {
// @extend %grid-excel-menu--compact !optional;
// }
//
// @include e(icon) {
// @extend %grid-excel-icon !optional;
// }
//
// @include e(icon, $m: 'filtered') {
// @extend %grid-excel-icon !optional;
// @extend %grid-excel-icon--filtered !optional;
// }
//
// @include e(menu-header) {
// @extend %grid-excel-menu__header !optional;
// }
//
// @include e(menu-header-actions) {
// @extend %grid-excel-menu__header-actions !optional;
// }
//
// @include e(menu-main) {
// @extend %grid-excel-main !optional;
// }
//
// @include e(menu-footer) {
// display: flex;
// justify-content: space-between;
// }
//
// @include e(sort) {
// @extend %grid-excel-action--compact;
//
// igx-buttongroup {
// width: rem(208px);
// }
// }
//
// @include e(move) {
// @extend %grid-excel-action--compact;
//
// igx-buttongroup {
// width: rem(208px);
// }
// }
//
// @include e(actions) {
// @extend %grid-excel-actions !optional;
// }
//
// @include e(actions-pin) {
// @extend %grid-excel-actions__action !optional;
// }
//
// @include e(actions-pin, $m: disabled) {
// @extend %grid-excel-actions__action !optional;
// @extend %grid-excel-actions__action--disabled !optional;
// }
//
// @include e(actions-unpin) {
// @extend %grid-excel-actions__action !optional;
// }
//
// @include e(actions-hide) {
// @extend %grid-excel-actions__action !optional;
// }
//
// @include e(actions-select) {
// @extend %grid-excel-actions__action !optional;
// }
//
// @include e(actions-selected) {
// @extend %grid-excel-actions__action !optional;
// @extend %grid-excel-actions--selected !optional;
// }
//
// @include e(actions-filter) {
// @extend %grid-excel-actions__action !optional;
// @extend %grid-excel-actions__action-filter !optional;
// }
//
// @include e(actions-filter, $m: active) {
// @extend %grid-excel-actions__action !optional;
// @extend %grid-excel-actions__action--active !optional;
// }
//
// @include e(actions-clear) {
// @extend %grid-excel-actions__action !optional;
// }
//
// @include e(actions-clear, $m: disabled) {
// @extend %grid-excel-actions__action !optional;
// @extend %grid-excel-actions__action--disabled !optional;
// }
//
// @include e(secondary) {
// @extend %grid-excel-menu__secondary !optional;
// }
//
// @include e(secondary, $m: 'cosy') {
// @extend %grid-excel-menu__secondary--cosy !optional;
// }
//
// @include e(secondary, $m: 'compact') {
// @extend %grid-excel-menu__secondary--compact !optional;
// }
//
// @include e(secondary-header) {
// @extend %grid-excel-menu__header !optional;
// @extend %grid-excel-menu__secondary-header !optional;
// }
//
// @include e(secondary-main) {
// @extend %grid-excel-menu__secondary-main !optional;
// }
//
// @include e(secondary-footer) {
// @extend %grid-excel-menu__footer !optional;
// @extend %grid-excel-menu__secondary-footer !optional;
// }
//
// @include e(condition) {
// @extend %grid-excel-menu__condition !optional;
// }
//
// @include e(add-filter) {
// @extend %grid-excel-menu__add-filter !optional;
// }
//
// @include e(clear) {
// @extend %grid-excel-filter__clear !optional;
// }
//
// @include e(cancel) {
// @extend %grid-excel-filter__cancel !optional;
// }
//
// @include e(apply) {
// @extend %grid-excel-filter__apply !optional;
// }
//
// @include m(inline) {
// @extend %grid-excel-filter--inline !optional;
// }
//
// @include e(filter-results) {
// @extend %grid-excel-menu__filter-results !optional;
// }
//}
}
Loading