diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss
index b1043f08927..6e70df9c4ce 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss
@@ -7,6 +7,9 @@
////
@include b(igx-banner) {
+ $this: bem--selector-to-string(&);
+ @include register-component(str-slice($this, 2, -1));
+
@extend %igx-banner !optional;
@include e(message) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-component.scss
deleted file mode 100644
index 1be881dc9f0..00000000000
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-component.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-////
-/// @group components
-/// @author Simeon Simeonoff
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
-@include b(igx-filtering) {
- $this: bem--selector-to-string(&);
- @include register-component(str-slice($this, 2, -1));
-
- @extend %igx-filtering-display !optional;
-
- @include e(toggle) {
- @extend %igx-filtering-toggle !optional;
-
- &:hover {
- @extend %igx-filtering-toggle--hover !optional;
- }
- }
-
- @include e(toggle, $m: active) {
- @extend %igx-filtering-toggle !optional;
- @extend %igx-filtering-toggle--active !optional;
- }
-
- @include e(toggle, $m: filtered) {
- @extend %igx-filtering-toggle !optional;
- @extend %igx-filtering-toggle--filtered !optional;
- }
-
- @include e(options) {
- @extend %igx-filtering-menu !optional;
- }
-
- @include e(options, $m: 'to-left') {
- @extend %igx-filtering-menu !optional;
- @extend %igx-filtering-menu--to-left !optional;
- }
-
- @include e(options, $m: 'to-right') {
- @extend %igx-filtering-menu !optional;
- @extend %igx-filtering-menu--to-right !optional;
- }
-
- @include e(expression) {
- @extend %igx-filtering-expression !optional;
- }
-
- @include e(options-bgroup) {
- @extend %igx-filtering-menu-buttons !optional;
- }
-
- // @include e(op) {
- // @extend %igx-filtering-op !optional;
- // }
-}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss
deleted file mode 100644
index fb7b80448b7..00000000000
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-filtering/_grid-filtering-theme.scss
+++ /dev/null
@@ -1,251 +0,0 @@
-////
-/// @group themes
-/// @access public
-/// @author Simeon Simeonoff
-/// @author Marin Popov
-////
-
-/// Grid Filtering Theme
-/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-/// @param {Color} $toggle-icon-color [null] - The idle toggle icon color.
-/// @param {Color} $toggle-icon-hover-color [null] - The hover toggle icon color.
-/// @param {Color} $toggle-icon-active-color [null] - The active toggle icon color.
-/// @param {Color} $toggle-icon-filtered-color [null] - The filtered toggle icon color.
-/// @param {Color} $toggle-background [null] - The idle toggle background color.
-/// @param {Color} $toggle-hover-background [null] - The hover toggle background color.
-/// @param {Color} $toggle-active-background [null] - The active toggle background color.
-/// @param {Color} $toggle-filtered-background [null] - The filtered toggle background color.
-/// @param {Color} $menu-background [null] - The idle menu background color.
-/// @param {Color} $menu-text-color [null] - The idle menu text color.
-/// @param {Color} $menu-button-text-color [null] - The menu button text color.
-/// @param {Color} $menu-button-disabled-text-color [null] - The menu disabled button text color.
-///
-/// @requires $default-palette
-/// @requires $light-schema
-/// @requires apply-palette
-/// @requires extend
-/// @requires text-contrast
-///
-/// @example scss Change the menu background color
-/// $my-filtering-theme: igx-grid-filtering-theme(
-/// $menu-background: black,
-/// $menu-text-color: white
-/// );
-/// // Pass the theme to the igx-grid-filtering component mixin
-/// @include igx-grid-filtering($my-filtering-theme);
-@function igx-grid-filtering-theme(
- $palette: $default-palette,
- $schema: $light-schema,
-
- $toggle-icon-color: null,
- $toggle-icon-hover-color: null,
- $toggle-icon-active-color: null,
- $toggle-icon-filtered-color: null,
- $toggle-background: null,
- $toggle-hover-background: null,
- $toggle-active-background: null,
- $toggle-filtered-background: null,
-
- $menu-background: null,
- $menu-text-color: null,
- $menu-button-text-color: null,
- $menu-button-disabled-text-color: null
-) {
- $name: 'igx-grid-filtering';
- $theme: apply-palette(map-get($schema, $name), $palette);
-
- @if not($menu-text-color) and $menu-background {
- $menu-text-color: text-contrast($menu-background);
- }
-
- @if not($toggle-icon-color) and $toggle-active-background {
- $toggle-icon-color: text-contrast($toggle-active-background);
- }
-
- @if not($menu-button-text-color) and $menu-background {
- $menu-button-text-color: rgba(text-contrast($menu-background), .24);
- }
-
- @if not($menu-button-disabled-text-color) and $menu-background {
- $menu-button-disabled-text-color: rgba(text-contrast($menu-background), .3)
- }
-
- @if not($toggle-icon-active-color) and $toggle-active-background {
- $toggle-icon-active-color: text-contrast($toggle-active-background)
- }
-
- @return extend($theme, (
- name: $name,
- palette: $palette,
-
- toggle-icon-color: $toggle-icon-color,
- toggle-icon-hover-color: $toggle-icon-hover-color,
- toggle-icon-active-color: $toggle-icon-active-color,
- toggle-icon-filtered-color: $toggle-icon-filtered-color,
- toggle-background: $toggle-background,
- toggle-hover-background: $toggle-hover-background,
- toggle-active-background: $toggle-active-background,
- toggle-filtered-background: $toggle-filtered-background,
-
- menu-background: $menu-background,
- menu-text-color: $menu-text-color,
- menu-button-text-color: $menu-button-text-color,
- menu-button-disabled-text-color: $menu-button-disabled-text-color
- ));
-}
-
-/// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} igx-root-css-vars
-/// @requires igx-button-theme
-/// @requires {mixin} igx-button
-/// @requires igx-color
-/// @requires igx-elevation
-/// @requires $elevations
-/// @requires rem
-/// @requires --var
-@mixin igx-grid-filtering($theme) {
- @include igx-root-css-vars($theme);
-
- $palette: map-get($theme, 'palette');
-
- $grid-filtering-options-padding: rem(8px, 16px);
- $grid-head-icon-size: rem(15px);
- $grid-head-icon-lh: rem(15px);
- $grid-head-icon-padding: rem(4.5px);
-
- $filtering-menu-min-width: 240px;
- $filtering-menu-shadow: igx-elevation($elevations, 8);
- $filtering-menu-radius: 4px;
- $filtering-menu-distance-to-toggle: 24px;
-
- %igx-filtering-display {
- position: relative;
- }
-
- %igx-filtering-icon {
- cursor: pointer;
- color: --var($theme, 'toggle-icon-color');
-
- igx-icon {
- color: --var($theme, 'toggle-icon-color');
- font-size: $grid-head-icon-size !important;
- line-height: $grid-head-icon-lh;
- padding: $grid-head-icon-padding;
- font-weight: 400;
- }
- }
-
- %igx-filtering-icon--active {
- color: --var($theme, 'toggle-icon-active-color');
-
- igx-icon {
- color: --var($theme, 'toggle-icon-active-color');
- }
- }
-
- %igx-filtering-icon--filtered {
- color: --var($theme, 'toggle-icon-filtered-color');
-
- igx-icon {
- color: --var($theme, 'toggle-icon-filtered-color');
- }
- }
-
- %igx-filtering-toggle {
- @extend %igx-filtering-icon;
-
- user-select: none;
- background: --var($theme, 'toggle-background');
- border-radius: 50%;
- }
-
- %igx-filtering-toggle--hover {
- background: --var($theme, 'toggle-hover-background');
- }
-
- %igx-filtering-toggle--active {
- @extend %igx-filtering-icon;
- @extend %igx-filtering-icon--active;
-
- background: --var($theme, 'toggle-active-background');
- }
-
- %igx-filtering-toggle--filtered {
- @extend %igx-filtering-icon;
- @extend %igx-filtering-icon--filtered;
-
- background: --var($theme, 'toggle-filtered-background');
- }
-
- %igx-filtering-menu {
- display: block;
- position: absolute;
- font-size: initial;
- font-weight: initial;
-
- min-width: $filtering-menu-min-width;
- user-select: none;
- background: --var($theme, 'menu-background');
- color: --var($theme, 'menu-text-color');
- margin-top: $filtering-menu-distance-to-toggle;
-
- box-shadow: $filtering-menu-shadow;
- border: 1px solid --var($theme, 'menu-background');
- border-radius: $filtering-menu-radius;
- padding: $grid-filtering-options-padding;
-
- .igx-button-group {
- margin: 24px 0;
- }
- }
-
- %igx-filtering-menu--to-left {
- right: 16px;
- }
-
- %igx-filtering-menu--to-right {
- right: initial;
- }
-
- %igx-filtering-menu-buttons {
- display: flex;
- justify-content: flex-end;
- margin-top: 12px;
-
- [igxButton] {
- color: --var($theme, 'menu-button-text-color');
-
- &:disabled {
- color: --var($theme, 'menu-button-disabled-text-color');
- }
- }
-
- [igxbutton] + [igxbutton] {
- margin-left: 8px;
- }
-
- &[dir='rtl'] {
- [igxbutton] + [igxbutton] {
- margin-right: 8px;
- }
- }
- }
-
- %igx-filtering-expression {
- igx-input-group {
- font-size: 14px;
- }
-
- select {
- width: 100%;
- color: igx-color($palette, 'grays', 900);
- outline-style: none;
- border-radius: 4px;
- }
-
- select + igx-input-group {
- margin-top: 12px;
- }
- }
-}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
index cdabb3b3a8a..c36ed9f41d8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
@@ -1,4 +1,7 @@
@include b(igx-time-picker) {
+ $this: bem--selector-to-string(&);
+ @include register-component(str-slice($this, 2, -1));
+
@extend %time-picker-display !optional;
@include e(header) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
index b0771e7e6ec..4730fba70b4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -39,7 +39,6 @@
@import '../components/drop-down/drop-down-component';
@import '../components/expansion-panel/expansion-panel-component';
@import '../components/grid/grid-component';
-@import '../components/grid-filtering/grid-filtering-component';
@import '../components/grid-summary/grid-summary-component';
@import '../components/grid-paginator/grid-paginator-component';
@import '../components/grid-toolbar/grid-toolbar-component';
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index c7810f3151d..a43ba22ed97 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -25,7 +25,6 @@
@import '../components/drop-down/drop-down-theme';
@import '../components/expansion-panel/expansion-panel-theme';
@import '../components/grid/grid-theme';
-@import '../components/grid-filtering/grid-filtering-theme';
@import '../components/grid-summary/grid-summary-theme';
@import '../components/grid-paginator/grid-paginator-theme';
@import '../components/grid-toolbar/grid-toolbar-theme';
@@ -185,10 +184,6 @@
@include igx-grid(igx-grid-theme($palette, $schema));
}
- @if not(index($exclude, 'igx-grid-filtering')) {
- @include igx-grid-filtering(igx-grid-filtering-theme($palette, $schema));
- }
-
@if not(index($exclude, 'igx-grid-summary')) {
@include igx-grid-summary(igx-grid-summary-theme($palette, $schema));
}
@@ -225,11 +220,11 @@
@include igx-grid-paginator(igx-grid-paginator-theme($palette, $schema));
}
- @if not(index($exclude, 'progress-circular')) {
+ @if not(index($exclude, 'igx-circular-bar')) {
@include igx-progress-circular(igx-progress-circular-theme($palette, $schema));
}
- @if not(index($exclude, 'progress-linear')) {
+ @if not(index($exclude, 'igx-linear-bar')) {
@include igx-progress-linear(igx-progress-linear-theme($palette, $schema));
}