diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss index 3e2c91e373a..cb88256cad0 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-component.scss @@ -3,180 +3,189 @@ /// @access private /// @author Simeon Simeonoff @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; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss index be1c4b57776..0324ad569f6 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss @@ -8,815 +8,813 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The grid theme used to style the component. @mixin excel-filtering($theme) { - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - - $tree-node-indent: ( - comfortable: rem(16px), - cosy: rem(8px), - compact: rem(4px) - ); - - $tree-node-expander-size: rem(20px); - - $tree-node-height: ( - comfortable: rem(40px), - cosy: rem(32px), - compact: rem(24px) - ); - - $checkbox-indent: ( - comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), - cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), - compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), - ); - - %grid-excel-filter { - --component-size: var(--ig-size, var(--ig-size-large)); - display: block; - width: rem(320px); - height: 100%; - flex-grow: 1; - - @if $variant == 'indigo' { - box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100)); - - // TODO: The border-radius should not be hardcoded. - border-radius: border-radius(rem(4px)); - } @else { - box-shadow: elevation(12); - } - - overflow: auto; - min-width: rem(320px); - - } - - %igx-excel-filter__sizing { - @include sizable(); - - min-height: sizable( - rem(330px), - rem(465px), - rem(645px) - ); - max-height: sizable( - rem(405px), - rem(565px), - rem(775px) - ); - } - - %grid-excel-filter--inline { - box-shadow: none; - width: 100%; - } - - %igx-excel-filter__loading { - display: flex; - justify-content: center; - align-items: center; - } - - %grid-excel-icon { - display: flex; - cursor: pointer; - - @if $variant == 'indigo' { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - } - } - - @if $variant != 'indigo' { - igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); - } - } - } - - %grid-excel-icon--filtered { - opacity: 1; - - igx-icon { - color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary')); - } - - @if $variant == 'indigo' { - &:hover { - igx-icon { - color: color($color: 'primary', $variant: 400); - } - } - } - } - - %grid-excel-menu { - --component-size: var(--ig-size, var(--ig-size-large)); - - display: flex; - flex-direction: column; - height: 100%; - - // TODO: The border-radius should not be hardcoded. - border-radius: border-radius(rem(4px)); - - @if $variant != 'indigo' { - background: var-get($theme, 'filtering-row-background'); - - %igx-group-display { - --elevation: none; - --item-background: #{var-get($theme, 'filtering-row-background')}; - --item-hover-background: #{color($color: 'gray', $variant: 100)}; - --item-selected-background: #{color($color: 'gray', $variant: 100)}; - --item-text-color: #{color($color: 'gray', $variant: 700)}; - --item-icon-color: #{color($color: 'gray', $variant: 700)}; - --item-hover-text-color: #{color($color: 'gray', $variant: 800)}; - --item-hover-icon-color: #{color($color: 'gray', $variant: 800)}; - --item-selected-text-color: #{if( - $variant == 'indigo', - contrast-color($color: 'surface'), - color($color: 'secondary', $variant: 500) - )}; - --item-selected-icon-color: #{if( - $variant == 'indigo', - contrast-color($color: 'surface'), - color($color: 'secondary', $variant: 500) - )}; - --item-selected-hover-icon-color: #{if( - $variant == 'fluent', - color($color: 'secondary', $variant: 500), - contrast-color($color: 'gray', $variant: 50) - )}; - --item-border-color: transparent; - --item-hover-border-color: transparent; - --item-focused-border-color: #{if( - $variant == 'fluent', - color($color: 'gray', $variant: 700), - transparent - )}; - --item-selected-border-color: transparent; - --item-selected-hover-border-color: transparent; - --item-disabled-border: transparent; - --disabled-selected-border-color: transparent; - } - } @else { - @if $theme-variant == 'light' { - background: contrast-color($color: 'gray', $variant: 900); - } @else { - background: color($color: 'gray', $variant: 50); - } - - %igx-group-display { - --item-background: transparent; - @if $theme-variant == 'dark' { - --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; - } - --border-color: transparent; - --item-border-color: transparent; - --item-focused-border-color: transparent; - --item-hover-border-color: transparent; - --item-selected-border-color: transparent; - --item-selected-hover-border-color: transparent; - --item-disabled-border: transparent; - --disabled-selected-border-color: transparent; - --elevation: none; - } - - %igx-group-item { - &:not(:nth-child(1)) { - margin: 0; - } - - @include type-style('button'); - } - } - - @include tree(tree-theme( - $background: color($color: 'surface'), - $background-selected: color($color: 'surface'), - $background-active: color($color: 'surface'), - $background-active-selected: color($color: 'surface'), - $foreground: contrast-color($color: 'surface'), - $foreground-selected: contrast-color($color: 'surface'), - $foreground-active: contrast-color($color: 'surface'), - $foreground-active-selected: contrast-color($color: 'surface'), - )); - - .igx-tree-node__wrapper { - padding: 0; - } - - igx-chips-area { - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); - padding-block-end: 0; - gap: sizable(rem(4px), rem(4px), rem(8px)); - } - } - - %grid-excel-menu__header { - display: flex; - align-items: center; - - @if $variant == 'indigo' { - padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); - } @else { - padding: pad(rem(4px), rem(8px), rem(16px)); - } - - color: var-get($theme, 'excel-filtering-header-foreground'); - } - - @if $variant == 'indigo' { - .ig-typography %grid-excel-menu--compact { - %grid-excel-menu__header { - > h4 { - @include type-style('h6') - } - } - } - } - - %grid-excel-menu__header-actions { - display: flex; - margin-inline-start: auto; - gap: rem(4px); - - %grid-excel-actions__action { - padding: 0 !important; - margin: 0 !important; - } - - %grid-excel-actions__action, - %grid-excel-actions--selected { - justify-content: center; - } - } - - %grid-excel-menu__footer { - display: flex; - justify-content: space-between; - - %grid-excel-filter__apply, - %grid-excel-filter__cancel { - flex-grow: 1; - - [igxButton] { - width: 100%; - } - } - } - - %grid-excel-filter__clear { - flex-grow: 1; - } - - %grid-excel-filter__cancel + %grid-excel-filter__apply { - margin-inline-start: rem(16px); - } - - %grid-excel-sort, - %grid-excel-move { - display: block; - - @if $variant == 'indigo' { - padding-inline: pad-inline(rem(16px)); - } @else { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - header { - color: var-get($theme, 'excel-filtering-subheader-foreground'); - - @if $variant == 'indigo' { - margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; - text-transform: capitalize !important; - } @else { - margin-block-end: rem(4px); - } - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - - display: initial; - width: var(--size) !important; - height: var(--size) !important; - font-size: var(--size) !important; - } - } - - @if $variant == 'indigo' { - %grid-excel-move { - margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); - } - - %grid-excel-sort + %grid-excel-move { - margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); - } - - %grid-excel-sort { - padding-block-end: 0; - } - - %grid-excel-actions__action { - span { - @include type-style('body-2'); - } - } - } - - %grid-excel-action--compact { - display: flex; - align-items: center; - justify-content: space-between; - - header { - margin-inline-end: auto; - } - } - - %grid-excel-actions { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(16px), rem(16px)); - } - - %grid-excel-actions--selected { - igx-icon { - color: if( - $variant == 'indigo', - color($color: 'primary', $variant: 200), - color($color: 'secondary') - ); - } - } - - %grid-excel-move .igx-button-group { - [dir='rtl'] & { - flex-direction: row-reverse; - - igx-icon, - [igxButton] { - direction: ltr; - } - } - } - - %grid-excel-sort .igx-button-group { - [dir='rtl'] & { - flex-direction: row-reverse; - - igx-icon, - [igxButton] { - direction: ltr; - } - } - } - - %grid-excel-actions__action { - display: flex; - align-items: center; - justify-content: space-between; - - @if $variant == 'indigo' { - padding-block: pad-block(rem(4px), rem(6px), rem(8px)); - padding-inline: pad-inline(rem(12px)); - margin-inline: rem(8px); - margin-block-end: rem(4px); - border-radius: rem(4px); - } @else { - padding-block: pad-block(rem(4px), rem(8px), rem(8px)); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - cursor: pointer; - color: var-get($theme, 'excel-filtering-actions-foreground'); - outline-style: none; - - &:hover, - &:focus { - color: var-get($theme, 'excel-filtering-actions-hover-foreground'); - - @if $variant == 'indigo' { - @if $theme-variant == 'light' { - background: color($color: 'gray', $variant: 200); - } @else { - background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); - } - - igx-icon { - /* stylelint-disable max-nesting-depth */ - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 700); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); - } - /* stylelint-enable max-nesting-depth */ - } - } @else { - background: color($color: 'gray', $variant: 100); - } - } - - @if $variant == 'indigo' { - igx-icon { - --component-size: 2; - - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 600); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); - } - } - } - - [dir='rtl'] & { - igx-icon { - transform: scaleX(-1); - } - } - } - - @if $variant == 'indigo' { - %grid-excel-actions__action-filter { - margin-block-end: 0; - } - } - - %grid-excel-actions__action--active { - background: color($color: 'gray', $variant: 100); - color: var-get($theme, 'excel-filtering-actions-hover-foreground'); - } - - %grid-excel-actions__action--disabled { - color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); - pointer-events: none; - - @if $variant == 'indigo' { - igx-icon { - color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); - } - } - } - - %igx-excel-filter__empty { - display: grid; - place-items: center; - height: 100%; - } - - %grid-excel-main { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - - @if $variant == 'indigo' { - padding: pad(rem(16px)); - gap: sizable(rem(16px)); - } @else { - padding: pad(rem(4px), rem(8px), rem(16px)); - gap: sizable(rem(4px), rem(8px), rem(16px)); - } - - igx-list { - flex-grow: 1; - overflow: hidden; - - @if $variant == 'indigo' { - --background: #{color($color: 'surface', $variant: 500)}; - - margin-inline: calc(sizable(rem(-16px)) * -1); - - // This is the only way to take the gap from the list, - // otherwise we have to hardcoded here - > div { - gap: inherit; - } - - igx-display-container { - display: flex; - flex-direction: column; - gap: inherit; - padding: pad(rem(8px)); - } - } @else { - margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1); - } - - border: 0; - - @if $bootstrap-theme { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } @else { - border-top: rem(1px) dashed color($color: 'gray', $variant: 300); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); - } - - @if $variant == 'indigo' and $theme-variant == 'dark' { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } - } - - %igx-excel-filter__tree { - background: color($color: 'surface'); - overflow-y: auto; - margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1); - margin-block: 0; - flex: 1; - - @if $bootstrap-theme { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } @else { - border-top: rem(1px) dashed color($color: 'gray', $variant: 300); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); - } - - @if $variant == 'indigo' and $theme-variant == 'dark' { - border-top: rem(1px) dashed color($color: 'gray', $variant: 100); - border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); - } - - igx-icon { - width: var(--ig-icon-size, #{$tree-node-expander-size}); - height: var(--ig-icon-size, #{$tree-node-expander-size}); - font-size: var(--ig-icon-size, #{$tree-node-expander-size}); - } - - > igx-checkbox, - .igx-tree-node__wrapper { - height: #{sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - )}; - min-height: #{sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - )}; - } - - .igx-tree-node__toggle-button { - min-width: rem(20px); - margin-inline-start: pad-inline( - map.get($tree-node-indent, 'compact'), - map.get($tree-node-indent, 'cosy'), - map.get($tree-node-indent, 'comfortable') - ); - margin-inline-end: pad-inline(rem(4px), rem(8px)); - } - - .igx-tree { - overflow-y: hidden; - } - } - - %igx-excel-filter__tree-alike { - background: color($color: 'surface'); - display: flex; - flex-direction: column; - z-index: 1; - } - - %igx-excel-filter__tree-alike-item { - display: flex; - align-items: center; - height: sizable( - map.get($tree-node-height, 'compact'), - map.get($tree-node-height, 'cosy'), - map.get($tree-node-height, 'comfortable') - ); - background: color($color: 'surface'); - - &:hover, - &:focus { - background: color($color: 'gray', $variant: 200); - } - - > igx-checkbox { - margin-inline-start: pad-inline( - map.get($checkbox-indent, 'compact'), - map.get($checkbox-indent, 'cosy'), - map.get($checkbox-indent, 'comfortable') - ); - } - } - } - - %grid-excel-menu--cosy { - - %grid-excel-menu__header { - justify-content: space-between; - } - } - - %grid-excel-menu--compact { - - %grid-excel-menu__header { - justify-content: space-between; - } - - %grid-excel-sort, - %grid-excel-move { - @extend %grid-excel-action--compact; - - igx-buttongroup { - width: rem(208px); - } - } - - @if $variant != 'indigo' { - %grid-excel-move { - margin-bottom: 0; - } - } - } - - %grid-excel-menu__secondary { - width: rem(520px); - min-width: rem(520px); - background: var-get($theme, 'filtering-row-background'); - box-shadow: elevation(12); - border-radius: border-radius(rem(4px)); - } - - %grid-excel-menu__condition { - display: flex; - flex-wrap: wrap; - align-items: center; - - @if $variant == 'indigo' { - padding-inline: pad-inline(rem(16px)); - } @else { - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - } - - padding-block: 0; - - igx-select { - flex-grow: 1; - flex-basis: 40%; - margin: rem(16px) 0; - - ~ igx-input-group, - ~ igx-date-picker, - ~ igx-time-picker { - margin-inline-start: rem(16px); - } - } - - igx-buttongroup { - min-width: 30%; - } - - [igxIconButton] { - --component-size: var(--grid-size); - margin-inline-start: rem(16px); - } - } - - %grid-excel-menu__add-filter { - margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); - margin-block-start: 0; - - @if $bootstrap-theme { - // important is needed to override the typography margins - margin-block-end: rem(4px) !important; - } - - igx-icon { - width: var(--ig-icon-size, #{rem(18px)}); - height: var(--ig-icon-size, #{rem(18px)}); - font-size: var(--ig-icon-size, #{rem(18px)}); - } - } - - %grid-excel-menu__secondary-header { - @if $bootstrap-theme { - border-bottom: rem(1px) solid color($color: 'gray', $variant: 100); - } @else { - border-bottom: rem(1px) solid color($color: 'gray', $variant: 300); - } - } - - %grid-excel-menu__secondary-main { - height: rem(232px); - overflow: auto; - } - - %grid-excel-menu__secondary-footer { - --ig-size: 2; - - padding-inline: pad-inline(if($variant != 'bootstrap', rem(24px), rem(16px))); - padding-block-end: pad-block(if($variant != 'bootstrap', rem(24px), rem(16px))); - - @if $bootstrap-theme { - padding-block-start: pad-block(rem(16px)); - border-top: rem(1px) solid color($color: 'gray', $variant: 300); - } - - %grid-excel-filter__apply, - %grid-excel-filter__cancel { - flex-grow: 0; - } - } - - %grid-excel-menu__filter-results { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - } - - igx-excel-style-filter-operations, - [igxExcelStyleFilterOperations] { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - } -} - -/// Adds typography styles for the excel-style-filtering component. -/// Uses the 'body-1', 'caption' -/// category from the typographic scale. -/// @group typography -/// @access private -/// @param {Map} $categories [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles. -@mixin excel-filtering-typography($categories: ( - header-comfortable: 'overline', - header-compact: 'subtitle-1') -) { - $header-comfortable: map.get($categories, 'header-comfortable'); - $header-compact: map.get($categories, 'header-compact'); - - %grid-excel-menu { - %grid-excel-menu__header > h4 { - @include type-style('h6') - } - } - - %grid-excel-menu__secondary { - %grid-excel-menu__header > h4 { - @include type-style('h6'); - } - } - - %grid-excel-sort, - %grid-excel-move { - header { - @include type-style('overline'); - } - } - - %grid-excel-menu--cosy { - %grid-excel-menu__header > h4 { - @include type-style('h6') - } - } - - %grid-excel-menu--compact { - %grid-excel-menu__header > h4 { - @include type-style('subtitle-1') - } - - %grid-excel-sort, - %grid-excel-move { - header { - @include type-style('body-2'); - text-transform: capitalize; - } - } - - %grid-excel-actions__action { - span { - @include type-style('body-2'); - } - } - - %cbx-label { - @include type-style('body-2'); - } - } - - %grid-excel-menu__secondary--cosy { - %grid-excel-menu__header > h4 { - @include type-style('h6'); - } - } - - %grid-excel-menu__secondary--compact { - %grid-excel-menu__header > h4 { - @include type-style('subtitle-1'); - } - } +// $variant: map.get($theme, '_meta', 'theme'); +// $theme-variant: map.get($theme, '_meta', 'variant'); +// $bootstrap-theme: $variant == 'bootstrap'; +// +// $tree-node-indent: ( +// comfortable: rem(16px), +// cosy: rem(8px), +// compact: rem(4px) +// ); +// +// $tree-node-expander-size: rem(20px); +// +// $tree-node-height: ( +// comfortable: rem(40px), +// cosy: rem(32px), +// compact: rem(24px) +// ); +// +// $checkbox-indent: ( +// comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), +// cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), +// compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), +// ); +// +// %grid-excel-filter { +// --component-size: var(--ig-size, var(--ig-size-large)); +// display: block; +// width: rem(320px); +// height: 100%; +// flex-grow: 1; +// +// @if $variant == 'indigo' { +// box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100)); +// +// // TODO: The border-radius should not be hardcoded. +// border-radius: border-radius(rem(4px)); +// } @else { +// box-shadow: elevation(12); +// } +// +// overflow: auto; +// min-width: rem(320px); +// +// } +// +// %igx-excel-filter__sizing { +// @include sizable(); +// +// min-height: sizable( +// rem(330px), +// rem(465px), +// rem(645px) +// ); +// max-height: sizable( +// rem(405px), +// rem(565px), +// rem(775px) +// ); +// } +// +// %grid-excel-filter--inline { +// box-shadow: none; +// width: 100%; +// } +// +// %igx-excel-filter__loading { +// display: flex; +// justify-content: center; +// align-items: center; +// } +// +// %grid-excel-icon { +// display: flex; +// cursor: pointer; +// +// @if $variant == 'indigo' { +// opacity: if($theme-variant == 'light', .75, .85); +// +// &:hover { +// opacity: 1; +// } +// } +// +// @if $variant != 'indigo' { +// igx-icon { +// --size: var(--igx-icon-size, #{rem(15px)}); +// } +// } +// } +// +// %grid-excel-icon--filtered { +// opacity: 1; +// +// igx-icon { +// color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary')); +// } +// +// @if $variant == 'indigo' { +// &:hover { +// igx-icon { +// color: color($color: 'primary', $variant: 400); +// } +// } +// } +// } +// +// %grid-excel-menu { +// --component-size: var(--ig-size, var(--ig-size-large)); +// +// display: flex; +// flex-direction: column; +// height: 100%; +// +// // TODO: The border-radius should not be hardcoded. +// border-radius: border-radius(rem(4px)); +// +// @if $variant != 'indigo' { +// background: var-get($theme, 'filtering-row-background'); +// +// %igx-group-display { +// --elevation: none; +// --item-background: #{var-get($theme, 'filtering-row-background')}; +// --item-hover-background: #{color($color: 'gray', $variant: 100)}; +// --item-selected-background: #{color($color: 'gray', $variant: 100)}; +// --item-text-color: #{color($color: 'gray', $variant: 700)}; +// --item-icon-color: #{color($color: 'gray', $variant: 700)}; +// --item-hover-text-color: #{color($color: 'gray', $variant: 800)}; +// --item-hover-icon-color: #{color($color: 'gray', $variant: 800)}; +// --item-selected-text-color: #{if( +// $variant == 'indigo', +// contrast-color($color: 'surface'), +// color($color: 'secondary', $variant: 500) +// )}; +// --item-selected-icon-color: #{if( +// $variant == 'indigo', +// contrast-color($color: 'surface'), +// color($color: 'secondary', $variant: 500) +// )}; +// --item-selected-hover-icon-color: #{if( +// $variant == 'fluent', +// color($color: 'secondary', $variant: 500), +// contrast-color($color: 'gray', $variant: 50) +// )}; +// --item-border-color: transparent; +// --item-hover-border-color: transparent; +// --item-focused-border-color: #{if( +// $variant == 'fluent', +// color($color: 'gray', $variant: 700), +// transparent +// )}; +// --item-selected-border-color: transparent; +// --item-selected-hover-border-color: transparent; +// --item-disabled-border: transparent; +// --disabled-selected-border-color: transparent; +// } +// } @else { +// @if $theme-variant == 'light' { +// background: contrast-color($color: 'gray', $variant: 900); +// } @else { +// background: color($color: 'gray', $variant: 50); +// } +// +// %igx-group-display { +// --item-background: transparent; +// @if $theme-variant == 'dark' { +// --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; +// } +// --border-color: transparent; +// --item-border-color: transparent; +// --item-focused-border-color: transparent; +// --item-hover-border-color: transparent; +// --item-selected-border-color: transparent; +// --item-selected-hover-border-color: transparent; +// --item-disabled-border: transparent; +// --disabled-selected-border-color: transparent; +// --elevation: none; +// } +// +// %igx-group-item { +// &:not(:nth-child(1)) { +// margin: 0; +// } +// } +// } +// +// @include tree(tree-theme( +// $background: color($color: 'surface'), +// $background-selected: color($color: 'surface'), +// $background-active: color($color: 'surface'), +// $background-active-selected: color($color: 'surface'), +// $foreground: contrast-color($color: 'surface'), +// $foreground-selected: contrast-color($color: 'surface'), +// $foreground-active: contrast-color($color: 'surface'), +// $foreground-active-selected: contrast-color($color: 'surface'), +// )); +// +// .igx-tree-node__wrapper { +// padding: 0; +// } +// +// igx-chips-area { +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); +// padding-block-end: 0; +// gap: sizable(rem(4px), rem(4px), rem(8px)); +// } +// } +// +// %grid-excel-menu__header { +// display: flex; +// align-items: center; +// +// @if $variant == 'indigo' { +// padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); +// } @else { +// padding: pad(rem(4px), rem(8px), rem(16px)); +// } +// +// color: var-get($theme, 'excel-filtering-header-foreground'); +// } +// +// @if $variant == 'indigo' { +// .ig-typography %grid-excel-menu--compact { +// %grid-excel-menu__header { +// > h4 { +// @include type-style('h6') +// } +// } +// } +// } +// +// %grid-excel-menu__header-actions { +// display: flex; +// margin-inline-start: auto; +// gap: rem(4px); +// +// %grid-excel-actions__action { +// padding: 0 !important; +// margin: 0 !important; +// } +// +// %grid-excel-actions__action, +// %grid-excel-actions--selected { +// justify-content: center; +// } +// } +// +// %grid-excel-menu__footer { +// display: flex; +// justify-content: space-between; +// +// %grid-excel-filter__apply, +// %grid-excel-filter__cancel { +// flex-grow: 1; +// +// [igxButton] { +// width: 100%; +// } +// } +// } +// +// %grid-excel-filter__cancel + %grid-excel-filter__apply { +// margin-inline-start: rem(16px); +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// display: block; +// +// @if $variant == 'indigo' { +// padding-inline: pad-inline(rem(16px)); +// } @else { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// header { +// color: var-get($theme, 'excel-filtering-subheader-foreground'); +// +// @if $variant == 'indigo' { +// margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; +// text-transform: capitalize !important; +// } @else { +// margin-block-end: rem(4px); +// } +// } +// +// igx-icon { +// --component-size: #{if($variant == 'indigo', 2, 1)}; +// +// display: initial; +// width: var(--size) !important; +// height: var(--size) !important; +// font-size: var(--size) !important; +// } +// } +// +// @if $variant == 'indigo' { +// %grid-excel-move { +// margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); +// } +// +// %grid-excel-sort + %grid-excel-move { +// margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); +// } +// +// %grid-excel-sort { +// padding-block-end: 0; +// } +// +// %grid-excel-actions__action { +// span { +// @include type-style('body-2'); +// } +// } +// } +// +// %grid-excel-action--compact { +// display: flex; +// align-items: center; +// justify-content: space-between; +// +// header { +// margin-inline-end: auto; +// } +// } +// +// %grid-excel-actions { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(16px), rem(16px)); +// } +// +// %grid-excel-actions--selected { +// igx-icon { +// color: if( +// $variant == 'indigo', +// color($color: 'primary', $variant: 200), +// color($color: 'secondary') +// ); +// } +// } +// +// %grid-excel-move .igx-button-group { +// [dir='rtl'] & { +// flex-direction: row-reverse; +// +// igx-icon, +// [igxButton] { +// direction: ltr; +// } +// } +// } +// +// %grid-excel-sort .igx-button-group { +// [dir='rtl'] & { +// flex-direction: row-reverse; +// +// igx-icon, +// [igxButton] { +// direction: ltr; +// } +// } +// } +// +// %grid-excel-actions__action { +// display: flex; +// align-items: center; +// justify-content: space-between; +// +// @if $variant == 'indigo' { +// padding-block: pad-block(rem(4px), rem(6px), rem(8px)); +// padding-inline: pad-inline(rem(12px)); +// margin-inline: rem(8px); +// margin-block-end: rem(4px); +// border-radius: rem(4px); +// } @else { +// padding-block: pad-block(rem(4px), rem(8px), rem(8px)); +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// cursor: pointer; +// color: var-get($theme, 'excel-filtering-actions-foreground'); +// outline-style: none; +// +// &:hover, +// &:focus { +// color: var-get($theme, 'excel-filtering-actions-hover-foreground'); +// +// @if $variant == 'indigo' { +// @if $theme-variant == 'light' { +// background: color($color: 'gray', $variant: 200); +// } @else { +// background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); +// } +// +// igx-icon { +// /* stylelint-disable max-nesting-depth */ +// @if $theme-variant == 'light' { +// color: color($color: 'gray', $variant: 700); +// } @else { +// color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); +// } +// /* stylelint-enable max-nesting-depth */ +// } +// } @else { +// background: color($color: 'gray', $variant: 100); +// } +// } +// +// @if $variant == 'indigo' { +// igx-icon { +// --component-size: 2; +// +// @if $theme-variant == 'light' { +// color: color($color: 'gray', $variant: 600); +// } @else { +// color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); +// } +// } +// } +// +// [dir='rtl'] & { +// igx-icon { +// transform: scaleX(-1); +// } +// } +// } +// +// @if $variant == 'indigo' { +// %grid-excel-actions__action-filter { +// margin-block-end: 0; +// } +// } +// +// %grid-excel-actions__action--active { +// background: color($color: 'gray', $variant: 100); +// color: var-get($theme, 'excel-filtering-actions-hover-foreground'); +// } +// +// %grid-excel-actions__action--disabled { +// color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); +// pointer-events: none; +// +// @if $variant == 'indigo' { +// igx-icon { +// color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); +// } +// } +// } +// +// %igx-excel-filter__empty { +// display: grid; +// place-items: center; +// height: 100%; +// } +// +// %grid-excel-main { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// overflow: hidden; +// +// @if $variant == 'indigo' { +// padding: pad(rem(16px)); +// gap: sizable(rem(16px)); +// } @else { +// padding: pad(rem(4px), rem(8px), rem(16px)); +// gap: sizable(rem(4px), rem(8px), rem(16px)); +// } +// +// igx-list { +// flex-grow: 1; +// overflow: hidden; +// +// @if $variant == 'indigo' { +// --background: #{color($color: 'surface', $variant: 500)}; +// +// margin-inline: calc(sizable(rem(-16px)) * -1); +// +// // This is the only way to take the gap from the list, +// // otherwise we have to hardcoded here +// > div { +// gap: inherit; +// } +// +// igx-display-container { +// display: flex; +// flex-direction: column; +// gap: inherit; +// padding: pad(rem(8px)); +// } +// } @else { +// margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1); +// } +// +// border: 0; +// +// @if $bootstrap-theme { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } @else { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 300); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); +// } +// +// @if $variant == 'indigo' and $theme-variant == 'dark' { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } +// } +// +// %igx-excel-filter__tree { +// background: color($color: 'surface'); +// overflow-y: auto; +// margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1); +// margin-block: 0; +// flex: 1; +// +// @if $bootstrap-theme { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } @else { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 300); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); +// } +// +// @if $variant == 'indigo' and $theme-variant == 'dark' { +// border-top: rem(1px) dashed color($color: 'gray', $variant: 100); +// border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100); +// } +// +// igx-icon { +// width: var(--igx-icon-size, #{$tree-node-expander-size}); +// height: var(--igx-icon-size, #{$tree-node-expander-size}); +// font-size: var(--igx-icon-size, #{$tree-node-expander-size}); +// } +// +// > igx-checkbox, +// .igx-tree-node__wrapper { +// height: #{sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// )}; +// min-height: #{sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// )}; +// } +// +// .igx-tree-node__toggle-button { +// min-width: rem(20px); +// margin-inline-start: pad-inline( +// map.get($tree-node-indent, 'compact'), +// map.get($tree-node-indent, 'cosy'), +// map.get($tree-node-indent, 'comfortable') +// ); +// margin-inline-end: pad-inline(rem(4px), rem(8px)); +// } +// +// .igx-tree { +// overflow-y: hidden; +// } +// } +// +// %igx-excel-filter__tree-alike { +// background: color($color: 'surface'); +// display: flex; +// flex-direction: column; +// z-index: 1; +// } +// +// %igx-excel-filter__tree-alike-item { +// display: flex; +// align-items: center; +// height: sizable( +// map.get($tree-node-height, 'compact'), +// map.get($tree-node-height, 'cosy'), +// map.get($tree-node-height, 'comfortable') +// ); +// background: color($color: 'surface'); +// +// &:hover, +// &:focus { +// background: color($color: 'gray', $variant: 200); +// } +// +// > igx-checkbox { +// margin-inline-start: pad-inline( +// map.get($checkbox-indent, 'compact'), +// map.get($checkbox-indent, 'cosy'), +// map.get($checkbox-indent, 'comfortable') +// ); +// } +// } +// } +// +// %grid-excel-menu--cosy { +// +// %grid-excel-menu__header { +// justify-content: space-between; +// } +// } +// +// %grid-excel-menu--compact { +// +// %grid-excel-menu__header { +// justify-content: space-between; +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// @extend %grid-excel-action--compact; +// +// igx-buttongroup { +// width: rem(208px); +// } +// } +// +// @if $variant != 'indigo' { +// %grid-excel-move { +// margin-bottom: 0; +// } +// } +// } +// +// %grid-excel-menu__secondary { +// width: rem(520px); +// min-width: rem(520px); +// background: var-get($theme, 'filtering-row-background'); +// box-shadow: elevation(12); +// border-radius: border-radius(rem(4px)); +// } +// +// %grid-excel-menu__condition { +// display: flex; +// flex-wrap: wrap; +// align-items: center; +// +// @if $variant == 'indigo' { +// padding-inline: pad-inline(rem(16px)); +// } @else { +// padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); +// } +// +// padding-block: 0; +// +// igx-select { +// flex-grow: 1; +// flex-basis: 40%; +// margin: rem(16px) 0; +// +// ~ igx-input-group, +// ~ igx-date-picker, +// ~ igx-time-picker { +// margin-inline-start: rem(16px); +// } +// } +// +// igx-buttongroup { +// min-width: 30%; +// } +// +// [igxIconButton] { +// --component-size: var(--grid-size); +// margin-inline-start: rem(16px); +// } +// } +// +// %grid-excel-menu__add-filter { +// margin-inline: pad-inline(rem(4px), rem(4px), rem(16px)); +// margin-block-start: 0; +// +// @if $bootstrap-theme { +// // important is needed to override the typography margins +// margin-block-end: rem(4px) !important; +// } +// +// igx-icon { +// width: var(--igx-icon-size, #{rem(18px)}); +// height: var(--igx-icon-size, #{rem(18px)}); +// font-size: var(--igx-icon-size, #{rem(18px)}); +// } +// } +// +// %grid-excel-menu__secondary-header { +// @if $bootstrap-theme { +// border-bottom: rem(1px) solid color($color: 'gray', $variant: 100); +// } @else { +// border-bottom: rem(1px) solid color($color: 'gray', $variant: 300); +// } +// } +// +// %grid-excel-menu__secondary-main { +// height: rem(232px); +// overflow: auto; +// } +// +// %grid-excel-menu__secondary-footer { +// --ig-size: 2; +// +// padding-inline: pad-inline(if($variant != 'bootstrap', rem(24px), rem(16px))); +// padding-block-end: pad-block(if($variant != 'bootstrap', rem(24px), rem(16px))); +// +// @if $bootstrap-theme { +// padding-block-start: pad-block(rem(16px)); +// border-top: rem(1px) solid color($color: 'gray', $variant: 300); +// } +// +// %grid-excel-filter__apply, +// %grid-excel-filter__cancel { +// flex-grow: 0; +// } +// } +// +// %grid-excel-menu__filter-results { +// position: absolute; +// width: 1px; +// height: 1px; +// overflow: hidden; +// } +// +// igx-excel-style-filter-operations, +// [igxExcelStyleFilterOperations] { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// overflow: hidden; +// } +//} +// +///// Adds typography styles for the excel-style-filtering component. +///// Uses the 'body-1', 'caption' +///// category from the typographic scale. +///// @group typography +///// @access private +///// @param {Map} $categories [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles. +//@mixin excel-filtering-typography($categories: ( +// header-comfortable: 'overline', +// header-compact: 'subtitle-1') +//) { +// $header-comfortable: map.get($categories, 'header-comfortable'); +// $header-compact: map.get($categories, 'header-compact'); +// +// %grid-excel-menu { +// %grid-excel-menu__header > h4 { +// @include type-style('h6') +// } +// } +// +// %grid-excel-menu__secondary { +// %grid-excel-menu__header > h4 { +// @include type-style('h6'); +// } +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// header { +// @include type-style('overline'); +// } +// } +// +// %grid-excel-menu--cosy { +// %grid-excel-menu__header > h4 { +// @include type-style('h6') +// } +// } +// +// %grid-excel-menu--compact { +// %grid-excel-menu__header > h4 { +// @include type-style('subtitle-1') +// } +// +// %grid-excel-sort, +// %grid-excel-move { +// header { +// @include type-style('body-2'); +// text-transform: capitalize; +// } +// } +// +// %grid-excel-actions__action { +// span { +// @include type-style('body-2'); +// } +// } +// +// %cbx-label { +// @include type-style('body-2'); +// } +// } +// +// %igx-group-item { +// @include type-style('button'); +// } +// +// %grid-excel-menu__secondary--cosy { +// %grid-excel-menu__header > h4 { +// @include type-style('h6'); +// } +// } +// +// %grid-excel-menu__secondary--compact { +// %grid-excel-menu__header > h4 { +// @include type-style('subtitle-1'); +// } +// } } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss index 91b864e6c87..8eb02e2f71e 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss @@ -10,664 +10,664 @@ /// @requires {mixin} excel-filtering-partial /// @requires {mixin} advanced-filtering-partial @mixin component { - @include b(igx-grid) { - $this: bem--selector-to-string(&); - @include register-component( - $name: string.slice($this, 2, -1), - $deps: ( - igx-checkbox, - igx-chip, - igx-grid-summary, - igx-icon-button, - igx-input-group, - igx-grid-toolbar, - igx-paginator, - igx-watermark, - ) - ); - - @extend %grid-host !optional; - - @extend %grid-display !optional; - - @include e(caption) { - @extend %grid-caption !optional; - } - - @include e(tbody) { - @extend %grid-tbody-container !optional; - } - - @include e(tbody-content) { - @extend %grid-tbody !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tbody-message) { - @extend %grid-tbody-message !optional; - } - - @include e(loading) { - @extend %igx-grid__loading !optional; - } - - @include e(tbody-scrollbar) { - @extend %grid-tbody-scrollbar !optional; - } - - @include e(tbody-scrollbar-main) { - @extend %grid-tbody-scrollbar-main !optional; - } - - @include e(tbody-scrollbar-start) { - @extend %grid-tbody-scrollbar-start !optional; - } - - @include e(tbody-scrollbar-end) { - @extend %grid-tbody-scrollbar-end !optional; - } - - @include e(scroll) { - @extend %grid-scroll !optional; - } - - @include e(scroll-start) { - @extend %grid-scroll-start !optional; - } - - @include e(scroll-main) { - @extend %grid-scroll-main !optional; - } - - @include e(tfoot) { - @extend %grid-tfoot !optional; - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(tfoot-thumb) { - @extend %grid-tfoot-thumb !optional; - } - - @include e(footer) { - @extend %grid-footer !optional; - } - - @include e(tr) { - @extend %grid-row !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(tr-action) { - @extend %igx-grid__tr-action !optional - } - - @include e(tr, $m: 'drag') { - @extend %igx-grid__tr--drag !optional; - } - - @include e(tr, $m: 'ghost') { - @extend %igx-grid__tr--ghost !optional; - } - - @include e(drag-indicator) { - @extend %igx-grid__drag-indicator !optional; - } - - @include e(drag-indicator, $m: 'header') { - @extend %igx-grid__drag-indicator--header !optional; - } - - @include e(drag-indicator, $m: 'off') { - @extend %igx-grid__drag-indicator--off !optional; - } - - @include e(tr, $m: 'mrl') { - @extend %grid-row--mrl !optional; - } - - @include e(tr, $mods: ('mrl', 'edit')) { - @extend %grid-row--edit-mrl !optional; - } - - @include e(summaries) { - @extend %grid-summaries !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries, $m: 'body') { - @extend %grid-summaries !optional; - @extend %grid-summaries--body !optional; - - igx-display-container { - @extend %grid-display-container-tr !optional; - } - } - - @include e(summaries-patch) { - @extend %grid-summaries-patch !optional; - } - - @include e(tr, $m: odd) { - @extend %grid-row--odd !optional; - } - - @include e(tr, $m: even) { - @extend %grid-row--even !optional; - } - - @include e(tr, $m: selected) { - @extend %grid-row--selected !optional; - } - - @include e(tr, $m: edited) { - @extend %igx-grid__tr--edited !optional; - } - - @include e(tr, $m: deleted) { - @extend %igx-grid__tr--deleted !optional; - } - - @include e(tr, $m: highlighted) { - @extend %igx-grid__tr--highlighted !optional; - } - - @include e(tr, $m: edit) { - @extend %igx-grid__tr--edit !optional; - } - - @include e(tr, $m: add-animate) { - @extend %igx-grid__tr--add-animate !optional; - } - - @include e(tr, $m: inner) { - @extend %igx-grid__tr--inner !optional; - } - - @include e(tr, $m: header) { - @extend %igx-grid__tr--header !optional; - } - - @include e(tr, $m: group) { - @extend %grid-row--group !optional; - } - - @include e(tr, $m: mrl) { - @extend %grid-row--mrl !optional; - } - - @include e(tr-container) { - @extend %igx-grid__tr-container !optional; - } - - @include e(tr-container, $m: active) { - @extend %igx-grid__tr-container--active !optional; - } - - @include e(td) { - @extend %grid-cell-display !optional; - } - - @include e(td, $m: active) { - @extend %grid-cell--active !optional; - } - - @include e(td, $m: selected) { - @extend %grid-cell--selected !optional; - } - - @include e(td, $m: invalid) { - @extend %grid-cell--invalid !optional; - } - - @include e(td, $m: valid) { - @extend %grid-cell--valid !optional; - } - - @include e(td, $m: column-selected) { - @extend %grid-cell--column-selected !optional; - } - - @include e(td, $mods: (selected, column-selected)) { - @extend %grid-cell--cross-selected !optional; - } - - @include e(td, $m: bool) { - @extend %igx-grid__td--centered !optional; - @extend %igx-grid__td--bool !optional; - } - - @include e(td, $m: bool-true) { - @extend %igx-grid__td--bool-true !optional; - } - - @include e(td, $m: image) { - @extend %igx-grid__td--centered !optional; - } - - @include e(tr, $mods: (selected, filtered)) { - @extend %grid-row--selected--filtered !optional; - } - - @include e(tr, $m: filtered) { - @extend %igx-grid-row--filtered !optional; - } - - @include e(tr, $m: expanded) { - @extend %igx-grid__tr--expanded !optional; - } - - @include e(tr, $m: pinned) { - @extend %igx-grid__tr--pinned !optional; - } - - @include e(tr, $m: merged) { - @extend %igx-grid__tr--merged !optional; - } - - @include e(tr, $m: merged-top) { - @extend %igx-grid__tr--merged-top !optional; - } - - @include e(tr, $m: pinned-top) { - @extend %igx-grid__tr--pinned-top !optional; - } - - @include e(tr, $m: pinned-bottom) { - @extend %igx-grid__tr--pinned-bottom !optional; - } - - @include e(tree-grouping-indicator) { - @extend %igx-grid__tree-grouping-indicator !optional; - } - - @include e(tree-loading-indicator) { - @extend %igx-grid__tree-loading-indicator !optional; - } - - @include e(td, $m: new) { - @extend %igx-grid__td--new !optional; - } - - @include e(td, $m: edited) { - @extend %igx-grid__td--edited !optional; - } - - @include e(td, $m: merged) { - @extend %igx-grid__td--merged !optional; - } - - @include e(td, $mods: (merged-selected, merged-hovered)) { - @extend %igx-grid__td--merged-selected-hovered !optional; - } - - @include e(td, $m: merged-selected) { - @extend %igx-grid__td--merged-selected !optional; - } - - @include e(td, $m: merged-hovered) { - @extend %igx-grid__td--merged-hovered !optional; - } - - @include e(td, $m: editing) { - @extend %igx-grid__td--editing !optional; - } - - @include e(td, $mods: (editing, valid)) { - @extend %igx-grid__td--editing--valid !optional; - } - - @include e(td, $mods: (editing, invalid)) { - @extend %igx-grid__td--editing--invalid !optional; - } - - @include e(tr, $m: disabled) { - @extend %igx-grid__tr--disabled !optional; - } - - @include e(td, $m: number) { - @extend %grid-cell-number !optional; - } - - @include e(td, $m: pinned) { - @extend %grid-cell--pinned !optional; - } - - @include e(td, $m: pinned-last) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-last !optional; - } - - @include e(td, $m: pinned-first) { - @extend %grid-cell--pinned !optional; - @extend %grid-cell--pinned-first !optional; - } - - @include e(td, $m: fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include e(td, $mods: (pinned, selected)) { - @extend %grid-cell--pinned-selected !optional; - } - - @include e(td, $mods: (pinned, column-selected)) { - @extend %grid-cell--pinned--column-selected !optional; - } - - @include e(td, $m: row-pinned-first) { - @extend %grid-cell--row-pinned-first !optional; - } - - @include e(td, $m: pinned-chip) { - @extend %grid-cell--pinned-chip !optional; - } - - @include e(td-text) { - @extend %grid-cell-text !optional; - } - - @include e(cbx-padding) { - @extend %cbx-padding !optional; - } - - @include e(cbx-selection) { - @extend %grid__cbx-selection !optional; - } - - @include e(cbx-selection, $m: push) { - @extend %grid__cbx-selection--push !optional; - } - - @include e(group-row) { - @extend %igx-grid__group-row !optional; - } - - @include e(group-row, $m: active) { - @extend %igx-grid__group-row--active !optional; - } - - @include e(group-content) { - @extend %igx-grid__group-content !optional; - } - - @include e(row-indentation) { - @extend %igx-grid__row-indentation !optional; - } - - @include e(grouping-indicator) { - @extend %igx-grid__grouping-indicator !optional; - } - - @include e(scroll-on-drag-left) { - @extend %grid__scroll-on-drag-left !optional; - } - - @include e(scroll-on-drag-right) { - @extend %grid__scroll-on-drag-right !optional; - } - - @include e(scroll-on-drag-pinned) { - @extend %grid__scroll-on-drag-pinned !optional; - } - - @include e(drag-ghost-image) { - @extend %grid__drag-ghost-image !optional; - } - - @include e(drag-ghost-image-icon) { - @extend %grid__drag-ghost-image-icon !optional; - } - - @include e(drag-ghost-image-icon-group) { - @extend %grid__drag-ghost-image-icon-group !optional; - } - - @include e(drag-col-header) { - @extend %igx-grid__drag-col-header !optional; - } - - @include e(header-indentation) { - @extend %igx-grid__header-indentation !optional; - } - - @include e(header-indentation, $m: 'no-border') { - @extend %igx-grid__header-indentation--no-border !optional; - } - - @include e(group-expand-btn) { - @extend %igx-grid__group-expand-btn !optional; - } - - @include e(group-expand-btn, $m: 'push') { - @extend %igx-grid__group-expand-btn--push !optional; - } - - @include e(outlet) { - @extend %igx-grid__outlet !optional; - } - - @include e(loading-outlet) { - @extend %igx-grid__loading-outlet !optional; - } - - @include e(row-editing-outlet) { - @extend %igx-grid__row-editing-outlet !optional; - } - - @include e(addrow-snackbar) { - @extend %igx-grid__addrow-snackbar !optional; - } - - @include e(filtering-cell) { - @extend %igx-grid__filtering-cell !optional; - } - - @include e(filtering-cell, $m: 'selected') { - @extend %igx-grid__filtering-cell !optional; - @extend %igx-grid__filtering-cell--selected !optional; - } - - @include e(filtering-cell-indicator) { - @extend %igx-grid__filtering-cell-indicator !optional; - } - - @include e(filtering-cell-indicator, $m: 'hidden') { - @extend %igx-grid__filtering-cell-indicator !optional; - @extend %igx-grid__filtering-cell-indicator--hidden !optional; - } - - @include e(filtering-dropdown-items) { - @extend %igx-grid__filtering-dropdown-items !optional; - } - - @include e(filtering-dropdown-text) { - @extend %igx-grid__filtering-dropdown-text !optional; - } - - @include e(filtering-row) { - @extend %igx-grid__filtering-row !optional; - } - - @include e(filtering-row-editing-buttons) { - @extend %igx-grid__filtering-row-editing-buttons !optional; - } - - @include e(filtering-row-editing-buttons, $m: small) { - @extend %igx-grid__filtering-row-editing-buttons--small !optional; - } - - @include e(filtering-row-main) { - @extend %igx-grid__filtering-row-main !optional; - } - - @include e(filtering-row-scroll-start) { - @extend %igx-grid__filtering-scroll-start !optional; - } - - @include e(filtering-row-scroll-end) { - @extend %igx-grid__filtering-scroll-end !optional; - } - - @include e(hierarchical-indent) { - @extend %igx-grid__hierarchical-indent !optional; - } - - @include e(hierarchical-expander) { - @extend %igx-grid__hierarchical-expander !optional; - } - - @include e(hierarchical-expander, $m: empty) { - @extend %igx-grid__hierarchical-expander !optional; - @extend %igx-grid__hierarchical-expander--empty !optional; - } - - @include e(hierarchical-expander, $m: header) { - @extend %igx-grid__hierarchical-expander--header !optional; - } - - @include e(hierarchical-expander, $m: push) { - @extend %igx-grid__hierarchical-expander--push !optional; - } - - @include e(hierarchical-indent, $m: scroll) { - @extend %igx-grid__hierarchical-indent--scroll !optional; - } - - @include e(mrl-block) { - @extend %grid-mrl-block !optional; - } - - @for $i from 1 through 10 { - @include e(row-indentation, $m: level-#{$i}) { - @extend %igx-grid__row-indentation--level-#{$i} !optional; - } - - @include e(group-row, $m: padding-level-#{$i}) { - @extend %igx-grid__group-row--padding-level-#{$i} !optional; - } - } - - // Pivot start - @include e(pivot, $m: 'super-compact') { - @extend %igx-grid__pivot--super-compact !optional - } - - @include e(tr-pivot) { - @extend %igx-grid__tr-pivot !optional - } - - @include e(pivot-filter-toggle) { - @extend %igx-grid__pivot-filter-toggle !optional - } - - @include e(pivot-empty-chip-area) { - @extend %igx-grid__pivot-empty-chip-area !optional - } - - - - @include e(tr-pivot, $m: 'row-area') { - @extend %igx-grid__tr-pivot--row-area !optional - } - - @include e(tr-pivot, $m: 'filter-container') { - @extend %igx-grid__tr-pivot--filter-container !optional - } - - @include e(tr-pivot, $m: 'chip_drop_indicator') { - @extend %igx-grid__tr-pivot--chip_drop_indicator !optional - } - - @include e(tr-pivot, $m: 'drop-row-area') { - @extend %igx-grid__tr-pivot--drop-row-area !optional - } - - @include e(tr-pivot, $m: 'filter') { - @extend %igx-grid__tr-pivot--filter !optional - } - - @include e(tr-pivot-group) { - @extend %igx-grid__tr-pivot-group !optional - } - - @include e(tr-header-row) { - @extend %igx-grid__tr-header-row !optional; - } - - @include e(tr-pivot, $m: 'columnDimensionLeaf') { - @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional - } - - @include e(tr-pivot, $m: 'columnMultiRowSpan') { - @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional - } - - @include e(tbody-pivot-mrl-dimension) { - @extend %igx-grid__tbody-pivot-mrl-dimension !optional - } - - @include e(tr-pivot-toggle-icons) { - @extend %igx-grid__tr-pivot-toggle-icons !optional; - } - // pivot end - - @include excel-filtering-partial(); - @include advanced-filtering-partial(); - @include group-by-area(); - @include header-row(); - } - - @include b(igx-drop-area) { - @extend %igx-drop-area !optional; - - @include m(hover) { - @extend %igx-drop-area--hover !optional; - } - - @include e(icon) { - @extend %igx-drop-area__icon !optional; - } - - @include e(text) { - @extend %igx-drop-area__text !optional; - } - } - - @include b(igx-group-label) { - @extend %igx-group-label !optional; - - @include e(icon) { - @extend %igx-group-label__icon !optional; - } - - @include e(column-name) { - @extend %igx-group-label__column-name !optional; - } - - @include e(text) { - @extend %igx-group-label__text !optional; - } - - @include e(count-badge) { - @extend %igx-group-label__count-badge !optional; - } - } - - @include b(igx-grid-summary) { - @include m(active) { - @extend %igx-grid-summary--active !optional; - } - } + //@include b(igx-grid) { + // $this: bem--selector-to-string(&); + // @include register-component( + // $name: string.slice($this, 2, -1), + // $deps: ( + // igx-checkbox, + // igx-chip, + // igx-grid-summary, + // igx-icon-button, + // igx-input-group, + // igx-grid-toolbar, + // igx-paginator, + // igx-watermark, + // ) + // ); + // + // @extend %grid-host !optional; + // + // @extend %grid-display !optional; + // + // @include e(caption) { + // @extend %grid-caption !optional; + // } + // + // @include e(tbody) { + // @extend %grid-tbody-container !optional; + // } + // + // @include e(tbody-content) { + // @extend %grid-tbody !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tbody-message) { + // @extend %grid-tbody-message !optional; + // } + // + // @include e(loading) { + // @extend %igx-grid__loading !optional; + // } + // + // @include e(tbody-scrollbar) { + // @extend %grid-tbody-scrollbar !optional; + // } + // + // @include e(tbody-scrollbar-main) { + // @extend %grid-tbody-scrollbar-main !optional; + // } + // + // @include e(tbody-scrollbar-start) { + // @extend %grid-tbody-scrollbar-start !optional; + // } + // + // @include e(tbody-scrollbar-end) { + // @extend %grid-tbody-scrollbar-end !optional; + // } + // + // @include e(scroll) { + // @extend %grid-scroll !optional; + // } + // + // @include e(scroll-start) { + // @extend %grid-scroll-start !optional; + // } + // + // @include e(scroll-main) { + // @extend %grid-scroll-main !optional; + // } + // + // @include e(tfoot) { + // @extend %grid-tfoot !optional; + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(tfoot-thumb) { + // @extend %grid-tfoot-thumb !optional; + // } + // + // @include e(footer) { + // @extend %grid-footer !optional; + // } + // + // @include e(tr) { + // @extend %grid-row !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(tr-action) { + // @extend %igx-grid__tr-action !optional + // } + // + // @include e(tr, $m: 'drag') { + // @extend %igx-grid__tr--drag !optional; + // } + // + // @include e(tr, $m: 'ghost') { + // @extend %igx-grid__tr--ghost !optional; + // } + // + // @include e(drag-indicator) { + // @extend %igx-grid__drag-indicator !optional; + // } + // + // @include e(drag-indicator, $m: 'header') { + // @extend %igx-grid__drag-indicator--header !optional; + // } + // + // @include e(drag-indicator, $m: 'off') { + // @extend %igx-grid__drag-indicator--off !optional; + // } + // + // @include e(tr, $m: 'mrl') { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr, $mods: ('mrl', 'edit')) { + // @extend %grid-row--edit-mrl !optional; + // } + // + // @include e(summaries) { + // @extend %grid-summaries !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries, $m: 'body') { + // @extend %grid-summaries !optional; + // @extend %grid-summaries--body !optional; + // + // igx-display-container { + // @extend %grid-display-container-tr !optional; + // } + // } + // + // @include e(summaries-patch) { + // @extend %grid-summaries-patch !optional; + // } + // + // @include e(tr, $m: odd) { + // @extend %grid-row--odd !optional; + // } + // + // @include e(tr, $m: even) { + // @extend %grid-row--even !optional; + // } + // + // @include e(tr, $m: selected) { + // @extend %grid-row--selected !optional; + // } + // + // @include e(tr, $m: edited) { + // @extend %igx-grid__tr--edited !optional; + // } + // + // @include e(tr, $m: deleted) { + // @extend %igx-grid__tr--deleted !optional; + // } + // + // @include e(tr, $m: highlighted) { + // @extend %igx-grid__tr--highlighted !optional; + // } + // + // @include e(tr, $m: edit) { + // @extend %igx-grid__tr--edit !optional; + // } + // + // @include e(tr, $m: add-animate) { + // @extend %igx-grid__tr--add-animate !optional; + // } + // + // @include e(tr, $m: inner) { + // @extend %igx-grid__tr--inner !optional; + // } + // + // @include e(tr, $m: header) { + // @extend %igx-grid__tr--header !optional; + // } + // + // @include e(tr, $m: group) { + // @extend %grid-row--group !optional; + // } + // + // @include e(tr, $m: mrl) { + // @extend %grid-row--mrl !optional; + // } + // + // @include e(tr-container) { + // @extend %igx-grid__tr-container !optional; + // } + // + // @include e(tr-container, $m: active) { + // @extend %igx-grid__tr-container--active !optional; + // } + // + // @include e(td) { + // @extend %grid-cell-display !optional; + // } + // + // @include e(td, $m: active) { + // @extend %grid-cell--active !optional; + // } + // + // @include e(td, $m: selected) { + // @extend %grid-cell--selected !optional; + // } + // + // @include e(td, $m: invalid) { + // @extend %grid-cell--invalid !optional; + // } + // + // @include e(td, $m: valid) { + // @extend %grid-cell--valid !optional; + // } + // + // @include e(td, $m: column-selected) { + // @extend %grid-cell--column-selected !optional; + // } + // + // @include e(td, $mods: (selected, column-selected)) { + // @extend %grid-cell--cross-selected !optional; + // } + // + // @include e(td, $m: bool) { + // @extend %igx-grid__td--centered !optional; + // @extend %igx-grid__td--bool !optional; + // } + // + // @include e(td, $m: bool-true) { + // @extend %igx-grid__td--bool-true !optional; + // } + // + // @include e(td, $m: image) { + // @extend %igx-grid__td--centered !optional; + // } + // + // @include e(tr, $mods: (selected, filtered)) { + // @extend %grid-row--selected--filtered !optional; + // } + // + // @include e(tr, $m: filtered) { + // @extend %igx-grid-row--filtered !optional; + // } + // + // @include e(tr, $m: expanded) { + // @extend %igx-grid__tr--expanded !optional; + // } + // + // @include e(tr, $m: pinned) { + // @extend %igx-grid__tr--pinned !optional; + // } + // + // @include e(tr, $m: merged) { + // @extend %igx-grid__tr--merged !optional; + // } + // + // @include e(tr, $m: merged-top) { + // @extend %igx-grid__tr--merged-top !optional; + // } + // + // @include e(tr, $m: pinned-top) { + // @extend %igx-grid__tr--pinned-top !optional; + // } + // + // @include e(tr, $m: pinned-bottom) { + // @extend %igx-grid__tr--pinned-bottom !optional; + // } + // + // @include e(tree-grouping-indicator) { + // @extend %igx-grid__tree-grouping-indicator !optional; + // } + // + // @include e(tree-loading-indicator) { + // @extend %igx-grid__tree-loading-indicator !optional; + // } + // + // @include e(td, $m: new) { + // @extend %igx-grid__td--new !optional; + // } + // + // @include e(td, $m: edited) { + // @extend %igx-grid__td--edited !optional; + // } + // + // @include e(td, $m: merged) { + // @extend %igx-grid__td--merged !optional; + // } + // + // @include e(td, $mods: (merged-selected, merged-hovered)) { + // @extend %igx-grid__td--merged-selected-hovered !optional; + // } + // + // @include e(td, $m: merged-selected) { + // @extend %igx-grid__td--merged-selected !optional; + // } + // + // @include e(td, $m: merged-hovered) { + // @extend %igx-grid__td--merged-hovered !optional; + // } + // + // @include e(td, $m: editing) { + // @extend %igx-grid__td--editing !optional; + // } + // + // @include e(td, $mods: (editing, valid)) { + // @extend %igx-grid__td--editing--valid !optional; + // } + // + // @include e(td, $mods: (editing, invalid)) { + // @extend %igx-grid__td--editing--invalid !optional; + // } + // + // @include e(tr, $m: disabled) { + // @extend %igx-grid__tr--disabled !optional; + // } + // + // @include e(td, $m: number) { + // @extend %grid-cell-number !optional; + // } + // + // @include e(td, $m: pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include e(td, $m: pinned-last) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include e(td, $m: pinned-first) { + // @extend %grid-cell--pinned !optional; + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include e(td, $m: fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include e(td, $mods: (pinned, selected)) { + // @extend %grid-cell--pinned-selected !optional; + // } + // + // @include e(td, $mods: (pinned, column-selected)) { + // @extend %grid-cell--pinned--column-selected !optional; + // } + // + // @include e(td, $m: row-pinned-first) { + // @extend %grid-cell--row-pinned-first !optional; + // } + // + // @include e(td, $m: pinned-chip) { + // @extend %grid-cell--pinned-chip !optional; + // } + // + // @include e(td-text) { + // @extend %grid-cell-text !optional; + // } + // + // @include e(cbx-padding) { + // @extend %cbx-padding !optional; + // } + // + // @include e(cbx-selection) { + // @extend %grid__cbx-selection !optional; + // } + // + // @include e(cbx-selection, $m: push) { + // @extend %grid__cbx-selection--push !optional; + // } + // + // @include e(group-row) { + // @extend %igx-grid__group-row !optional; + // } + // + // @include e(group-row, $m: active) { + // @extend %igx-grid__group-row--active !optional; + // } + // + // @include e(group-content) { + // @extend %igx-grid__group-content !optional; + // } + // + // @include e(row-indentation) { + // @extend %igx-grid__row-indentation !optional; + // } + // + // @include e(grouping-indicator) { + // @extend %igx-grid__grouping-indicator !optional; + // } + // + // @include e(scroll-on-drag-left) { + // @extend %grid__scroll-on-drag-left !optional; + // } + // + // @include e(scroll-on-drag-right) { + // @extend %grid__scroll-on-drag-right !optional; + // } + // + // @include e(scroll-on-drag-pinned) { + // @extend %grid__scroll-on-drag-pinned !optional; + // } + // + // @include e(drag-ghost-image) { + // @extend %grid__drag-ghost-image !optional; + // } + // + // @include e(drag-ghost-image-icon) { + // @extend %grid__drag-ghost-image-icon !optional; + // } + // + // @include e(drag-ghost-image-icon-group) { + // @extend %grid__drag-ghost-image-icon-group !optional; + // } + // + // @include e(drag-col-header) { + // @extend %igx-grid__drag-col-header !optional; + // } + // + // @include e(header-indentation) { + // @extend %igx-grid__header-indentation !optional; + // } + // + // @include e(header-indentation, $m: 'no-border') { + // @extend %igx-grid__header-indentation--no-border !optional; + // } + // + // @include e(group-expand-btn) { + // @extend %igx-grid__group-expand-btn !optional; + // } + // + // @include e(group-expand-btn, $m: 'push') { + // @extend %igx-grid__group-expand-btn--push !optional; + // } + // + // @include e(outlet) { + // @extend %igx-grid__outlet !optional; + // } + // + // @include e(loading-outlet) { + // @extend %igx-grid__loading-outlet !optional; + // } + // + // @include e(row-editing-outlet) { + // @extend %igx-grid__row-editing-outlet !optional; + // } + // + // @include e(addrow-snackbar) { + // @extend %igx-grid__addrow-snackbar !optional; + // } + // + // @include e(filtering-cell) { + // @extend %igx-grid__filtering-cell !optional; + // } + // + // @include e(filtering-cell, $m: 'selected') { + // @extend %igx-grid__filtering-cell !optional; + // @extend %igx-grid__filtering-cell--selected !optional; + // } + // + // @include e(filtering-cell-indicator) { + // @extend %igx-grid__filtering-cell-indicator !optional; + // } + // + // @include e(filtering-cell-indicator, $m: 'hidden') { + // @extend %igx-grid__filtering-cell-indicator !optional; + // @extend %igx-grid__filtering-cell-indicator--hidden !optional; + // } + // + // @include e(filtering-dropdown-items) { + // @extend %igx-grid__filtering-dropdown-items !optional; + // } + // + // @include e(filtering-dropdown-text) { + // @extend %igx-grid__filtering-dropdown-text !optional; + // } + // + // @include e(filtering-row) { + // @extend %igx-grid__filtering-row !optional; + // } + // + // @include e(filtering-row-editing-buttons) { + // @extend %igx-grid__filtering-row-editing-buttons !optional; + // } + // + // @include e(filtering-row-editing-buttons, $m: small) { + // @extend %igx-grid__filtering-row-editing-buttons--small !optional; + // } + // + // @include e(filtering-row-main) { + // @extend %igx-grid__filtering-row-main !optional; + // } + // + // @include e(filtering-row-scroll-start) { + // @extend %igx-grid__filtering-scroll-start !optional; + // } + // + // @include e(filtering-row-scroll-end) { + // @extend %igx-grid__filtering-scroll-end !optional; + // } + // + // @include e(hierarchical-indent) { + // @extend %igx-grid__hierarchical-indent !optional; + // } + // + // @include e(hierarchical-expander) { + // @extend %igx-grid__hierarchical-expander !optional; + // } + // + // @include e(hierarchical-expander, $m: empty) { + // @extend %igx-grid__hierarchical-expander !optional; + // @extend %igx-grid__hierarchical-expander--empty !optional; + // } + // + // @include e(hierarchical-expander, $m: header) { + // @extend %igx-grid__hierarchical-expander--header !optional; + // } + // + // @include e(hierarchical-expander, $m: push) { + // @extend %igx-grid__hierarchical-expander--push !optional; + // } + // + // @include e(hierarchical-indent, $m: scroll) { + // @extend %igx-grid__hierarchical-indent--scroll !optional; + // } + // + // @include e(mrl-block) { + // @extend %grid-mrl-block !optional; + // } + // + // @for $i from 1 through 10 { + // @include e(row-indentation, $m: level-#{$i}) { + // @extend %igx-grid__row-indentation--level-#{$i} !optional; + // } + // + // @include e(group-row, $m: padding-level-#{$i}) { + // @extend %igx-grid__group-row--padding-level-#{$i} !optional; + // } + // } + // + // // Pivot start + // @include e(pivot, $m: 'super-compact') { + // @extend %igx-grid__pivot--super-compact !optional + // } + // + // @include e(tr-pivot) { + // @extend %igx-grid__tr-pivot !optional + // } + // + // @include e(pivot-filter-toggle) { + // @extend %igx-grid__pivot-filter-toggle !optional + // } + // + // @include e(pivot-empty-chip-area) { + // @extend %igx-grid__pivot-empty-chip-area !optional + // } + // + // + // + // @include e(tr-pivot, $m: 'row-area') { + // @extend %igx-grid__tr-pivot--row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter-container') { + // @extend %igx-grid__tr-pivot--filter-container !optional + // } + // + // @include e(tr-pivot, $m: 'chip_drop_indicator') { + // @extend %igx-grid__tr-pivot--chip_drop_indicator !optional + // } + // + // @include e(tr-pivot, $m: 'drop-row-area') { + // @extend %igx-grid__tr-pivot--drop-row-area !optional + // } + // + // @include e(tr-pivot, $m: 'filter') { + // @extend %igx-grid__tr-pivot--filter !optional + // } + // + // @include e(tr-pivot-group) { + // @extend %igx-grid__tr-pivot-group !optional + // } + // + // @include e(tr-header-row) { + // @extend %igx-grid__tr-header-row !optional; + // } + // + // @include e(tr-pivot, $m: 'columnDimensionLeaf') { + // @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional + // } + // + // @include e(tr-pivot, $m: 'columnMultiRowSpan') { + // @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional + // } + // + // @include e(tbody-pivot-mrl-dimension) { + // @extend %igx-grid__tbody-pivot-mrl-dimension !optional + // } + // + // @include e(tr-pivot-toggle-icons) { + // @extend %igx-grid__tr-pivot-toggle-icons !optional; + // } + // // pivot end + // + // @include excel-filtering-partial(); + // @include advanced-filtering-partial(); + // @include group-by-area(); + // @include header-row(); + //} + // + //@include b(igx-drop-area) { + // @extend %igx-drop-area !optional; + // + // @include m(hover) { + // @extend %igx-drop-area--hover !optional; + // } + // + // @include e(icon) { + // @extend %igx-drop-area__icon !optional; + // } + // + // @include e(text) { + // @extend %igx-drop-area__text !optional; + // } + //} + // + //@include b(igx-group-label) { + // @extend %igx-group-label !optional; + // + // @include e(icon) { + // @extend %igx-group-label__icon !optional; + // } + // + // @include e(column-name) { + // @extend %igx-group-label__column-name !optional; + // } + // + // @include e(text) { + // @extend %igx-group-label__text !optional; + // } + // + // @include e(count-badge) { + // @extend %igx-group-label__count-badge !optional; + // } + //} + // + //@include b(igx-grid-summary) { + // @include m(active) { + // @extend %igx-grid-summary--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss index 160e6704e5e..c45594604fc 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss @@ -18,3037 +18,3035 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} excel-filtering @mixin grid($theme) { - @include css-vars($theme); - @include scale-in-ver-center(); - - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - $not-bootstrap-theme: $variant != 'bootstrap'; - - $cbx-size: map.get(( - 'material': rem(20px), - 'fluent': rem(20px), - 'bootstrap': rem(14px), - 'indigo': rem(20px), - ), $variant); - $cbx-bs-size: rem(14px); - - $grid-shadow: var-get($theme, 'grid-elevation'); - - $grid-caption-fs: rem(20px); - $grid-caption-lh: rem(32px); - $grid-caption-padding: rem(16px) rem(24px); - - $grid-head-fs: rem(12px); - $grid-head-fw: 600; - $transition: all 120ms $ease-in-out-cubic; - - // Cell - $grid-cell-align-num: end; - $grid-cell-fs: rem(13px); - $grid-cell-lh: rem(16px); - $grid-cell-pinned-style: rem(1px) solid; - $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300); - - $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - - $cell-pin: ( - style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), - color: var-get($theme, 'pinned-border-color') - ); - - $padding-comfortable: rem(24px); - $padding-cosy: rem(16px); - $padding-compact: rem(12px); - - $grid-header-padding-inline: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $pivot-row-aria-padding: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $grid-cbx-padding: ( - comfortable: $padding-comfortable, - cosy: $padding-cosy, - compact: $padding-compact - ); - - $cbx-padding: map.get($grid-cbx-padding, 'comfortable'); - $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy'); - $cbx-padding-compact: map.get($grid-cbx-padding, 'compact'); - - $grid-header-height: ( - comfortable: if($variant == 'indigo', rem(48px), rem(50px)), - cosy: if($variant == 'indigo', rem(40px), rem(40px)), - compact: if($variant == 'indigo', rem(32px), rem(32px)) - ); - - $drop-area-height: ( - comfortable: rem(32px), - cosy: rem(24px), - compact: rem(24px) - ); - - $cell-padding-comfortable: rem(24px); - $cell-padding-cosy: rem(16px); - $cell-padding-compact: rem(12px); - - $grid-cell-padding-inline: ( - comfortable: $cell-padding-comfortable, - cosy: $cell-padding-cosy, - compact: $cell-padding-compact - ); - - $hierarchical-grid-indent: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px)); - - $hierarchical-indent: ( - comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), - cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}), - compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}) - ); - - $hierarchical-indent-scroll: ( - comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px), - cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px), - compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px) - ); - - $grouparea-padding-inline: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $grouparea-min-height: ( - comfortable: if($variant == 'indigo', rem(56px), rem(57px)), - cosy: if($variant == 'indigo', rem(48px), rem(49px)), - compact: if($variant == 'indigo', rem(40px), rem(41px)) - ); - - $grid-grouping-indicator-padding: ( - comfortable: rem(24px), - cosy: rem(16px), - compact: rem(12px) - ); - - $indicator-icon-width: map.get(( - 'material': rem(24px), - 'fluent': rem(24px), - 'bootstrap': rem(24px), - 'indigo': rem(16px), - ), $variant); - - $drag-icon-size: rem(24px); - - $grid-header-weight: map.get(( - 'material': 600, - 'fluent': 800, - 'bootstrap': 700, - 'indigo': 600, - ), $variant); - - $editing-outline-width: rem(2px); - - $filtering-row-height: #{sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - )}; - - %cell-input-overrides { - // Have a more stable visual editing experience - > igx-input-group, - igx-combo, - igx-simple-combo, - igx-select, - igx-date-picker, - igx-time-picker { - position: relative; - height: auto; - width: 100% !important; - overflow: hidden; - } - - igx-input-group { - background: var-get($theme, 'cell-editing-background'); - - .igx-input-group__input { - height: 100%; - color: var-get($theme, 'cell-editing-foreground'); - } - - .igx-input-group__input:focus { - color: var-get($theme, 'cell-editing-focus-foreground'); - } - } - - igx-select, - igx-combo, - igx-simple-combo, - igx-time-picker, - igx-date-picker { - igx-input-group { - height: 100%; - } - } - - .igx-input-group__bundle { - background: transparent !important; - height: 100% !important; - min-height: 100% !important; - border: none !important; - - .igx-input-group__filler, - .igx-input-group__notch { - border: none !important; - } - - &::before { - content: none !important; - } - - &::after { - display: none; - } - } - - .igx-input-group--indigo .igx-input-group__bundle:hover, - .igx-input-group--indigo .igx-input-group__bundle:focus { - background: transparent; - } - - .igx-input-group__bundle-main, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end { - height: auto; - border: none !important; - border-radius: 0 !important; - } - - .igx-input-group__bundle-main { - padding: 0; - } - - .igx-input-group__line { - display: none; - } - - igx-prefix, - igx-suffix { - background: transparent !important; - border-radius: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; - border: none !important; - padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; - } - - .igx-input-group--indigo { - padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; - - igx-prefix { - padding-inline-start: 0 !important; - } - - igx-suffix { - padding-inline-end: 0 !important; - } - } - - .igx-input-group__input { - padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; - margin: 0 auto; - max-width: 100%; - } - - igx-date-range-picker { - height: 100%; - } - - igx-time-picker [igxLabel] { - display: none; - } - - %form-group-input { - // ignore global typography - font-size: $grid-cell-fs !important; - line-height: $grid-cell-lh !important; - } - - .igx-input-group__input, - .igx-input-group__file-input, - .igx-input-group__textarea { - box-shadow: none !important; - border: none !important; - } - - .igx-input-group--disabled, - .igx-input-group--disabled igx-prefix, - .igx-input-group--disabled igx-suffix { - color: var-get($theme, 'cell-disabled-color'); - } - } - - @if $variant != 'indigo' { - %filtering-row-input-overrides { - igx-input-group { - width: 100%; - max-width: rem(200px); - min-width: rem(140px); - - @if $variant != 'fluent' { - border: rem(1px) solid color($color: 'gray', $variant: 300); - } - - --size: calc(#{$filtering-row-height} - #{rem(8px)}); - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - igx-prefix, - igx-suffix { - background: transparent; - border-radius: 0; - - /* stylelint-disable-next-line */ - &:hover { - background: transparent; - } - } - - igx-prefix, - igx-suffix { - height: 100% !important; - padding: 0 sizable(rem(4px), rem(6px), rem(8px)); - } - - .igx-input-group__input { - font-size: sizable(rem(12px), rem(14px), rem(16px)); - padding-inline-start: 0; - padding-block: 0; - height: 100%; - } - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - .igx-input-group__input { - border: 0; - - /* stylelint-disable-next-line */ - &:hover { - border: 0; - box-shadow: none; - } - } - - .igx-input-group__bundle::after { - display: none; - } - - .igx-input-group__bundle-main { - padding-inline-start: 0; - } - - color: var-get($theme, 'filtering-row-text-color'); - - &:hover{ - color: var-get($theme, 'filtering-row-text-color'); - border-color: color($color: 'primary', $variant: 500); - } - } - - .igx-input-group--focused { - @if $variant != 'fluent' { - border-color: color($color: 'primary', $variant: 500); - border-width: rem(1px); - } - - color: var-get($theme, 'filtering-row-text-color'); - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - .igx-input-group__input { - border: 0 !important; - - @if $variant != 'fluent' { - box-shadow: none !important; - } - } - - .igx-input-group__bundle-main, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end { - margin: 0 !important; - } - - .igx-input-group__bundle, - .igx-input-group__bundle-start, - .igx-input-group__bundle-end, - igx-prefix, - igx-suffix { - background: transparent !important; - border-radius: 0; - } - } - - .igx-input-group__line { - display: none; - } - - igx-prefix:focus { - color: color(map.get($theme, 'palette'), 'secondary'); - } - - igx-suffix { - igx-icon { - outline-style: none; - - &:focus { - color: color($color: 'secondary'); - } - - + igx-icon { - margin-inline-start: rem(4px); - } - } - } - } - } - - igx-grid, - igx-hierarchical-grid, - igx-pivot-grid, - igx-tree-grid { - @if $variant == 'material' { - @if $theme-variant == 'light' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; - } - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'fluent' { - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'bootstrap' { - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - - @if $variant == 'indigo' { - @if $theme-variant == 'light' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; - } - @if $theme-variant == 'dark' { - --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; - --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; - --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; - } - } - } - - %disable-focus-styles { - outline: 0; - } - - %grid-host { - @include sizable(); - - --component-size: var(--ig-size, var(--ig-size-large)); - --grid-size: var(--component-size); - } - - %grid-display { - --header-size: #{sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - )}; - - --grouparea-size: #{sizable( - map.get($grouparea-min-height, 'compact'), - map.get($grouparea-min-height, 'cosy'), - map.get($grouparea-min-height, 'comfortable') - )}; - - --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; - - position: relative; - display: grid; - grid-template-rows: auto auto auto 1fr auto auto; - grid-template-columns: 100%; - overflow: hidden; - contain: inline-size; - box-shadow: $grid-shadow; - - @if $variant == 'fluent' { - box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color'); - } - - outline-style: none; - z-index: 1; - - %cbx-display { - min-width: $cbx-size; - - @if $variant == 'material' { - %cbx-composite-wrapper { - padding: 0; - } - - %cbx-label-pos--after { - margin-inline-start: rem(12px); - } - - %cbx-label-pos--before { - margin-inline-end: rem(12px); - } - - %cbx-label-pos--before, - %cbx-label-pos--after { - &:empty { - margin: 0; - } - } - } - } - } - - %grid-caption { - display: flex; - align-items: center; - font-size: $grid-caption-fs; - line-height: $grid-caption-lh; - padding: $grid-caption-padding; - grid-row: 1; - } - - %grid-thead, - %grid-tfoot { - position: relative; - display: flex; - background: var-get($theme, 'header-background'); - color: var-get($theme, 'header-text-color'); - overflow: hidden; - outline-style: none; - - %grid-row { - position: relative; - background: inherit; - color: inherit; - z-index: 2; - - &:hover { - background: inherit; - color: inherit; - } - } - - > [aria-activedescendant] { - outline-style: none; - } - } - - %grid-thead { - border-bottom: $grid-header-border; - - @if $bootstrap-theme { - border-bottom-width: rem(2px); - } - - z-index: 2; - - %grid__cbx-selection--push { - align-items: flex-start; - padding-block-start: pad-block( - math.div(map.get($grid-header-height, 'compact') - rem(20px), 2), - math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2), - math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2) - ); - } - - %grid-row { - border-bottom: none; - } - } - - %grid-thead-container { - grid-row: 3; - display: flex; - overflow: hidden; - - %igx-grid__header-indentation { - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - - @if $variant == 'indigo' { - %igx-grid__group-expand-btn { - color: var-get($theme, 'expand-icon-color'); - } - - %igx-grid__group-expand-btn:hover{ - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - } - - %igx-grid__drag-indicator { - cursor: default; - } - - %grid-row--mrl { - %igx-grid__hierarchical-expander--header, - %igx-grid__hierarchical-expander, - %igx-grid__header-indentation, - %igx-grid__row-indentation, - %grid__cbx-selection { - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - - &:focus-visible { - outline-color: transparent; - } - } - - %grid-thead-title { - flex-basis: auto !important; - align-items: center !important; - border-bottom: $grid-header-border; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - cursor: pointer; - } - } - } - - padding-block: 0; - } - - %grid-thead-title--pinned { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - } - - %grid-thead-group { - display: flex; - flex-flow: row nowrap; - } - - /* We set those with position relative - so that the drop indicators be scoped - to their respective group. The item - being the topmost element, while the - subgroup encapsulates children of each - thead item and group. - */ - %grid-thead-item { - display: flex; - flex-flow: column nowrap; - - %grid-thead-group { - flex: 1 1 auto; - } - - %grid-cell-header { - flex: 1 1 auto; - } - - %grid-thead-title { - flex: 0 0 auto; - } - } - - %grid-thead-item, - %grid-thead-subgroup { - position: relative; - } - - %grid-tfoot { - grid-row: 5; - border-top: $grid-header-border; - z-index: 10001; - } - - %grid-footer { - grid-row: 7; - } - - %grid-display-container-thead { - width: 100%; - overflow: visible; - } - - %grid-display-container-tr { - width: 100%; - overflow: visible; - flex: 1; - // needed to override the min-width of the column headers - min-width: 0; - } - - %grid-mrl-block { - display: grid; - background: inherit; - position: relative; - - %grid-thead-item { - display: flex; - } - - %grid-cell-header { - align-items: center; - flex-grow: 1; - border-bottom: $grid-header-border; - } - - %grid-cell-display { - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - border-bottom: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - %grid-row--mrl { - &%grid-row { - border-bottom-color: transparent; - - @if $variant == 'indigo' { - %grid-cell-display { - border-inline-end: rem(1px) solid var-get($theme, 'row-border-color'); - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - } - } - - %grid__cbx-selection, - %igx-grid__hierarchical-expander, - %igx-grid__row-indentation, - %igx-grid__drag-indicator { - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - } - - %grid-tbody { - position: relative; - background: var-get($theme, 'content-background'); - color: var-get($theme, 'content-text-color'); - overflow: hidden; - z-index: 1; - outline-style: none; - } - - %grid-tbody-container { - position: relative; - display: flex; - grid-row: 4; - overflow: hidden; - } - - %grid-tbody-message { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - color: var-get($theme, 'content-text-color'); - flex-direction: column; - padding: rem(24px); - } - - %igx-grid__loading { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - min-height: rem(100px); - - > %circular-display { - width: rem(50); - height: rem(50); - } - } - - %grid-scroll { - grid-row: 6; - display: flex; - flex-flow: row nowrap; - width: 100%; - background: var-get($theme, 'header-background'); - z-index: 10001; - } - - %grid-thead-thumb { - background: var-get($theme, 'header-background'); - border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); - } - - %grid-tfoot-thumb { - position: absolute; - top: 0; - inset-inline-end: 0; - background: var-get($theme, 'header-background'); - border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); - } - - %grid-tbody-scrollbar { - background: var-get($theme, 'content-background'); - border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); - position: relative; - } - - %grid-tbody-scrollbar-start { - background: var-get($theme, 'header-background'); - } - - %grid-tbody-scrollbar-main { - position: relative; - } - - %grid-tbody-scrollbar-end { - background: var-get($theme, 'header-background'); - } - - %grid-scroll-start { - background: var-get($theme, 'header-background'); - } - - %grid-scroll-main { - igx-display-container { - height: 0; - } - - igx-horizontal-virtual-helper { - height: 100%; - } - } - - %grid-row { - display: flex; - background: var-get($theme, 'content-background'); - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - outline-style: none; - position: relative; - background-clip: content-box !important; - - &:hover { - background: var-get($theme, 'row-hover-background'); - color: var-get($theme, 'row-hover-text-color'); - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-hover-text-color'); - background: var-get($theme, 'row-selected-hover-background'); - } - - %grid-cell--cross-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - } - - &%igx-grid__tr--ghost { - background: var-get($theme, 'row-ghost-background'); - color: var-get($theme, 'row-drag-color'); - z-index: 10002; - - @include css-vars(( - name: 'igx-grid-row', - row-ghost-background: map.get($theme, 'row-ghost-background'), - row-drag-color: map.get($theme, 'row-drag-color') - )); - } - } - - %igx-grid__drag-indicator { - display: flex; - align-items: center; - justify-content: center; - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - } - - &:hover { - igx-icon { - opacity: 1; - } - } - } - - padding-block: 0; - flex: 0 0 auto; - background: inherit; - z-index: 4; - cursor: move; - border-inline-end: rem(1px) solid transparent; - background-clip: border-box; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__drag-indicator--header { - border-inline-end: $grid-header-border; - } - - %igx-grid__drag-indicator--off { - color: var-get($theme, 'row-drag-color'); - } - - %igx-grid__tr--drag { - opacity: .5; - } - - %grid-row--odd { - background: var-get($theme, 'row-odd-background'); - color: var-get($theme, 'row-odd-text-color'); - } - - %grid-row--even { - background: var-get($theme, 'row-even-background'); - color: var-get($theme, 'row-even-text-color'); - } - - %igx-grid__tr--expanded { - border-bottom: none; - } - - %igx-grid__tr--pinned { - position: relative; - background: inherit; - z-index: 10000; - - %igx-grid__hierarchical-expander--empty { - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - %igx-grid__tr--pinned-top { - border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - } - - %igx-grid__tr--pinned-bottom { - border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - position: absolute; - bottom: 0; - } - - %igx-grid__td--centered { - justify-content: center; - } - - %igx-grid__td--bool { - display: flex; - flex-grow: 1; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - } - - %igx-icon--error { - @if $variant == 'indigo' or $theme-variant == 'dark' { - color: color($color: 'gray', $variant: 500); - } @else { - color: color($color: 'gray', $variant: 600); - } - } - } - - %igx-grid__td--bool-true { - %igx-icon--success { - color: color($color: 'gray', $variant: 700); - } - } - - %igx-grid__tr--edit { - border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); - position: relative; - - &::after { - content: ''; - position: absolute; - height: rem(1); - width: 100%; - top: rem(-1); - inset-inline-start: 0; - background: var-get($theme, 'edit-mode-color'); - } - - &%grid-row { - border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); - } - - %igx-grid__td--editing { - border: none; - - %form-group-bundle--focus { - caret-color: var-get($theme, 'edit-mode-color') !important; - } - - %form-group-border { - background: var-get($theme, 'edit-mode-color') !important; - } - } - - [aria-readonly='true'] { - color: var-get($theme, 'cell-disabled-color'); - - igx-icon { - color: var-get($theme, 'cell-disabled-color'); - } - } - } - - %igx-grid__tr--inner { - display: flex; - background: inherit; - } - - %igx-grid__tr--header { - display: flex; - align-items: center; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__tr--add-animate { - @include animation(scale-in-ver-center .2s $ease-in-out-quad); - } - - %grid-row--edit-mrl { - &:first-of-type::after { - top: 0; - z-index: 5; - } - } - - %igx-grid__tr--edited { - &::before { - content: ''; - position: absolute; - width: if($variant == 'indigo', rem(4px), rem(2px)); - height: 100%; - z-index: 10000; - background: var-get($theme, 'edited-row-indicator'); - } - } - - %grid-row--group { - position: relative; - background: var-get($theme, 'header-background') !important; - } - - %igx-grid-row--filtered { - %grid-cell-text { - color: var-get($theme, 'tree-filtered-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-filtered-text-color'); - - &:hover { - color: var-get($theme, 'tree-filtered-text-color'); - } - } - - %grid-cell--selected { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - } - } - } - - %grid-row--selected--filtered { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-row-text-color'); - } - } - - %grid-cell--selected { - %grid-cell-text { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - - &:hover { - color: var-get($theme, 'tree-selected-filtered-cell-text-color'); - } - } - } - } - - %igx-grid__tree-grouping-indicator { - display: flex; - align-items: center; - justify-content: center; - user-select: none; - outline-style: none; - margin-inline-end: if($variant == 'indigo', rem(4px), rem(8)); - cursor: pointer; - - color: var-get($theme, 'expand-icon-color'); - - &:hover { - color: var-get($theme, 'expand-icon-hover-color') - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)};; - } - } - - %igx-grid__tree-loading-indicator { - width: rem(24px, 16px); - height: rem(24px, 16px); - margin-inline-end: rem(8px, 16px); - - %circular-outer { - stroke: var-get($theme, 'expand-icon-color'); - } - - > %circular-display { - width: rem(24); - height: rem(24); - } - } - - %grid-cell-display { - position: relative; - display: flex; - flex: 1 1 0%; - align-items: center; - outline-style: none; - - @extend %cell-input-overrides; - - igx-input-group { - background: transparent; - } - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - color: inherit; - text-align: start; - background-clip: border-box !important; - - @if $variant != 'indigo' { - font-size: $grid-cell-fs; - line-height: $grid-cell-lh; - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - @include type-style('detail-1', false); - - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - } - } - - // This is no longer being extended and is left - // here for reference purposes only. It seems setting - // overflow: hidden on the cell prevents drag and selection - // of the cell. - // See github issue #9821 - %igx-grid__td--tree-cell { - overflow: hidden; - } - - %grid-cell-text { - @include ellipsis(); - - pointer-events: none; - } - - %grid-cell--fixed-width { - flex-grow: 0; - outline-style: none; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %grid-cell--active { - box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color'); - - > %igx-grid__filtering-cell, - > %grid-cell-header { - border-inline-end-color: var-get($theme, 'cell-active-border-color'); - border-bottom-color: var-get($theme, 'cell-active-border-color'); - } - } - - %grid-cell--invalid { - padding-inline-end: rem(4px) !important; - - > igx-icon { - color: color($color: 'error'); - width: var(--ig-icon-size, rem(18px)); - height: var(--ig-icon-size, rem(18px)); - font-size: var(--ig-icon-size, rem(18px)); - } - - %grid-cell-text { - width: 100%; - } - - .igx-input-group__bundle { - &:focus-within { - &::after { - border: none !important; - } - } - } - } - - %grid-cell--valid { - box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important; - } - - %grid-cell--pinned-selected, - %grid-cell--selected { - color: var-get($theme, 'cell-selected-text-color'); - background: var-get($theme, 'cell-selected-background'); - // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 - // border-bottom: 0; - - %igx-grid__tree-grouping-indicator { - &:hover { - color: var-get($theme, 'cell-selected-text-color'); - } - } - } - - %grid-row--selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - - %grid-cell--selected, - %grid-cell--pinned-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - - &:hover { - background: var-get($theme, 'row-selected-hover-background'); - color: var-get($theme, 'row-selected-hover-text-color'); - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-hover-text-color'); - background: var-get($theme, 'row-selected-hover-background'); - } - } - - %igx-grid__tree-grouping-indicator { - color: var-get($theme, 'row-selected-text-color'); - - &:hover { - color: var-get($theme, 'row-selected-text-color'); - } - } - } - - %grid-cell--column-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - } - - %grid-cell--cross-selected { - color: var-get($theme, 'cell-selected-within-text-color'); - background: var-get($theme, 'cell-selected-within-background'); - } - - %igx-grid__td--new { - color: var-get($theme, 'cell-new-color'); - } - - %igx-grid__td--edited { - %grid-cell-text { - font-style: italic; - color: var-get($theme, 'cell-edited-value-color'); - padding: 0 rem(1px); - } - } - - %igx-grid__tr--merged { - border-block-end: 0; - } - - %igx-grid__tr--merged-top { - position: absolute; - width: 100%; - } - - %igx-grid__td--merged { - z-index: 1; - grid-row: 1 / -1; - } - - %igx-grid__td--merged-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background') !important; - } - - %igx-grid__td--merged-hovered { - background: var-get($theme, 'row-hover-background') !important; - color: var-get($theme, 'row-hover-text-color'); - } - - %igx-grid__td--merged-selected-hovered { - background: var-get($theme, 'row-selected-hover-background') !important; - color: var-get($theme, 'row-selected-hover-text-color'); - } - - %igx-grid__tr--deleted { - %grid-cell-text { - font-style: italic; - color: color(map.get($theme, 'palette'), 'error'); - text-decoration: line-through; - } - } - - %igx-grid__tr--disabled { - %grid-cell-text { - color: var-get($theme, 'cell-disabled-color'); - } - } - - %igx-grid__td--editing { - background: var-get($theme, 'cell-editing-background') !important; - box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color'); - padding-inline: rem(4px); - - &.igx-grid__td--invalid { - box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important; - } - - &%grid-cell-number { - justify-content: flex-start !important; - } - } - - %grid-cell--pinned { - position: relative; - background: inherit; - z-index: 9999; - } - - %grid-cell--pinned--column-selected { - color: var-get($theme, 'row-selected-text-color'); - background: var-get($theme, 'row-selected-background'); - - &:hover { - background: var-get($theme, 'row-selected-hover-background'); - color: var-get($theme, 'row-selected-text-color'); - } - } - - %grid-cell--pinned-last { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - - %igx-grid__filtering-cell, - %grid-cell-header { - border-inline-end: none; - } - - &%grid-cell--editing { - border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; - } - } - - %grid-cell--pinned-first { - border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; - - &%grid-cell--editing { - border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; - } - } - - %grid-cell--row-pinned-first { - overflow: hidden; - } - - %grid-cell--pinned-chip { - margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); - } - - %grid-cell-header { - flex-flow: row nowrap; - justify-content: space-between; - align-items: flex-end; - - @if $variant != 'indigo' { - font-size: $grid-head-fs; - font-weight: $grid-head-fw; - - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - min-width: 0; - padding-block: 0; - border-inline-end: $grid-header-border; - min-height: var(--header-size); - outline-style: none; - overflow: hidden; - transition: color 250ms ease-in-out; - } - - %grid-cell-header--filtering { - background: var-get($theme, 'filtering-header-background'); - color: var-get($theme, 'filtering-header-text-color'); - z-index: 3; - } - - %grid-cell-header-title { - @include ellipsis(); - - @if $variant != 'indigo' { - font-weight: $grid-header-weight; - } @else { - @include type-style('detail-2', false); - } - - min-width: 3ch; - user-select: none; - cursor: initial; - flex-grow: 1; /* hey IE, the text should take most of the space */ - // align-self: flex-end; /* commenting out for now on external request */ - line-height: var(--header-size); - transition: color 250ms ease-in-out; - } - - %grid-cell-header-icons { - display: inline-flex; - align-items: center; - justify-content: flex-end; - user-select: none; - min-width: rem(30px); /* sort-icon + filter icon width */ - height: var(--header-size); - align-self: flex-end; - - &:empty { - min-width: 0; - } - - .sort-icon { - position: relative; - display: flex; - - - @if $variant != 'indigo' { - igx-icon { - --size: var(--ig-icon-size, #{rem(15px)}); - } - } - - &::after { - content: attr(data-sortIndex); - position: absolute; - top: rem(-5px); - inset-inline-end: rem(-1px); - font-size: rem(10px); - text-align: end; - font-family: sans-serif; - line-height: rem(10px); - } - } - } - - - %igx-grid-th__expander { - display: flex; - align-items: center; - justify-content: center; - margin-inline-end: rem(8px); - cursor: pointer; - - igx-icon { - @if $variant == 'indigo' { - --component-size: 2; - } - - color: var-get($theme, 'expand-icon-color'); - } - - &:hover { - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - } - - %igx-grid-th__group-title { - @include ellipsis(); - - @if $variant == 'indigo' { - @include type-style('detail-2', false); - } - } - - %igx-grid-th--collapsible { - justify-content: normal; - } - - %igx-grid-th--selectable { - @if $variant != 'indigo' { - opacity: if($theme-variant == 'light', .75, .85); - - &%grid__drag-ghost-image { - opacity: 1; - } - } @else { - opacity: 1; - } - - .sort-icon { - color: var-get($theme, 'header-selected-text-color'); - - ::after { - background: var-get($theme, 'header-selected-background'); - } - } - } - - // TODO, remove igx-banner__row extra div if possible - @if $variant { - %igx-banner__row { - display: contents; - } - } - - %igx-grid-th--selected { - .sort-icon::after { - background: var-get($theme, 'header-selected-background'); - } - } - - %igx-grid-th--selectable, - %igx-grid-th--selected { - color: var-get($theme, 'header-selected-text-color'); - background: var-get($theme, 'header-selected-background'); - - &%igx-grid-th--sorted { - .sort-icon { - color: var-get($theme, 'header-selected-text-color'); - - > igx-icon { - color: inherit; - } - - &:focus, - &:hover { - color: var-get($theme, 'header-selected-text-color'); - - > igx-icon { - color: inherit; - } - } - } - } - - @if $variant == 'indigo' { - %grid-excel-icon--filtered, - %grid-excel-icon { - color: var-get($theme, 'header-selected-text-color'); - - igx-icon { - color: var-get($theme, 'header-selected-text-color'); - } - - &:focus, - &:hover { - color: var-get($theme, 'header-selected-text-color'); - - igx-icon { - color: var-get($theme, 'header-selected-text-color'); - } - } - } - } - } - - %igx-grid-th--active { - @extend %grid-cell--active; - - %igx-grid-th--selected, - %igx-grid-th--selectable { - @extend %grid-cell--active; - } - } - - %igx-grid-summary--active { - @extend %grid-cell--active !optional; - } - - %igx-grid-th--sortable { - .sort-icon { - cursor: pointer; - opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7); - - &:hover { - opacity: 1; - } - } - } - - %igx-grid-th--sorted { - .sort-icon { - opacity: 1; - color: var-get($theme, 'sorted-header-icon-color'); - - > igx-icon { - color: inherit; - } - - &:hover { - color: var-get($theme, 'sortable-header-icon-hover-color'); - - > igx-icon { - color: inherit; - } - } - } - } - - %igx-grid-th--filtrable { - %grid-cell-header-title { - @if $variant != 'indigo' { - opacity: .7; - } - } - } - - %igx-grid-th--filtrable-sortable { - .sort-icon { - cursor: pointer; - opacity: if($variant == 'indigo', 1, .7); - - &:hover { - opacity: 1; - } - } - } - - %grid-excel-icon--filtered, - %grid-excel-icon, - .sort-icon { - transition: all 250ms ease-in-out; - } - - %grid-cell-number { - text-align: $grid-cell-align-num; - justify-content: flex-end; - flex-grow: 1; - - %grid-cell-header-icons { - justify-content: flex-start; - order: -1; - - .sort-icon { - order: 1; - } - } - } - - %grid__cbx-selection { - display: flex; - justify-content: center; - align-items: center; - background: inherit; - z-index: 4; - background-clip: border-box; - } - - %cbx-padding { - display: flex; - align-items: center; - justify-content: center; - padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding); - } - - %grid__resize-handle { - position: absolute; - width: rem(4px); - top: 0; - inset-inline-end: rem(-2px); - height: 100%; - z-index: 2; - } - - %grid__resize-line { - position: absolute; - cursor: col-resize; - width: rem(4px); - background: var-get($theme, 'resize-line-color'); - z-index: 2; - - &::before, - &::after { - position: absolute; - content: ''; - height: 100%; - width: rem(96px); - } - - &::before { - inset-inline-end: 100%; - } - - &::after { - inset-inline-start: 100%; - } - } - - %grid-summaries { - display: flex; - overflow: hidden; - outline-style: none; - background-color: var-get($theme, 'summaries-patch-background'); - } - - %grid-summaries--body { - --summaries-patch-background: var(--ig-gray-100); - - border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); - background-color: var-get($theme, 'summaries-patch-background'); - - &:last-of-type { - border-bottom: none; - } - - .igx-grid-summary { - --background-color: inherit; - --result-color: #{adaptive-contrast(var(--background-color))}; - } - } - - %grid-summaries-patch { - position: relative; - background: inherit; - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - z-index: 1; - - @if $variant == 'indigo' { - border-top: rem(1px) solid var-get($theme, 'header-border-color'); - } - } - - // Column moving - %igx-grid-th__drop-indicator-left, - %igx-grid-th__drop-indicator-right { - position: absolute; - width: rem(1px); - height: 100%; - top: 0; - z-index: 1; - } - - %igx-grid-th__drop-indicator-left { - inset-inline-start: rem(-1px); - } - - %igx-grid-th__drop-indicator-right { - inset-inline-end: rem(-1px); - } - - %igx-grid-th__drop-indicator--active { - &%igx-grid-th__drop-indicator-left, - &%igx-grid-th__drop-indicator-right { - border-inline-end: rem(1px) solid var-get($theme, 'drop-indicator-color'); - } - - &::after, - &::before { - position: absolute; - content: ''; - width: 0; - height: 0; - border-style: solid; - inset-inline-start: rem(-3px); - } - - &::before { - bottom: 0; - border-width: 0 rem(4px) rem(4px); - border-color: transparent transparent var-get($theme, 'drop-indicator-color'); - } - - &::after { - top: 0; - border-width: rem(4px) rem(4px) 0; - border-color: var-get($theme, 'drop-indicator-color') transparent transparent; - } - } - - %grid__scroll-on-drag-left, - %grid__scroll-on-drag-right { - position: absolute; - width: rem(15px); - top: 0; - height: 100%; - z-index: 25; - } - - %grid__scroll-on-drag-left { - inset-inline-start: 0; - } - - %grid__scroll-on-drag-right { - inset-inline-end: 0; - } - - %grid__scroll-on-drag-pinned { - position: absolute; - width: rem(15px); - height: 100%; - top: 0; - z-index: 25; - } - - %grid__drag-ghost-image { - position: absolute; - display: flex; - align-items: center; - background: var-get($theme, 'ghost-header-background'); - color: var-get($theme, 'ghost-header-text-color'); - min-width: rem(168px); - max-width: rem(320px); - height: var(--header-size); - min-height: var(--header-size); - top: rem(-99999px); - inset-inline-start: rem(-99999px); - border: none; - box-shadow: var-get($theme, 'drag-elevation'); - overflow: hidden; - z-index: 20; - - %grid-cell-header-title { - @include ellipsis(); - flex: 1 0 0; - text-align: if($variant == 'indigo', start, end); - } - - %grid-cell-header-icons { - display: none; - } - - %grid-thead-title { - border: none; - } - } - - %grid__drag-ghost-image-icon { - color: var-get($theme, 'ghost-header-icon-color'); - margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px)); - } - - %grid__drag-ghost-image-icon-group { - color: var-get($theme, 'ghost-header-icon-color'); - padding: $padding-comfortable; - padding-inline-end: 0; - margin-inline-end: rem(8); - } - - %igx-grid__drag-col-header { - background: var-get($theme, 'header-background'); - - %grid-cell-header { - > * { - opacity: .4; - } - } - } - - // Group by section - %igx-grid__group-row { - background: var-get($theme, 'group-row-background'); - display: flex; - outline-style: none; - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - min-height: var(--header-size); - - %igx-grid__drag-indicator { - cursor: default; - flex-grow: 0; - } - - %grid__cbx-selection { - background: initial; - } - } - - %igx-grid__group-row--active { - background: var-get($theme, 'group-row-selected-background'); - @extend %grid-cell--active !optional; - - %igx-grid__grouping-indicator { - color: var-get($theme, 'expand-icon-color'); - } - - %igx-grid__drag-indicator { - border: rem(1px) solid var-get($theme, 'cell-active-border-color'); - border-inline-start-width: 0; - border-inline-end-width: 0; - box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'cell-active-border-color'); - } - - &:hover { - background: var-get($theme, 'group-row-selected-background'); - } - } - - %igx-group-label { - display: flex; - align-items: center; - justify-content: flex-start; - line-height: rem(16px); - gap: rem(4px); - } - - %igx-group-label__icon { - @at-root igx-icon#{&} { - --component-size: #{if($variant == 'indigo', 2, 1)}; - - color: var-get($theme, 'group-label-icon'); - user-select: none; - } - } - - %igx-group-label__column-name { - @if $variant != 'indigo' { - font-weight: 600; - font-size: rem(12px); - } @else { - @include type-style('detail-2', false); - } - - color: var-get($theme, 'group-label-column-name-text'); - - } - - - %igx-group-label__count-badge { - --background-color: #{var-get($theme, 'group-count-background')}; - --text-color: #{var-get($theme, 'group-count-text-color')}; - - @if $variant == 'indigo' { - --shadow: none; - } - - > span { - font-size: $grid-head-fs; - } - } - - - %igx-group-label__text { - @if $variant != 'indigo' { - font-size: rem(13px); - } @else { - @include type-style('detail-1', false); - } - color: var-get($theme, 'group-label-text') - } - - [dir='rtl'] { - %igx-group-label { - > * { - margin-inline-start: rem(4px); - - &:last-child { - margin-inline-start: 0; - } - } - } - } - - %igx-grid__group-content { - display: flex; - align-items: center; - justify-content: flex-start; - flex: 1 1 auto; - @if $variant != 'indigo' { - padding-inline-start: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - } @else { - padding-inline-start: 0; - } - - min-height: sizable( - map.get($grid-header-height, 'compact'), - map.get($grid-header-height, 'cosy'), - map.get($grid-header-height, 'comfortable') - ); - - &:focus { - outline: transparent; - } - } - - %igx-grid__row-indentation { - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding-inline-start: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - padding-inline-end: pad-inline( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - background: inherit; - z-index: 1; - background-clip: border-box; - - &::after { - content: ''; - position: absolute; - width: 100%; - height: rem(1px); - bottom: rem(-1px); - inset-inline-start: 0; - background: transparent; - } - - %igx-icon-button-display { - width: rem(28px); - height: rem(28px); - color: var-get($theme, 'expand-all-icon-color'); - } - - &:focus, - &:hover { - %igx-icon-button-display { - color: var-get($theme, 'expand-all-icon-hover-color'); - } - } - } - - %igx-grid-grouparea { - grid-row: 2; - display: flex; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; - border-bottom: $grid-header-border; - background: var-get($theme, 'grouparea-background'); - color: var-get($theme, 'grouparea-color'); - min-height: var(--grouparea-size); - padding-inline: pad-inline( - map.get($grouparea-padding-inline, 'compact'), - map.get($grouparea-padding-inline, 'cosy'), - map.get($grouparea-padding-inline, 'comfortable') - ); - padding-block: 0; - z-index: 2; - height: 100%; - overflow: hidden; - - &:focus { - outline-style: none; - } - - %igx-chip { - margin-block: pad-block(rem(4px), rem(8px), rem(8px)); - } - } - - %igx-grid-grouparea__connector { - display: inline-flex; - justify-content: center; - align-items: center; - margin: 0 rem(4px); - - igx-icon { - width: var(--ig-icon-size, #{rem(16px)}); - height: var(--ig-icon-size, #{rem(16px)}); - font-size: var(--ig-icon-size, #{rem(16px)}); - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - } - - %igx-drop-area { - display: flex; - align-items: center; - justify-content: flex-start; - min-width: rem(80px); - height: sizable( - map.get($drop-area-height, 'compact'), - map.get($drop-area-height, 'cosy'), - map.get($drop-area-height, 'comfortable') - ); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-cell-padding-inline, 'compact'), - map.get($grid-cell-padding-inline, 'cosy'), - map.get($grid-cell-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - flex: 1 0 0%; - background: var-get($theme, 'drop-area-background'); - border-radius: var-get($theme, 'drop-area-border-radius'); - - %igx-drop-area__icon { - color: var-get($theme, 'drop-area-icon-color'); - width: rem(16px); - height: rem(16px); - font-size: rem(16px); - margin-inline-end: rem(8px); - } - } - - %igx-drop-area--hover { - background: var-get($theme, 'drop-area-on-drop-background'); - } - - %igx-drop-area__text { - @include ellipsis(); - color: var-get($theme, 'drop-area-text-color'); - font-size: rem(13px); - } - - %igx-grid__grouping-indicator { - position: relative; - display: flex; - user-select: none; - justify-content: center; - align-items: center; - z-index: 1; - cursor: pointer; - padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px)); - margin-inline-start: sizable( - #{map.get($grid-grouping-indicator-padding, 'compact')}, - #{map.get($grid-grouping-indicator-padding, 'cosy')}, - #{map.get($grid-grouping-indicator-padding, 'comfortable') - }); - min-height: var(--header-size); - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - - color: var-get($theme, 'expand-icon-color'); - } - - &:hover, - &:focus { - outline-style: none; - - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - } - - %igx-grid__header-indentation { - position: relative; - padding-inline-end: sizable( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - ); - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - background: var-get($theme, 'header-background'); - z-index: 4; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)}; - } - } - - %igx-grid__group-expand-btn { - position: absolute; - cursor: pointer; - user-select: none; - inset-block-start: calc(50% - #{$indicator-icon-width} / 2); - inset-inline-start: var(--indicator-inline-inset); - - &:hover { - color: var-get($theme, 'expand-icon-hover-color'); - } - - &%igx-grid__group-expand-btn--push { - inset-block-start: sizable( - math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2), - math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2), - math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2) - ); - } - } - - @for $i from 1 through 10 { - $row-indentation-level: ( - comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}), - cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}), - compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}) - ); - - $level--comfortable: map.get($row-indentation-level, 'comfortable'); - $level--cosy: map.get($row-indentation-level, 'cosy'); - $level--compact: map.get($row-indentation-level, 'compact'); - - %igx-grid__row-indentation--level-#{$i} { - --indicator-inline-inset: #{sizable( - map.get($grid-grouping-indicator-padding, 'compact'), - map.get($grid-grouping-indicator-padding, 'cosy'), - map.get($grid-grouping-indicator-padding, 'comfortable') - )}; - padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); - } - - $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; - $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; - $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; - - %igx-grid__group-row--padding-level-#{$i} { - %igx-grid__grouping-indicator { - padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); - } - } - } - - %igx-grid__outlet { - --ig-size: var(--grid-size); - - z-index: 10002; - position: fixed; - } - - %igx-grid__loading-outlet { - width: 100%; - height: 100%; - z-index: -1; - position: absolute; - - > %overlay-wrapper--modal { - background: none; - } - - %circular-display { - width: rem(50); - height: rem(50); - } - } - - %igx-grid__row-editing-outlet { - z-index: 10000; - position: absolute; - - %overlay-wrapper { - /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */ - position: absolute; - } - } - - %igx-grid__addrow-snackbar { - position: absolute; - z-index: 5; - bottom: rem(24px); - inset-inline-start: 50%; - transform: translateX(-50%); - } - - %igx-grid__filtering-cell { - display: flex; - align-items: center; - border-inline-end: $grid-header-border; - border-top: $grid-header-border; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - overflow: hidden; - - igx-chips-area { - transition: transform .25s $ease-out-back; - flex-wrap: nowrap; - - .igx-filtering-chips__connector { - font-size: rem(12px); - text-transform: uppercase; - font-weight: 600; - margin: 0 rem(8px); - } - } - } - - %igx-grid__filtering-cell--selected { - color: var-get($theme, 'header-selected-text-color'); - background: var-get($theme, 'header-selected-background'); - } - - %igx-grid__filtering-cell-indicator { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding-inline-end: rem(8px); - margin-inline-start: rem(8px); - cursor: pointer; - visibility: visible; - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 1)}; - } - - %igx-badge-display { - --size: #{rem(14px)}; - --font-size: #{rem(12px)}; - line-height: 0; - position: absolute; - inset-inline-end: 0; - } - } - - %igx-grid__filtering-cell-indicator--hidden { - visibility: hidden; - } - - %igx-grid__filtering-row { - position: absolute; - display: flex; - width: 100%; - height: $filtering-row-height; - padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable); - align-items: center; - justify-content: space-between; - background: var-get($theme, 'filtering-row-background'); - color: var-get($theme, 'filtering-row-text-color'); - inset-inline-start: 0; - bottom: 0; - z-index: 3; - - &::after { - display: block; - position: absolute; - content: ''; - background: inherit; - inset-inline-start: 0; - inset-inline-end: 0; - top: 0; - bottom: 0; - box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), - 0 rem(4px) rem(10px) rgba(0, 0, 0, .12); - z-index: -1; - } - - @extend %filtering-row-input-overrides !optional; - - igx-input-group { - --ig-size: var(--grid-size) !important; - } - - [igxIconButton] { - --ig-size: 1; - } - - @if $variant == 'bootstrap' { - [igxButton] { - margin: rem(4px); - } - } - } - - %igx-grid__filtering-dropdown-items { - display: flex; - align-items: center; - } - - %igx-grid__filtering-dropdown-text { - margin-inline-start: rem(16px); - } - - %igx-grid__filtering-row-main { - display: flex; - flex: 1; - overflow: hidden; - max-width: calc(100% - 176px); - min-width: rem(56px); - - igx-chips-area { - transition: transform .25s $ease-out-back; - flex-wrap: nowrap; - margin-inline: if($variant == 'indigo', rem(12px), rem(8px)); - gap: rem(4px); - } - - @if $variant != 'indigo' { - igx-chip { - margin: 0 rem(4px); - } - - [igxButton] { - igx-icon { - position: absolute; - inset-inline-start: rem(12px); - // IE fix for vertical alignment - top: 50%; - transform: translateY(-50%); - } - - span { - margin-inline-start: rem(16px); - } - } - } - } - - %igx-grid__filtering-scroll-start { - &::after { - @include _filtering-scroll-mask($theme, right); - inset-inline-start: calc(100% + 6px); - } - - [dir='rtl'] & { - &::before { - @include _filtering-scroll-mask($theme, right); - inset-inline-end: calc(100% + 6px); - } - } - } - - %igx-grid__filtering-scroll-end { - &::before { - @include _filtering-scroll-mask($theme, left); - inset-inline-end: calc(100% + 6px); - } - - [dir='rtl'] & { - &::after { - @include _filtering-scroll-mask($theme, left); - inset-inline-start: calc(100% + 6px); - } - } - } - - %igx-grid__filtering-scroll-start, - %igx-grid__filtering-scroll-end { - width: rem(24px); - height: rem(24px); - position: relative; - overflow: visible; - margin: if($variant == 'indigo', rem(12px), rem(8px)); - z-index: 1; - - [dir='rtl'] & { - transform: scaleX(-1); - - &::after { - content: initial; - } - } - } - - %igx-grid__tr--highlighted { - position: relative; - - &::after { - content: ''; - position: absolute; - top: 0; - inset-inline-start: 0; - width: rem(4px); - height: 100%; - background: var-get($theme, 'row-highlight'); - z-index: 3; - } - - %igx-grid__tr--edited { - &::before { - inset-inline-start: rem(4px); - } - } - - &::before { - inset-inline-start: rem(4px); - } - } - - %igx-grid__tr-container { - overflow: auto; - width: 100%; - border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); - } - - %igx-grid__tr-container--active { - @extend %grid-cell--active !optional; - } - - %igx-grid__hierarchical-expander { - user-select: none; - background: inherit; - padding-inline: pad-inline( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - z-index: 3; - color: var-get($theme, 'expand-icon-color'); - background-clip: border-box; - - &:focus { - outline: none; - - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - &:hover { - igx-icon { - color: var-get($theme, 'expand-icon-hover-color'); - } - } - - igx-icon { - --component-size: #{if($variant == 'indigo', 2, 3)};; - - color: var-get($theme, 'expand-icon-color'); - max-width: $hierarchical-action-icon; - min-width: min-content; - } - - [dir='rtl'] & { - transform: scaleX(-1); - } - - &--empty { - cursor: default; - pointer-events: none; - } - } - - %igx-grid__hierarchical-expander--header { - background: inherit; - border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); - z-index: 3; - background-clip: border-box; - - igx-icon { - display: flex; - align-items: center; - } - } - - %igx-grid__hierarchical-expander--push { - align-items: flex-start; - - igx-icon { - min-height: var(--header-size); - max-height: var(--header-size); - } - } - - %igx-grid__header-indentation--no-border { - border-inline-end: rem(1px) solid transparent; - } - - %igx-grid__hierarchical-indent { - display: flex; - margin-inline-start: pad-inline( - map.get($hierarchical-indent, 'compact'), - map.get($hierarchical-indent, 'cosy'), - map.get($hierarchical-indent, 'comfortable') - ); - margin-inline-end: pad-inline( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - margin-block: pad-block( - map.get($hierarchical-grid-indent, 'compact'), - map.get($hierarchical-grid-indent, 'cosy'), - map.get($hierarchical-grid-indent, 'comfortable') - ); - - &--scroll { - margin-inline-end: pad-inline( - map.get($hierarchical-indent-scroll, 'compact'), - map.get($hierarchical-indent-scroll, 'cosy'), - map.get($hierarchical-indent-scroll, 'comfortable') - ); - } - } - - @include excel-filtering($theme); - - %advanced-filtering-dialog { - @if $variant == 'indigo' { - $light-variant: contrast-color($color: 'gray', $variant: 900); - $dark-variant: color($color: 'gray', $variant: 50); - background: if($theme-variant == 'light', $light-variant, $dark-variant); - } @else { - background: color($color: 'surface', $variant: 500); - } - - box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24)); - - @if $variant == 'material' or $variant == 'bootstrap' { - border-radius: rem(4px); - } - - @if $variant == 'fluent' { - border-radius: rem(2px); - } - - @if $variant == 'indigo' { - border-radius: rem(10px); - } - - igx-query-builder { - box-shadow: none; - border: none; - border-radius: inherit; - } - - igx-query-builder-header { - cursor: grab; - } - } - - %igx-grid__filtering-row-editing-buttons--small, - %igx-grid__filtering-row-editing-buttons { - display: flex; - align-items: center; - - button { - transition: none; - } - } - - %igx-grid__filtering-row-editing-buttons--small { - button { - &:not([disabled]) { - igx-icon { - color: var-get($theme, 'sorted-header-icon-color'); - } - } - } - } - - %igx-grid__tr-action { - &:last-of-type { - border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - @if $variant != 'indigo' { - min-height: sizable( - rem(32px), - rem(40px), - rem(50px) - ); - } @else { - min-height: sizable( - rem(32px), - rem(40px), - rem(48px) - ); - } - } - } - - igx-child-grid-row { - igx-child-grid-row { - %igx-grid__tr-action { - border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - } - - // Pivot grid - %igx-grid__pivot--super-compact { - --ig-size: 1 !important; - %grid-cell-display, - %grid-cell-header { - padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important; - min-height: rem(24px) !important; - height: rem(24px); - } - - %grid-cell-header { - > * { - line-height: normal; - align-self: initial; - max-height: 100%; - } - } - - %igx-grid__tr-pivot--row-area { - padding-bottom: rem(4px); - } - } - - %grid-thead--pivot { - display: flex; - - %grid-thead--virtualizationWrapper { - border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - } - - %grid-thead--virtualizationWrapper { - height: 100%; - } - - %grid-thead--virtualizationContainer { - overflow: visible; - height: 100%; - } - - %igx-grid__tr-pivot { - display: flex; - align-items: center; - background: inherit; - overflow: hidden; - z-index: 3; - height: var(--header-size); - - @if $variant != 'indigo' { - padding-inline: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - padding-block: 0; - background-clip: border-box !important; - border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - - igx-chips-area { - flex-wrap: nowrap; - width: auto; - - > * { - margin-inline-end: rem(4px); - } - - &:last-child { - margin-inline-end: 0; - } - } - } - - %igx-grid__pivot-filter-toggle { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; - - > igx-badge { - position: absolute; - top: rem(-4px); - inset-inline-start: 60%; - width: rem(18px); - min-width: rem(18px); - height: rem(18px); - font-size: rem(10px); - pointer-events: none; - user-select: none; - } - } - - %igx-grid__pivot-empty-chip-area { - @if $variant != 'indigo' { - line-height: normal; - font-size: rem(14px); - } @else { - @include type-style('body-2'); - - @if $theme-variant == 'light' { - color: color($color: 'gray', $variant: 600); - } @else { - color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); - } - } - - margin-inline-end: 0 !important; - } - - %igx-grid__tr-pivot--row-area { - height: auto !important; - align-items: flex-end; - padding-bottom: pad-block( - map.get($pivot-row-aria-padding, 'compact'), - map.get($pivot-row-aria-padding, 'cosy'), - map.get($pivot-row-aria-padding, 'comfortable') - ); - border-inline-start: 0; - border-bottom: 0; - } - - %igx-grid__tr-pivot--small-row-area { - height: var(--header-size); - align-items: flex-end; - - border-inline-start: 0; - border-inline-end: 0; - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - - %igx-grid__tr-pivot--filter-container { - display: flex; - flex-direction: column; - } - - %igx-grid__tr-pivot--chip_drop_indicator { - width: rem(2px); - background: var-get($theme, 'resize-line-color'); - visibility: hidden; - } - - %igx-grid__tr-pivot--drop-row-area { - flex-grow: 1; - } - - %igx-grid__tr-pivot--filter { - height: var(--header-size); - - border-inline-start: 0; - border-inline-end: 0; - border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); - } - - %igx-grid-thead__wrapper--pivot { - border-bottom: 0; - } - - %igx-grid__tr-pivot-group { - flex: 1; - } - - %igx-grid__tr-pivot-toggle-icons { - display: inline-flex !important; - } - - %igx-grid__tr-pivot--columnDimensionLeaf { - box-shadow: none; - - igx-grid-header { - border: none; - } - } - - %igx-grid__tr-pivot--columnMultiRowSpan { - igx-grid-header { - > * { - visibility: hidden; - } - } - } - - %igx-grid__tr-header-row { - igx-pivot-row-dimension-header-group { - igx-pivot-row-dimension-header { - align-items: center; - } - - @if $variant == 'indigo' { - igx-icon { - opacity: if($theme-variant == 'light', .75, .85); - - &:hover { - opacity: 1; - cursor: pointer; - } - } - } - } - - igx-pivot-row-header-group { - @if $variant != 'indigo' { - padding-inline-start: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - igx-pivot-row-dimension-header { - align-items: center; - - .igx-grid-th__icons { - @if $variant != 'indigo' { - padding-inline-end: pad-inline( - map.get($grid-header-padding-inline, 'compact'), - map.get($grid-header-padding-inline, 'cosy'), - map.get($grid-header-padding-inline, 'comfortable') - ); - } @else { - padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - align-self: center; - } - } - - &:last-of-type { - igx-pivot-row-dimension-header { - border-inline-end: 0; - } - } - } - } - - .igx-pivot-grid-row-filler__wrapper { - .igx-grid-thead__wrapper { - height: 100%; - border-bottom: initial; - - .igx-grid-th { - height: 100%; - } - } - } - - %igx-grid__tbody-pivot-mrl-dimension { - .igx-grid-th { - border-bottom: none; - } - } - - // Pivot grid END + //@include css-vars($theme); + // @include scale-in-ver-center(); + // + // $variant: map.get($theme, '_meta', 'theme'); + // $theme-variant: map.get($theme, '_meta', 'variant'); + // $bootstrap-theme: $variant == 'bootstrap'; + // $not-bootstrap-theme: $variant != 'bootstrap'; + // + // $cbx-size: map.get(( + // 'material': rem(20px), + // 'fluent': rem(20px), + // 'bootstrap': rem(14px), + // 'indigo': rem(20px), + // ), $variant); + // $cbx-bs-size: rem(14px); + // + // $grid-shadow: var-get($theme, 'grid-elevation'); + // + // $grid-caption-fs: rem(20px); + // $grid-caption-lh: rem(32px); + // $grid-caption-padding: rem(16px) rem(24px); + // + // $grid-head-fs: rem(12px); + // $grid-head-fw: 600; + // $transition: all 120ms $ease-in-out-cubic; + // + // // Cell + // $grid-cell-align-num: end; + // $grid-cell-fs: rem(13px); + // $grid-cell-lh: rem(16px); + // $grid-cell-pinned-style: rem(1px) solid; + // $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300); + // + // $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // + // $cell-pin: ( + // style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'), + // color: var-get($theme, 'pinned-border-color') + // ); + // + // $padding-comfortable: rem(24px); + // $padding-cosy: rem(16px); + // $padding-compact: rem(12px); + // + // $grid-header-padding-inline: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $pivot-row-aria-padding: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $grid-cbx-padding: ( + // comfortable: $padding-comfortable, + // cosy: $padding-cosy, + // compact: $padding-compact + // ); + // + // $cbx-padding: map.get($grid-cbx-padding, 'comfortable'); + // $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy'); + // $cbx-padding-compact: map.get($grid-cbx-padding, 'compact'); + // + // $grid-header-height: ( + // comfortable: if($variant == 'indigo', rem(48px), rem(50px)), + // cosy: if($variant == 'indigo', rem(40px), rem(40px)), + // compact: if($variant == 'indigo', rem(32px), rem(32px)) + // ); + // + // $drop-area-height: ( + // comfortable: rem(32px), + // cosy: rem(24px), + // compact: rem(24px) + // ); + // + // $cell-padding-comfortable: rem(24px); + // $cell-padding-cosy: rem(16px); + // $cell-padding-compact: rem(12px); + // + // $grid-cell-padding-inline: ( + // comfortable: $cell-padding-comfortable, + // cosy: $cell-padding-cosy, + // compact: $cell-padding-compact + // ); + // + // $hierarchical-grid-indent: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px)); + // + // $hierarchical-indent: ( + // comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}), + // cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}), + // compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon}) + // ); + // + // $hierarchical-indent-scroll: ( + // comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px), + // cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px), + // compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px) + // ); + // + // $grouparea-padding-inline: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $grouparea-min-height: ( + // comfortable: if($variant == 'indigo', rem(56px), rem(57px)), + // cosy: if($variant == 'indigo', rem(48px), rem(49px)), + // compact: if($variant == 'indigo', rem(40px), rem(41px)) + // ); + // + // $grid-grouping-indicator-padding: ( + // comfortable: rem(24px), + // cosy: rem(16px), + // compact: rem(12px) + // ); + // + // $indicator-icon-width: map.get(( + // 'material': rem(24px), + // 'fluent': rem(24px), + // 'bootstrap': rem(24px), + // 'indigo': rem(16px), + // ), $variant); + // + // $drag-icon-size: rem(24px); + // + // $grid-header-weight: map.get(( + // 'material': 600, + // 'fluent': 800, + // 'bootstrap': 700, + // 'indigo': 600, + // ), $variant); + // + // $editing-outline-width: rem(2px); + // + // $filtering-row-height: #{sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // )}; + // + // %cell-input-overrides { + // // Have a more stable visual editing experience + // > igx-input-group, + // igx-combo, + // igx-simple-combo, + // igx-select, + // igx-date-picker, + // igx-time-picker { + // position: relative; + // height: auto; + // width: 100% !important; + // overflow: hidden; + // } + // + // igx-input-group { + // background: var-get($theme, 'cell-editing-background'); + // + // input { + // height: 100%; + // color: var-get($theme, 'cell-editing-foreground'); + // } + // + // input:focus { + // color: var-get($theme, 'cell-editing-focus-foreground'); + // } + // } + // + // igx-select, + // igx-combo, + // igx-simple-combo, + // igx-time-picker, + // igx-date-picker { + // igx-input-group { + // height: 100%; + // } + // } + // + // .igx-input-group__bundle { + // background: transparent !important; + // height: 100% !important; + // min-height: 100% !important; + // border: none !important; + // + // .igx-input-group__filler, + // .igx-input-group__notch { + // border: none !important; + // } + // + // &::before { + // content: none !important; + // } + // + // &::after { + // display: none; + // } + // } + // + // .igx-input-group--indigo .igx-input-group__bundle:hover, + // .igx-input-group--indigo .igx-input-group__bundle:focus { + // background: transparent; + // } + // + // .igx-input-group__bundle-main, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end { + // height: auto; + // border: none !important; + // border-radius: 0 !important; + // } + // + // .igx-input-group__bundle-main { + // padding: 0; + // } + // + // .igx-input-group__line { + // display: none; + // } + // + // igx-prefix, + // igx-suffix { + // background: transparent !important; + // border-radius: 0 !important; + // padding-top: 0 !important; + // padding-bottom: 0 !important; + // border: none !important; + // padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + // } + // + // .igx-input-group--indigo { + // padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; + // + // igx-prefix { + // padding-inline-start: 0 !important; + // } + // + // igx-suffix { + // padding-inline-end: 0 !important; + // } + // } + // + // .igx-input-group__input { + // padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + // } + // + // igx-date-range-picker { + // height: 100%; + // } + // + // igx-time-picker [igxLabel] { + // display: none; + // } + // + // input { + // margin: 0 auto; + // max-width: 100%; + // } + // + // %form-group-input { + // // ignore global typography + // font-size: $grid-cell-fs !important; + // line-height: $grid-cell-lh !important; + // } + // + // .igx-input-group__input, + // .igx-input-group__file-input, + // .igx-input-group__textarea { + // box-shadow: none !important; + // border: none !important; + // } + // + // .igx-input-group--disabled, + // .igx-input-group--disabled igx-prefix, + // .igx-input-group--disabled igx-suffix { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // + // @if $variant != 'indigo' { + // %filtering-row-input-overrides { + // igx-input-group { + // width: 100%; + // max-width: rem(200px); + // min-width: rem(140px); + // + // @if $variant != 'fluent' { + // border: rem(1px) solid color($color: 'gray', $variant: 300); + // } + // + // --size: calc(#{$filtering-row-height} - #{rem(8px)}); + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // igx-prefix, + // igx-suffix { + // background: transparent; + // border-radius: 0; + // + // /* stylelint-disable-next-line */ + // &:hover { + // background: transparent; + // } + // } + // + // igx-prefix, + // igx-suffix { + // height: 100% !important; + // padding: 0 sizable(rem(4px), rem(6px), rem(8px)); + // } + // + // .igx-input-group__input { + // font-size: sizable(rem(12px), rem(14px), rem(16px)); + // padding-inline-start: 0; + // padding-block: 0; + // height: 100%; + // } + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // .igx-input-group__input { + // border: 0; + // + // /* stylelint-disable-next-line */ + // &:hover { + // border: 0; + // box-shadow: none; + // } + // } + // + // .igx-input-group__bundle::after { + // display: none; + // } + // + // .igx-input-group__bundle-main { + // padding-inline-start: 0; + // } + // + // color: var-get($theme, 'filtering-row-text-color'); + // + // &:hover{ + // color: var-get($theme, 'filtering-row-text-color'); + // border-color: color($color: 'primary', $variant: 500); + // } + // } + // + // .igx-input-group--focused { + // @if $variant != 'fluent' { + // border-color: color($color: 'primary', $variant: 500); + // border-width: rem(1px); + // } + // + // color: var-get($theme, 'filtering-row-text-color'); + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // .igx-input-group__input { + // border: 0 !important; + // + // @if $variant != 'fluent' { + // box-shadow: none !important; + // } + // } + // + // .igx-input-group__bundle-main, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end { + // margin: 0 !important; + // } + // + // .igx-input-group__bundle, + // .igx-input-group__bundle-start, + // .igx-input-group__bundle-end, + // igx-prefix, + // igx-suffix { + // background: transparent !important; + // border-radius: 0; + // } + // } + // + // .igx-input-group__line { + // display: none; + // } + // + // igx-prefix:focus { + // color: color(map.get($theme, 'palette'), 'secondary'); + // } + // + // igx-suffix { + // igx-icon { + // outline-style: none; + // + // &:focus { + // color: color($color: 'secondary'); + // } + // + // + igx-icon { + // margin-inline-start: rem(4px); + // } + // } + // } + // } + // } + // + // igx-grid, + // igx-hierarchical-grid, + // igx-pivot-grid, + // igx-tree-grid { + // @if $variant == 'material' { + // @if $theme-variant == 'light' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + // } + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'fluent' { + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'bootstrap' { + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // + // @if $variant == 'indigo' { + // @if $theme-variant == 'light' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + // } + // @if $theme-variant == 'dark' { + // --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + // --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + // --igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + // } + // } + // } + // + // %disable-focus-styles { + // outline: 0; + // } + // + // %grid-host { + // @include sizable(); + // + // --component-size: var(--ig-size, var(--ig-size-large)); + // --grid-size: var(--component-size); + // } + // + // %grid-display { + // --header-size: #{sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // )}; + // + // --grouparea-size: #{sizable( + // map.get($grouparea-min-height, 'compact'), + // map.get($grouparea-min-height, 'cosy'), + // map.get($grouparea-min-height, 'comfortable') + // )}; + // + // --igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; + // + // position: relative; + // display: grid; + // grid-template-rows: auto auto auto 1fr auto auto; + // grid-template-columns: 100%; + // overflow: hidden; + // box-shadow: $grid-shadow; + // + // @if $variant == 'fluent' { + // box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color'); + // } + // + // outline-style: none; + // z-index: 1; + // + // %cbx-display { + // min-width: $cbx-size; + // + // @if $variant == 'material' { + // %cbx-composite-wrapper { + // padding: 0; + // } + // + // %cbx-label-pos--after { + // margin-inline-start: rem(12px); + // } + // + // %cbx-label-pos--before { + // margin-inline-end: rem(12px); + // } + // + // %cbx-label-pos--before, + // %cbx-label-pos--after { + // &:empty { + // margin: 0; + // } + // } + // } + // } + // } + // + // %grid-caption { + // display: flex; + // align-items: center; + // font-size: $grid-caption-fs; + // line-height: $grid-caption-lh; + // padding: $grid-caption-padding; + // grid-row: 1; + // } + // + // %grid-thead, + // %grid-tfoot { + // position: relative; + // display: flex; + // background: var-get($theme, 'header-background'); + // color: var-get($theme, 'header-text-color'); + // overflow: hidden; + // outline-style: none; + // + // %grid-row { + // position: relative; + // background: inherit; + // color: inherit; + // z-index: 2; + // + // &:hover { + // background: inherit; + // color: inherit; + // } + // } + // + // > [aria-activedescendant] { + // outline-style: none; + // } + // } + // + // %grid-thead { + // border-bottom: $grid-header-border; + // + // @if $bootstrap-theme { + // border-bottom-width: rem(2px); + // } + // + // z-index: 2; + // + // %grid__cbx-selection--push { + // align-items: flex-start; + // padding-block-start: pad-block( + // math.div(map.get($grid-header-height, 'compact') - rem(20px), 2), + // math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2), + // math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2) + // ); + // } + // + // %grid-row { + // border-bottom: none; + // } + // } + // + // %grid-thead-container { + // grid-row: 3; + // display: flex; + // overflow: hidden; + // + // %igx-grid__header-indentation { + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // + // @if $variant == 'indigo' { + // %igx-grid__group-expand-btn { + // color: var-get($theme, 'expand-icon-color'); + // } + // + // %igx-grid__group-expand-btn:hover{ + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // } + // + // %igx-grid__drag-indicator { + // cursor: default; + // } + // + // %grid-row--mrl { + // %igx-grid__hierarchical-expander--header, + // %igx-grid__hierarchical-expander, + // %igx-grid__header-indentation, + // %igx-grid__row-indentation, + // %grid__cbx-selection { + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // + // &:focus-visible { + // outline-color: transparent; + // } + // } + // + // %grid-thead-title { + // flex-basis: auto !important; + // align-items: center !important; + // border-bottom: $grid-header-border; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &:hover { + // opacity: 1; + // cursor: pointer; + // } + // } + // } + // + // padding-block: 0; + // } + // + // %grid-thead-title--pinned { + // border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // } + // + // %grid-thead-group { + // display: flex; + // flex-flow: row nowrap; + // } + // + // /* We set those with position relative + // so that the drop indicators be scoped + // to their respective group. The item + // being the topmost element, while the + // subgroup encapsulates children of each + // thead item and group. + // */ + // %grid-thead-item { + // display: flex; + // flex-flow: column nowrap; + // + // %grid-thead-group { + // flex: 1 1 auto; + // } + // + // %grid-cell-header { + // flex: 1 1 auto; + // } + // + // %grid-thead-title { + // flex: 0 0 auto; + // } + // } + // + // %grid-thead-item, + // %grid-thead-subgroup { + // position: relative; + // } + // + // %grid-tfoot { + // grid-row: 5; + // border-top: $grid-header-border; + // z-index: 10001; + // } + // + // %grid-footer { + // grid-row: 7; + // } + // + // %grid-display-container-thead { + // width: 100%; + // overflow: visible; + // } + // + // %grid-display-container-tr { + // width: 100%; + // overflow: visible; + // flex: 1; + // // needed to override the min-width of the column headers + // min-width: 0; + // } + // + // %grid-mrl-block { + // display: grid; + // background: inherit; + // position: relative; + // + // %grid-thead-item { + // display: flex; + // } + // + // %grid-cell-header { + // align-items: center; + // flex-grow: 1; + // border-bottom: $grid-header-border; + // } + // + // %grid-cell-display { + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // border-bottom: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // %grid-row--mrl { + // &%grid-row { + // border-bottom-color: transparent; + // + // @if $variant == 'indigo' { + // %grid-cell-display { + // border-inline-end: rem(1px) solid var-get($theme, 'row-border-color'); + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // } + // } + // + // %grid__cbx-selection, + // %igx-grid__hierarchical-expander, + // %igx-grid__row-indentation, + // %igx-grid__drag-indicator { + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // } + // + // %grid-tbody { + // position: relative; + // background: var-get($theme, 'content-background'); + // color: var-get($theme, 'content-text-color'); + // overflow: hidden; + // z-index: 1; + // outline-style: none; + // } + // + // %grid-tbody-container { + // position: relative; + // display: flex; + // grid-row: 4; + // overflow: hidden; + // } + // + // %grid-tbody-message { + // display: flex; + // justify-content: center; + // align-items: center; + // height: 100%; + // color: var-get($theme, 'content-text-color'); + // flex-direction: column; + // padding: rem(24px); + // } + // + // %igx-grid__loading { + // display: flex; + // align-items: center; + // justify-content: center; + // height: 100%; + // min-height: rem(100px); + // + // > %circular-display { + // width: rem(50); + // height: rem(50); + // } + // } + // + // %grid-scroll { + // grid-row: 6; + // display: flex; + // flex-flow: row nowrap; + // width: 100%; + // background: var-get($theme, 'header-background'); + // z-index: 10001; + // } + // + // %grid-thead-thumb { + // background: var-get($theme, 'header-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // + // %grid-tfoot-thumb { + // position: absolute; + // top: 0; + // inset-inline-end: 0; + // background: var-get($theme, 'header-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // + // %grid-tbody-scrollbar { + // background: var-get($theme, 'content-background'); + // border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); + // position: relative; + // } + // + // %grid-tbody-scrollbar-start { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-tbody-scrollbar-main { + // position: relative; + // } + // + // %grid-tbody-scrollbar-end { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-scroll-start { + // background: var-get($theme, 'header-background'); + // } + // + // %grid-scroll-main { + // igx-display-container { + // height: 0; + // } + // + // igx-horizontal-virtual-helper { + // height: 100%; + // } + // } + // + // %grid-row { + // display: flex; + // background: var-get($theme, 'content-background'); + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // outline-style: none; + // position: relative; + // //background-clip: content-box !important; + // + // &:hover { + // background: var-get($theme, 'row-hover-background'); + // color: var-get($theme, 'row-hover-text-color'); + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-hover-text-color'); + // background: var-get($theme, 'row-selected-hover-background'); + // } + // + // %grid-cell--cross-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // } + // + // &%igx-grid__tr--ghost { + // background: var-get($theme, 'row-ghost-background'); + // color: var-get($theme, 'row-drag-color'); + // z-index: 10002; + // + // @include css-vars(( + // name: 'igx-grid-row', + // row-ghost-background: map.get($theme, 'row-ghost-background'), + // row-drag-color: map.get($theme, 'row-drag-color') + // )); + // } + // } + // + // %igx-grid__drag-indicator { + // display: flex; + // align-items: center; + // justify-content: center; + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // } + // + // &:hover { + // igx-icon { + // opacity: 1; + // } + // } + // } + // + // padding-block: 0; + // flex: 0 0 auto; + // background: inherit; + // z-index: 4; + // cursor: move; + // border-inline-end: rem(1px) solid transparent; + // //background-clip: border-box; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__drag-indicator--header { + // border-inline-end: $grid-header-border; + // } + // + // %igx-grid__drag-indicator--off { + // color: var-get($theme, 'row-drag-color'); + // } + // + // %igx-grid__tr--drag { + // opacity: .5; + // } + // + // %grid-row--odd { + // background: var-get($theme, 'row-odd-background'); + // color: var-get($theme, 'row-odd-text-color'); + // } + // + // %grid-row--even { + // background: var-get($theme, 'row-even-background'); + // color: var-get($theme, 'row-even-text-color'); + // } + // + // %igx-grid__tr--expanded { + // border-bottom: none; + // } + // + // %igx-grid__tr--pinned { + // position: relative; + // background: inherit; + // z-index: 10000; + // + // %igx-grid__hierarchical-expander--empty { + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // %igx-grid__tr--pinned-top { + // border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // } + // + // %igx-grid__tr--pinned-bottom { + // border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // position: absolute; + // bottom: 0; + // } + // + // %igx-grid__td--centered { + // justify-content: center; + // } + // + // %igx-grid__td--bool { + // display: flex; + // flex-grow: 1; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // } + // + // %igx-icon--error { + // @if $variant == 'indigo' or $theme-variant == 'dark' { + // color: color($color: 'gray', $variant: 500); + // } @else { + // color: color($color: 'gray', $variant: 600); + // } + // } + // } + // + // %igx-grid__td--bool-true { + // %igx-icon--success { + // color: color($color: 'gray', $variant: 700); + // } + // } + // + // %igx-grid__tr--edit { + // border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); + // position: relative; + // + // &::after { + // content: ''; + // position: absolute; + // height: rem(1); + // width: 100%; + // top: rem(-1); + // inset-inline-start: 0; + // background: var-get($theme, 'edit-mode-color'); + // } + // + // &%grid-row { + // border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color'); + // } + // + // %igx-grid__td--editing { + // border: none; + // + // %form-group-bundle--focus { + // caret-color: var-get($theme, 'edit-mode-color') !important; + // } + // + // %form-group-border { + // background: var-get($theme, 'edit-mode-color') !important; + // } + // } + // + // [aria-readonly='true'] { + // color: var-get($theme, 'cell-disabled-color'); + // + // igx-icon { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // } + // + // %igx-grid__tr--inner { + // display: flex; + // background: inherit; + // } + // + // %igx-grid__tr--header { + // display: flex; + // align-items: center; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__tr--add-animate { + // @include animation(scale-in-ver-center .2s $ease-in-out-quad); + // } + // + // %grid-row--edit-mrl { + // &:first-of-type::after { + // top: 0; + // z-index: 5; + // } + // } + // + // %igx-grid__tr--edited { + // &::before { + // content: ''; + // position: absolute; + // width: if($variant == 'indigo', rem(4px), rem(2px)); + // height: 100%; + // z-index: 10000; + // background: var-get($theme, 'edited-row-indicator'); + // } + // } + // + // %grid-row--group { + // position: relative; + // background: var-get($theme, 'header-background') !important; + // } + // + // %igx-grid-row--filtered { + // %grid-cell-text { + // color: var-get($theme, 'tree-filtered-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-filtered-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-filtered-text-color'); + // } + // } + // + // %grid-cell--selected { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // } + // } + // } + // + // %grid-row--selected--filtered { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-row-text-color'); + // } + // } + // + // %grid-cell--selected { + // %grid-cell-text { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // + // &:hover { + // color: var-get($theme, 'tree-selected-filtered-cell-text-color'); + // } + // } + // } + // } + // + // %igx-grid__tree-grouping-indicator { + // display: flex; + // align-items: center; + // justify-content: center; + // user-select: none; + // outline-style: none; + // margin-inline-end: if($variant == 'indigo', rem(4px), rem(8)); + // cursor: pointer; + // + // color: var-get($theme, 'expand-icon-color'); + // + // &:hover { + // color: var-get($theme, 'expand-icon-hover-color') + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)};; + // } + // } + // + // %igx-grid__tree-loading-indicator { + // width: rem(24px, 16px); + // height: rem(24px, 16px); + // margin-inline-end: rem(8px, 16px); + // + // %circular-outer { + // stroke: var-get($theme, 'expand-icon-color'); + // } + // + // > %circular-display { + // width: rem(24); + // height: rem(24); + // } + // } + // + // %grid-cell-display { + // position: relative; + // display: flex; + // flex: 1 1 0%; + // align-items: center; + // outline-style: none; + // + // @extend %cell-input-overrides; + // + // igx-input-group { + // background: transparent; + // } + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // color: inherit; + // text-align: start; + // //background-clip: border-box !important; + // + // @if $variant != 'indigo' { + // font-size: $grid-cell-fs; + // line-height: $grid-cell-lh; + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // @include type-style('detail-1', false); + // + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // } + // } + // + // // This is no longer being extended and is left + // // here for reference purposes only. It seems setting + // // overflow: hidden on the cell prevents drag and selection + // // of the cell. + // // See github issue #9821 + // %igx-grid__td--tree-cell { + // overflow: hidden; + // } + // + // %grid-cell-text { + // @include ellipsis(); + // + // pointer-events: none; + // } + // + // %grid-cell--fixed-width { + // flex-grow: 0; + // outline-style: none; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %grid-cell--active { + // box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color'); + // + // > %igx-grid__filtering-cell, + // > %grid-cell-header { + // border-inline-end-color: var-get($theme, 'cell-active-border-color'); + // border-bottom-color: var-get($theme, 'cell-active-border-color'); + // } + // } + // + // %grid-cell--invalid { + // padding-inline-end: rem(4px) !important; + // + // > igx-icon { + // color: color($color: 'error'); + // width: var(--igx-icon-size, rem(18px)); + // height: var(--igx-icon-size, rem(18px)); + // font-size: var(--igx-icon-size, rem(18px)); + // } + // + // %grid-cell-text { + // width: 100%; + // } + // + // .igx-input-group__bundle { + // &:focus-within { + // &::after { + // border: none !important; + // } + // } + // } + // } + // + // %grid-cell--valid { + // box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important; + // } + // + // %grid-cell--pinned-selected, + // %grid-cell--selected { + // color: var-get($theme, 'cell-selected-text-color'); + // background: var-get($theme, 'cell-selected-background'); + // // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981 + // // border-bottom: 0; + // + // %igx-grid__tree-grouping-indicator { + // &:hover { + // color: var-get($theme, 'cell-selected-text-color'); + // } + // } + // } + // + // %grid-row--selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // + // %grid-cell--selected, + // %grid-cell--pinned-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // + // &:hover { + // background: var-get($theme, 'row-selected-hover-background'); + // color: var-get($theme, 'row-selected-hover-text-color'); + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-hover-text-color'); + // background: var-get($theme, 'row-selected-hover-background'); + // } + // } + // + // %igx-grid__tree-grouping-indicator { + // color: var-get($theme, 'row-selected-text-color'); + // + // &:hover { + // color: var-get($theme, 'row-selected-text-color'); + // } + // } + // } + // + // %grid-cell--column-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // } + // + // %grid-cell--cross-selected { + // color: var-get($theme, 'cell-selected-within-text-color'); + // background: var-get($theme, 'cell-selected-within-background'); + // } + // + // %igx-grid__td--new { + // color: var-get($theme, 'cell-new-color'); + // } + // + // %igx-grid__td--edited { + // %grid-cell-text { + // font-style: italic; + // color: var-get($theme, 'cell-edited-value-color'); + // padding: 0 rem(1px); + // } + // } + // + // %igx-grid__tr--merged { + // border-block-end: 0; + // } + // + // %igx-grid__tr--merged-top { + // position: absolute; + // width: 100%; + // } + // + // %igx-grid__td--merged { + // z-index: 1; + // grid-row: 1 / -1; + // } + // + // %igx-grid__td--merged-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background') !important; + // } + // + // %igx-grid__td--merged-hovered { + // background: var-get($theme, 'row-hover-background') !important; + // color: var-get($theme, 'row-hover-text-color'); + // } + // + // %igx-grid__td--merged-selected-hovered { + // background: var-get($theme, 'row-selected-hover-background') !important; + // color: var-get($theme, 'row-selected-hover-text-color'); + // } + // + // %igx-grid__tr--deleted { + // %grid-cell-text { + // font-style: italic; + // color: color(map.get($theme, 'palette'), 'error'); + // text-decoration: line-through; + // } + // } + // + // %igx-grid__tr--disabled { + // %grid-cell-text { + // color: var-get($theme, 'cell-disabled-color'); + // } + // } + // + // %igx-grid__td--editing { + // background: var-get($theme, 'cell-editing-background') !important; + // box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color'); + // padding-inline: rem(4px); + // + // &.igx-grid__td--invalid { + // box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important; + // } + // + // &%grid-cell-number { + // justify-content: flex-start !important; + // } + // } + // + // %grid-cell--pinned { + // position: relative; + // background: inherit; + // z-index: 9999; + // } + // + // %grid-cell--pinned--column-selected { + // color: var-get($theme, 'row-selected-text-color'); + // background: var-get($theme, 'row-selected-background'); + // + // &:hover { + // background: var-get($theme, 'row-selected-hover-background'); + // color: var-get($theme, 'row-selected-text-color'); + // } + // } + // + // %grid-cell--pinned-last { + // border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // + // %igx-grid__filtering-cell, + // %grid-cell-header { + // border-inline-end: none; + // } + // + // &%grid-cell--editing { + // border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; + // } + // } + // + // %grid-cell--pinned-first { + // border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important; + // + // &%grid-cell--editing { + // border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important; + // } + // } + // + // %grid-cell--row-pinned-first { + // overflow: hidden; + // } + // + // %grid-cell--pinned-chip { + // margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); + // } + // + // %grid-cell-header { + // flex-flow: row nowrap; + // justify-content: space-between; + // align-items: flex-end; + // + // @if $variant != 'indigo' { + // font-size: $grid-head-fs; + // font-weight: $grid-head-fw; + // + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // min-width: 0; + // padding-block: 0; + // border-inline-end: $grid-header-border; + // min-height: var(--header-size); + // outline-style: none; + // overflow: hidden; + // transition: color 250ms ease-in-out; + // } + // + // %grid-cell-header--filtering { + // background: var-get($theme, 'filtering-header-background'); + // color: var-get($theme, 'filtering-header-text-color'); + // z-index: 3; + // } + // + // %grid-cell-header-title { + // @include ellipsis(); + // + // @if $variant != 'indigo' { + // font-weight: $grid-header-weight; + // } @else { + // @include type-style('detail-2', false); + // } + // + // min-width: 3ch; + // user-select: none; + // cursor: initial; + // flex-grow: 1; /* hey IE, the text should take most of the space */ + // // align-self: flex-end; /* commenting out for now on external request */ + // line-height: var(--header-size); + // transition: color 250ms ease-in-out; + // } + // + // %grid-cell-header-icons { + // display: inline-flex; + // align-items: center; + // justify-content: flex-end; + // user-select: none; + // min-width: rem(30px); /* sort-icon + filter icon width */ + // height: var(--header-size); + // align-self: flex-end; + // + // &:empty { + // min-width: 0; + // } + // + // .sort-icon { + // position: relative; + // display: flex; + // + // + // @if $variant != 'indigo' { + // igx-icon { + // --size: var(--igx-icon-size, #{rem(15px)}); + // } + // } + // + // &::after { + // content: attr(data-sortIndex); + // position: absolute; + // top: rem(-5px); + // inset-inline-end: rem(-1px); + // font-size: rem(10px); + // text-align: end; + // font-family: sans-serif; + // line-height: rem(10px); + // } + // } + // } + // + // %igx-grid-th__expander { + // display: flex; + // align-items: center; + // justify-content: center; + // margin-inline-end: rem(8px); + // cursor: pointer; + // + // igx-icon { + // @if $variant == 'indigo' { + // --component-size: 2; + // } + // + // color: var-get($theme, 'expand-icon-color'); + // } + // + // &:hover { + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // } + // + // %igx-grid-th__group-title { + // @include ellipsis(); + // + // @if $variant == 'indigo' { + // @include type-style('detail-2', false); + // } + // } + // + // %igx-grid-th--collapsible { + // justify-content: normal; + // } + // + // %igx-grid-th--selectable { + // @if $variant != 'indigo' { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &%grid__drag-ghost-image { + // opacity: 1; + // } + // } @else { + // opacity: 1; + // } + // + // .sort-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // ::after { + // background: var-get($theme, 'header-selected-background'); + // } + // } + // } + // + // // TODO, remove igx-banner__row extra div if possible + // @if $variant { + // %igx-banner__row { + // display: contents; + // } + // } + // + // %igx-grid-th--selected { + // .sort-icon::after { + // background: var-get($theme, 'header-selected-background'); + // } + // } + // + // %igx-grid-th--selectable, + // %igx-grid-th--selected { + // color: var-get($theme, 'header-selected-text-color'); + // background: var-get($theme, 'header-selected-background'); + // + // &%igx-grid-th--sorted { + // .sort-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // > igx-icon { + // color: inherit; + // } + // + // &:focus, + // &:hover { + // color: var-get($theme, 'header-selected-text-color'); + // + // > igx-icon { + // color: inherit; + // } + // } + // } + // } + // + // @if $variant == 'indigo' { + // %grid-excel-icon--filtered, + // %grid-excel-icon { + // color: var-get($theme, 'header-selected-text-color'); + // + // igx-icon { + // color: var-get($theme, 'header-selected-text-color'); + // } + // + // &:focus, + // &:hover { + // color: var-get($theme, 'header-selected-text-color'); + // + // igx-icon { + // color: var-get($theme, 'header-selected-text-color'); + // } + // } + // } + // } + // } + // + // %igx-grid-th--active { + // @extend %grid-cell--active; + // + // %igx-grid-th--selected, + // %igx-grid-th--selectable { + // @extend %grid-cell--active; + // } + // } + // + // %igx-grid-summary--active { + // @extend %grid-cell--active !optional; + // } + // + // %igx-grid-th--sortable { + // .sort-icon { + // cursor: pointer; + // opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7); + // + // &:hover { + // opacity: 1; + // } + // } + // } + // + // %igx-grid-th--sorted { + // .sort-icon { + // opacity: 1; + // color: var-get($theme, 'sorted-header-icon-color'); + // + // > igx-icon { + // color: inherit; + // } + // + // &:hover { + // color: var-get($theme, 'sortable-header-icon-hover-color'); + // + // > igx-icon { + // color: inherit; + // } + // } + // } + // } + // + // %igx-grid-th--filtrable { + // %grid-cell-header-title { + // @if $variant != 'indigo' { + // opacity: .7; + // } + // } + // } + // + // %igx-grid-th--filtrable-sortable { + // .sort-icon { + // cursor: pointer; + // opacity: if($variant == 'indigo', 1, .7); + // + // &:hover { + // opacity: 1; + // } + // } + // } + // + // %grid-excel-icon--filtered, + // %grid-excel-icon, + // .sort-icon { + // transition: all 250ms ease-in-out; + // } + // + // %grid-cell-number { + // text-align: $grid-cell-align-num; + // justify-content: flex-end; + // flex-grow: 1; + // + // %grid-cell-header-icons { + // justify-content: flex-start; + // order: -1; + // + // .sort-icon { + // order: 1; + // } + // } + // } + // + // %grid__cbx-selection { + // display: flex; + // justify-content: center; + // align-items: center; + // background: inherit; + // z-index: 4; + // //background-clip: border-box; + // } + // + // %cbx-padding { + // display: flex; + // align-items: center; + // justify-content: center; + // padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding); + // } + // + // %grid__resize-handle { + // position: absolute; + // width: rem(4px); + // top: 0; + // inset-inline-end: rem(-2px); + // height: 100%; + // z-index: 2; + // } + // + // %grid__resize-line { + // position: absolute; + // cursor: col-resize; + // width: rem(4px); + // background: var-get($theme, 'resize-line-color'); + // z-index: 2; + // + // &::before, + // &::after { + // position: absolute; + // content: ''; + // height: 100%; + // width: rem(96px); + // } + // + // &::before { + // inset-inline-end: 100%; + // } + // + // &::after { + // inset-inline-start: 100%; + // } + // } + // + // %grid-summaries { + // display: flex; + // overflow: hidden; + // outline-style: none; + // background-color: var-get($theme, 'summaries-patch-background'); + // } + // + // %grid-summaries--body { + // --summaries-patch-background: var(--ig-gray-100); + // + // border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); + // background-color: var-get($theme, 'summaries-patch-background'); + // + // &:last-of-type { + // border-bottom: none; + // } + // + // .igx-grid-summary { + // --background-color: inherit; + // --result-color: #{adaptive-contrast(var(--background-color))}; + // } + // } + // + // %grid-summaries-patch { + // position: relative; + // background: inherit; + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // z-index: 1; + // + // @if $variant == 'indigo' { + // border-top: rem(1px) solid var-get($theme, 'header-border-color'); + // } + // } + // + // // Column moving + // %igx-grid-th__drop-indicator-left, + // %igx-grid-th__drop-indicator-right { + // position: absolute; + // width: rem(1px); + // height: 100%; + // top: 0; + // z-index: 1; + // } + // + // %igx-grid-th__drop-indicator-left { + // inset-inline-start: rem(-1px); + // } + // + // %igx-grid-th__drop-indicator-right { + // inset-inline-end: rem(-1px); + // } + // + // %igx-grid-th__drop-indicator--active { + // &%igx-grid-th__drop-indicator-left, + // &%igx-grid-th__drop-indicator-right { + // border-inline-end: rem(1px) solid var-get($theme, 'drop-indicator-color'); + // } + // + // &::after, + // &::before { + // position: absolute; + // content: ''; + // width: 0; + // height: 0; + // border-style: solid; + // inset-inline-start: rem(-3px); + // } + // + // &::before { + // bottom: 0; + // border-width: 0 rem(4px) rem(4px); + // border-color: transparent transparent var-get($theme, 'drop-indicator-color'); + // } + // + // &::after { + // top: 0; + // border-width: rem(4px) rem(4px) 0; + // border-color: var-get($theme, 'drop-indicator-color') transparent transparent; + // } + // } + // + // %grid__scroll-on-drag-left, + // %grid__scroll-on-drag-right { + // position: absolute; + // width: rem(15px); + // top: 0; + // height: 100%; + // z-index: 25; + // } + // + // %grid__scroll-on-drag-left { + // inset-inline-start: 0; + // } + // + // %grid__scroll-on-drag-right { + // inset-inline-end: 0; + // } + // + // %grid__scroll-on-drag-pinned { + // position: absolute; + // width: rem(15px); + // height: 100%; + // top: 0; + // z-index: 25; + // } + // + // %grid__drag-ghost-image { + // position: absolute; + // display: flex; + // align-items: center; + // background: var-get($theme, 'ghost-header-background'); + // color: var-get($theme, 'ghost-header-text-color'); + // min-width: rem(168px); + // max-width: rem(320px); + // height: var(--header-size); + // min-height: var(--header-size); + // top: rem(-99999px); + // inset-inline-start: rem(-99999px); + // border: none; + // box-shadow: var-get($theme, 'drag-elevation'); + // overflow: hidden; + // z-index: 20; + // + // %grid-cell-header-title { + // @include ellipsis(); + // flex: 1 0 0; + // text-align: if($variant == 'indigo', start, end); + // } + // + // %grid-cell-header-icons { + // display: none; + // } + // + // %grid-thead-title { + // border: none; + // } + // } + // + // %grid__drag-ghost-image-icon { + // color: var-get($theme, 'ghost-header-icon-color'); + // margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px)); + // } + // + // %grid__drag-ghost-image-icon-group { + // color: var-get($theme, 'ghost-header-icon-color'); + // padding: $padding-comfortable; + // padding-inline-end: 0; + // margin-inline-end: rem(8); + // } + // + // %igx-grid__drag-col-header { + // background: var-get($theme, 'header-background'); + // + // %grid-cell-header { + // > * { + // opacity: .4; + // } + // } + // } + // + // // Group by section + // %igx-grid__group-row { + // background: var-get($theme, 'group-row-background'); + // display: flex; + // outline-style: none; + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // min-height: var(--header-size); + // + // %igx-grid__drag-indicator { + // cursor: default; + // flex-grow: 0; + // } + // + // %grid__cbx-selection { + // background: initial; + // } + // } + // + // %igx-grid__group-row--active { + // background: var-get($theme, 'group-row-selected-background'); + // @extend %grid-cell--active !optional; + // + // %igx-grid__grouping-indicator { + // color: var-get($theme, 'expand-icon-color'); + // } + // + // %igx-grid__drag-indicator { + // border: rem(1px) solid var-get($theme, 'cell-active-border-color'); + // border-inline-start-width: 0; + // border-inline-end-width: 0; + // box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'cell-active-border-color'); + // } + // + // &:hover { + // background: var-get($theme, 'group-row-selected-background'); + // } + // } + // + // %igx-group-label { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // line-height: rem(16px); + // gap: rem(4px); + // } + // + // %igx-group-label__icon { + // @at-root igx-icon#{&} { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // + // color: var-get($theme, 'group-label-icon'); + // user-select: none; + // } + // } + // + // %igx-group-label__column-name { + // @if $variant != 'indigo' { + // font-weight: 600; + // font-size: rem(12px); + // } @else { + // @include type-style('detail-2', false); + // } + // + // color: var-get($theme, 'group-label-column-name-text'); + // + // } + // + // + // %igx-group-label__count-badge { + // --background-color: #{var-get($theme, 'group-count-background')}; + // --text-color: #{var-get($theme, 'group-count-text-color')}; + // + // @if $variant == 'indigo' { + // --shadow: none; + // } + // + // > span { + // font-size: $grid-head-fs; + // } + // } + // + // + // %igx-group-label__text { + // @if $variant != 'indigo' { + // font-size: rem(13px); + // } @else { + // @include type-style('detail-1', false); + // } + // color: var-get($theme, 'group-label-text') + // } + // + // [dir='rtl'] { + // %igx-group-label { + // > * { + // margin-inline-start: rem(4px); + // + // &:last-child { + // margin-inline-start: 0; + // } + // } + // } + // } + // + // %igx-grid__group-content { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // flex: 1 1 auto; + // @if $variant != 'indigo' { + // padding-inline-start: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // } @else { + // padding-inline-start: 0; + // } + // + // min-height: sizable( + // map.get($grid-header-height, 'compact'), + // map.get($grid-header-height, 'cosy'), + // map.get($grid-header-height, 'comfortable') + // ); + // + // &:focus { + // outline: transparent; + // } + // } + // + // %igx-grid__row-indentation { + // position: relative; + // display: flex; + // justify-content: center; + // align-items: center; + // padding-inline-start: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // padding-inline-end: pad-inline( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // background: inherit; + // z-index: 1; + // //background-clip: border-box; + // + // &::after { + // content: ''; + // position: absolute; + // width: 100%; + // height: rem(1px); + // bottom: rem(-1px); + // inset-inline-start: 0; + // background: transparent; + // } + // + // %igx-icon-button-display { + // width: rem(28px); + // height: rem(28px); + // color: var-get($theme, 'expand-all-icon-color'); + // } + // + // &:focus, + // &:hover { + // %igx-icon-button-display { + // color: var-get($theme, 'expand-all-icon-hover-color'); + // } + // } + // } + // + // %igx-grid-grouparea { + // grid-row: 2; + // display: flex; + // align-items: center; + // justify-content: flex-start; + // flex-wrap: wrap; + // border-bottom: $grid-header-border; + // background: var-get($theme, 'grouparea-background'); + // color: var-get($theme, 'grouparea-color'); + // min-height: var(--grouparea-size); + // padding-inline: pad-inline( + // map.get($grouparea-padding-inline, 'compact'), + // map.get($grouparea-padding-inline, 'cosy'), + // map.get($grouparea-padding-inline, 'comfortable') + // ); + // padding-block: 0; + // z-index: 2; + // height: 100%; + // overflow: hidden; + // + // &:focus { + // outline-style: none; + // } + // + // %igx-chip { + // margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + // } + // } + // + // %igx-grid-grouparea__connector { + // display: inline-flex; + // justify-content: center; + // align-items: center; + // margin: 0 rem(4px); + // + // igx-icon { + // width: var(--igx-icon-size, #{rem(16px)}); + // height: var(--igx-icon-size, #{rem(16px)}); + // font-size: var(--igx-icon-size, #{rem(16px)}); + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // } + // + // %igx-drop-area { + // display: flex; + // align-items: center; + // justify-content: flex-start; + // min-width: rem(80px); + // height: sizable( + // map.get($drop-area-height, 'compact'), + // map.get($drop-area-height, 'cosy'), + // map.get($drop-area-height, 'comfortable') + // ); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-cell-padding-inline, 'compact'), + // map.get($grid-cell-padding-inline, 'cosy'), + // map.get($grid-cell-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // flex: 1 0 0%; + // background: var-get($theme, 'drop-area-background'); + // border-radius: var-get($theme, 'drop-area-border-radius'); + // + // %igx-drop-area__icon { + // color: var-get($theme, 'drop-area-icon-color'); + // width: rem(16px); + // height: rem(16px); + // font-size: rem(16px); + // margin-inline-end: rem(8px); + // } + // } + // + // %igx-drop-area--hover { + // background: var-get($theme, 'drop-area-on-drop-background'); + // } + // + // %igx-drop-area__text { + // @include ellipsis(); + // color: var-get($theme, 'drop-area-text-color'); + // font-size: rem(13px); + // } + // + // %igx-grid__grouping-indicator { + // position: relative; + // display: flex; + // user-select: none; + // justify-content: center; + // align-items: center; + // z-index: 1; + // cursor: pointer; + // padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px)); + // margin-inline-start: sizable( + // #{map.get($grid-grouping-indicator-padding, 'compact')}, + // #{map.get($grid-grouping-indicator-padding, 'cosy')}, + // #{map.get($grid-grouping-indicator-padding, 'comfortable') + // }); + // min-height: var(--header-size); + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // + // color: var-get($theme, 'expand-icon-color'); + // } + // + // &:hover, + // &:focus { + // outline-style: none; + // + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // } + // + // %igx-grid__header-indentation { + // position: relative; + // padding-inline-end: sizable( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // ); + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // background: var-get($theme, 'header-background'); + // z-index: 4; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)}; + // } + // } + // + // %igx-grid__group-expand-btn { + // position: absolute; + // cursor: pointer; + // user-select: none; + // inset-block-start: calc(50% - #{$indicator-icon-width} / 2); + // inset-inline-start: var(--indicator-inline-inset); + // + // &:hover { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // + // &%igx-grid__group-expand-btn--push { + // inset-block-start: sizable( + // math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2), + // math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2), + // math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2) + // ); + // } + // } + // + // @for $i from 1 through 10 { + // $row-indentation-level: ( + // comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}), + // cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}), + // compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width}) + // ); + // + // $level--comfortable: map.get($row-indentation-level, 'comfortable'); + // $level--cosy: map.get($row-indentation-level, 'cosy'); + // $level--compact: map.get($row-indentation-level, 'compact'); + // + // %igx-grid__row-indentation--level-#{$i} { + // --indicator-inline-inset: #{sizable( + // map.get($grid-grouping-indicator-padding, 'compact'), + // map.get($grid-grouping-indicator-padding, 'cosy'), + // map.get($grid-grouping-indicator-padding, 'comfortable') + // )}; + // padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable); + // } + // + // $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')}; + // $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')}; + // $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')}; + // + // %igx-grid__group-row--padding-level-#{$i} { + // %igx-grid__grouping-indicator { + // padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable); + // } + // } + // } + // + // %igx-grid__outlet { + // --ig-size: var(--grid-size); + // + // z-index: 10002; + // position: fixed; + // } + // + // %igx-grid__loading-outlet { + // z-index: 10003; + // + // > %overlay-wrapper--modal { + // background: none; + // } + // + // %circular-display { + // width: rem(50); + // height: rem(50); + // } + // } + // + // %igx-grid__row-editing-outlet { + // z-index: 10000; + // position: absolute; + // + // %overlay-wrapper { + // /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */ + // position: absolute; + // } + // } + // + // %igx-grid__addrow-snackbar { + // position: absolute; + // z-index: 5; + // bottom: rem(24px); + // inset-inline-start: 50%; + // transform: translateX(-50%); + // } + // + // %igx-grid__filtering-cell { + // display: flex; + // align-items: center; + // border-inline-end: $grid-header-border; + // border-top: $grid-header-border; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // overflow: hidden; + // + // igx-chips-area { + // transition: transform .25s $ease-out-back; + // flex-wrap: nowrap; + // + // .igx-filtering-chips__connector { + // font-size: rem(12px); + // text-transform: uppercase; + // font-weight: 600; + // margin: 0 rem(8px); + // } + // } + // } + // + // %igx-grid__filtering-cell--selected { + // color: var-get($theme, 'header-selected-text-color'); + // background: var-get($theme, 'header-selected-background'); + // } + // + // %igx-grid__filtering-cell-indicator { + // position: relative; + // display: flex; + // align-items: center; + // justify-content: center; + // padding-inline-end: rem(8px); + // margin-inline-start: rem(8px); + // cursor: pointer; + // visibility: visible; + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 1)}; + // } + // + // %igx-badge-display { + // --size: #{rem(14px)}; + // --font-size: #{rem(12px)}; + // line-height: 0; + // position: absolute; + // inset-inline-end: 0; + // } + // } + // + // %igx-grid__filtering-cell-indicator--hidden { + // visibility: hidden; + // } + // + // %igx-grid__filtering-row { + // position: absolute; + // display: flex; + // width: 100%; + // height: $filtering-row-height; + // padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable); + // align-items: center; + // justify-content: space-between; + // background: var-get($theme, 'filtering-row-background'); + // color: var-get($theme, 'filtering-row-text-color'); + // inset-inline-start: 0; + // bottom: 0; + // z-index: 3; + // + // &::after { + // display: block; + // position: absolute; + // content: ''; + // background: inherit; + // inset-inline-start: 0; + // inset-inline-end: 0; + // top: 0; + // bottom: 0; + // box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'), + // 0 rem(4px) rem(10px) rgba(0, 0, 0, .12); + // z-index: -1; + // } + // + // @extend %filtering-row-input-overrides !optional; + // + // igx-input-group { + // --ig-size: var(--grid-size) !important; + // } + // + // [igxIconButton] { + // --ig-size: 1; + // } + // + // @if $variant == 'bootstrap' { + // [igxButton] { + // margin: rem(4px); + // } + // } + // } + // + // %igx-grid__filtering-dropdown-items { + // display: flex; + // align-items: center; + // } + // + // %igx-grid__filtering-dropdown-text { + // margin-inline-start: rem(16px); + // } + // + // %igx-grid__filtering-row-main { + // display: flex; + // flex: 1; + // overflow: hidden; + // max-width: calc(100% - 176px); + // min-width: rem(56px); + // + // igx-chips-area { + // transition: transform .25s $ease-out-back; + // flex-wrap: nowrap; + // margin-inline: if($variant == 'indigo', rem(12px), rem(8px)); + // gap: rem(4px); + // } + // + // @if $variant != 'indigo' { + // igx-chip { + // margin: 0 rem(4px); + // } + // + // [igxButton] { + // igx-icon { + // position: absolute; + // inset-inline-start: rem(12px); + // // IE fix for vertical alignment + // top: 50%; + // transform: translateY(-50%); + // } + // + // span { + // margin-inline-start: rem(16px); + // } + // } + // } + // } + // + // %igx-grid__filtering-scroll-start { + // &::after { + // @include _filtering-scroll-mask($theme, right); + // inset-inline-start: calc(100% + 6px); + // } + // + // [dir='rtl'] & { + // &::before { + // @include _filtering-scroll-mask($theme, right); + // inset-inline-end: calc(100% + 6px); + // } + // } + // } + // + // %igx-grid__filtering-scroll-end { + // &::before { + // @include _filtering-scroll-mask($theme, left); + // inset-inline-end: calc(100% + 6px); + // } + // + // [dir='rtl'] & { + // &::after { + // @include _filtering-scroll-mask($theme, left); + // inset-inline-start: calc(100% + 6px); + // } + // } + // } + // + // %igx-grid__filtering-scroll-start, + // %igx-grid__filtering-scroll-end { + // width: rem(24px); + // height: rem(24px); + // position: relative; + // overflow: visible; + // margin: if($variant == 'indigo', rem(12px), rem(8px)); + // z-index: 1; + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // + // &::after { + // content: initial; + // } + // } + // } + // + // %igx-grid__tr--highlighted { + // position: relative; + // + // &::after { + // content: ''; + // position: absolute; + // top: 0; + // inset-inline-start: 0; + // width: rem(4px); + // height: 100%; + // background: var-get($theme, 'row-highlight'); + // z-index: 3; + // } + // + // %igx-grid__tr--edited { + // &::before { + // inset-inline-start: rem(4px); + // } + // } + // + // &::before { + // inset-inline-start: rem(4px); + // } + // } + // + // %igx-grid__tr-container { + // overflow: auto; + // width: 100%; + // border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + // } + // + // %igx-grid__tr-container--active { + // @extend %grid-cell--active !optional; + // } + // + // %igx-grid__hierarchical-expander { + // user-select: none; + // background: inherit; + // padding-inline: pad-inline( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // display: flex; + // align-items: center; + // justify-content: center; + // cursor: pointer; + // z-index: 3; + // color: var-get($theme, 'expand-icon-color'); + // //background-clip: border-box; + // + // &:focus { + // outline: none; + // + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // &:hover { + // igx-icon { + // color: var-get($theme, 'expand-icon-hover-color'); + // } + // } + // + // igx-icon { + // --component-size: #{if($variant == 'indigo', 2, 3)};; + // + // color: var-get($theme, 'expand-icon-color'); + // max-width: $hierarchical-action-icon; + // min-width: min-content; + // } + // + // [dir='rtl'] & { + // transform: scaleX(-1); + // } + // + // &--empty { + // cursor: default; + // pointer-events: none; + // } + // } + // + // %igx-grid__hierarchical-expander--header { + // background: inherit; + // border-inline-end: rem(1px) solid var-get($theme, 'header-border-color'); + // z-index: 3; + // //background-clip: border-box; + // + // igx-icon { + // display: flex; + // align-items: center; + // } + // } + // + // %igx-grid__hierarchical-expander--push { + // align-items: flex-start; + // + // igx-icon { + // min-height: var(--header-size); + // max-height: var(--header-size); + // } + // } + // + // %igx-grid__header-indentation--no-border { + // border-inline-end: rem(1px) solid transparent; + // } + // + // %igx-grid__hierarchical-indent { + // display: flex; + // margin-inline-start: pad-inline( + // map.get($hierarchical-indent, 'compact'), + // map.get($hierarchical-indent, 'cosy'), + // map.get($hierarchical-indent, 'comfortable') + // ); + // margin-inline-end: pad-inline( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // margin-block: pad-block( + // map.get($hierarchical-grid-indent, 'compact'), + // map.get($hierarchical-grid-indent, 'cosy'), + // map.get($hierarchical-grid-indent, 'comfortable') + // ); + // + // &--scroll { + // margin-inline-end: pad-inline( + // map.get($hierarchical-indent-scroll, 'compact'), + // map.get($hierarchical-indent-scroll, 'cosy'), + // map.get($hierarchical-indent-scroll, 'comfortable') + // ); + // } + // } + // + // @include excel-filtering($theme); + // + // %advanced-filtering-dialog { + // @if $variant == 'indigo' { + // $light-variant: contrast-color($color: 'gray', $variant: 900); + // $dark-variant: color($color: 'gray', $variant: 50); + // background: if($theme-variant == 'light', $light-variant, $dark-variant); + // } @else { + // background: color($color: 'surface', $variant: 500); + // } + // + // box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24)); + // + // @if $variant == 'material' or $variant == 'bootstrap' { + // border-radius: rem(4px); + // } + // + // @if $variant == 'fluent' { + // border-radius: rem(2px); + // } + // + // @if $variant == 'indigo' { + // border-radius: rem(10px); + // } + // + // igx-query-builder { + // box-shadow: none; + // border: none; + // border-radius: inherit; + // } + // + // igx-query-builder-header { + // cursor: grab; + // } + // } + // + // %igx-grid__filtering-row-editing-buttons--small, + // %igx-grid__filtering-row-editing-buttons { + // display: flex; + // align-items: center; + // + // button { + // transition: none; + // } + // } + // + // %igx-grid__filtering-row-editing-buttons--small { + // button { + // &:not([disabled]) { + // igx-icon { + // color: var-get($theme, 'sorted-header-icon-color'); + // } + // } + // } + // } + // + // %igx-grid__tr-action { + // &:last-of-type { + // border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // @if $variant != 'indigo' { + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(50px) + // ); + // } @else { + // min-height: sizable( + // rem(32px), + // rem(40px), + // rem(48px) + // ); + // } + // } + // } + // + // igx-child-grid-row { + // igx-child-grid-row { + // %igx-grid__tr-action { + // border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // } + // + // // Pivot grid + // %igx-grid__pivot--super-compact { + // --ig-size: 1 !important; + // %grid-cell-display, + // %grid-cell-header { + // padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important; + // min-height: rem(24px) !important; + // height: rem(24px); + // } + // + // %grid-cell-header { + // > * { + // line-height: normal; + // align-self: initial; + // max-height: 100%; + // } + // } + // + // %igx-grid__tr-pivot--row-area { + // padding-bottom: rem(4px); + // } + // } + // + // %grid-thead--pivot { + // display: flex; + // + // %grid-thead--virtualizationWrapper { + // border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // } + // + // %grid-thead--virtualizationWrapper { + // height: 100%; + // } + // + // %grid-thead--virtualizationContainer { + // overflow: visible; + // height: 100%; + // } + // + // %igx-grid__tr-pivot { + // display: flex; + // align-items: center; + // background: inherit; + // overflow: hidden; + // z-index: 3; + // height: var(--header-size); + // + // @if $variant != 'indigo' { + // padding-inline: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // padding-block: 0; + // //background-clip: border-box !important; + // border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // + // igx-chips-area { + // flex-wrap: nowrap; + // width: auto; + // + // > * { + // margin-inline-end: rem(4px); + // } + // + // &:last-child { + // margin-inline-end: 0; + // } + // } + // } + // + // %igx-grid__pivot-filter-toggle { + // display: flex; + // align-items: center; + // justify-content: center; + // cursor: pointer; + // position: relative; + // + // > igx-badge { + // position: absolute; + // top: rem(-4px); + // inset-inline-start: 60%; + // width: rem(18px); + // min-width: rem(18px); + // height: rem(18px); + // font-size: rem(10px); + // pointer-events: none; + // user-select: none; + // } + // } + // + // %igx-grid__pivot-empty-chip-area { + // @if $variant != 'indigo' { + // line-height: normal; + // font-size: rem(14px); + // } @else { + // @include type-style('body-2'); + // + // @if $theme-variant == 'light' { + // color: color($color: 'gray', $variant: 600); + // } @else { + // color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + // } + // } + // + // margin-inline-end: 0 !important; + // } + // + // %igx-grid__tr-pivot--row-area { + // height: auto !important; + // align-items: flex-end; + // padding-bottom: pad-block( + // map.get($pivot-row-aria-padding, 'compact'), + // map.get($pivot-row-aria-padding, 'cosy'), + // map.get($pivot-row-aria-padding, 'comfortable') + // ); + // border-inline-start: 0; + // border-bottom: 0; + // } + // + // %igx-grid__tr-pivot--small-row-area { + // height: var(--header-size); + // align-items: flex-end; + // + // border-inline-start: 0; + // border-inline-end: 0; + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // + // %igx-grid__tr-pivot--filter-container { + // display: flex; + // flex-direction: column; + // } + // + // %igx-grid__tr-pivot--chip_drop_indicator { + // width: rem(2px); + // background: var-get($theme, 'resize-line-color'); + // visibility: hidden; + // } + // + // %igx-grid__tr-pivot--drop-row-area { + // flex-grow: 1; + // } + // + // %igx-grid__tr-pivot--filter { + // height: var(--header-size); + // + // border-inline-start: 0; + // border-inline-end: 0; + // border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); + // } + // + // %igx-grid-thead__wrapper--pivot { + // border-bottom: 0; + // } + // + // %igx-grid__tr-pivot-group { + // flex: 1; + // } + // + // %igx-grid__tr-pivot-toggle-icons { + // display: inline-flex !important; + // } + // + // %igx-grid__tr-pivot--columnDimensionLeaf { + // box-shadow: none; + // + // igx-grid-header { + // border: none; + // } + // } + // + // %igx-grid__tr-pivot--columnMultiRowSpan { + // igx-grid-header { + // > * { + // visibility: hidden; + // } + // } + // } + // + // %igx-grid__tr-header-row { + // igx-pivot-row-dimension-header-group { + // igx-pivot-row-dimension-header { + // align-items: center; + // } + // + // @if $variant == 'indigo' { + // igx-icon { + // opacity: if($theme-variant == 'light', .75, .85); + // + // &:hover { + // opacity: 1; + // cursor: pointer; + // } + // } + // } + // } + // + // igx-pivot-row-header-group { + // @if $variant != 'indigo' { + // padding-inline-start: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // igx-pivot-row-dimension-header { + // align-items: center; + // + // .igx-grid-th__icons { + // @if $variant != 'indigo' { + // padding-inline-end: pad-inline( + // map.get($grid-header-padding-inline, 'compact'), + // map.get($grid-header-padding-inline, 'cosy'), + // map.get($grid-header-padding-inline, 'comfortable') + // ); + // } @else { + // padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); + // } + // + // align-self: center; + // } + // } + // + // &:last-of-type { + // igx-pivot-row-dimension-header { + // border-inline-end: 0; + // } + // } + // } + // } + // + // .igx-pivot-grid-row-filler__wrapper { + // .igx-grid-thead__wrapper { + // height: 100%; + // border-bottom: initial; + // + // .igx-grid-th { + // height: 100%; + // } + // } + // } + // + // %igx-grid__tbody-pivot-mrl-dimension { + // .igx-grid-th { + // border-bottom: none; + // } + // } + // + // // Pivot grid END } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss index 62b91322102..911495276dd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_group-by-area-component.scss @@ -2,11 +2,11 @@ /// @access private @mixin group-by-area { - @include b(igx-grid-grouparea) { - @extend %igx-grid-grouparea !optional; - - @include e(connector) { - @extend %igx-grid-grouparea__connector !optional; - } - } + //@include b(igx-grid-grouparea) { + // @extend %igx-grid-grouparea !optional; + // + // @include e(connector) { + // @extend %igx-grid-grouparea__connector !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss index a640f0ca808..32002595f37 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss @@ -2,158 +2,158 @@ /// @access private @mixin header-row { - @include b(igx-grid-thead) { - @extend %grid-thead-container !optional; - - @include e(wrapper) { - @extend %grid-thead !optional; - - igx-display-container { - @extend %grid-display-container-thead !optional; - } - - &:focus { - @extend %disable-focus-styles !optional; - } - } - - @include e(wrapper, $m: 'pivot') { - @extend %igx-grid-thead__wrapper--pivot !optional; - } - - @include e(title) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - @extend %grid-thead-title !optional; - } - - @include e(title, $m: pinned-last) { - @extend %grid-thead-title--pinned !optional; - } - - @include e(group) { - @extend %grid-thead-group !optional; - } - - @include e(subgroup) { - @extend %grid-thead-subgroup !optional; - } - - @include e(item) { - @extend %grid-thead-item !optional; - } - - @include e(thumb) { - @extend %grid-thead-thumb !optional; - } - - @include m(pivot) { - @extend %grid-thead--pivot !optional; - } - - @include m(virtualizationWrapper) { - @extend %grid-thead--virtualizationWrapper !optional; - } - - @include m(virtualizationContainer) { - @extend %grid-thead--virtualizationContainer !optional; - } - } - - @include b(igx-grid-th) { - @extend %grid-cell-display !optional; - @extend %grid-cell-header !optional; - - @include e(expander) { - @extend %igx-grid-th__expander !optional - } - - @include e(group-title) { - @extend %igx-grid-th__group-title !optional - } - - @include e(title) { - @extend %grid-cell-header-title !optional; - } - - @include e(icons) { - @extend %grid-cell-header-icons !optional; - } - - @include e(resize-handle) { - @extend %grid__resize-handle !optional; - } - - @include e(resize-line) { - @extend %grid__resize-line !optional; - } - - @include m(collapsible) { - @extend %igx-grid-th--collapsible !optional; - } - - @include m(sortable) { - @extend %igx-grid-th--sortable !optional; - } - - @include m(selectable) { - @extend %igx-grid-th--selectable !optional; - } - - @include m(filtrable) { - @extend %igx-grid-th--filtrable !optional; - } - - @include mx(filtrable, sortable) { - @extend %igx-grid-th--filtrable-sortable !optional; - } - - @include m(sorted) { - @extend %igx-grid-th--sorted !optional; - } - - @include m(selected) { - @extend %igx-grid-th--selected !optional; - } - - @include m(active) { - @extend %igx-grid-th--active !optional; - } - - @include m(number) { - @extend %grid-cell-number !optional; - } - - @include m(pinned) { - @extend %grid-cell--pinned !optional; - } - - @include m(pinned-last) { - @extend %grid-cell--pinned-last !optional; - } - - @include m(pinned-first) { - @extend %grid-cell--pinned-first !optional; - } - - @include m(fw) { - @extend %grid-cell--fixed-width !optional; - } - - @include m(filtering) { - @extend %grid-cell-header--filtering !optional; - } - - @include e(drop-indicator-left) { - @extend %igx-grid-th__drop-indicator-left !optional; - } - - @include e(drop-indicator-right) { - @extend %igx-grid-th__drop-indicator-right !optional; - } - - @include e(drop-indicator, $m: active) { - @extend %igx-grid-th__drop-indicator--active !optional; - } - } + //@include b(igx-grid-thead) { + // @extend %grid-thead-container !optional; + // + // @include e(wrapper) { + // @extend %grid-thead !optional; + // + // igx-display-container { + // @extend %grid-display-container-thead !optional; + // } + // + // &:focus { + // @extend %disable-focus-styles !optional; + // } + // } + // + // @include e(wrapper, $m: 'pivot') { + // @extend %igx-grid-thead__wrapper--pivot !optional; + // } + // + // @include e(title) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // @extend %grid-thead-title !optional; + // } + // + // @include e(title, $m: pinned-last) { + // @extend %grid-thead-title--pinned !optional; + // } + // + // @include e(group) { + // @extend %grid-thead-group !optional; + // } + // + // @include e(subgroup) { + // @extend %grid-thead-subgroup !optional; + // } + // + // @include e(item) { + // @extend %grid-thead-item !optional; + // } + // + // @include e(thumb) { + // @extend %grid-thead-thumb !optional; + // } + // + // @include m(pivot) { + // @extend %grid-thead--pivot !optional; + // } + // + // @include m(virtualizationWrapper) { + // @extend %grid-thead--virtualizationWrapper !optional; + // } + // + // @include m(virtualizationContainer) { + // @extend %grid-thead--virtualizationContainer !optional; + // } + //} + // + //@include b(igx-grid-th) { + // @extend %grid-cell-display !optional; + // @extend %grid-cell-header !optional; + // + // @include e(expander) { + // @extend %igx-grid-th__expander !optional + // } + // + // @include e(group-title) { + // @extend %igx-grid-th__group-title !optional + // } + // + // @include e(title) { + // @extend %grid-cell-header-title !optional; + // } + // + // @include e(icons) { + // @extend %grid-cell-header-icons !optional; + // } + // + // @include e(resize-handle) { + // @extend %grid__resize-handle !optional; + // } + // + // @include e(resize-line) { + // @extend %grid__resize-line !optional; + // } + // + // @include m(collapsible) { + // @extend %igx-grid-th--collapsible !optional; + // } + // + // @include m(sortable) { + // @extend %igx-grid-th--sortable !optional; + // } + // + // @include m(selectable) { + // @extend %igx-grid-th--selectable !optional; + // } + // + // @include m(filtrable) { + // @extend %igx-grid-th--filtrable !optional; + // } + // + // @include mx(filtrable, sortable) { + // @extend %igx-grid-th--filtrable-sortable !optional; + // } + // + // @include m(sorted) { + // @extend %igx-grid-th--sorted !optional; + // } + // + // @include m(selected) { + // @extend %igx-grid-th--selected !optional; + // } + // + // @include m(active) { + // @extend %igx-grid-th--active !optional; + // } + // + // @include m(number) { + // @extend %grid-cell-number !optional; + // } + // + // @include m(pinned) { + // @extend %grid-cell--pinned !optional; + // } + // + // @include m(pinned-last) { + // @extend %grid-cell--pinned-last !optional; + // } + // + // @include m(pinned-first) { + // @extend %grid-cell--pinned-first !optional; + // } + // + // @include m(fw) { + // @extend %grid-cell--fixed-width !optional; + // } + // + // @include m(filtering) { + // @extend %grid-cell-header--filtering !optional; + // } + // + // @include e(drop-indicator-left) { + // @extend %igx-grid-th__drop-indicator-left !optional; + // } + // + // @include e(drop-indicator-right) { + // @extend %igx-grid-th__drop-indicator-right !optional; + // } + // + // @include e(drop-indicator, $m: active) { + // @extend %igx-grid-th__drop-indicator--active !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss index 626138e8852..da8dfd45284 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-component.scss @@ -2,69 +2,69 @@ @use 'sass:string'; @mixin component() { - @include b(igx-pivot-data-selector) { - $this: bem--selector-to-string(&); - @include register-component( - $name: string.slice($this, 2, -1), - $deps: () - ); - - @extend %selector-base !optional; - - @include e(header) { - @extend %selector-header !optional; - } - - @include e(header-extra) { - @extend %selector-header-extra !optional; - } - - @include e(filter) { - @extend %selector-filter !optional; - } - - @include e(item) { - @extend %selector-item !optional; - } - - @include e(item-ghost) { - @extend %selector-item-ghost !optional; - } - - @include e(item-ghost, $m: no-drop) { - @extend %selector-item-ghost--no-drop !optional; - } - - @include e(item-ghost-text) { - @extend %selector-item-ghost-text !optional; - } - - @include e(item-start) { - @extend %selector-item-start !optional; - } - - @include e(item-end) { - @extend %selector-item-end !optional; - } - - @include e(item-text) { - @extend %selector-item-text !optional; - } - - @include e(action-sort) { - @extend %selector-action-sort !optional; - } - - @include e(action-filter) { - @extend %selector-action-filter !optional; - } - - @include e(action-move) { - @extend %selector-action-move !optional; - } - - @include e(action-summary) { - @extend %selector-action-summary !optional; - } - } + //@include b(igx-pivot-data-selector) { + // $this: bem--selector-to-string(&); + // @include register-component( + // $name: string.slice($this, 2, -1), + // $deps: () + // ); + // + // @extend %selector-base !optional; + // + // @include e(header) { + // @extend %selector-header !optional; + // } + // + // @include e(header-extra) { + // @extend %selector-header-extra !optional; + // } + // + // @include e(filter) { + // @extend %selector-filter !optional; + // } + // + // @include e(item) { + // @extend %selector-item !optional; + // } + // + // @include e(item-ghost) { + // @extend %selector-item-ghost !optional; + // } + // + // @include e(item-ghost, $m: no-drop) { + // @extend %selector-item-ghost--no-drop !optional; + // } + // + // @include e(item-ghost-text) { + // @extend %selector-item-ghost-text !optional; + // } + // + // @include e(item-start) { + // @extend %selector-item-start !optional; + // } + // + // @include e(item-end) { + // @extend %selector-item-end !optional; + // } + // + // @include e(item-text) { + // @extend %selector-item-text !optional; + // } + // + // @include e(action-sort) { + // @extend %selector-action-sort !optional; + // } + // + // @include e(action-filter) { + // @extend %selector-action-filter !optional; + // } + // + // @include e(action-move) { + // @extend %selector-action-move !optional; + // } + // + // @include e(action-summary) { + // @extend %selector-action-summary !optional; + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss index cdf12e61981..60fc1caf188 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -7,258 +7,258 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin pivot-data-selector($theme) { - @include css-vars($theme); - - $variant: map.get($theme, '_meta', 'theme'); - - $chip-height-material: ( - comfortable: rem(22px), - cosy: rem(20px), - compact: rem(18px) - ); - - $chip-item-padding: 0 #{rem(2px)}; - $panel-padding: rem(4px, 16px); - - %selector-base { - display: flex; - flex-direction: column; - max-width: rem(280px); - background: var-get($theme, 'background'); - z-index: 0; - - > igx-input-group { - flex: 0 1 auto; - } - - igx-display-container { - display: flex; - flex-direction: column; - } - - > igx-list { - igx-display-container { - padding: rem(4px); - } - - igx-list-item { - display: flex; - min-height: rem(28px); - } - - %cbx-label { - font-size: rem(13px); - } - } - - %cbx-composite-wrapper { - @if $variant == 'material' { - padding: 0; - } - } - - %form-group-input--box { - transform: none; - } - - %form-group-prefix { - @if $variant == 'material' { - padding-inline-end: rem(16px) !important; - } - - box-sizing: content-box; - } - - %form-group-bundle-main--box { - padding-top: 0 !important; - } - - %igx-expanded-panel-margin { - igx-expansion-panel[aria-expanded='true'] { - margin-top: 0; - margin-bottom: 0; - } - } - - .igx-expansion-panel__body { - position: relative; - height: rem(128px); - font-size: rem(14px); - padding: $panel-padding; - overflow-y: auto; - - > igx-list { - height: auto; - } - } - - .igx-expansion-panel__header-icon--start { - margin-inline-end: rem(8px); - } - - .igx-expansion-panel__header-title { - display: flex; - - > h6 { - font-size: rem(12px); - margin-bottom: 0; - } - } - - .igx-expansion-panel__header-inner { - background: var-get($theme, 'header-color'); - padding: $panel-padding; - - .dragOver & { - background: color($color: 'gray', $variant: 300); - box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400); - } - } - } - - %selector-filter { - display: flex; - flex-direction: column; - overflow: hidden; - - igx-input-group { - @if $variant == 'bootstrap' { - padding: rem(4px); - } - } - - igx-list { - display: flex; - flex-direction: column; - padding: rem(8px) rem(4px); - min-height: rem(186px); - max-height: rem(208px); - overflow-y: auto; - } - - igx-list-item { - display: flex; - } - - igx-checkbox + span { - margin-inline-start: rem(8px); - line-height: rem(28px); - } - } - - %selector-header, - %selector-header-extra { - display: flex; - align-items: center; - } - - %selector-header-extra { - igx-icon { - padding: 0 rem(8px); - box-sizing: content-box; - } - - %igx-chip__item { - height: #{ - sizable( - map.get($chip-height-material, 'compact'), - map.get($chip-height-material, 'cosy'), - map.get($chip-height-material, 'comfortable') - )}; - } - - %igx-chip__content { - padding: $chip-item-padding; - } - } - - %selector-item { - display: flex; - align-items: center; - justify-content: space-between; - min-height: rem(32px); - width: 100%; - - .igx-drag--push & { - padding-top: rem(32px); - } - } - - %selector-item-ghost { - display: flex; - align-items: center; - justify-content: space-between; - font-size: rem(14px); - background: color($color: 'surface'); - min-height: rem(32px); - height: auto; - padding: 0 rem(2px) 0 rem(4px); - cursor: grabbing; - box-shadow: elevation(24); - border: rem(1px) solid color($color: 'gray', $variant: 100); - border-radius: border-radius(rem(2px)); - z-index: 10; - } - - %selector-base, - %selector-item-ghost { - igx-icon { - width: var(--ig-icon-size, #{rem(18px)}); - height: var(--ig-icon-size, #{rem(18px)}); - font-size: var(--ig-icon-size, #{rem(18px)}); - } - } - - %selector-item-ghost-text { - display: flex; - align-items: center; - - igx-icon { - margin-inline-end: rem(8px); - } - } - - %selector-item-ghost--no-drop { - cursor: no-drop; - } - - %selector-item-text { - @include ellipsis(); - max-width: calc(100% - rem(18px) + rem(8px)); - } - - %selector-item-text, - %selector-action-sort, - %selector-action-filter, - %selector-action-move, - %selector-action-summary { - user-select: none; - } - - %selector-action-sort, - %selector-action-summary, - %selector-action-filter { - cursor: pointer; - } - - %selector-action-move { - cursor: grab; - } - - %selector-item-start { - display: flex; - justify-content: space-between; - align-items: center; - flex: 0 1 100%; - margin-inline-end: rem(8px); - overflow: hidden; - } - - %selector-item-end { - display: flex; - - igx-icon + igx-icon { - margin-inline-start: rem(8px); - } - } + //@include css-vars($theme); + // + //$variant: map.get($theme, '_meta', 'theme'); + // + //$chip-height-material: ( + // comfortable: rem(22px), + // cosy: rem(20px), + // compact: rem(18px) + //); + // + //$chip-item-padding: 0 #{rem(2px)}; + //$panel-padding: rem(4px, 16px); + // + //%selector-base { + // display: flex; + // flex-direction: column; + // max-width: rem(280px); + // background: var-get($theme, 'background'); + // z-index: 0; + // + // > igx-input-group { + // flex: 0 1 auto; + // } + // + // igx-display-container { + // display: flex; + // flex-direction: column; + // } + // + // > igx-list { + // igx-display-container { + // padding: rem(4px); + // } + // + // igx-list-item { + // display: flex; + // min-height: rem(28px); + // } + // + // %cbx-label { + // font-size: rem(13px); + // } + // } + // + // %cbx-composite-wrapper { + // @if $variant == 'material' { + // padding: 0; + // } + // } + // + // %form-group-input--box { + // transform: none; + // } + // + // %form-group-prefix { + // @if $variant == 'material' { + // padding-inline-end: rem(16px) !important; + // } + // + // box-sizing: content-box; + // } + // + // %form-group-bundle-main--box { + // padding-top: 0 !important; + // } + // + // %igx-expanded-panel-margin { + // igx-expansion-panel[aria-expanded='true'] { + // margin-top: 0; + // margin-bottom: 0; + // } + // } + // + // .igx-expansion-panel__body { + // position: relative; + // height: rem(128px); + // font-size: rem(14px); + // padding: $panel-padding; + // overflow-y: auto; + // + // > igx-list { + // height: auto; + // } + // } + // + // .igx-expansion-panel__header-icon--start { + // margin-inline-end: rem(8px); + // } + // + // .igx-expansion-panel__header-title { + // display: flex; + // + // > h6 { + // font-size: rem(12px); + // margin-bottom: 0; + // } + // } + // + // .igx-expansion-panel__header-inner { + // background: var-get($theme, 'header-color'); + // padding: $panel-padding; + // + // .dragOver & { + // background: color($color: 'gray', $variant: 300); + // box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400); + // } + // } + //} + // + //%selector-filter { + // display: flex; + // flex-direction: column; + // overflow: hidden; + // + // igx-input-group { + // @if $variant == 'bootstrap' { + // padding: rem(4px); + // } + // } + // + // igx-list { + // display: flex; + // flex-direction: column; + // padding: rem(8px) rem(4px); + // min-height: rem(186px); + // max-height: rem(208px); + // overflow-y: auto; + // } + // + // igx-list-item { + // display: flex; + // } + // + // igx-checkbox + span { + // margin-inline-start: rem(8px); + // line-height: rem(28px); + // } + //} + // + //%selector-header, + //%selector-header-extra { + // display: flex; + // align-items: center; + //} + // + //%selector-header-extra { + // igx-icon { + // padding: 0 rem(8px); + // box-sizing: content-box; + // } + // + // %igx-chip__item { + // height: #{ + // sizable( + // map.get($chip-height-material, 'compact'), + // map.get($chip-height-material, 'cosy'), + // map.get($chip-height-material, 'comfortable') + // )}; + // } + // + // %igx-chip__content { + // padding: $chip-item-padding; + // } + //} + // + //%selector-item { + // display: flex; + // align-items: center; + // justify-content: space-between; + // min-height: rem(32px); + // width: 100%; + // + // .igx-drag--push & { + // padding-top: rem(32px); + // } + //} + // + //%selector-item-ghost { + // display: flex; + // align-items: center; + // justify-content: space-between; + // font-size: rem(14px); + // background: color($color: 'surface'); + // min-height: rem(32px); + // height: auto; + // padding: 0 rem(2px) 0 rem(4px); + // cursor: grabbing; + // box-shadow: elevation(24); + // border: rem(1px) solid color($color: 'gray', $variant: 100); + // border-radius: border-radius(rem(2px)); + // z-index: 10; + //} + // + //%selector-base, + //%selector-item-ghost { + // igx-icon { + // width: var(--ig-icon-size, #{rem(18px)}); + // height: var(--ig-icon-size, #{rem(18px)}); + // font-size: var(--ig-icon-size, #{rem(18px)}); + // } + //} + // + //%selector-item-ghost-text { + // display: flex; + // align-items: center; + // + // igx-icon { + // margin-inline-end: rem(8px); + // } + //} + // + //%selector-item-ghost--no-drop { + // cursor: no-drop; + //} + // + //%selector-item-text { + // @include ellipsis(); + // max-width: calc(100% - rem(18px) + rem(8px)); + //} + // + //%selector-item-text, + //%selector-action-sort, + //%selector-action-filter, + //%selector-action-move, + //%selector-action-summary { + // user-select: none; + //} + // + //%selector-action-sort, + //%selector-action-summary, + //%selector-action-filter { + // cursor: pointer; + //} + // + //%selector-action-move { + // cursor: grab; + //} + // + //%selector-item-start { + // display: flex; + // justify-content: space-between; + // align-items: center; + // flex: 0 1 100%; + // margin-inline-end: rem(8px); + // overflow: hidden; + //} + // + //%selector-item-end { + // display: flex; + // + // igx-icon + igx-icon { + // margin-inline-start: rem(8px); + // } + //} } diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss index fce80b8f03d..5712a28fd46 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-component.scss @@ -110,7 +110,7 @@ @include e(expression-item-drop-ghost) { @extend %filter-tree__expression-item-ghost !optional; } - + @include e(expression-item-keyboard-ghost) { @extend %filter-tree__expression-item-keyboard-ghost !optional; } diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss index 783b9ce11ec..421c6164bea 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss @@ -1,581 +1,581 @@ -@use 'sass:map'; -@use '../../base' as *; - -/// @deprecated Use the `css-vars` mixin instead. -/// @see {mixin} css-vars -/// @param {Map} $theme - The grid theme used to style the component. -@mixin query-builder($theme) { - @include css-vars($theme); - - $variant: map.get($theme, '_meta', 'theme'); - $theme-variant: map.get($theme, '_meta', 'variant'); - $bootstrap-theme: $variant == 'bootstrap'; - $not-bootstrap-theme: not($bootstrap-theme); - - // Custom colors alpha - $alpha-hover: .08; - $alpha-focus: .16; - $alpha-focus-hover: .24; - - $border-radius: var-get($theme, 'border-radius'); - $icon-size: rem(18px); - - %advanced-filter { - @include sizable(); - - --_tree-scrollbar-gutter: #{rem(16px)}; - - @if $variant == 'bootstrap' { - --query-builder-outer-padding: #{rem(16px)}; - } @else { - --query-builder-outer-padding: #{rem(24px)}; - } - - width: auto; - min-width: rem(660px); - background-color: var-get($theme, 'background'); - border-radius: $border-radius; - box-shadow: var-get($theme, 'elevation'); - overflow: hidden; - - &:has(:not(igx-query-builder-header)) { - padding-block-start: var(--query-builder-outer-padding); - - %query-level-0 { - padding-block: 0 var(--query-builder-outer-padding); - } - } - - &:has(igx-query-builder-header) { - padding-block-start: 0; - - %query-level-0 { - padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding); - } - } - - .igx-chip__ghost { - position: relative; - } - } - - %query-builder-tree { - background: var-get($theme, 'background'); - - %query-builder-tree { - border-radius: var-get($theme, 'subquery-border-radius'); - } - } - - %query-level-0 { - display: block; - width: 100%; - - padding-inline: var(--query-builder-outer-padding); - - > %advanced-filter__main { - gap: rem(16px); - - > %filter-tree__section { - --sb-size: #{rem(10px)}; - - max-height: rem(570px); - overflow-y: auto; - overflow-x: hidden; - padding-inline-end: var(--_tree-scrollbar-gutter); - } - } - } - - %filter-tree__subquery { - max-width: rem(960px); - - // Add styles to the subquery itself only if there is a direct .igx-filter-tree__inputs inside it - &:has( > %filter-tree__inputs) { - background: var-get($theme, 'subquery-header-background'); - border: rem(1px) solid var-get($theme, 'subquery-border-color'); - border-radius: var-get($theme, 'subquery-border-radius'); - } - - // Hide the subquery itself if there is a tree with display none inside - &:has( > %query-builder-tree[style='display: none;']) { - display: none; - } - - > %filter-tree__inputs { - padding: rem(12px); - border-radius: inherit; - - > igx-input-group, - > igx-date-picker, - > igx-time-picker { - flex-grow: 1; - } - } - - %filter-tree__buttons { - margin-block-start: rem(8px); - } - - %query-builder-tree { - border-block-start: rem(1px) dashed var-get($theme, 'separator-color'); - padding: rem(12px); - } - - &:empty { - display: none; - } - - } - - %filter-tree-details-button { - margin-inline-start: auto; - } - - %query-builder-dialog { - display: flex; - flex-direction: column; - gap: rem(16px); - max-width: rem(310px); - - > * { - margin: 0 !important; - } - } - - %advanced-filter__header { - display: flex; - align-items: center; - background-color: var-get($theme, 'header-background'); - color: var-get($theme, 'header-foreground'); - user-select: none; - border-radius: $border-radius $border-radius 0 0; - margin-bottom: 0; - border-block-end: rem(1px) solid var-get($theme, 'header-border'); - - padding-inline: var(--query-builder-outer-padding); - padding-block: var(--query-builder-outer-padding) rem(16px); - } - - %advanced-filter__title { - &:empty { - display: none; - } - } - - %advanced-filter__main { - display: grid; - gap: rem(16px); - } - - %advanced-filter__root { - display: flex; - flex-direction: column; - flex-grow: 1; - - > * { - flex-grow: 1; - } - } - - %advanced-filter__root-actions { - display: flex; - gap: rem(8px); - padding-bottom: rem(16px); - } - - %advanced-filter__outlet { - igx-select-item > igx-icon { - width: var(--ig-icon-size, #{$icon-size}); - height: var(--ig-icon-size, #{$icon-size}); - font-size: var(--ig-icon-size, #{$icon-size}); - margin-inline-end: rem(8px); - } - } - - %filter-tree { - display: flex; - width: 100%; - - %filter-tree { - margin-block: rem(8px); - } - } - - %filter-tree__section { - display: flex; - flex-direction: column; - gap: rem(8px); - - > %filter-tree { - margin-block: 0; - } - } - - %filter-tree__expression-context-menu { - display: flex; - width: 100%; - - [igxbutton='flat'] { - --ig-size: 1; - - @if $variant == 'bootstrap' { - --ig-button-text-transform: capitalize; - } - - border: none; - min-width: auto; - } - } - - %filter-tree__line { - $size: rem(2px); - width: $size; - background-color: white; - margin-inline-end: calc(rem(8px) - $size); - outline-style: none; - } - - %filter-tree__line--and { - background: var-get($theme, 'color-expression-group-and'); - } - - %filter-tree__line--or { - background: var-get($theme, 'color-expression-group-or'); - } - - %filter-tree__button--and { - &[igxButton='flat'] { - @if $variant == 'material' or $variant == 'indigo' { - --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover}); - --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); - --hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover}); - --background: transparent; - } - - @if $variant == 'fluent' { - --background: transparent; - --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - } - - --foreground: #{var-get($theme, 'color-expression-group-and')}; - --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')}; - --icon-color: #{var-get($theme, 'color-expression-group-and')}; - - @if $variant != 'bootstrap' { - --focus-foreground: #{var-get($theme, 'color-expression-group-and')}; - --hover-foreground: #{var-get($theme, 'color-expression-group-and')}; - --icon-color-hover: #{var-get($theme, 'color-expression-group-and')}; - --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')}; - --active-foreground: #{var-get($theme, 'color-expression-group-and')}; - } @else { - $bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% ); - - --focus-hover-background: transparent; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: transparent; - --hover-background: transparent; - --background: transparent; - --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5); - - --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); - } - } - } - - %filter-tree__button--or { - &[igxButton='flat'] { - @if $variant == 'material' or $variant == 'indigo' { - --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover}); - --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); - --hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover}); - --background: transparent; - } - - @if $variant == 'fluent' { - --background: transparent; - --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; - } - - --foreground: #{var-get($theme, 'color-expression-group-or')}; - --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')}; - --icon-color: #{var-get($theme, 'color-expression-group-or')}; - - @if $variant != 'bootstrap' { - --focus-foreground: #{var-get($theme, 'color-expression-group-or')}; - --hover-foreground: #{var-get($theme, 'color-expression-group-or')}; - --icon-color-hover: #{var-get($theme, 'color-expression-group-or')}; - --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')}; - --active-foreground: #{var-get($theme, 'color-expression-group-or')}; - } @else { - $bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%); - - --focus-hover-background: transparent; - --focus-visible-background: transparent; - --focus-background: transparent; - --active-background: transparent; - --hover-background: transparent; - --background: transparent; - --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5); - - --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); - } - } - } - - %filter-tree__expressions { - display: flex; - flex-direction: column; - align-items: flex-start; - flex-grow: 1; - gap: rem(8px); - } - - %filter-tree__expression-section { - $spacing: rem(16px); - display: flex; - flex-direction: column; - width: calc(100% - #{$spacing}); - gap: rem(8px); - margin-inline-start: $spacing; - - &:empty { - display: none; - } - } - - %filter-tree__expression-item { - display: flex; - align-items: center; - width: 100%; - gap: rem(8px); - position: relative; - - igx-chip { - --ig-size: 3; - - @if $variant != 'indigo' { - igx-icon { - --component-size: 1; - } - } - } - - > igx-chip { - %filter-tree__expression-column { - padding-inline: pad-inline(rem(3px), rem(6px), rem(8px)); - } - - %filter-tree__expression-condition { - padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px)); - } - - igx-prefix { - display: flex; - } - - .igx-chip__end { - gap: sizable(rem(3px), rem(6px), rem(8px)); - } - } - } - - - %filter-tree__expression-item-ghost { - .igx-chip__item { - @include type-style('body-2'); - - --ig-body-2-text-transform: unset; - - padding-inline: rem(32px); - - color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900)); - border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300)); - background: transparent; - } - } - - %filter-tree__expression-item-keyboard-ghost { - .igx-chip__item { - box-shadow: var(--ghost-shadow); - background: var(--ghost-background); - color: var(--focus-text-color); - } - - .igx-chip:hover { - .igx-chip__item { - box-shadow: var(--ghost-shadow); - background: var(--ghost-background); - color: var(--focus-text-color); - - @if $variant == 'indigo' { - border-color: var(--border-color); - } - } - } - } - - %filter-tree__expression-column { - padding: 0 rem(8px); - } - - %filter-tree__expression-actions { - display: inline-flex; - gap: if($variant != 'indigo', rem(16px), rem(8px)); - - span { - display: inline-flex; - } - - %igx-icon-button-display { - --ig-size: #{if($variant != 'bootstrap', 2, 1)}; - }; - } - - %filter-tree__expression-condition { - opacity: if($variant != 'indigo', .6, .8); - } - - %filter-tree__buttons { - --ig-size: 1; - - display: flex; - align-items: center; - gap: rem(8px); - - [igxbutton='flat'] { - padding-block: 0; - border: none - } - } - - %filter-tree__inputs { - --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)}; - - display: flex; - align-items: flex-end; - gap: rem(16px); - width: 100%; - border-radius: inherit; - - &:empty { - display: none; - } - } - - %filter-tree__inputs-field { - display: flex; - flex-direction: column; - gap: rem(4px); - max-width: rem(250px); - width: 100%; - } - - %advanced-filter__label { - @include type-style('body-2'); - - color: var-get($theme, 'label-foreground'); - } - - %filter-tree__inputs-actions { - --ig-size: 2; - - display: flex; - gap: rem(8px); - align-items: center; - width: auto; - align-self: center; - - [igxIconButton] { - transition: none; - } - } - - %filter-con-menu__delete-btn { - color: color(null, 'error'); - @if $bootstrap-theme { - border-color: color(null, 'error'); - } - - &:hover, - &:focus { - @if $bootstrap-theme { - background: color(null, 'error'); - border-color: color(null, 'error'); - color: color(null, 'gray', 100); - } @else { - color: color(null, 'error'); - } - } - } - - %filter-con-menu__close-btn { - position: absolute; - top: 0; - inset-inline-start: 100%; - transform: translate(-50%, -50%); - background-color: var-get($theme, 'background'); - border: rem(1px) solid color(null, 'gray', 200); - - &:hover, - &:focus { - @if $not-bootstrap-theme { - background-color: var-get($theme, 'background'); - } - } - } - - %advanced-filter--inline { - display: flex; - flex-direction: column; - width: 100%; - max-width: 100%; - height: inherit; - max-height: inherit; - min-width: rem(480px); - box-shadow: none; - - %advanced-filter__main { - min-height: initial; - max-height: initial; - flex-grow: 1; - } - } -} - -/// Adds typography styles for the igx-query-builder component. -/// Uses the 'h6' category from the typographic scale. -/// @group typography -/// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles. -@mixin query-builder-typography( - $categories: (title: 'h6') -) { - $title: map.get($categories, 'title'); - - %advanced-filter__title { - @include type-style($title) { - margin: 0; - } - } -} +//@use 'sass:map'; +//@use '../../base' as *; +// +///// @deprecated Use the `css-vars` mixin instead. +///// @see {mixin} css-vars +///// @param {Map} $theme - The grid theme used to style the component. +//@mixin query-builder($theme) { +// @include css-vars($theme); +// +// $variant: map.get($theme, '_meta', 'theme'); +// $theme-variant: map.get($theme, '_meta', 'variant'); +// $bootstrap-theme: $variant == 'bootstrap'; +// $not-bootstrap-theme: not($bootstrap-theme); +// +// // Custom colors alpha +// $alpha-hover: .08; +// $alpha-focus: .16; +// $alpha-focus-hover: .24; +// +// $border-radius: var-get($theme, 'border-radius'); +// $icon-size: rem(18px); +// +// %advanced-filter { +// @include sizable(); +// +// --_tree-scrollbar-gutter: #{rem(16px)}; +// +// @if $variant == 'bootstrap' { +// --query-builder-outer-padding: #{rem(16px)}; +// } @else { +// --query-builder-outer-padding: #{rem(24px)}; +// } +// +// width: auto; +// min-width: rem(660px); +// background-color: var-get($theme, 'background'); +// border-radius: $border-radius; +// box-shadow: var-get($theme, 'elevation'); +// overflow: hidden; +// +// &:has(:not(igx-query-builder-header)) { +// padding-block-start: var(--query-builder-outer-padding); +// +// %query-level-0 { +// padding-block: 0 var(--query-builder-outer-padding); +// } +// } +// +// &:has(igx-query-builder-header) { +// padding-block-start: 0; +// +// %query-level-0 { +// padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding); +// } +// } +// +// .igx-chip__ghost { +// position: relative; +// } +// } +// +// %query-builder-tree { +// background: var-get($theme, 'background'); +// +// %query-builder-tree { +// border-radius: var-get($theme, 'subquery-border-radius'); +// } +// } +// +// %query-level-0 { +// display: block; +// width: 100%; +// +// padding-inline: var(--query-builder-outer-padding); +// +// > %advanced-filter__main { +// gap: rem(16px); +// +// > %filter-tree__section { +// --sb-size: #{rem(10px)}; +// +// max-height: rem(570px); +// overflow-y: auto; +// overflow-x: hidden; +// padding-inline-end: var(--_tree-scrollbar-gutter); +// } +// } +// } +// +// %filter-tree__subquery { +// max-width: rem(960px); +// +// // Add styles to the subquery itself only if there is a direct .igx-filter-tree__inputs inside it +// &:has( > %filter-tree__inputs) { +// background: var-get($theme, 'subquery-header-background'); +// border: rem(1px) solid var-get($theme, 'subquery-border-color'); +// border-radius: var-get($theme, 'subquery-border-radius'); +// } +// +// // Hide the subquery itself if there is a tree with display none inside +// &:has( > %query-builder-tree[style='display: none;']) { +// display: none; +// } +// +// > %filter-tree__inputs { +// padding: rem(12px); +// border-radius: inherit; +// +// > igx-input-group, +// > igx-date-picker, +// > igx-time-picker { +// flex-grow: 1; +// } +// } +// +// %filter-tree__buttons { +// margin-block-start: rem(8px); +// } +// +// %query-builder-tree { +// border-block-start: rem(1px) dashed var-get($theme, 'separator-color'); +// padding: rem(12px); +// } +// +// &:empty { +// display: none; +// } +// +// } +// +// %filter-tree-details-button { +// margin-inline-start: auto; +// } +// +// %query-builder-dialog { +// display: flex; +// flex-direction: column; +// gap: rem(16px); +// max-width: rem(310px); +// +// > * { +// margin: 0 !important; +// } +// } +// +// %advanced-filter__header { +// display: flex; +// align-items: center; +// background-color: var-get($theme, 'header-background'); +// color: var-get($theme, 'header-foreground'); +// user-select: none; +// border-radius: $border-radius $border-radius 0 0; +// margin-bottom: 0; +// border-block-end: rem(1px) solid var-get($theme, 'header-border'); +// +// padding-inline: var(--query-builder-outer-padding); +// padding-block: var(--query-builder-outer-padding) rem(16px); +// } +// +// %advanced-filter__title { +// &:empty { +// display: none; +// } +// } +// +// %advanced-filter__main { +// display: grid; +// gap: rem(16px); +// } +// +// %advanced-filter__root { +// display: flex; +// flex-direction: column; +// flex-grow: 1; +// +// > * { +// flex-grow: 1; +// } +// } +// +// %advanced-filter__root-actions { +// display: flex; +// gap: rem(8px); +// padding-bottom: rem(16px); +// } +// +// %advanced-filter__outlet { +// igx-select-item > igx-icon { +// width: var(--ig-icon-size, #{$icon-size}); +// height: var(--ig-icon-size, #{$icon-size}); +// font-size: var(--ig-icon-size, #{$icon-size}); +// margin-inline-end: rem(8px); +// } +// } +// +// %filter-tree { +// display: flex; +// width: 100%; +// +// %filter-tree { +// margin-block: rem(8px); +// } +// } +// +// %filter-tree__section { +// display: flex; +// flex-direction: column; +// gap: rem(8px); +// +// > %filter-tree { +// margin-block: 0; +// } +// } +// +// %filter-tree__expression-context-menu { +// display: flex; +// width: 100%; +// +// [igxbutton='flat'] { +// --ig-size: 1; +// +// @if $variant == 'bootstrap' { +// --ig-button-text-transform: capitalize; +// } +// +// border: none; +// min-width: auto; +// } +// } +// +// %filter-tree__line { +// $size: rem(2px); +// width: $size; +// background-color: white; +// margin-inline-end: calc(rem(8px) - $size); +// outline-style: none; +// } +// +// %filter-tree__line--and { +// background: var-get($theme, 'color-expression-group-and'); +// } +// +// %filter-tree__line--or { +// background: var-get($theme, 'color-expression-group-or'); +// } +// +// %filter-tree__button--and { +// &[igxButton='flat'] { +// @if $variant == 'material' or $variant == 'indigo' { +// --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover}); +// --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus}); +// --hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover}); +// --background: transparent; +// } +// +// @if $variant == 'fluent' { +// --background: transparent; +// --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// } +// +// --foreground: #{var-get($theme, 'color-expression-group-and')}; +// --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --icon-color: #{var-get($theme, 'color-expression-group-and')}; +// +// @if $variant != 'bootstrap' { +// --focus-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --hover-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --icon-color-hover: #{var-get($theme, 'color-expression-group-and')}; +// --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')}; +// --active-foreground: #{var-get($theme, 'color-expression-group-and')}; +// } @else { +// $bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% ); +// +// --focus-hover-background: transparent; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: transparent; +// --hover-background: transparent; +// --background: transparent; +// --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5); +// +// --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1); +// } +// } +// } +// +// %filter-tree__button--or { +// &[igxButton='flat'] { +// @if $variant == 'material' or $variant == 'indigo' { +// --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover}); +// --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus}); +// --hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover}); +// --background: transparent; +// } +// +// @if $variant == 'fluent' { +// --background: transparent; +// --focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// --hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))}; +// } +// +// --foreground: #{var-get($theme, 'color-expression-group-or')}; +// --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --icon-color: #{var-get($theme, 'color-expression-group-or')}; +// +// @if $variant != 'bootstrap' { +// --focus-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --hover-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --icon-color-hover: #{var-get($theme, 'color-expression-group-or')}; +// --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')}; +// --active-foreground: #{var-get($theme, 'color-expression-group-or')}; +// } @else { +// $bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%); +// +// --focus-hover-background: transparent; +// --focus-visible-background: transparent; +// --focus-background: transparent; +// --active-background: transparent; +// --hover-background: transparent; +// --background: transparent; +// --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5); +// +// --icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// --active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1); +// } +// } +// } +// +// %filter-tree__expressions { +// display: flex; +// flex-direction: column; +// align-items: flex-start; +// flex-grow: 1; +// gap: rem(8px); +// } +// +// %filter-tree__expression-section { +// $spacing: rem(16px); +// display: flex; +// flex-direction: column; +// width: calc(100% - #{$spacing}); +// gap: rem(8px); +// margin-inline-start: $spacing; +// +// &:empty { +// display: none; +// } +// } +// +// %filter-tree__expression-item { +// display: flex; +// align-items: center; +// width: 100%; +// gap: rem(8px); +// position: relative; +// +// igx-chip { +// --ig-size: 3; +// +// @if $variant != 'indigo' { +// igx-icon { +// --component-size: 1; +// } +// } +// } +// +// > igx-chip { +// %filter-tree__expression-column { +// padding-inline: pad-inline(rem(3px), rem(6px), rem(8px)); +// } +// +// %filter-tree__expression-condition { +// padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px)); +// } +// +// igx-prefix { +// display: flex; +// } +// +// .igx-chip__end { +// gap: sizable(rem(3px), rem(6px), rem(8px)); +// } +// } +// } +// +// +// %filter-tree__expression-item-ghost { +// .igx-chip__item { +// @include type-style('body-2'); +// +// --ig-body-2-text-transform: unset; +// +// padding-inline: rem(32px); +// +// color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900)); +// border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300)); +// background: transparent; +// } +// } +// +// %filter-tree__expression-item-keyboard-ghost { +// .igx-chip__item { +// box-shadow: var(--ghost-shadow); +// background: var(--ghost-background); +// color: var(--focus-text-color); +// } +// +// .igx-chip:hover { +// .igx-chip__item { +// box-shadow: var(--ghost-shadow); +// background: var(--ghost-background); +// color: var(--focus-text-color); +// +// @if $variant == 'indigo' { +// border-color: var(--border-color); +// } +// } +// } +// } +// +// %filter-tree__expression-column { +// padding: 0 rem(8px); +// } +// +// %filter-tree__expression-actions { +// display: inline-flex; +// gap: if($variant != 'indigo', rem(16px), rem(8px)); +// +// span { +// display: inline-flex; +// } +// +// %igx-icon-button-display { +// --ig-size: #{if($variant != 'bootstrap', 2, 1)}; +// }; +// } +// +// %filter-tree__expression-condition { +// opacity: if($variant != 'indigo', .6, .8); +// } +// +// %filter-tree__buttons { +// --ig-size: 1; +// +// display: flex; +// align-items: center; +// gap: rem(8px); +// +// [igxbutton='flat'] { +// padding-block: 0; +// border: none +// } +// } +// +// %filter-tree__inputs { +// --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)}; +// +// display: flex; +// align-items: flex-end; +// gap: rem(16px); +// width: 100%; +// border-radius: inherit; +// +// &:empty { +// display: none; +// } +// } +// +// %filter-tree__inputs-field { +// display: flex; +// flex-direction: column; +// gap: rem(4px); +// max-width: rem(250px); +// width: 100%; +// } +// +// %advanced-filter__label { +// @include type-style('body-2'); +// +// color: var-get($theme, 'label-foreground'); +// } +// +// %filter-tree__inputs-actions { +// --ig-size: 2; +// +// display: flex; +// gap: rem(8px); +// align-items: center; +// width: auto; +// align-self: center; +// +// [igxIconButton] { +// transition: none; +// } +// } +// +// %filter-con-menu__delete-btn { +// color: color(null, 'error'); +// @if $bootstrap-theme { +// border-color: color(null, 'error'); +// } +// +// &:hover, +// &:focus { +// @if $bootstrap-theme { +// background: color(null, 'error'); +// border-color: color(null, 'error'); +// color: color(null, 'gray', 100); +// } @else { +// color: color(null, 'error'); +// } +// } +// } +// +// %filter-con-menu__close-btn { +// position: absolute; +// top: 0; +// inset-inline-start: 100%; +// transform: translate(-50%, -50%); +// background-color: var-get($theme, 'background'); +// border: rem(1px) solid color(null, 'gray', 200); +// +// &:hover, +// &:focus { +// @if $not-bootstrap-theme { +// background-color: var-get($theme, 'background'); +// } +// } +// } +// +// %advanced-filter--inline { +// display: flex; +// flex-direction: column; +// width: 100%; +// max-width: 100%; +// height: inherit; +// max-height: inherit; +// min-width: rem(480px); +// box-shadow: none; +// +// %advanced-filter__main { +// min-height: initial; +// max-height: initial; +// flex-grow: 1; +// } +// } +//} +// +///// Adds typography styles for the igx-query-builder component. +///// Uses the 'h6' category from the typographic scale. +///// @group typography +///// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles. +//@mixin query-builder-typography( +// $categories: (title: 'h6') +//) { +// $title: map.get($categories, 'title'); +// +// %advanced-filter__title { +// @include type-style($title) { +// margin: 0; +// } +// } +//} diff --git a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss index f3a76d5877a..230309a9b30 100644 --- a/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss @@ -451,13 +451,13 @@ // @include expansion-panel($expansion-panel-theme-map); // } - @if is-used('igx-grid', $exclude) { - $grid-theme-map: grid-theme( - $schema: $schema, - ); - $grid-theme-map: meta.call($theme-handler, $grid-theme-map); - @include grid($grid-theme-map); - } + //@if is-used('igx-grid', $exclude) { + // $grid-theme-map: grid-theme( + // $schema: $schema, + // ); + // $grid-theme-map: meta.call($theme-handler, $grid-theme-map); + // @include grid($grid-theme-map); + //} // @if is-used('igx-grid-summary', $exclude) { // $grid-summary-theme-map: grid-summary-theme( @@ -610,16 +610,16 @@ // @include radio($radio-theme-map); // } - @if is-used('igx-query-builder', $exclude) { - $query-builder-theme-map: query-builder-theme( - $schema: $schema, - ); - $query-builder-theme-map: meta.call( - $theme-handler, - $query-builder-theme-map - ); - @include query-builder($query-builder-theme-map); - } + //@if is-used('igx-query-builder', $exclude) { + // $query-builder-theme-map: query-builder-theme( + // $schema: $schema, + // ); + // $query-builder-theme-map: meta.call( + // $theme-handler, + // $query-builder-theme-map + // ); + // @include query-builder($query-builder-theme-map); + //} @if is-used('ig-scrollbar', $exclude) { $scrollbar-theme-map: scrollbar-theme( diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss index a914c15ea23..88baaf870a7 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_bootstrap.scss @@ -77,7 +77,7 @@ // description: 'subtitle-2', // body: 'body-2' // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography($categories: ( // helper-text: 'body-2', @@ -120,7 +120,7 @@ @include label-typography($categories: ( label: 'body-1' )); - @include query-builder-typography($categories: ( - title: 'h5' - )); + //@include query-builder-typography($categories: ( + // title: 'h5' + //)); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss b/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss index 2406ef46d3c..270fb80517a 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_fluent.scss @@ -78,7 +78,7 @@ // description: 'body-2', // body: 'caption' // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography($categories: ( // helper-text: 'caption', @@ -124,5 +124,5 @@ @include label-typography($categories: ( label: 'subtitle-2' )); - @include query-builder-typography(); + //@include query-builder-typography(); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss b/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss index 2978e22e39f..6d9b0b8cd86 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_indigo.scss @@ -71,7 +71,7 @@ // body: 'body-2', // description: 'body-2', // )); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); //@include input-group-typography($categories: ( // helper-text: 'caption', @@ -128,7 +128,7 @@ @include label-typography($categories: ( label: 'caption' )); - @include query-builder-typography($categories: ( - title: 'h5' - )); + //@include query-builder-typography($categories: ( + // title: 'h5' + //)); } diff --git a/projects/igniteui-angular/core/src/core/styles/typography/_material.scss b/projects/igniteui-angular/core/src/core/styles/typography/_material.scss index 0135d721a77..90266f83e33 100644 --- a/projects/igniteui-angular/core/src/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/core/src/core/styles/typography/_material.scss @@ -50,7 +50,7 @@ @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography(); - @include excel-filtering-typography(); + //@include excel-filtering-typography(); @include icon-button-typography(); // @include input-group-typography(); // @include linear-bar-typography(); @@ -68,6 +68,6 @@ @include tooltip-typography(); // @include tree-typography(); @include label-typography(); - @include query-builder-typography(); + //@include query-builder-typography(); @include file-input-typography(); } diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts index 166248f9aa4..981ab976abd 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts @@ -15,7 +15,7 @@ import { ViewChild, ViewRef, DOCUMENT, - inject + inject, ViewEncapsulation } from '@angular/core'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; @@ -62,6 +62,8 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { } providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', templateUrl: './excel-style-filtering.component.html', + styleUrls: ['./excel-style-filtering.component.css'], + encapsulation: ViewEncapsulation.None, imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass] }) export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy { diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss new file mode 100644 index 00000000000..1d5867c23d6 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss @@ -0,0 +1,463 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations/functions' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +$tree-node-indent: ( + comfortable: #{rem(16px)}, + cosy: #{rem(8px)}, + compact: #{rem(4px)} +); + +$tree-node-expander-size: #{rem(20px)}; + +$tree-node-height: ( + comfortable: rem(40px), + cosy: rem(32px), + compact: rem(24px) +); + +$checkbox-indent: ( + comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}), + cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}), + compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}), +); + +@include layer(base) { + %grid-excel-actions__action { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + cursor: pointer; + + // TODO MOVE excel-filtering-actions-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-foreground'); + color: color($color: 'gray', $variant: 700); + + outline-style: none; + + &:hover, + &:focus { + // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-hover-foreground'); + color: color($color: 'gray', $variant: 700); + + background: color($color: 'gray', $variant: 100); + } + + [dir='rtl'] & { + igx-icon { + transform: scaleX(-1); + } + } + } + + %grid-excel-action--compact { + display: flex; + align-items: center; + justify-content: space-between; + + header { + margin-inline-end: auto; + } + } + + %grid-excel-sort-move { + display: block; + padding-block: pad-block(rem(4px), rem(8px), rem(8px)); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + + header { + @include type-style('overline'); + + // TODO MOVE excel-filtering-subheader-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-subheader-foreground'); + color: color($color: 'gray', $variant: 700); + + margin-block-end: rem(4px); + } + + igx-icon { + --component-size: 1; + + display: initial; + width: var(--size) !important; + height: var(--size) !important; + font-size: var(--size) !important; + } + } + + @include b(igx-excel-filter) { + --component-size: var(--ig-size, var(--ig-size-large)); + + display: block; + overflow: auto; + width: rem(320px); + min-width: rem(320px); + height: 100%; + flex-grow: 1; + box-shadow: elevation(12); + + @include e(sizing) { + @include sizable(); + + min-height: sizable(rem(330px), rem(465px), rem(645px)); + max-height: sizable(rem(405px), rem(565px), rem(775px)); + } + + @include e(menu) { + --component-size: var(--ig-size, var(--ig-size-large)); + + display: flex; + flex-direction: column; + height: 100%; + + // TODO: The border-radius should not be hardcoded. + border-radius: border-radius(rem(4px)); + + background: var(--filtering-row-background); + + .igx-button-group { + --elevation: none !important; + + + --item-background: var(--filtering-row-background); + + --item-hover-background: #{color($color: 'gray', $variant: 100)} !important; + --item-selected-background: #{color($color: 'gray', $variant: 100)} !important; + --item-text-color: #{color($color: 'gray', $variant: 700)} !important; + --item-icon-color: #{color($color: 'gray', $variant: 700)} !important; + --item-hover-text-color: #{color($color: 'gray', $variant: 800)} !important; + --item-hover-icon-color: #{color($color: 'gray', $variant: 800)} !important; + --item-selected-text-color: color($color: 'secondary', $variant: 500) !important; + --item-selected-icon-color: color($color: 'secondary', $variant: 500) !important; + --item-selected-hover-icon-color: contrast-color($color: 'gray', $variant: 50) !important; + --item-border-color: transparent !important; + --item-hover-border-color: transparent !important; + --item-focused-border-color: transparent !important; + --item-selected-border-color: transparent !important; + --item-selected-hover-border-color: transparent !important; + --item-disabled-border: transparent !important; + --disabled-selected-border-color: transparent !important; + } + + .igx-tree-node__wrapper { + padding: 0; + } + + igx-chips-area { + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block-start: pad-block(rem(4px), rem(8px), rem(16px)); + padding-block-end: 0; + gap: sizable(rem(4px), rem(4px), rem(8px)); + } + + // TODO SEE IF THIS IS THE BEST WAY + //@include tree(tree-theme( + // $background: color($color: 'surface'), + // $background-selected: color($color: 'surface'), + // $background-active: color($color: 'surface'), + // $background-active-selected: color($color: 'surface'), + // $foreground: contrast-color($color: 'surface'), + // $foreground-selected: contrast-color($color: 'surface'), + // $foreground-active: contrast-color($color: 'surface'), + // $foreground-active-selected: contrast-color($color: 'surface'), + //)); + } + + @include e(menu-header) { + display: flex; + align-items: center; + padding: pad(rem(4px), rem(8px), rem(16px)); + + > h4 { + @include type-style('h6'); + } + + // TODO MOVE excel-filtering-header-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-header-foreground'); + color: color($color: 'gray', $variant: 700); + } + + @include e(menu-main) { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + padding: pad(rem(4px), rem(8px), rem(16px)); + gap: sizable(rem(4px), rem(8px), rem(16px)); + + igx-list { + flex-grow: 1; + overflow: hidden; + margin-inline: calc(#{sizable(rem(-4px), rem(-8px), rem(-16px))} * -1); + border: 0; + border-top: rem(1px) dashed color($color: 'gray', $variant: 300); + border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); + } + } + + @include e(tree) { + background: color($color: 'surface'); + overflow-y: auto; + margin-inline: calc(#{pad-inline(rem(-4px), rem(-8px), rem(-16px))} * -1); + margin-block: 0; + flex: 1; + border-top: rem(1px) dashed color($color: 'gray', $variant: 300); + border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300); + + igx-icon { + width: var(--ig-icon-size, #{$tree-node-expander-size}); + height: var(--ig-icon-size, #{$tree-node-expander-size}); + font-size: var(--ig-icon-size, #{$tree-node-expander-size}); + } + + > igx-checkbox, + .igx-tree-node__wrapper { + height: #{sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + )}; + + min-height: #{sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + )}; + } + + .igx-tree-node__toggle-button { + min-width: rem(20px); + margin-inline-start: pad-inline( + map.get($tree-node-indent, 'compact'), + map.get($tree-node-indent, 'cosy'), + map.get($tree-node-indent, 'comfortable') + ); + margin-inline-end: pad-inline(rem(4px), rem(8px)); + } + + .igx-tree { + overflow-y: hidden; + } + } + + @include e(tree-alike) { + background: color($color: 'surface'); + display: flex; + flex-direction: column; + z-index: 1; + } + + @include e(tree-alike-item) { + display: flex; + align-items: center; + height: sizable( + map.get($tree-node-height, 'compact'), + map.get($tree-node-height, 'cosy'), + map.get($tree-node-height, 'comfortable') + ); + background: color($color: 'surface'); + + &:hover, + &:focus { + background: color($color: 'gray', $variant: 200); + } + + > igx-checkbox { + margin-inline-start: pad-inline( + map.get($checkbox-indent, 'compact'), + map.get($checkbox-indent, 'cosy'), + map.get($checkbox-indent, 'comfortable') + ); + } + } + + @include e(sort) { + @extend %grid-excel-sort !optional; + @extend %grid-excel-sort-move !optional; + + .igx-button-group { + [dir='rtl'] & { + flex-direction: row-reverse; + + // stylelint-disable-next-line max-nesting-depth + igx-icon, + [igxButton] { + direction: ltr; + } + // stylelint-enable-next-line max-nesting-depth + } + } + } + + @include e(move) { + @extend %grid-excel-sort-move !optional; + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !optional; + + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 400); + + pointer-events: none; + } + + @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; + + igx-icon { + color: color($color: 'secondary', $variant: 500); + } + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + + background: color($color: 'gray', $variant: 100); + + // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-hover-foreground'); + color: color($color: 'gray', $variant: 700); + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 400); + + pointer-events: none; + } + + @include e(menu-header-actions) { + display: flex; + margin-inline-start: auto; + gap: rem(4px); + } + + // Filtering + @include e(secondary-header) { + border-block-end: rem(1px) solid color($color: 'gray', $variant: 300); + + > h4 { + @include type-style('h6') + } + } + + @include e(filter-results) { + position: absolute; + width: rem(1px); + height: rem(1px); + overflow: hidden; + } + + @include e(menu-footer) { + display: flex; + justify-content: space-between; + } + + @include e(apply) { + flex-grow: 1; + + [igxButton] { + width: 100%; + } + } + + @include e(cancel) { + flex-grow: 1; + + [igxButton] { + width: 100%; + } + } + + @include m(inline) { + box-shadow: none; + width: 100%; + } + + @include e(menu, $m: compact) { + .igx-excel-filter__sort { + @extend %grid-excel-action--compact; + + igx-buttongroup { + width: rem(208px); + } + + header { + @include type-style('body-2'); + } + } + + igx-excel-filter__move { + @extend %grid-excel-action--compact; + + igx-buttongroup { + width: rem(208px); + } + + header { + @include type-style('body-2'); + + text-transform: capitalize; + + } + } + + .igx-excel-filter__menu-header { + @include type-style('subtitle-1') + } + + .igx-excel-filter__menu-header-actions { + span { + @include type-style('body-2'); + } + } + + .igx-checkbox__label { + @include type-style('body-2'); + } + } + + @include e(clear) { + flex-grow: 1; + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss new file mode 100644 index 00000000000..c6dfd747325 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-excel-filter, $tokens, dark); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss new file mode 100644 index 00000000000..5fe4866f646 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss @@ -0,0 +1,81 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, indigo, dark) { + %grid-excel-actions__action { + background: contrast-color($color: 'gray', $variant: 50, $opacity: .1); + + &:hover, + &:focus { + igx-icon { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .8); + + } + } + + igx-icon { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + } + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !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; + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + @include e(menu) { + background: color($color: 'gray', $variant: 50); + + .igx-button-group { + --item-text-color: #{contrast-color($color: 'surface', $variant: 500)}; + } + } + + @include e(menu-main) { + border-block: rem(1px) dashed color($color: 'gray', $variant: 100); + } + + @include e(tree) { + %igx-excel-filter__tree { + border-block: rem(1px) dashed color($color: 'gray', $variant: 100); + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss new file mode 100644 index 00000000000..e2944e3883f --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-filtering' as *; + +$material: digest-schema($dark-material-grid-filtering); +$bootstrap: digest-schema($dark-bootstrap-grid-filtering); +$fluent: digest-schema($dark-fluent-grid-filtering); +$indigo: digest-schema($dark-indigo-grid-filtering); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss new file mode 100644 index 00000000000..7aa5f25945f --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-excel-filter, $tokens, light); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss new file mode 100644 index 00000000000..c481da18361 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-filtering' as *; + +$base: digest-schema($light-grid-filtering); +$material: digest-schema($material-grid-filtering); +$bootstrap: digest-schema($bootstrap-grid-filtering); +$fluent: digest-schema($fluent-grid-filtering); +$indigo: digest-schema($indigo-grid-filtering); diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..06e696ef72c --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss @@ -0,0 +1,31 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/typography/mixins' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, bootstrap) { + @include e(secondary-header) { + border-block-end: rem(1px) solid color($color: 'gray', $variant: 100); + } + + @include e(secondary-footer) { + padding-inline: pad-inline(rem(16px)); + padding-block: pad-block(rem(16px)); + border-top: rem(1px) solid color($color: 'gray', $variant: 300); + } + + @include e(menu-main) { + igx-list { + border-top: rem(1px) dashed var(--ig-gray-100); + border-bottom: rem(1px) dashed var(--ig-gray-100); + } + } + + @include e(menu-header) { + > h4 { + @include type-style('subtitle-1'); + } + } +} + diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss new file mode 100644 index 00000000000..b702498a688 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, fluent) { + @include m(menu) { + .igx-button-group { + --item-selected-hover-icon-color: color($color: 'secondary', $variant: 500); + --item-focused-border-color: color($color: 'gray', $variant: 700); + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss new file mode 100644 index 00000000000..ca5fbacd686 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss @@ -0,0 +1,182 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +// TODO type style is throwing an error + +@include themed-block(igx-excel-filter, indigo) { + %grid-excel-actions__action { + padding-block: pad-block(rem(4px), rem(6px), rem(8px)); + padding-inline: pad-inline(rem(12px)); + margin-inline: rem(8px); + margin-block-end: rem(4px); + border-radius: rem(4px); + + &:hover, + &:focus { + background: color($color: 'gray', $variant: 200); + + igx-icon { + color: color($color: 'gray', $variant: 700); + } + } + + + igx-icon { + --component-size: 2; + + color: color($color: 'gray', $variant: 600); + } + } + + @include e(actions-pin) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-pin, $m: disabled) { + @extend %grid-excel-actions__action !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; + } + + @include e(actions-filter) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-filter, $m: active) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear) { + @extend %grid-excel-actions__action !optional; + } + + @include e(actions-clear, $m: disabled) { + @extend %grid-excel-actions__action !optional; + } + + %grid-excel-sort-move { + padding-inline: pad-inline(rem(16px)); + + header { + margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important; + text-transform: capitalize !important; + } + + igx-icon { + --component-size: 2; + } + } + + @include e(menu) { + background: contrast-color($color: 'gray', $variant: 900); + + .igx-button-group__item { + &:not(:nth-child(1)) { + margin: 0; + } + } + + .igx-button-group { + --item-background: transparent !important; + --border-color: transparent !important; + --item-border-color: transparent !important; + --item-focused-border-color: transparent !important; + --item-hover-border-color: transparent !important; + --item-selected-border-color: transparent !important; + --item-selected-hover-border-color: transparent !important; + --item-disabled-border: transparent !important; + --disabled-selected-border-color: transparent !important; + --elevation: none !important; + --item-selected-text-color: contrast-color($color: 'surface') !important; + --item-selected-icon-color: contrast-color($color: 'surface') !important; + } + } + + @include e(menu-header) { + padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px))); + } + + @include e(menu-main) { + padding: pad(rem(16px)); + gap: sizable(rem(16px)); + + igx-list { + --background: #{color($color: 'surface', $variant: 500)}; + + margin-inline: calc(#{sizable(rem(-16px))} * -1); + + // This is the only way to take the gap from the list, + // otherwise we have to hardcode it here + > div { + gap: inherit; + } + + igx-display-container { + display: flex; + flex-direction: column; + gap: inherit; + padding: pad(rem(8px)); + } + } + } + + @include e(actions-filter) { + margin-block-end: 0; + } + + @include e(actions-pin, $m: disabled) { + igx-icon { + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 900, $opacity: .2); + } + } + + @include e(actions-clear, $m: disabled) { + igx-icon { + // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here. + //color: var-get($theme, 'excel-filtering-actions-disabled-foreground'); + color: color($color: 'gray', $variant: 900, $opacity: .2); + } + } + + @include e(sort) { + @extend %grid-excel-sort-move !optional; + + padding-block-end: 0; + } + + @include e(move) { + @extend %grid-excel-sort-move !optional; + + margin-block-end: sizable(rem(12px), rem(16px), rem(16px)); + } + + .igx-excel-filter__sort + igx-excel-filter__move { + margin-block-start: sizable(rem(4px), rem(8px), rem(8px)); + } + + .ig-typography .igx-excel-filter__menu--compact { + .igx-excel-filter__menu-header { + > h4 { + @include type-style('h6') + } + } + } +} diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss new file mode 100644 index 00000000000..8a7e8c265e6 --- /dev/null +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss @@ -0,0 +1,6 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-excel-filter, material) { +} diff --git a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss index 1772c84108e..15763328d3f 100644 --- a/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss +++ b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss @@ -8,75 +8,120 @@ $_theme: $material; @include layer(base) { - $cell-pin: ( - style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), - color: var-get($_theme, 'pinned-border-color') - ); - - @include b(igx-grid-summary) { - position: relative; - display: flex; - flex-direction: column; - flex: 1 1 0%; - padding-block: 0; - padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); - background: var-get($_theme, 'background-color', inherit); - overflow: hidden; - outline-style: none; - - @include e(item) { - display: flex; - align-items: center; - position: relative; - padding-block: pad(rem(0), rem(2px), rem(6px)); - padding-inline: 0; - font-size: rem(12px); - } - - @include e(label) { - @include ellipsis(); - - color: var-get($_theme, 'label-color'); - min-width: rem(30px); - margin-inline-end: rem(3px); - - &:hover { - color: var-get($_theme, 'label-hover-color'); - } - } - - @include e(result) { - @include ellipsis(); - - color: var-get($_theme, 'result-color'); - font-weight: 600; - flex: 1 1 auto; - text-align: end; - } - - @include m(pinned) { - position: relative; - z-index: 1; - } - - @include m(pinned-last) { - border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-end: map.get($cell-pin, 'style') #999; - } - } - - @include m(pinned-first) { - border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); - - @media print { - border-inline-start: map.get($cell-pin, 'style') #999; - } - } - - @include m(fw) { - flex-grow: 0; - } - } + $cell-pin: ( + style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'), + color: var-get($_theme, 'pinned-border-color') + ); + + @include b(igx-grid-summary) { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 0%; + padding-block: 0; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + background: var-get($_theme, 'background-color', inherit); + overflow: hidden; + outline-style: none; + + // TODO MAYBE WE SHOULD RENAME THIS VARIABLES SO THE CAN BE USED IN THE SUMMARY AND grid BODY + border-inline-end: var(--header-border-width) var(--header-border-style) var-get($_theme, 'border-color'); + + @include e(item) { + display: flex; + align-items: center; + position: relative; + padding-block: pad(rem(0), rem(2px), rem(6px)); + padding-inline: 0; + font-size: rem(12px); + } + + @include e(label) { + @include ellipsis(); + + color: var-get($_theme, 'label-color'); + min-width: rem(30px); + margin-inline-end: rem(3px); + + &:hover { + color: var-get($_theme, 'label-hover-color'); + } + } + + @include e(result) { + @include ellipsis(); + + color: var-get($_theme, 'result-color'); + font-weight: 600; + flex: 1 1 auto; + text-align: end; + } + + @include m(pinned) { + position: relative; + z-index: 1; + } + + @include mx(active, pinned) { + &::after { + width: calc(100% - rem(1px)); + } + } + + @include m(pinned-first) { + border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &:dir(ltr) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + @media print { + border-inline-start: map.get($cell-pin, 'style') #999; + } + } + + @include m(pinned-last) { + border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color'); + + &::after { + inset-inline-start: rem(1px); + } + + @media print { + border-inline-end: map.get($cell-pin, 'style') #999; + } + + &:dir(ltr) { + box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + + &:dir(rtl) { + box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color'); + } + } + + @include m(fw) { + flex-grow: 0; + } + + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + + @include m(active) { + &::after { + width: 100%; + height: 100%; + box-shadow: inset 0 0 0 rem(1px) var(--cell-active-border-color); + pointer-events: none; + } + } + } } diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.scss b/projects/igniteui-angular/grids/grid/src/grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/grid/src/grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts index 83a38112d0b..e9c2c9a2251 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, - OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute + OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, ViewEncapsulation, } from '@angular/core'; import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { @@ -122,6 +122,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { ], selector: 'igx-grid', templateUrl: './grid.component.html', + styleUrl: './grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [ NgClass, NgStyle, diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index ba34f9ad9de..07d5e671132 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -1,4 +1,28 @@ -import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, reflectComponentType, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChildren, + CUSTOM_ELEMENTS_SCHEMA, + DoCheck, + ElementRef, + HostBinding, + Input, + OnDestroy, + OnInit, + QueryList, + reflectComponentType, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewContainerRef, + inject, + ViewEncapsulation, +} from '@angular/core'; import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; @@ -46,6 +70,8 @@ let NEXT_ID = 0; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', templateUrl: './child-grid-row.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgClass] }) export class IgxChildGridRowComponent implements AfterViewInit, OnInit { @@ -273,6 +299,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', templateUrl: 'hierarchical-grid.component.html', + styleUrl: 'hierarchical-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss new file mode 100644 index 00000000000..41d4e903297 --- /dev/null +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss @@ -0,0 +1,4 @@ +@use '../../themes/base'; +@use '../../themes/shared'; +@use '../../themes/light'; +@use '../../themes/dark'; diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index afc3939de51..9cd1f3356c2 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -1,56 +1,148 @@ -import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ContentChild, createComponent, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnChanges, SimpleChanges, inject } from '@angular/core'; -import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; +import { + AfterContentInit, + AfterViewInit, + booleanAttribute, + ChangeDetectionStrategy, + Component, + ContentChild, + createComponent, + CUSTOM_ELEMENTS_SCHEMA, + ElementRef, + EventEmitter, + HostBinding, + inject, + Input, + OnChanges, + OnInit, + Output, + QueryList, + SimpleChanges, + TemplateRef, + ViewChild, + ViewChildren, + ViewEncapsulation, +} from '@angular/core'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { first, take, takeUntil } from 'rxjs/operators'; -import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core'; -import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; -import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core'; -import { IgxGridCRUDService } from 'igniteui-angular/grids/core'; -import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; -import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; -import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; -import { IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { FilterMode, GridPagingMode, GridSummaryPosition } from 'igniteui-angular/grids/core'; -import { WatchChanges } from 'igniteui-angular/grids/core'; -import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { - IGridEditEventArgs, + DEFAULT_PIVOT_KEYS, + DimensionValuesFilteringStrategy, + DropPosition, + FilterMode, + GridBaseAPIService, + GridPagingMode, + GridSummaryPosition, + GridType, ICellPosition, - IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, + IColumnMovingEndEventArgs, + IColumnMovingEventArgs, + IColumnMovingStartEventArgs, IColumnVisibilityChangedEventArgs, + IDimensionsChange, IGridEditDoneEventArgs, + IGridEditEventArgs, IGridToolbarExportEventArgs, + IGX_GRID_BASE, + IGX_GRID_SERVICE_BASE, + IgxColumnComponent, + IgxColumnGroupComponent, + IgxColumnMovingDropDirective, + IgxColumnResizingService, + IgxColumnTemplateContext, + IgxExcelStyleColumnOperationsTemplateDirective, + IgxExcelStyleFilterOperationsTemplateDirective, + IgxExcelStyleSearchComponent, + IgxFilteringService, + IgxGridBodyDirective, + IgxGridCRUDService, + IgxGridDragSelectDirective, + IgxGridExcelStyleFilteringComponent, + IgxGridNavigationService, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxGridSelectionService, + IgxGridSummaryService, + IgxGridValidationService, + IgxPivotColumnResizingService, + IgxPivotDateDimension, + IgxPivotGridColumnResizerComponent, + IgxPivotGridValueTemplateContext, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinRowEventArgs, + IPivotConfiguration, + IPivotConfigurationChangedEventArgs, + IPivotDimension, + IPivotUISettings, + IPivotValue, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, - IRowDragStartEventArgs + IRowDragStartEventArgs, + IValuesChange, + NoopPivotDimensionsStrategy, + PivotDimensionType, + PivotGridType, + PivotRowLayoutType, + PivotSummaryPosition, + PivotUtil, + RowType, + WatchChanges, } from 'igniteui-angular/grids/core'; -import { DropPosition } from 'igniteui-angular/grids/core'; -import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core'; -import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; +import { + cloneArray, + ColumnType, + DataUtil, + DefaultDataCloneStrategy, + GridColumnDataType, + GridSummaryCalculationMode, + IDataCloneStrategy, + IFilteringExpressionsTree, + IFilteringOperation, + IFilteringStrategy, + IgxOverlayOutletDirective, + ISortingExpression, + onResourceChangeHandle, + OverlaySettings, + resizeObservable, + SortingDirection, + State, + Transaction, + TransactionService, + ɵSize, +} from 'igniteui-angular/core'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; -import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core'; -import { State, Transaction, TransactionService, onResourceChangeHandle } from 'igniteui-angular/core'; import { IgxPivotFilteringService } from './pivot-filtering.service'; -import { GridBaseAPIService } from 'igniteui-angular/grids/core'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; -import { IgxPivotGridColumnResizerComponent } from 'igniteui-angular/grids/core'; import { PivotSortUtil } from './pivot-sort-util'; -import { IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotValueChipTemplateDirective } from './pivot-grid.directives'; -import { IgxPivotRowPipe, IgxPivotRowExpansionPipe, IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe, IgxPivotGridHorizontalRowGrouping } from './pivot-grid.pipes'; -import { IgxGridRowClassesPipe, IgxGridRowStylesPipe } from 'igniteui-angular/grids/core'; -import { IgxExcelStyleSearchComponent } from 'igniteui-angular/grids/core'; +import { + IgxPivotRowDimensionHeaderTemplateDirective, + IgxPivotValueChipTemplateDirective, +} from './pivot-grid.directives'; +import { + IgxPivotAutoTransform, + IgxPivotCellMergingPipe, + IgxPivotColumnPipe, + IgxPivotGridColumnSortingPipe, + IgxPivotGridFilterPipe, + IgxPivotGridHorizontalRowGrouping, + IgxPivotGridSortingPipe, + IgxPivotRowExpansionPipe, + IgxPivotRowPipe, +} from './pivot-grid.pipes'; import { IgxPivotRowComponent } from './pivot-row.component'; -import { IgxColumnMovingDropDirective } from 'igniteui-angular/grids/core'; -import { IgxGridDragSelectDirective } from 'igniteui-angular/grids/core'; -import { IgxGridBodyDirective } from 'igniteui-angular/grids/core'; -import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; -import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { + IForOfDataChangingEventArgs, + IgxForOfScrollSyncService, + IgxForOfSyncService, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxToggleDirective, +} from 'igniteui-angular/directives'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -98,6 +190,8 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; preserveWhitespaces: false, selector: 'igx-pivot-grid', templateUrl: 'pivot-grid.component.html', + styleUrl: 'pivot-grid.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxGridCRUDService, IgxGridValidationService, diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss new file mode 100644 index 00000000000..bea8703c526 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/_base.scss @@ -0,0 +1,2854 @@ +/* stylelint-disable max-nesting-depth */ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; +$cell-font-size: rem(13px); +$cell-line-height: rem(16px); +$cell-editing-outline-width: rem(1px); +$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color'); +$grid-body-column-border-odd: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-odd'); +$grid-body-column-border-even: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-even'); +$grid-active-state-border: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'cell-active-border-color'); +$cell-padding-sm: rem(12px); +$cell-padding-md: rem(16px); +$cell-padding-lg: rem(24px); + +// The shadow size that simulates border glueth to the pinned border to make it thicker +$pinned-shadow-size: #{rem(1px)}; + +// Z-Indices +$z-grid-base: 1; +$z-grid-decoration: 2; +$z-grid-interaction: 3; +$z-grid-selection: 4; +$z-grid-edit-indicator: 5; +$z-grid-drag-ghost: 20; +$z-grid-scroll-drag: 25; +$z-grid-pinned-cell: 9999; +$z-grid-pinned-row: 10000; +$z-grid-scroll: 10001; +$z-grid-overlay: 10002; +$z-grid-loading: 10003; + +@include layer(base) { + // Base cell display - used for both data cells and header cells + %cell-display { + position: relative; + display: flex; + flex: 1 1 0%; + align-items: center; + outline-style: none; + color: inherit; + text-align: start; + min-height: var(--cell-height); + overflow: hidden; + padding-block: 0; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially if the borders have a slide alpha + background-clip: padding-box !important; + + font-size: $cell-font-size; + line-height: $cell-line-height; + + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + %cell-header { + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: var(--_grid-head-font-size); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + } + + %cell-input-overrides { + // Have a more stable visual editing experience + > igx-input-group, + igx-combo, + igx-simple-combo, + igx-select, + igx-date-picker, + igx-time-picker { + position: relative; + height: auto; + width: 100% !important; + overflow: hidden; + z-index: 0; + } + + igx-input-group { + background: var-get($theme, 'cell-editing-background'); + + input { + height: 100%; + color: var-get($theme, 'cell-editing-foreground'); + } + + input:focus { + color: var-get($theme, 'cell-editing-focus-foreground'); + } + } + + igx-select, + igx-combo, + igx-simple-combo, + igx-time-picker, + igx-date-picker { + igx-input-group { + height: 100%; + } + } + + .igx-input-group__bundle { + background: var-get($theme, 'cell-editing-background') !important; + height: 100% !important; + min-height: 100% !important; + border: none !important; + + .igx-input-group__filler, + .igx-input-group__notch { + border: none !important; + } + + &::before { + content: none !important; + } + + &::after { + display: none; + } + } + + .igx-input-group--indigo .igx-input-group__bundle:hover, + .igx-input-group--indigo .igx-input-group__bundle:focus { + background: transparent; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + height: auto; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main { + padding: 0; + } + + .igx-input-group__line { + display: none; + } + + igx-prefix, + igx-suffix { + background: inherit !important; + border-radius: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + } + + .igx-input-group--indigo { + padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important; + + igx-prefix { + padding-inline-start: 0 !important; + } + + igx-suffix { + padding-inline-end: 0 !important; + } + } + + .igx-input-group__input { + padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important; + } + + igx-date-range-picker { + height: 100%; + } + + igx-time-picker [igxLabel] { + display: none; + } + + input { + margin: 0 auto; + max-width: 100%; + } + + %form-group-input { + // ignore global typography + font-size: rem(13px) !important; + line-height: rem(16px) !important; + } + + .igx-input-group__input, + .igx-input-group__file-input, + .igx-input-group__textarea { + box-shadow: none !important; + border: none !important; + } + + .igx-input-group--disabled, + .igx-input-group--disabled igx-prefix, + .igx-input-group--disabled igx-suffix { + color: var-get($theme, 'cell-disabled-color'); + } + } + + @include b(igx-grid) { + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + + // TODO: This should be declared in the theme tokens + --grid-size: var(--component-size); + + --_expander-icon-width: #{rem(24px)}; + --_hierarchical-action-icon: #{rem(24px)}; + + --_hierarchical-indent-small: #{rem(12px)}; + --_hierarchical-indent-medium: #{rem(16px)}; + --_hierarchical-indent-large: #{rem(24px)}; + + --cell-height: #{sizable(rem(32px), rem(40px), rem(50px))}; + + // Derived size variables for header, group area, and tree indentation + --header-size: #{sizable(rem(32px), rem(40px), rem(50px))}; + --grouparea-size: #{sizable(rem(41px), rem(49px), rem(57px))}; + --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))}; + + --_grid-head-font-size: #{rem(12px)}; + + // Core grid structure + position: relative; + display: grid; + grid-template-rows: auto auto auto 1fr auto auto; + grid-template-columns: 100%; + overflow: hidden; + box-shadow: var-get($theme, 'grid-elevation'); + outline-style: none; + z-index: $z-grid-base; + + // Grid caption + @include e(caption) { + display: flex; + align-items: center; + font-size: rem(20px); + line-height: rem(32px); + padding: rem(16px) rem(24px); + grid-row: 1; + } + + // Table body container + @include e(tbody) { + position: relative; + display: flex; + grid-row: 4; + overflow: hidden; + } + + // Table body content area + @include e(tbody-content) { + position: relative; + background: var-get($theme, 'content-background'); + color: var-get($theme, 'content-text-color'); + overflow: hidden; + z-index: $z-grid-base; + outline-style: none; + + &:focus { + outline: 0; + } + } + + // Table body message (empty state) + @include e(tbody-message) { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: var-get($theme, 'content-text-color'); + flex-direction: column; + padding: rem(24px); + } + + // Loading indicator + @include e(loading) { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + min-height: rem(100px); + } + + // Table body scrollbar + @include e(tbody-scrollbar) { + background: var-get($theme, 'content-background'); + border-inline-start: rem(1px) solid var-get($theme, 'row-border-color') ; + position: relative; + } + + // Table body scrollbar main section + @include e(tbody-scrollbar-main) { + position: relative; + } + + // Table body scrollbar start section + @include e(tbody-scrollbar-start) { + background: var-get($theme, 'header-background'); + } + + // Table body scrollbar end section + @include e(tbody-scrollbar-end) { + background: var-get($theme, 'header-background'); + } + + // Horizontal scroll container + @include e(scroll) { + grid-row: 6; + display: flex; + flex-flow: row nowrap; + width: 100%; + background: var-get($theme, 'header-background'); + z-index: $z-grid-scroll; + } + + // Scroll start section + @include e(scroll-start) { + background: var-get($theme, 'header-background'); + border-inline-end: $grid-header-border; + } + + @include e(scroll-end) { + background: var-get($theme, 'header-background'); + border-inline-start: $grid-header-border; + } + + // Scroll main section + @include e(scroll-main) { + igx-display-container { + height: 0; + } + } + + // Table footer + @include e(tfoot) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + grid-row: 5; + border-top: $grid-header-border; + z-index: $z-grid-scroll; + + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: $z-grid-decoration; + + &:hover { + background: inherit; + color: inherit; + } + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + + &:empty { + display: none; + } + } + + // Table footer thumb (scrollbar) + @include e(tfoot-thumb) { + position: absolute; + top: 0; + inset-inline-end: 0; + background: var-get($theme, 'header-background'); + } + + // Grid footer + @include e(footer) { + grid-row: 7; + } + + // Base row element + @include e(tr) { + position: relative; + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + + .igx-display-container { + overflow: visible !important; + flex: 1 !important; + min-width: 0; + } + + &:hover { + .igx-grid__td--column-selected { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-hover-border-color'); + } + } + } + + @include e(tr, $not: (header, selected)) { + &:hover { + background: var-get($theme, 'row-hover-background'); + color: var-get($theme, 'row-hover-text-color'); + } + } + + // Row striping - odd rows + @include e(tr, $m: odd) { + background: var-get($theme, 'row-odd-background'); + color: var-get($theme, 'row-odd-text-color'); + + .igx-grid__tr-action { + border-inline-end-color: var-get($theme, 'header-border-color') !important; + border-block-end: 0 !important; + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + // The border is part of the body cells but the color of the border + // depends on the row background since we want it to be invisible unless a user change it + border-inline-end: $grid-body-column-border-odd; + } + } + + // Row striping - even rows + @include e(tr, $m: even) { + background: var-get($theme, 'row-even-background'); + color: var-get($theme, 'row-even-text-color'); + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + // The border is part of the body cells but the color of the border + // depends on the row background since we want it to be invisible unless a user change it + border-inline-end: $grid-body-column-border-even; + } + + .igx-grid__tr-action { + border-inline-end-color: var-get($theme, 'header-border-color') !important; + border-block-end: 0 !important; + } + } + + + // Selected row state + @include e(tr, $m: selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td--selected, + .igx-grid__td--pinned.igx-grid__td--selected { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-selected-border-color'); + } + + + &:hover { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + + .igx-grid__td:not(.igx-grid__td--pinned-last) { + border-inline-end-color: var-get($theme, 'body-column-hover-selected-border-color'); + } + } + } + + // Deleted row state - shows strikethrough text + @include e(tr, $m: deleted) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + font-style: italic; + color: color($color: 'error'); + text-decoration: line-through; + } + } + + // Highlighted row - shows left indicator bar + @include e(tr, $m: highlighted) { + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: rem(4px); + height: 100%; + background: var-get($theme, 'row-highlight'); + z-index: $z-grid-interaction; + } + + // When highlighted row is also edited, offset the edited indicator + &::before { + inset-inline-start: rem(4px); + } + } + + // Filtered row (tree grid) - subdued text color + @include e(tr, $m: filtered) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-filtered-text-color'); + } + } + + // Selected and filtered row combination (tree grid) + @include e(tr, $mods: (selected, filtered)) { + // WARN: This doesn't follow the BEM structure, needs work + .igx-grid__td-text { + color: var-get($theme, 'tree-selected-filtered-row-text-color'); + } + } + + // Expanded row (hierarchical/tree grid) + @include e(tr, $m: expanded) { + border-bottom: none; + } + + // Pinned row + @include e(tr, $m: pinned) { + position: relative; + background: inherit; + z-index: $z-grid-pinned-row; + + .igx-grid__hierarchical-expander--empty { + border-inline-end: $grid-header-border; + } + } + + // Pinned row at top + @include e(tr, $m: pinned-top) { + border-bottom: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + + .igx-grid__tr:last-of-type { + border-bottom: none; + } + } + + // Pinned row at bottom + @include e(tr, $m: pinned-bottom) { + border-top: rem(2px) solid var-get($theme, 'pinned-border-color') !important; + position: absolute; + bottom: 0; + } + + // Merged row (no bottom border) + @include e(tr, $m: merged) { + border-block-end: 0; + } + + // Merged row top + @include e(tr, $m: merged-top) { + position: absolute; + width: 100%; + } + + // Disabled row + @include e(tr, $m: disabled) { + .igx-grid__td-text { + color: var-get($theme, 'cell-disabled-color'); + } + } + + // Disabled row + @include e(tr-header-row) { + igx-pivot-row-header-group { + padding-inline-start: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-sm); + + .igx-grid-th { + border-block-end: 0; + } + } + } + + // Cell (idle) + @include e(td) { + @extend %cell-display; + @extend %cell-input-overrides; + + // Used for the active cell indicator + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + } + } + @include e(td, $m: centered) { + justify-content: center; + } + + @include e(td, $m: image) { + justify-content: center; + } + + @include e(td, $m: bool) { + display: flex; + flex-grow: 1; + justify-content: center; + + .igx-icon { + --component-size: 1; + } + + .igx-icon--error { + color: color($color: 'gray', $variant: 600); + } + } + + @include e(td, $m: bool-true) { + .igx-icon--success { + color: color($color: 'gray', $variant: 700); + } + } + + // Cell for fixed width columns (non-resizable) + @include e(td, $m: fw) { + flex-grow: 0; + outline-style: none; + + > .igx-icon { + --component-size: 3; + } + } + + // Cell (text wrapper) + @include e(td-text) { + @include ellipsis(); + pointer-events: none; + } + + // New cell (newly added) + @include e(td, $m: new) { + color: var-get($theme, 'cell-new-color'); + } + + // Edited cell (value has been modified) + @include e(td, $m: edited) { + .igx-grid__td-text { + font-style: italic; + color: var-get($theme, 'cell-edited-value-color'); + padding: 0 rem(1px); + } + } + + // Merged cell + @include e(td, $m: merged) { + z-index: $z-grid-base; + grid-row: 1 / -1; + } + + // Merged cell when selected + @include e(td, $m: merged-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background') !important; + } + + // Merged cell when hovered + @include e(td, $m: merged-hovered) { + color: var-get($theme, 'row-hover-text-color'); + background: var-get($theme, 'row-hover-background') !important; + } + + // Merged cell when both selected and hovered + @include e(td, $mods: (merged-selected, merged-hovered)) { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get( + $theme, + 'row-selected-hover-background' + ) !important; + } + + // Number cell (right-aligned) + @include e(td, $m: number) { + text-align: end; + justify-content: flex-end; + flex-grow: 1; + } + + // Pinned cell + @include e(td, $m: pinned) { + position: relative; + background: inherit; + z-index: $z-grid-pinned-cell; + } + + // First pinned column (left border) + @include e(td, $m: pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &::after { + width: calc(100% - $pinned-shadow-size); + inset-inline-end: 0; + inset-inline-start: unset; + } + } + + // Last pinned column (right border) + @include e(td, $m: pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + } + + // Pinned cell when selected + @include e(td, $mods: (pinned, selected)) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + } + + // Pinned cell when column is selected + @include e(td, $mods: (pinned, column-selected)) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + &:hover { + background: var-get($theme, 'row-selected-hover-background'); + color: var-get($theme, 'row-selected-text-color'); + } + } + + // First cell in row-pinned layout + @include e(td, $m: row-pinned-first) { + overflow: hidden; + } + + // Pinned chip spacing + @include e(td, $m: pinned-chip) { + margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px)); + } + + @include e(td, $m: active) { + &::after { + border: $grid-active-state-border; + } + } + + // Selected cell + @include e(td, $m: selected) { + color: var-get($theme, 'cell-selected-text-color'); + background: var-get($theme, 'cell-selected-background'); + + .igx-grid__tree-grouping-indicator { + &:hover { + color: var-get($theme, 'cell-selected-text-color'); + } + } + } + + // Column selected (entire column is selected) + @include e(td, $m: column-selected) { + color: var-get($theme, 'row-selected-text-color'); + background: var-get($theme, 'row-selected-background'); + + &:hover { + color: var-get($theme, 'row-selected-hover-text-color'); + background: var-get($theme, 'row-selected-hover-background'); + } + } + + // Cross-selected (cell + column selected) + @include e(td, $mods: (selected, column-selected)) { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + + &:hover { + color: var-get($theme, 'cell-selected-within-text-color'); + background: var-get($theme, 'cell-selected-within-background'); + } + } + + @include e(td, $m: editing) { + background: var-get($theme, 'cell-editing-background') !important; + padding-inline: rem(4px); + + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + var-get($theme, 'edit-mode-color'); + } + + .igx-input-group { + --size: 100% !important; + --ig-input-group-border-color: transparent; + --ig-input-group-hover-border-color: transparent; + --ig-input-group-focused-border-color: transparent; + --ig-input-group-focused-secondary-color: transparent; + --ig-input-group-disabled-border-color: transparent; + + width: 100%; + overflow: hidden; + + .igx-input-group__bundle { + &::before, + &::after { + display: none; + } + } + + .igx-input-group__input { + --input-font-size: #{$cell-font-size}; + --input-line-height: #{$cell-line-height}; + + font-size: var(--input-font-size) !important; + line-height: var(--input-line-height) !important; + + } + } + + [aria-readonly='true'] { + color: var-get($theme, 'cell-disabled-color'); + + igx-icon { + color: var-get($theme, 'cell-disabled-color'); + } + } + } + + @include e(td, $mods: (editing, invalid)) { + .igx-input-group__bundle { + &:focus-within { + &::after { + border: none !important; + } + } + } + + &::after { + box-shadow: inset 0 0 0 #{$cell-editing-outline-width} + color($color: 'error') !important; + + top: calc($cell-editing-outline-width / 2); + height: calc(100% - $cell-editing-outline-width) + } + } + + @include e(td, $m: invalid) { + padding-inline-end: rem(4px) !important; + + > igx-icon { + --component-size: 1 !important; + + color: color($color: 'error'); + } + } + + @include e(td, $mods: (editing, valid)) { + &::after { + box-shadow: inset 0 0 0 $cell-editing-outline-width color($color: 'success'); + top: calc($cell-editing-outline-width / 2); + height: calc(100% - $cell-editing-outline-width) + } + } + + @include e(td, $m: valid) { + > igx-icon { + --component-size: 1 !important; + } + } + + // Row editing state - active edit mode on a row + @include e(tr, $m: edit) { + position: relative; + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + inset: 0; + pointer-events: none; + user-select: none; + + // This is do to the pinned border 9999 z-index + z-index: $z-grid-pinned-row; + box-shadow: + inset 0 rem(1px) 0 0 var-get($theme, 'edit-mode-color'), + inset 0 rem(-1px) 0 0 var-get($theme, 'edit-mode-color'); + } + } + + // MRL (Multi-row layout) specific edit row adjustments + @include e(tr, $mods: (mrl, edit)) { + &:first-of-type::after { + top: 0; + z-index: $z-grid-edit-indicator; + } + } + + + // Dragging row state + @include e(tr, $m: drag) { + opacity: 0.5; + } + + // Ghost row during drag operation + @include e(tr, $m: ghost) { + background: var-get($theme, 'row-ghost-background'); + color: var-get($theme, 'row-drag-color'); + z-index: $z-grid-overlay; + } + + // Group row + @include e(tr, $m: group) { + position: relative; + background: var-get($theme, 'header-background') !important; + } + + // Inner row wrapper + @include e(tr, $m: inner) { + display: flex; + background: inherit; + } + + // Header row + @include e(tr, $m: header) { + display: flex; + align-items: center; + + igx-icon { + --component-size: 3; + } + } + + // Row add animation + @include e(tr, $m: add-animate) { + animation: scale-in-ver-center 0.2s + cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + // Edited row indicator - shows row has been modified + @include e(tr, $m: edited) { + &::before { + content: ''; + position: absolute; + width: rem(2px); + height: 100%; + z-index: $z-grid-pinned-row; + background: var-get($theme, 'edited-row-indicator'); + } + } + + // Row editing overlay outlet container + @include e(row-editing-outlet) { + z-index: $z-grid-pinned-row; + position: absolute; + } + + // Row container + @include e(tr-container) { + overflow: auto; + width: 100%; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + } + + // Active row container + @include e(tr-container, $m: active) { + border: $grid-active-state-border; + } + + // Action row (for row actions like edit, delete buttons) + @include e(tr-action) { + &:last-of-type { + border-inline-end: $grid-header-border; + min-height: var(--cell-height); + } + } + + // Tree grid grouping indicator (expand/collapse icon) + @include e(tree-grouping-indicator) { + display: flex; + align-items: center; + justify-content: center; + user-select: none; + outline-style: none; + margin-inline-end: rem(8px); + cursor: pointer; + color: var-get($theme, 'expand-icon-color'); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + + igx-icon { + --component-size: 3; + } + } + + // Tree grid loading indicator + @include e(tree-loading-indicator) { + width: rem(24px); + height: rem(24px); + margin-inline-end: rem(8px); + } + + // Row indentation for tree/grouping + @include e(row-indentation) { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + border-inline-end: $grid-header-border; + background: inherit; + z-index: $z-grid-base; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + } + + // Hierarchical grid expander (expand/collapse child grids) + @include e(hierarchical-expander) { + user-select: none; + background: inherit; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: $z-grid-interaction; + color: var-get($theme, 'expand-icon-color'); + + &:focus { + outline: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Empty hierarchical expander (no children) + @include e(hierarchical-expander, $m: empty) { + cursor: default; + pointer-events: none; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + + } + + // Hierarchical expander in header + @include e(hierarchical-expander, $m: header) { + background: inherit; + border-inline-end: $grid-header-border; + z-index: $z-grid-interaction; + + igx-icon { + display: flex; + align-items: center; + } + } + + // Hierarchical expander pushed to top + @include e(hierarchical-expander, $m: push) { + align-items: flex-start; + + igx-icon { + min-height: var(--header-size); + max-height: var(--header-size); + } + } + + // Hierarchical indent spacing + @include e(hierarchical-indent) { + $indent-sm: calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)); + $indent-md: calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)); + $indent-lg: calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)); + + display: flex; + margin-inline-start: pad-inline($indent-sm, $indent-md, $indent-lg); + margin-inline-end: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + margin-block: pad-block(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + } + + // Hierarchical indent when scrolling + @include e(hierarchical-indent, $m: scroll) { + $indent-scroll-sm: calc(var(--_hierarchical-indent-small) + 18px); + $indent-scroll-md: calc(var(--_hierarchical-indent-medium) + 18px); + $indent-scroll-lg: calc(var(--_hierarchical-indent-large) + 18px); + + + margin-inline-end: pad-inline($indent-scroll-sm, $indent-scroll-md, $indent-scroll-lg); + } + + // Row indentation levels for tree/grouping (1-10) + @for $i from 1 through 10 { + @include e(row-indentation, $m: level-#{$i}) { + $level-sm: $i * rem(24px); + $level-md: $i * rem(32px); + $level-lg: $i * rem(36px); + + padding-inline-start: pad-inline( + #{$level-sm}, + #{$level-md}, + #{$level-lg} + ); + } + } + + // Header indentation for tree/grouping + @include e(header-indentation) { + position: relative; + padding-inline-end: sizable($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + border-inline-end: $grid-header-border; + background: var-get($theme, 'header-background'); + z-index: $z-grid-selection; + height: 100%; + + igx-icon { + --component-size: 3; + } + } + + // Header indentation without border + @include e(header-indentation, $m: no-border) { + border-inline-end: rem(1px) solid transparent; + } + + // Checkbox padding + @include e(cbx-padding) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + } + + // Checkbox selection cell + @include e(cbx-selection) { + display: flex; + justify-content: center; + align-items: center; + background: inherit; + z-index: $z-grid-selection; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: border-box !important; + } + + // Checkbox selection pushed to top (for header alignment) + @include e(cbx-selection, $m: push) { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + // Group row + @include e(group-row) { + background: var-get($theme, 'group-row-background'); + display: flex; + outline-style: none; + border-bottom: rem(1px) solid var-get($theme, 'row-border-color'); + min-height: var(--header-size); + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + inset: 0; + pointer-events: none; + user-select: none; + } + } + + // Active group row + @include e(group-row, $m: active) { + position: relative; + background: var-get($theme, 'group-row-selected-background'); + + &:hover { + background: var-get($theme, 'group-row-selected-background'); + } + + &::after { + border: $grid-active-state-border; + z-index: $z-grid-selection; + } + } + + // Group content area + @include e(group-content) { + display: flex; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + padding-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + border-inline-end: $grid-body-column-border-odd; + min-height: var(--cell-height); + + &:focus { + outline: transparent; + } + } + + // Grouping indicator (expand/collapse for groups) + @include e(grouping-indicator) { + position: relative; + display: flex; + user-select: none; + justify-content: center; + align-items: center; + z-index: $z-grid-base; + cursor: pointer; + padding-inline-end: rem(12px); + margin-inline-start: sizable(rem(12px), rem(16px), rem(24px)); + min-height: var(--header-size); + + igx-icon { + --component-size: 3; + color: var-get($theme, 'expand-icon-color'); + } + + &:hover, + &:focus { + outline-style: none; + + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + // Group expand button (on row indentation) + @include e(group-expand-btn) { + position: absolute; + cursor: pointer; + user-select: none; + inset-block-start: calc(50% - var(--_expander-icon-width) / 2); + inset-inline-start: var(--_indicator-inline-inset); + + &:hover { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + + // Group expand button pushed to top + @include e(group-expand-btn, $m: push) { + inset-block-start: sizable( + calc((rem(40px) - rem(12px)) / 2), + calc((rem(48px) - rem(12px)) / 2), + calc((rem(56px) - rem(12px)) / 2) + ); + } + + // Group row padding levels (1-10) - for nested groups + @for $i from 1 through 10 { + @include e(group-row, $m: padding-level-#{$i}) { + $indicator-padding-sm: $i * rem(12px); + $indicator-padding-md: $i * rem(16px); + $indicator-padding-lg: $i * rem(18px); + + .igx-grid__grouping-indicator { + padding-inline-start: sizable( + #{$indicator-padding-sm}, + #{$indicator-padding-md}, + #{$indicator-padding-lg} + ); + } + } + } + + // Multi-row layout block (MRL) + @include e(mrl-block) { + display: grid !important; + background: inherit; + position: relative; + } + + // Pivot grid super-compact mode + @include e(pivot, $m: super-compact) { + --ig-size: 1 !important; + + .igx-grid-th, + .igx-grid-thead__title, + .igx-grid__td { + padding: 0 rem(4px) !important; + min-height: rem(24px) !important; + height: rem(24px); + } + + .igx-grid-th, + .igx-grid-thead__title { + > * { + line-height: normal; + align-self: initial; + max-height: 100%; + } + } + + .igx-grid__tr-pivot--row-area { + padding-bottom: rem(4px); + } + } + + // Pivot row + @include e(tr-pivot) { + display: flex; + align-items: center; + background: inherit; + overflow: hidden; + z-index: $z-grid-interaction; + height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + border-inline-start: $grid-header-border; + border-bottom: $grid-header-border; + + igx-chips-area { + flex-wrap: nowrap; + width: auto; + + > * { + margin-inline-end: rem(4px); + } + + &:last-child { + margin-inline-end: 0; + } + } + } + + // Pivot filter toggle button + @include e(pivot-filter-toggle) { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + + > igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + width: rem(18px); + min-width: rem(18px); + height: rem(18px); + font-size: rem(10px); + pointer-events: none; + user-select: none; + } + } + + // Pivot empty chip area placeholder + @include e(pivot-empty-chip-area) { + line-height: normal; + font-size: rem(14px); + margin-inline-end: 0 !important; + } + + // Pivot row area + @include e(tr-pivot, $m: small-row-area) { + border-inline-start: 0; + } + + // Pivot row area + @include e(tr-pivot, $m: row-area) { + height: auto !important; + align-items: flex-end; + padding-bottom: pad-block(rem(8px), rem(12px), rem(16px)); + border-inline-start: 0; + border-bottom: 0; + } + + // Pivot filter container + @include e(tr-pivot, $m: filter-container) { + display: flex; + flex-direction: column; + } + + // Pivot chip drop indicator + @include e(tr-pivot, $m: chip_drop_indicator) { + width: rem(2px); + background: var-get($theme, 'resize-line-color'); + visibility: hidden; + } + + // Pivot drop row area + @include e(tr-pivot, $m: drop-row-area) { + flex-grow: 1; + } + + // Pivot filter row + @include e(tr-pivot, $m: filter) { + height: var(--header-size); + border-inline-start: 0; + } + + // Pivot group + @include e(tr-pivot-group) { + flex: 1; + } + + // Pivot column dimension leaf + @include e(tr-pivot, $m: columnDimensionLeaf) { + box-shadow: none; + + igx-grid-header { + border: none; + } + } + + // Pivot column multi-row span + @include e(tr-pivot, $m: columnMultiRowSpan) { + igx-grid-header { + > * { + visibility: hidden; + } + } + } + + // Pivot toggle icons + @include e(tr-pivot-toggle-icons) { + display: inline-flex !important; + } + + // ============================================================================ + // Drag & Drop Elements + // ============================================================================ + + // Drag indicator for reordering columns/rows + @include e(drag-indicator) { + display: flex; + align-items: center; + justify-content: center; + padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large)); + min-height: var(--cell-height); + padding-block: 0; + flex: 0 0 auto; + background: inherit; + z-index: $z-grid-selection; + cursor: move; + border-inline-end: rem(1px) solid transparent; + + igx-icon { + --component-size: 3; + } + } + + // Drag indicator in header + @include e(drag-indicator, $m: header) { + border-inline-end: $grid-header-border; + } + + // Drag indicator off/disabled state + @include e(drag-indicator, $m: off) { + color: var-get($theme, 'row-drag-color'); + } + + // Ghost image shown while dragging + @include e(drag-ghost-image) { + position: absolute !important; + align-items: center !important; + background: var-get($theme, 'ghost-header-background') !important; + color: var-get($theme, 'ghost-header-text-color') !important; + border-inline-end: transparent !important; + min-width: rem(168px); + max-width: rem(320px); + height: var(--header-size); + min-height: var(--header-size); + padding-inline: pad-inline(rem(24px), rem(16px), rem(12px)); + top: rem(-10000px); + inset-inline-start: rem(-10000px); + border: none; + box-shadow: var(--drag-shadow); + overflow: hidden; + z-index: $z-grid-drag-ghost; + + .igx-grid-th__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 0 0; + text-align: end; + color: var-get($theme, 'ghost-header-text-color') !important; + } + + .igx-grid-th__icons { + display: none; + } + + .igx-grid-thead__title { + border: none; + color: var-get($theme, 'ghost-header-text-color') !important; + background: transparent !important; + } + } + + // Ghost image icon + @include e(drag-ghost-image-icon) { + color: var-get($theme, 'ghost-header-icon-color'); + margin-inline-end: rem(12px); + } + + // Ghost image icon group (multiple columns) + @include e(drag-ghost-image-icon-group) { + color: var-get($theme, 'ghost-header-icon-color'); + padding: rem(24px); + padding-inline-end: 0; + margin-inline-end: rem(8px); + } + + // Drag column header (being dragged) + @include e(drag-col-header) { + background: var-get($theme, 'header-background'); + + .igx-grid-thead__title > *, + .igx-grid-th > * { + opacity: 0.4; + } + } + + // Scroll on drag indicators + @include e(scroll-on-drag-left) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: $z-grid-scroll-drag; + inset-inline-start: 0; + } + + @include e(scroll-on-drag-right) { + position: absolute; + width: rem(15px); + top: 0; + height: 100%; + z-index: $z-grid-scroll-drag; + inset-inline-end: 0; + } + + @include e(scroll-on-drag-pinned) { + position: absolute; + width: rem(15px); + height: 100%; + top: 0; + z-index: $z-grid-scroll-drag; + } + + // ============================================================================ + // Filtering Elements + // ============================================================================ + + // Filtering row + @include e(filtering-row) { + // Container styles + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + + // Position styles + position: absolute; + inset-inline-start: 0; + bottom: 0; + z-index: $z-grid-interaction; + grid-row: 2; + + // size & spacing styles + width: 100%; + height: var(--cell-height); + padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + + // Color styles + color: var-get($theme, 'filtering-row-text-color'); + background: var-get($theme, 'filtering-row-background'); + box-shadow: 0 rem(4px) rem(10px) rgba(0, 0, 0, 0.12); + + // Compound components overrides + .igx-input-group { + --size: calc(var(--cell-height) - #{rem(8px)}) !important; + + min-height: var(--size); + + width: 100% !important; + max-width: rem(200px) !important; + min-width: rem(140px) !important; + + + igx-prefix, + igx-suffix { + height: 100% !important; + } + + .igx-input-group__input { + font-size: sizable(rem(12px), rem(14px), rem(16px)) !important; + padding-inline-start: 0 !important; + padding-block: 0 !important; + height: 100% !important; + } + } + + [igxIconButton] { + --ig-size: 1; + + aspect-ratio: 1; + color: var-get($theme, 'filtering-row-text-color'); + } + } + + // Filtering row main section + @include e(filtering-row-main) { + display: flex; + flex: 1 1 auto; + align-items: center; + overflow: hidden; + max-width: calc(100% - rem(176px)); + min-width: rem(56px); + + igx-chips-area { + flex-wrap: nowrap; + + // Can't uae gap on the parent because dropdown container is present in the dom + margin-inline: rem(8px); + gap: rem(4px); + } + } + + // Filtering row editing buttons + @include e(filtering-row-editing-buttons) { + display: flex; + align-items: center; + padding: rem(8px); + gap: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row editing buttons (small) + @include e(filtering-row-editing-buttons, $m: small) { + padding: rem(4px); + + button { + transition: none; + + &:not([disabled]) igx-icon { + color: var-get($theme, 'sorted-header-icon-color'); + } + } + } + + // Filtering row scroll start + @include e(filtering-row-scroll-start) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::after { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to right, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-end: rem(-10px); + } + } + + // Filtering row scroll end + @include e(filtering-row-scroll-end) { + position: relative; + margin-inline: rem(8px); + overflow: visible; + + &::before { + display: block; + position: absolute; + width: rem(10px); + content: ''; + inset-block: rem(-2px); + background: linear-gradient( + to left, + var-get($theme, 'filtering-row-background'), + transparent + ); + inset-inline-start: rem(-10px); + } + } + + %filtering-cell { + display: flex; + align-items: center; + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + overflow: hidden; + border-inline-end: $grid-header-border; + border-top: $grid-header-border; + height: var(--header-size); + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + + + igx-chips-area { + width: 100%; + flex-wrap: nowrap; + + .igx-filtering-chips__connector { + font-size: rem(12px); + text-transform: uppercase; + font-weight: 600; + margin: 0 rem(8px); + overflow: hidden; + } + } + } + + // Filtering cell (advanced filtering) + @include e(filtering-cell) { + @extend %filtering-cell; + } + + // Filtering cell selected state + @include e(filtering-cell, $m: selected) { + @extend %filtering-cell; + + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + + igx-chips-area { + background: inherit; + } + } + + // Filtering cell indicator (badge/icon) + @include e(filtering-cell-indicator) { + display: flex; + align-items: center; + position: relative; + + igx-icon, + .igx-badge { + cursor: pointer; + } + + .igx-badge { + position: absolute; + top: rem(-4px); + inset-inline-start: 60%; + } + } + + // Filtering cell indicator hidden state + @include e(filtering-cell-indicator, $m: hidden) { + .igx-badge, + igx-icon { + display: none; + } + } + + // Filtering dropdown items + @include e(filtering-dropdown-items) { + display: flex; + align-items: center; + } + + // Filtering dropdown text + @include e(filtering-dropdown-text) { + margin-inline-start: rem(16px); + } + + // ============================================================================ + // Summaries Elements + // ============================================================================ + + // Summaries row + @include e(summaries) { + display: flex; + overflow: hidden; + outline-style: none; + background-color: var-get($theme, 'summaries-patch-background'); + + igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries body (in grid body) + @include e(summaries, $m: body) { + --summaries-patch-background: #{var-get($theme, 'group-row-background')}; + + display: flex; + overflow: hidden; + outline-style: none; + border-bottom: rem(1px) dashed var-get($theme, 'row-border-color'); + background-color: var-get($theme, 'summaries-patch-background'); + + &:last-of-type { + border-bottom: none; + } + + // Override summary component colors when in body context + .igx-grid-summary { + --background-color: inherit !important; + --result-color: hsla( + from color(from var(--background-color) var(--y-contrast)) h + 0 l / 1 + ) !important; + } + + .igx-display-container { + overflow: visible !important; + flex: 1; + min-width: 0; + } + } + + // Summaries patch (fixed area) + @include e(summaries-patch) { + position: relative; + background: inherit; + border-inline-end: $grid-header-border; + z-index: $z-grid-base; + } + + // ============================================================================ + // Outlet Elements + // ============================================================================ + + // Generic outlet for overlays + @include e(outlet) { + --ig-size: var(--grid-size); + z-index: $z-grid-overlay; + position: fixed; + } + + // Loading outlet + @include e(loading-outlet) { + z-index: $z-grid-loading; + } + + // Row editing outlet + @include e(row-editing-outlet) { + z-index: $z-grid-pinned-row; + position: absolute; + } + + // Add row snackbar + @include e(addrow-snackbar) { + position: absolute; + bottom: rem(16px); + inset-inline-start: 50%; + transform: translateX(-50%); + z-index: $z-grid-loading; + } + + // ============================================================================ + // Misc Elements + // ============================================================================ + + // Icon wrapper + @include e(icon) { + display: flex; + align-items: center; + justify-content: center; + } + + // Column name display + @include e(column-name) { + @include ellipsis(); + } + + // Count badge + @include e(count-badge) { + display: flex; + align-items: center; + justify-content: center; + min-width: rem(20px); + height: rem(20px); + padding: rem(2px) rem(6px); + border-radius: rem(10px); + font-size: rem(12px); + background: var-get($theme, 'group-count-background'); + color: var-get($theme, 'group-count-text-color'); + } + + // Text wrapper + @include e(text) { + @include ellipsis(); + } + + .igx-banner { + @include sizable(); + --component-size: var(--ig-size, var(--ig-size-large)); + + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + gap: rem(8px); + padding: rem(16px) rem(8px); + min-width: rem(320px); + color: contrast-color($color: 'surface', $variant: 500); + background: color($color: 'surface', $variant: 500); + border-radius: 0; + + igc-icon, + igx-icon, + igc-button, + [igxButton] { + --component-size: var(--ig-size, var(--ig-size-large)); + } + } + + .igx-banner__message { + display: flex; + align-items: center; + min-width: rem(150px); + flex: 1 0 0%; + gap: rem(16px); + padding: 0 rem(8px); + } + + .igx-banner__text { + @include type-style('body-2'); + + flex: 1 0 0%; + } + + .igx-banner__border-top { + box-shadow: inset 0 rem(1px) 0 0 var-get($theme, 'header-border-color'); + } + + .igx-banner__border-bottom { + box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'header-border-color'); + } + + .igx-banner__actions { + flex-wrap: wrap; + align-self: flex-end; + gap: 0.5rem; + } + } + + @include b(igx-grid-grouparea) { + grid-row: 2; + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + border-bottom: $grid-header-border; + background: var-get($theme, 'grouparea-background'); + color: var-get($theme, 'grouparea-color'); + min-height: var(--grouparea-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + z-index: $z-grid-decoration; + height: 100%; + overflow: hidden; + + + &:focus { + outline-style: none; + } + + //%igx-chip { + // margin-block: pad-block(rem(4px), rem(8px), rem(8px)); + //} + + @include e(connector) { + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 rem(4px); + + igx-icon { + width: var(--ig-icon-size, #{rem(16px)}) !important; + height: var(--ig-icon-size, #{rem(16px)}) !important; + font-size: var(--ig-icon-size, #{rem(16px)}) !important; + } + + [dir='rtl'] & { + transform: scaleX(-1); + } + } + + .igx-chip-area { + flex-grow: 1; + } + } + + @include b(igx-grid-th) { + position: relative; + display: flex; + flex: 1 1 0%; + color: inherit; + text-align: start; + + // (!) the background-clip: padding-box; makes sure the background never go under the border, + // this is very important especially of the borders have slide alpha + background-clip: padding-box !important; + line-height: $cell-line-height; + flex-flow: row nowrap; + justify-content: space-between; + align-items: flex-end; + min-width: 0; + min-height: var(--header-size); + padding-inline: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-block: 0; + font-size: rem(12px); + font-weight: 600; + border-inline-end: $grid-header-border; + overflow: hidden; + transition: color 250ms ease-in-out; + outline-style: none; + + @include e(expander) { + display: flex; + align-items: center; + justify-content: center; + margin-inline-end: rem(8px); + cursor: pointer; + + igx-icon { + color: var-get($theme, 'expand-icon-color'); + } + + &:hover { + igx-icon { + color: var-get($theme, 'expand-icon-hover-color'); + } + } + } + + @include e(group-title) { + @include ellipsis(); + } + + @include e(title) { + @include ellipsis(); + + min-width: 3ch; + user-select: none; + cursor: initial; + flex-grow: 1; + line-height: var(--header-size); + transition: color 250ms ease-in-out; + } + + @include e(icons) { + display: inline-flex; + align-items: center; + justify-content: flex-end; + user-select: none; + + /* sort-icon + filter icon width */ + min-width: rem(30px); + height: var(--header-size); + align-self: flex-end; + + &:empty { + min-width: 0; + } + + .igx-excel-filter__icon { + position: relative; + display: flex; + + --ig-icon-size: #{rem(15px)}; + + &::after { + content: attr(data-sortIndex); + position: absolute; + top: rem(-5px); + inset-inline-end: rem(-1px); + font-size: rem(10px); + text-align: end; + font-family: sans-serif; + line-height: rem(10px); + } + } + } + + @include e(resize-handle) { + position: absolute; + width: rem(4px); + top: 0; + inset-inline-end: rem(-2px); + height: 100%; + z-index: $z-grid-decoration; + } + + @include e(resize-line) { + position: absolute; + cursor: col-resize; + width: rem(4px); + background: var-get($theme, 'resize-line-color'); + z-index: $z-grid-decoration; + + &::before, + &::after { + position: absolute; + content: ''; + height: 100%; + width: rem(96px); + } + + &::before { + inset-inline-end: 100%; + } + + &::after { + inset-inline-start: 100%; + } + } + + // Drop indicators for column reordering + @include e(drop-indicator-left) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: $z-grid-base; + inset-inline-start: rem(-1px); + } + + @include e(drop-indicator-right) { + position: absolute; + width: rem(1px); + height: 100%; + top: 0; + z-index: $z-grid-base; + inset-inline-end: rem(-1px); + } + + // Active header (selected/focused header cell) + @include m(active) { + &::after { + content: ''; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: $grid-active-state-border; + pointer-events: none; + } + } + + @include mx(active, pinned) { + &::after { + inset-block-start: 0; + inset-inline-start: 0; + width: calc(100% - var-get($theme, 'pinned-border-width')) !important; + } + } + + @include m(number) { + text-align: end; + // TODO: This was enabled in the old styles but it overrides the flex behavior of the title and icons. Check agains designs. + // justify-content: flex-end; + flex-grow: 1; + + @include e(icons) { + justify-content: flex-start; + order: -1; + + .sort-icon { + order: 1; + } + } + } + + @include m(collapsible) { + justify-content: normal; + } + + @include m(sortable) { + :where(.sort-icon) { + display: flex; + align-items: center; + cursor: pointer; + position: relative; + + opacity: 0.7; + + &:is(:hover) { + opacity: 1; + } + + &::after { + content: attr(data-sortIndex); + position: absolute; + top: rem(-5px); + inset-inline-end: rem(-1px); + font-size: rem(10px); + text-align: end; + font-family: sans-serif; + line-height: rem(10px); + } + } + } + + // Sorted header (column is currently sorted) + @include m(sorted) { + :where(.sort-icon) { + opacity: 1; + color: var-get($theme, 'sorted-header-icon-color'); + + &:is(:hover, :focus) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // When hovering over the header cell itself, change icon color + // TODO: Questionable why this is here + &:hover :where(.sort-icon) { + color: var-get($theme, 'sortable-header-icon-hover-color'); + } + } + + // Selected header (column selection) + @include m(selectable) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + } + + // TODO: Verify the class is really named 'filtrable' and not 'filterable' + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .7; + } + } + + @include m(pinned) { + position: relative; + background: inherit; + + &::after { + width: calc(100% - $pinned-shadow-size) !important; + } + } + + // Pinned header (first pinned column) + @include m(pinned-first) { + border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + border-inline-start-color: var-get($theme, 'pinned-border-color'); + } + + &:dir(rtl) { + border-inline-end-color: var-get($theme, 'pinned-border-color'); + } + } + + // Pinned header (last pinned column) + @include m(pinned-last) { + border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color'); + + &:dir(ltr) { + border-inline-end-color: var-get($theme, 'pinned-border-color'); + border-inline-end-width: var-get($theme, 'pinned-border-width'); + } + + &:dir(rtl) { + border-inline-start-color: var-get($theme, 'pinned-border-color'); + border-inline-start-width: var-get($theme, 'pinned-border-width'); + } + } + + @include m(selected) { + color: var-get($theme, 'header-selected-text-color'); + background: var-get($theme, 'header-selected-background'); + + :where(.sort-icon::after) { + background: var-get($theme, 'header-selected-background'); + } + } + + @include m(fw) { + flex-grow: 0; + outline-style: none; + } + + @include m(filtering) { + background: var-get($theme, 'filtering-header-background'); + color: var-get($theme, 'filtering-header-text-color'); + z-index: $z-grid-interaction; + } + + @include mx(filtrable, sortable) { + :where(.sort-icon) { + cursor: pointer; + opacity: 0.7; + + :is(:hover) { + opacity: 1; + } + } + @extend %igx-grid-th--filtrable-sortable !optional; + } + + @include mx(selectable, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + @include mx(selected, sorted) { + :where(.sort-icon) { + color: var-get($theme, 'header-selected-text-color'); + + :is(:hover, :focus) { + color: var-get($theme, 'header-selected-text-color'); + } + } + } + + // Active state with compound selectors - use @at-root to prevent nesting + @at-root { + .igx-grid-th__drop-indicator--active { + &.igx-grid-th__drop-indicator-left, + &.igx-grid-th__drop-indicator-right { + border-inline-end: rem(1px) solid + var-get($theme, 'drop-indicator-color'); + } + + &::after, + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + inset-inline-start: rem(-3px); + } + + &::before { + bottom: 0; + border-width: 0 rem(4px) rem(4px); + border-color: transparent transparent + var-get($theme, 'drop-indicator-color'); + } + + &::after { + top: 0; + border-width: rem(4px) rem(4px) 0; + border-color: var-get($theme, 'drop-indicator-color') + transparent transparent; + } + } + } + } + + // NOTE: Consider this done for now + // ============================================================================ + // Grid header (thead) container and structure + @include b(igx-grid-thead) { + // Main thead container + grid-row: 3; + display: flex; + overflow: hidden; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + //border-block-end: $grid-header-border; + + // TODO: This is completely upside down - doesn't follow BEM at all + // Rows inside thead should not have hover effects + .igx-grid__tr { + position: relative; + background: inherit; + color: inherit; + z-index: $z-grid-decoration; + + &:hover { + background: inherit; + color: inherit; + } + } + + // Header wrapper element + @include e(wrapper) { + position: relative; + display: flex; + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); + overflow: hidden; + outline-style: none; + z-index: $z-grid-decoration; + border-bottom: $grid-header-border; + + // WARN: BEM not followed here + .igx-grid__tr { + border-bottom: none; + + &:hover { + background: inherit; + color: inherit; + } + } + + .igx-grid__cbx-selection--push { + align-items: flex-start; + padding-block-start: pad-block( + calc((rem(32px) - rem(20px)) / 2), + calc((rem(40px) - rem(20px)) / 2), + calc((rem(50px) - rem(20px)) / 2) + ); + } + + > [aria-activedescendant] { + outline-style: none; + } + + &:focus { + outline: 0; + } + } + + // Pivot wrapper specific styling + @include e(wrapper, $m: pivot) { + border-block-end: none !important; + } + + // Header title cell + @include e(title) { + @extend %cell-display; + @extend %cell-header; + + flex-basis: auto !important; + align-items: center !important; + border-block-end: $grid-header-border; + border-inline-end: $grid-header-border; + height: var(--header-size); + } + + // Header group (contains multiple columns) + @include e(group) { + display: flex; + flex-flow: row nowrap; + } + + // Header subgroup (nested column headers) + @include e(subgroup) { + position: relative; + + &.igx-grid-thead__item.igx-grid-th--active { + &::after { + height: 100%; + } + } + } + + // Header item (column header wrapper) + @include e(item) { + display: flex; + flex-flow: column nowrap; + position: relative; + + :where(.igx-grid-th, .igx-grid-thead__group) { + flex: 1 1 auto; + } + + :where(.igx-grid-thead__title) { + flex: 0 0 auto; + } + + //&:last-child { + // igx-pivot-row-dimension-header { + // border-inline-end: 0; + // } + //} + } + + // Scrollbar thumb for header + @include e(thumb) { + background: var-get($theme, 'header-background'); + border-block-end: $grid-header-border; + } + + // Pivot grid modifier + @include m(pivot) { + display: flex; + + .igx-grid-thead--virtualizationWrapper { + border-inline-start: $grid-header-border; + } + + @include e(wrapper) { + border-block-end: $grid-header-border; + } + } + + // Virtualization wrapper + @include m(virtualizationWrapper) { + height: 100%; + } + + // Virtualization container + @include m(virtualizationContainer) { + height: 100%; + overflow: visible; + //border-inline-start: $grid-header-border; + + .igx-grid__tr-pivot--columnDimensionLeaf { + &::after { + display: none; + } + } + } + } + + @include b(igx-drop-area) { + display: flex; + align-items: center; + justify-content: flex-start; + min-width: rem(80px); + width: 100%; + height: sizable(rem(24px), rem(24px), rem(32px)); + padding-block: 0; + padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + flex: 1 0 0%; + background: var-get($theme, 'drop-area-background'); + border-radius: var-get($theme, 'drop-area-border-radius'); + + &:hover { + background: var-get($theme, 'drop-area-on-drop-background'); + } + + @include e(icon) { + --ig-icon-size: rem(16px); + + color: var-get($theme, 'drop-area-icon-color'); + margin-inline-end: rem(8px); + } + + @include e(text) { + @include ellipsis(); + color: var-get($theme, 'drop-area-text-color'); + font-size: rem(13px); + } + } + + @include b(igx-group-label) { + display: flex; + align-items: center; + justify-content: flex-start; + line-height: rem(16px); + gap: rem(4px); + + @include e(text) { + color: var-get($theme, 'group-label-text'); + font-size: calc(var(--_grid-head-font-size) + #{rem(1px)}) + } + + @include e(icon) { + --component-size: 1; + + color: var-get($theme, 'group-label-icon'); + user-select: none; + + } + + @include e(column-name) { + font-weight: 600; + font-size: var(--_grid-head-font-size); + color: var-get($theme, 'group-label-column-name-text'); + } + + @include e(count-badge) { + --ig-badge-background-color: #{var-get($theme, 'group-count-background')}; + --ig-badge-text-color: #{var-get($theme, 'group-count-text-color')}; + + > span { + font-size: var(--_grid-head-font-size); + } + } + } + + @include b(igx-advanced-filter) { + background: color($color: 'surface', $variant: 500); + box-shadow: elevation(24); + + igx-query-builder { + box-shadow: none !important; + border: none !important; + border-radius: inherit !important; + } + + igx-query-builder-header { + cursor: grab; + } + + .igx-excel-filter__secondary-footer { + --ig-size: 2; + + display: flex; + justify-content: space-between; + padding-inline: pad-inline(rem(24px)); + padding-block-end: pad-block(rem(24px)); + + .igx-excel-filter__clear { + flex-grow: 1; + } + + .igx-excel-filter__apply, + .igx-excel-filter__cancel { + flex-grow: 0; + } + } + + .igx-excel-filter__cancel + .igx-excel-filter__apply { + margin-inline-start: rem(16px); + } + } + + // ============================================================================ + // NOTE: Context-Specific Nested Rules + // These rules handle nested contexts that don't fit cleanly into the BEM model + // ============================================================================ + // Thead context - elements styled differently when inside thead + + igx-pivot-row-dimension-header.igx-grid-th { + align-items: center; + } + + igx-pivot-row-dimension-header-group { + &::after { + height: 100% !important; + } + } + + igx-pivot-row-header-group { + &::after { + inset-inline-start: calc(var-get($theme, 'header-border-width') * -1) !important; + width: 100% !important; + height: 100% !important; + } + + igx-pivot-row-dimension-header.igx-grid-th { + .igx-grid-th__icons { + align-self: center; + } + } + + igx-pivot-row-dimension-header { + .igx-grid-th__icons { + padding-inline-end: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg); + } + } + + &:only-child, + &:last-child { + igx-pivot-row-dimension-header.igx-grid-th { + border-inline-end: 0 !important; + } + } + } + + .igx-pivot-grid-row-filler__wrapper { + .igx-grid-thead__wrapper { + height: 100%; + + .igx-grid-th { + height: 100%; + } + } + } + + .igx-grid-thead { + .igx-grid__header-indentation { + igx-icon { + --component-size: 3; + } + } + + .igx-grid__drag-indicator { + cursor: default; + } + + // MRL (Multi-Row Layout) specific thead styles + .igx-grid__tr--mrl { + .igx-grid__hierarchical-expander--header, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__row-indentation, + .igx-grid__cbx-selection { + border-bottom: $grid-header-border; + } + } + + &:focus-visible { + outline-color: transparent; + } + } + + //MRL block context - multi-row layout grid structure + .igx-grid__mrl-block { + .igx-grid-thead__item { + display: flex; + } + + .igx-grid-thead__title, + .igx-grid__td { + border-inline-end: $grid-header-border !important; + border-block-end: $grid-header-border !important; + } + } + + //.igx-grid-thead__wrapper.igx-grid__tr--mrl { + // border-block-end: 0 !important; + //} + + //// MRL row context - rows in multi-row layout + .igx-grid__tr--mrl { + .igx-grid__cbx-selection, + .igx-grid__hierarchical-expander, + .igx-grid__hierarchical-expander--empty, + .igx-grid__row-indentation, + .igx-grid__drag-indicator { + border-bottom: $grid-header-border; + } + + .igx-grid__td:only-child, + .igx-grid__td:last-child { + border-block-end: 0; + } + + background-clip: padding-box !important; + } + + // Grid checkbox styles + .igx-grid { + .igx-checkbox { + min-width: rem(20px); + + .igx-checkbox__composite-wrapper { + width: var(--cbx-size, #{rem(20px)}); + height: var(--cbx-size, #{rem(20px)}); + padding: 0 !important; + } + + .igx-checkbox__label { + margin-inline-start: rem(12px); + } + + .igx-checkbox__label--before { + margin-inline-end: rem(12px); + } + + .igx-checkbox__label:empty, + .igx-checkbox__label--before:empty { + padding: 0; + margin: 0; + } + } + } + + .igx-grid-thead__item.igx-grid-th--active { + &::after { + width: calc(100% - var-get($theme, 'header-border-width')); + } + } + + @for $i from 1 through 10 { + $level-sm: calc(#{$i * $cell-padding-sm} + var(--_expander-icon-width)); + $level-md: calc(#{$i * $cell-padding-md} + var(--_expander-icon-width)); + $level-lg: calc(#{$i * $cell-padding-lg} + var(--_expander-icon-width)); + + .igx-grid__row-indentation--level-#{$i} { + --_indicator-inline-inset: #{sizable( + $cell-padding-sm, + $cell-padding-md, + $cell-padding-lg + )}; + padding-inline-start: pad-inline($level-sm, $level-md, $level-lg); + } + + $indicator-padding-sm: #{$i * $cell-padding-sm}; + $indicator-padding-md: #{$i * $cell-padding-md}; + $indicator-padding-lg: #{$i * $cell-padding-lg}; + + .igx-grid__group-row--padding-level-#{$i} { + %igx-grid__grouping-indicator { + padding-inline-start: pad-inline($indicator-padding-sm, $indicator-padding-md, $indicator-padding-lg); + } + } + } + +} diff --git a/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss new file mode 100644 index 00000000000..ea9b1df3e92 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, bootstrap, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_fluent.scss b/projects/igniteui-angular/grids/themes/dark/_fluent.scss new file mode 100644 index 00000000000..d56eac99e3e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_fluent.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, fluent, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_index.scss b/projects/igniteui-angular/grids/themes/dark/_index.scss new file mode 100644 index 00000000000..9ae7002a6c2 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, dark); diff --git a/projects/igniteui-angular/grids/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/themes/dark/_indigo.scss new file mode 100644 index 00000000000..3eb6beb603f --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_indigo.scss @@ -0,0 +1,74 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, dark) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: .85; + } + } + } + + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .85; + } + } + + @include m(fw) { + igx-icon { + --component-size: 3; + } + } +} + +@include themed-block(igx-grid, indigo, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(pivot-empty-chip-area) { + color: contrast-color($color: 'gray', $variant: 50, $opacity: .6); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, dark) { + @include e(title) { + igx-icon { + opacity: 0.85; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} + +@include themed-block(igx-advanced-filter, indigo, dark) { + background: color($color: 'gray', $variant: 50); + box-shadow: elevation(23); +} diff --git a/projects/igniteui-angular/grids/themes/dark/_material.scss b/projects/igniteui-angular/grids/themes/dark/_material.scss new file mode 100644 index 00000000000..7fbd2934ff1 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_material.scss @@ -0,0 +1,16 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + + +@include themed-block(igx-grid, material, dark) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)}; + + @include e(td, $m: bool) { + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } +} diff --git a/projects/igniteui-angular/grids/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/themes/dark/_tokens.scss new file mode 100644 index 00000000000..d371999179e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid' as *; + +$material: digest-schema($dark-material-grid); +$bootstrap: digest-schema($dark-bootstrap-grid); +$fluent: digest-schema($dark-fluent-grid); +$indigo: digest-schema($dark-indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/light/_index.scss b/projects/igniteui-angular/grids/themes/light/_index.scss new file mode 100644 index 00000000000..97805be5c83 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; +@use 'indigo'; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid, $tokens, light); diff --git a/projects/igniteui-angular/grids/themes/light/_indigo.scss b/projects/igniteui-angular/grids/themes/light/_indigo.scss new file mode 100644 index 00000000000..d42273e780e --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_indigo.scss @@ -0,0 +1,49 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, indigo, light) { + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + } + } + } + } +} + +@include themed-block(igx-grid, indigo, light) { + @include e(pivot-empty-chip-area) { + color: color($color: 'gray', $variant: 600); + } + + @include e(tr-header-row) { + igx-pivot-row-dimension-header-group { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } +} + +@include themed-block(igx-grid-thead, indigo, light) { + @include e(title) { + igx-icon { + opacity: 0.75; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } +} diff --git a/projects/igniteui-angular/grids/themes/light/_tokens.scss b/projects/igniteui-angular/grids/themes/light/_tokens.scss new file mode 100644 index 00000000000..2fd4a5718e5 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *; + +$base: digest-schema($light-grid); +$material: digest-schema($material-grid); +$bootstrap: digest-schema($bootstrap-grid); +$fluent: digest-schema($fluent-grid); +$indigo: digest-schema($indigo-grid); diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..f157002560a --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss @@ -0,0 +1,138 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid, bootstrap) { + @include e(filtering-row) { + .igx-input-group { + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + align-items: center; + background: transparent !important; + border-radius: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + background: transparent !important; + } + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + border: 0 !important; + box-shadow: none !important; + } + } + + .igx-input-group__bundle::after, + .igx-input-group__bundle::before { + display: none !important; + } + + .igx-input-group__bundle-main { + padding-inline-start: 0 !important; + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + border: rem(1px) solid color($color: 'gray', $variant: 300) !important; + + &:hover{ + border-color: color($color: 'primary', $variant: 500) !important; + } + } + + .igx-input-group--focused { + border-color: color($color: 'primary', $variant: 500) !important; + border-width: rem(1px) !important; + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + background: transparent !important; + border-radius: 0 !important; + } + } + + .igx-input-group__line { + display: none !important; + } + + igx-prefix:focus { + color: color($color: 'secondary', $variant: 500) !important; + } + + igx-suffix { + igx-icon { + outline-style: none !important; + + &:focus { + color: color($color: 'secondary') !important; + } + + + igx-icon { + margin-inline-start: rem(4px) !important; + } + } + } + + igx-prefix, + igx-suffix { + padding: 0 sizable(rem(8px), rem(10px), rem(14px)) !important; + } + } +} + +@include themed-block(igx-grid-th, bootstrap) { + @include e(title) { + font-weight: 700; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, bootstrap) { + border-radius: rem(4px); + + .igx-excel-filter__secondary-footer { + padding: rem(16px); + border-top: rem(1px) solid color($color: 'gray', $variant: 300); + } +} diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss new file mode 100644 index 00000000000..ab878bcf3b0 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss @@ -0,0 +1,19 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-th, fluent) { + @include e(title) { + font-weight: 800; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, bootstrap) { + border-radius: rem(2px); +} diff --git a/projects/igniteui-angular/grids/themes/shared/_index.scss b/projects/igniteui-angular/grids/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss new file mode 100644 index 00000000000..3349c96f182 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss @@ -0,0 +1,197 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/typography/mixins' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'igniteui-theming/sass/elevations' as *; +@use 'styles/themes/standalone' as *; + +// TODO type style is throwing an error + +@include themed-block(igx-grid, indigo) { + --cell-height: #{sizable(rem(32px), rem(40px), rem(48px))}; + --header-size: #{sizable(rem(32px), rem(40px), rem(48px))}; + --grouparea-size: #{sizable(rem(40px), rem(48px), rem(55px))}; + --_expander-icon-width: #{rem(16px)}; + --_hierarchical-action-icon: #{rem(16px)}; + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + + %cell-display { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)) + } + + + @include e(filtering-row-main) { + igx-chips-area { + // Can't uae gap on the parent because dropdown container is present in the dom + margin-inline: rem(12px); + gap: rem(4px); + } + } + + @include e(filtering-row) { + igx-input-group { + --size: calc(sizable(rem(32px), rem(40px), rem(48px)) - #{rem(8px)}); + } + } + + @include e(filtering-cell) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)) !important; + } + + + @include e(td) { + @extend %cell-display; + + @include type-style('detail-1', false); + } + + @include e(td, $m: bool) { + --component-size: 2; + + .igx-icon--error { + color: color($color: 'gray', $variant: 500); + } + } + + @include e(tr, $m: edited) { + &::before { + width: rem(4px); + } + } + + @include e(tr, $m: header) { + igx-icon { + --component-size: 2; + } + } + + @include e(tr-action) { + &:last-of-type { + min-height: sizable(rem(32px), rem(40px), rem(48px)); + } + } + + @include e(tree-grouping-indicator) { + margin-inline-end: rem(4px); + + igx-icon { + --component-size: 2; + } + } + + @include e(hierarchical-expander) { + igx-icon { + --component-size: 2; + } + } + + @include e(header-indentation) { + igx-icon { + --component-size: 2; + } + } + + @include e(group-content) { + padding-inline-start: 0; + } + + @include e(grouping-indicator) { + padding-inline-end: rem(16px); + + igx-icon { + --component-size: 2; + } + } + + @include e(tr-pivot) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } +} + +@include themed-block(igx-grid-th, indigo) { + @extend %cell-display; + + @include type-style('detail-2', false); + + @include e(expander) { + --component-size: 2; + } + + @include e(icons) { + .igx-excel-filter__icon { + --ig-icon-size: #{rem(12px)}; + } + } + + @include m(filtrable) { + :where(.igx-grid-th__title) { + opacity: .75; + } + } + + @include m(sortable) { + @include e(icons) { + .sort-icon { + opacity: .75; + } + } + } + + @include mx(filtrable, sortable) { + :where(.sort-icon) { + opacity: 1; + } + } + + @include e(title) { + //@include type-style('detail-2', false) + } + + @include e(icons) { + .sort-icon igx-icon { + --component-size: 2; + } + } + + @include e(group-title) { + //@include type-style('detail-2', false); + } +} + +@include themed-block(igx-grid-thead, indigo) { + @include e(title) { + @extend %cell-display; + } +} + +@include themed-block(igx-drop-area, indigo) { + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); +} + +@include themed-block(igx-group-label, indigo) { + @include e(text) { + //@include type-style('detail-1', false); + } + + @include e(icon) { + @at-root igx-icon#{&} { + --component-size: 2; + } + } + + @include e(column-name) { + //@include type-style('detail-2', false); + } + + @include e(count-badge) { + --shadow: none; + } +} + +@include themed-block(igx-advanced-filter, indigo) { + background: contrast-color($color: 'gray', $variant: 900); + box-shadow: elevation(24); + border-radius: rem(10px); +} diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss new file mode 100644 index 00000000000..6cb4eb2eed2 --- /dev/null +++ b/projects/igniteui-angular/grids/themes/shared/_material.scss @@ -0,0 +1,137 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography/functions' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid, material) { + --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; + --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)}; + --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)}; + + @include e(filtering-row) { + .igx-input-group { + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + align-items: center; + background: transparent !important; + border-radius: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + background: transparent !important; + } + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + + /* stylelint-disable-next-line */ + &:hover { + border: 0 !important; + box-shadow: none !important; + } + } + + .igx-input-group__bundle::after, + .igx-input-group__bundle::before { + display: none !important; + } + + .igx-input-group__bundle-main { + padding-inline-start: 0 !important; + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + border: rem(1px) solid color($color: 'gray', $variant: 300) !important; + + &:hover{ + border-color: color($color: 'primary', $variant: 500) !important; + } + } + + .igx-input-group--focused { + border-color: color($color: 'primary', $variant: 500) !important; + border-width: rem(1px) !important; + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + .igx-input-group__input { + border: 0 !important; + box-shadow: none !important; + } + + .igx-input-group__bundle-main, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end { + margin: 0 !important; + border: 0 !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } + + .igx-input-group__bundle, + .igx-input-group__bundle-start, + .igx-input-group__bundle-end, + igx-prefix, + igx-suffix { + background: transparent !important; + border-radius: 0 !important; + } + } + + .igx-input-group__line { + display: none !important; + } + + igx-prefix:focus { + color: color($color: 'secondary', $variant: 500) !important; + } + + igx-suffix { + igx-icon { + outline-style: none !important; + + &:focus { + color: color($color: 'secondary') !important; + } + + + igx-icon { + margin-inline-start: rem(4px) !important; + } + } + } + + igx-prefix, + igx-suffix { + padding: 0 sizable(rem(8px), rem(12px), rem(16px)) !important; + } + } +} + +@include themed-block(igx-grid-th, material) { + @include e(title) { + font-weight: 600; + } + + @include e(icons) { + .sort-icon igx-icon { + --size: var(--ig-icon-size, #{rem(15px)}); + } + } +} + +@include themed-block(igx-advanced-filter, material) { + border-radius: rem(4px); +} diff --git a/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css new file mode 100644 index 00000000000..f1b6f884e5b --- /dev/null +++ b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css @@ -0,0 +1,3 @@ +.igx-display-container{display:inherit;flex-flow:inherit;position:relative;width:100%;overflow:hidden;flex-shrink:0}.igx-display-container--inactive{width:100%}.igx-drag{touch-action:none}.igx-drag--select-disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-drag__handle{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-vhelper--vertical,.igx-vhelper--horizontal{display:block;overflow:auto;z-index:10001}.igx-vhelper--vertical{position:absolute;top:0;inset-inline-end:0;width:var(--vhelper-scrollbar-size)}.igx-vhelper--horizontal{width:100%}.igx-vhelper--vertical .igx-vhelper__placeholder-content{width:1px}.igx-vhelper--horizontal .igx-vhelper__placeholder-content{height:1px}[hidden]{display:none !important}[class^=igx-],[class^=igx-] *,[class^=igx-] *::before,[class^=igx-] *::after,[class^=ig-],[class^=ig-] *,[class^=ig-] *::before,[class^=ig-] *::after{box-sizing:border-box}@property --ig-spacing{syntax:" | ";initial-value:1;inherits:true}:root{--ig-spacing-inline-small: var(--ig-spacing-inline, var(--ig-spacing-small));--ig-spacing-inline-medium: var(--ig-spacing-inline, var(--ig-spacing-medium));--ig-spacing-inline-large: var(--ig-spacing-inline, var(--ig-spacing-large));--ig-spacing-block-small: var(--ig-spacing-block, var(--ig-spacing-small));--ig-spacing-block-medium: var(--ig-spacing-block, var(--ig-spacing-medium));--ig-spacing-block-large: var(--ig-spacing-block, var(--ig-spacing-large))}@property --_transition-delay{syntax:"