Skip to content

Commit ca3481b

Browse files
SisIvanovaSisIvanova
authored
refactor(grid-summaries): bundle styles with component (#15669)
1 parent 6ccdd0b commit ca3481b

File tree

11 files changed

+163
-9
lines changed

11 files changed

+163
-9
lines changed

‎projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -432,13 +432,13 @@
432432
@include grid($grid-theme-map);
433433
}
434434

435-
@if is-used('igx-grid-summary', $exclude) {
436-
$grid-summary-theme-map: grid-summary-theme(
437-
$schema: $schema,
438-
);
439-
$grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
440-
@include grid-summary($grid-summary-theme-map);
441-
}
435+
// @if is-used('igx-grid-summary', $exclude) {
436+
// $grid-summary-theme-map: grid-summary-theme(
437+
// $schema: $schema,
438+
// );
439+
// $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
440+
// @include grid-summary($grid-summary-theme-map);
441+
// }
442442

443443
@if is-used('igx-grid-toolbar', $exclude) {
444444
$grid-toolbar-theme-map: grid-toolbar-theme(

‎projects/igniteui-angular/src/lib/grids/summaries/grid-summary.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute } from '@angular/core';
1+
import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute, ViewEncapsulation } from '@angular/core';
22
import {
33
IgxSummaryOperand,
44
IgxSummaryResult
@@ -13,6 +13,8 @@ import { trackByIdentity } from '../../core/utils';
1313
changeDetection: ChangeDetectionStrategy.OnPush,
1414
selector: 'igx-grid-summary-cell',
1515
templateUrl: './summary-cell.component.html',
16+
styleUrl: 'grid-summary.component.css',
17+
encapsulation: ViewEncapsulation.None,
1618
imports: [NgTemplateOutlet]
1719
})
1820
export class IgxSummaryCellComponent {

‎projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
ChangeDetectionStrategy,
1010
ChangeDetectorRef,
1111
DoCheck,
12-
Inject
12+
Inject,
13+
ViewEncapsulation
1314
} from '@angular/core';
1415
import { IgxSummaryResult } from './grid-summary';
1516
import { IgxSummaryCellComponent } from './summary-cell.component';
@@ -25,6 +26,8 @@ import { trackByIdentity } from '../../core/utils';
2526
changeDetection: ChangeDetectionStrategy.OnPush,
2627
selector: 'igx-grid-summary-row',
2728
templateUrl: './summary-row.component.html',
29+
styleUrl: 'grid-summary.component.css',
30+
encapsulation: ViewEncapsulation.None,
2831
providers: [IgxForOfSyncService],
2932
imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe]
3033
})

‎projects/igniteui-angular/src/lib/grids/summaries/themes/_base.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@use 'sass:map';
2+
@use 'igniteui-theming/sass/bem' as *;
3+
@use 'igniteui-theming/sass/themes' as *;
4+
@use 'igniteui-theming/sass/typography' as *;
5+
@use 'styles/themes/standalone' as *;
6+
@use './light/tokens' as *;
7+
8+
$_theme: $material;
9+
10+
@include layer(base) {
11+
$cell-pin: (
12+
style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'),
13+
color: var-get($_theme, 'pinned-border-color')
14+
);
15+
16+
@include b(igx-grid-summary) {
17+
position: relative;
18+
display: flex;
19+
flex-direction: column;
20+
flex: 1 1 0%;
21+
padding-block: 0;
22+
padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
23+
background: var-get($_theme, 'background-color', inherit);
24+
overflow: hidden;
25+
outline-style: none;
26+
27+
&::after {
28+
position: absolute;
29+
inset: 0;
30+
}
31+
32+
&:focus::after {
33+
background: var-get($_theme, 'focus-background-color');
34+
}
35+
36+
@include e(item) {
37+
display: flex;
38+
align-items: center;
39+
position: relative;
40+
padding-block: pad(rem(0), rem(2px), rem(6px));
41+
padding-inline: 0;
42+
font-size: rem(12px);
43+
}
44+
45+
@include e(label) {
46+
@include ellipsis();
47+
48+
color: var-get($_theme, 'label-color');
49+
min-width: rem(30px);
50+
margin-inline-end: rem(3px);
51+
52+
&:hover {
53+
color: var-get($_theme, 'label-hover-color');
54+
}
55+
}
56+
57+
@include e(result) {
58+
@include ellipsis();
59+
60+
color: var-get($_theme, 'result-color');
61+
font-weight: 600;
62+
flex: 1 1 auto;
63+
text-align: end;
64+
}
65+
66+
@include m(pinned) {
67+
position: relative;
68+
z-index: 1;
69+
}
70+
71+
@include m(pinned-last) {
72+
border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
73+
74+
@media print {
75+
border-inline-end: map.get($cell-pin, 'style') #999;
76+
}
77+
}
78+
79+
@include m(pinned-first) {
80+
border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
81+
82+
@media print {
83+
border-inline-start: map.get($cell-pin, 'style') #999;
84+
}
85+
}
86+
87+
@include m(fw) {
88+
flex-grow: 0;
89+
}
90+
}
91+
}

‎projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-grid-summary, $tokens, dark);

‎projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-summary' as *;
3+
4+
$material: digest-schema($dark-material-grid-summary);
5+
$bootstrap: digest-schema($dark-bootstrap-grid-summary);
6+
$fluent: digest-schema($dark-fluent-grid-summary);
7+
$indigo: digest-schema($dark-indigo-grid-summary);

‎projects/igniteui-angular/src/lib/grids/summaries/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-grid-summary, $tokens, light);

‎projects/igniteui-angular/src/lib/grids/summaries/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/grid-summary' as *;
3+
4+
$base: digest-schema($light-grid-summary);
5+
$material: digest-schema($material-grid-summary);
6+
$bootstrap: digest-schema($bootstrap-grid-summary);
7+
$fluent: digest-schema($fluent-grid-summary);
8+
$indigo: digest-schema($indigo-grid-summary);

‎projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'indigo';

0 commit comments

Comments
 (0)