Skip to content

Commit b077410

Browse files
SisIvanovaSisIvanova
authored
refactor(paginator): bundle styles with component (#15655)
1 parent 1d31578 commit b077410

File tree

10 files changed

+142
-8
lines changed

10 files changed

+142
-8
lines changed

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -528,13 +528,13 @@
528528
@include overlay($overlay-theme-map);
529529
}
530530

531-
@if is-used('igx-paginator', $exclude) {
532-
$paginator-theme-map: paginator-theme(
533-
$schema: $schema,
534-
);
535-
$paginator-theme-map: meta.call($theme-handler, $paginator-theme-map);
536-
@include paginator($paginator-theme-map);
537-
}
531+
// @if is-used('igx-paginator', $exclude) {
532+
// $paginator-theme-map: paginator-theme(
533+
// $schema: $schema,
534+
// );
535+
// $paginator-theme-map: meta.call($theme-handler, $paginator-theme-map);
536+
// @include paginator($paginator-theme-map);
537+
// }
538538

539539
@if is-used('igx-circular-bar', $exclude) {
540540
$progress-circular-theme-map: progress-circular-theme(

Diff for: ‎projects/igniteui-angular/src/lib/paginator/paginator.component.scss

+4
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';

Diff for: ‎projects/igniteui-angular/src/lib/paginator/paginator.component.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, forwardRef } from '@angular/core';
1+
import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, ViewEncapsulation, forwardRef } from '@angular/core';
22
import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces';
33
import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from '../core/i18n/paginator-resources';
44
import { OverlaySettings } from '../services/overlay/utilities';
@@ -40,6 +40,8 @@ export class IgxPaginatorContentDirective {
4040
@Component({
4141
selector: 'igx-paginator',
4242
templateUrl: 'paginator.component.html',
43+
styleUrl: 'paginator.component.css',
44+
encapsulation: ViewEncapsulation.None,
4345
imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)],
4446
providers: [
4547
{ provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/_base.scss

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@use 'igniteui-theming/sass/typography' as *;
2+
@use 'igniteui-theming/sass/bem' as *;
3+
@use 'igniteui-theming/sass/themes' as *;
4+
@use 'styles/themes/standalone' as *;
5+
@use 'light/tokens' as *;
6+
7+
$_theme: $material;
8+
9+
@include layer(base) {
10+
@include b(igx-paginator) {
11+
@include sizable();
12+
13+
--component-size: var(--ig-size, var(--ig-size-large));
14+
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
color: var-get($_theme, 'text-color');
19+
background: var-get($_theme, 'background-color');
20+
font-size: rem(12px);
21+
border-top: rem(1px) solid var-get($_theme, 'border-color');
22+
z-index: 1;
23+
padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
24+
padding-block: 0;
25+
height: var-get($_theme, 'size');
26+
width: 100%;
27+
28+
&:empty {
29+
padding: 0;
30+
}
31+
}
32+
33+
@include b(igx-page-nav) {
34+
display: flex;
35+
justify-content: flex-end;
36+
align-items: center;
37+
flex: 1;
38+
39+
> * {
40+
margin-inline-start: rem(8px);
41+
}
42+
43+
[dir='rtl'] & {
44+
igx-icon {
45+
transform: scaleX(-1);
46+
}
47+
}
48+
49+
@include e(text) {
50+
display: flex;
51+
}
52+
}
53+
54+
@include b(igx-page-size) {
55+
display: flex;
56+
justify-content: flex-start;
57+
align-items: center;
58+
flex: 1;
59+
60+
@include e(label) {
61+
@include ellipsis();
62+
63+
margin-inline-end: rem(8px);
64+
}
65+
66+
@include e(select) {
67+
display: flex;
68+
max-width: rem(114px);
69+
min-width: rem(100px);
70+
71+
igx-select {
72+
--ig-size: 1;
73+
}
74+
}
75+
}
76+
77+
@include b(igx-paginator-content) {
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
width: 100%;
82+
}
83+
}

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/dark/_index.scss

+6
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-paginator, $tokens, dark);

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/dark/_tokens.scss

+7
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/pagination' as *;
3+
4+
$material: digest-schema($dark-material-pagination);
5+
$bootstrap: digest-schema($dark-bootstrap-pagination);
6+
$fluent: digest-schema($dark-fluent-pagination);
7+
$indigo: digest-schema($dark-indigo-pagination);

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/light/_index.scss

+6
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-paginator, $tokens, light);

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/light/_tokens.scss

+8
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/pagination' as *;
3+
4+
$base: digest-schema($light-pagination);
5+
$material: digest-schema($material-pagination);
6+
$bootstrap: digest-schema($bootstrap-pagination);
7+
$fluent: digest-schema($fluent-pagination);
8+
$indigo: digest-schema($indigo-pagination);

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/shared/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'indigo';

Diff for: ‎projects/igniteui-angular/src/lib/paginator/themes/shared/_indigo.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use 'igniteui-theming/sass/typography' as *;
2+
@use 'igniteui-theming/sass/bem' as *;
3+
@use 'styles/themes/standalone' as *;
4+
5+
@include themed-block(igx-paginator, indigo) {
6+
font-size: rem(11px);
7+
font-weight: 400;
8+
line-height: rem(15px);
9+
}
10+
11+
@include themed-block(igx-page-size, indigo) {
12+
@include e(select) {
13+
igx-select {
14+
--ig-size: inherit;
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)