Skip to content

Commit 27458e2

Browse files
ChronosSFChronosSF
authored
Merge pull request #3275 from IgniteUI/mpopov/paging_styling_sample
fix(paging): styling sample
2 parents 859cb29 + 3d45798 commit 27458e2

3 files changed

Lines changed: 166 additions & 65 deletions

File tree

‎src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,67 @@
11
@use '../../../variables' as *;
22

3-
$yellow: #ffcd0f;
4-
$bg: #292826;
5-
$gray: #404040;
6-
$light-gray: rgba(255, 255, 255, .54);
3+
$my-secondary: #d0ab23;
4+
$dark-gray: #333;
5+
$my-primary: #231c2c;
6+
$light-gray: #999;
7+
$inactive-color: #9b7829;
78

89
$dark-paginator: paginator-theme(
9-
$text-color: $yellow,
10-
$background-color: $gray,
11-
$border-color: $bg
10+
$text-color: $my-secondary,
11+
$background-color: $my-primary,
12+
$border-color: $my-secondary
1213
);
14+
1315
$dark-button: button-theme(
14-
$foreground: $yellow,
15-
$hover-foreground: $bg,
16-
$hover-background: $yellow,
17-
$focus-foreground: $bg,
18-
$focus-background: $yellow,
19-
$disabled-foreground: #16130C
16+
$foreground: $my-secondary,
17+
$hover-foreground: $dark-gray,
18+
$hover-background: $my-secondary,
19+
$focus-foreground: $dark-gray,
20+
$focus-background: $my-secondary,
21+
$border-color: $my-secondary,
22+
$hover-border-color: $my-secondary,
23+
$focus-border-color: $my-secondary,
24+
$disabled-foreground: $inactive-color
25+
);
26+
27+
$dark-select: select-theme(
28+
$toggle-button-background: $my-primary,
29+
$toggle-button-foreground: $inactive-color,
2030
);
31+
2132
$dark-input-group: input-group-theme(
22-
$filled-text-color: $light-gray,
23-
$idle-text-color: $light-gray,
24-
$focused-text-color: $yellow,
25-
$border-color: $light-gray,
26-
$hover-border-color: $yellow,
27-
$focused-border-color: $yellow
33+
$filled-text-color: $my-secondary,
34+
$idle-text-color: $my-secondary,
35+
$focused-text-color: $my-secondary,
36+
$border-color: darken($inactive-color, 10%),
37+
$focused-border-color: $my-secondary,
38+
$input-suffix-color: $my-secondary,
2839
);
40+
2941
$dark-drop-down-theme: drop-down-theme(
30-
$background-color: $bg,
31-
$item-text-color: $yellow,
32-
$selected-item-background: $yellow,
33-
$selected-item-text-color: $bg,
34-
$focused-item-background: $yellow,
35-
$focused-item-text-color: $bg,
36-
$selected-focus-item-background: $yellow,
37-
$selected-focus-item-text-color: $bg,
38-
$selected-hover-item-background: $yellow,
39-
$selected-hover-item-text-color: $bg
42+
$background-color: $my-primary,
43+
$item-text-color: $my-secondary,
44+
$selected-item-background: $my-secondary,
45+
$selected-item-text-color: $dark-gray,
46+
$focused-item-background: $my-secondary,
47+
$focused-item-text-color: $dark-gray,
48+
$selected-focus-item-background: $my-secondary,
49+
$selected-focus-item-text-color: $dark-gray,
50+
$selected-hover-item-background: $my-secondary,
51+
$selected-hover-item-text-color: $dark-gray
4052
);
4153
/*INCLUSION by DEFAULT ViewEncapsulation strategy*/
4254

4355
:host {
4456
::ng-deep {
45-
@include css-vars($dark-paginator);
4657
@include css-vars($dark-drop-down-theme);
4758

4859
igx-paginator {
49-
@include css-vars($dark-button);
50-
@include css-vars($dark-input-group);
51-
}
60+
@include css-vars($dark-button);
61+
@include css-vars($dark-input-group);
62+
@include css-vars($dark-select);
63+
@include css-vars($dark-paginator);
64+
}
5265
}
5366
}
5467

‎src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss‎

Lines changed: 62 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,75 @@
55
padding-top: 10px;
66
}
77

8-
$dark-paginator: paginator-theme( $text-color: #F4D45C, $background-color: #575757, $border-color: #292826);
8+
.photo {
9+
vertical-align: middle;
10+
max-height: 62px;
11+
}
12+
13+
.cell__inner_2 {
14+
margin: 1px
15+
}
16+
17+
$my-secondary: #d0ab23;
18+
$dark-gray: #333;
19+
$my-primary: #231c2c;
20+
$light-gray: #999;
21+
$inactive-color: #9b7829;
22+
23+
$dark-paginator: paginator-theme(
24+
$text-color: $my-secondary,
25+
$background-color: $my-primary,
26+
$border-color: $my-secondary
27+
);
928

1029
$dark-button: button-theme(
11-
$foreground: #FFCD0F,
12-
$hover-foreground: #292826,
13-
$hover-background: #FFCD0F,
14-
$focus-foreground: #292826,
15-
$focus-background: #FFCD0F,
16-
$disabled-foreground: #16130C
30+
$foreground: $my-secondary,
31+
$hover-foreground: $dark-gray,
32+
$hover-background: $my-secondary,
33+
$focus-foreground: $dark-gray,
34+
$focus-background: $my-secondary,
35+
$border-color: $my-secondary,
36+
$hover-border-color: $my-secondary,
37+
$focus-border-color: $my-secondary,
38+
$disabled-foreground: $inactive-color
39+
);
40+
41+
$dark-select: select-theme(
42+
$toggle-button-background: $my-primary,
43+
$toggle-button-foreground: $inactive-color,
44+
);
45+
46+
$dark-input-group: input-group-theme(
47+
$filled-text-color: $my-secondary,
48+
$idle-text-color: $my-secondary,
49+
$focused-text-color: $my-secondary,
50+
$border-color: darken($inactive-color, 10%),
51+
$focused-border-color: $my-secondary,
52+
$input-suffix-color: $my-secondary,
53+
);
54+
55+
$dark-drop-down-theme: drop-down-theme(
56+
$background-color: $my-primary,
57+
$item-text-color: $my-secondary,
58+
$selected-item-background: $my-secondary,
59+
$selected-item-text-color: $dark-gray,
60+
$focused-item-background: $my-secondary,
61+
$focused-item-text-color: $dark-gray,
62+
$selected-focus-item-background: $my-secondary,
63+
$selected-focus-item-text-color: $dark-gray,
64+
$selected-hover-item-background: $my-secondary,
65+
$selected-hover-item-text-color: $dark-gray
1766
);
1867

1968
:host {
20-
::ng-deep {
21-
@include css-vars($dark-paginator);
69+
::ng-deep {
70+
@include css-vars($dark-drop-down-theme);
2271

23-
.igx-paginator__pager {
72+
igx-paginator {
2473
@include css-vars($dark-button);
74+
@include css-vars($dark-input-group);
75+
@include css-vars($dark-select);
76+
@include css-vars($dark-paginator);
2577
}
2678
}
2779
}
28-
29-
30-
.photo {
31-
vertical-align: middle;
32-
max-height: 62px;
33-
}
34-
35-
.cell__inner_2 {
36-
margin: 1px
37-
}

‎src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss‎

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,66 @@
55
padding-top: 10px;
66
}
77

8-
$dark-paginator: paginator-theme( $text-color: #F4D45C, $background-color: #575757, $border-color: #292826);
8+
$my-secondary: #d0ab23;
9+
$dark-gray: #333;
10+
$my-primary: #231c2c;
11+
$light-gray: #999;
12+
$inactive-color: #9b7829;
13+
14+
$dark-paginator: paginator-theme(
15+
$text-color: $my-secondary,
16+
$background-color: $my-primary,
17+
$border-color: $my-secondary
18+
);
919

1020
$dark-button: button-theme(
11-
$foreground: #FFCD0F,
12-
$hover-foreground: #292826,
13-
$hover-background: #FFCD0F,
14-
$focus-foreground: #292826,
15-
$focus-background: #FFCD0F,
16-
$disabled-foreground: #16130C
21+
$foreground: $my-secondary,
22+
$hover-foreground: $dark-gray,
23+
$hover-background: $my-secondary,
24+
$focus-foreground: $dark-gray,
25+
$focus-background: $my-secondary,
26+
$border-color: $my-secondary,
27+
$hover-border-color: $my-secondary,
28+
$focus-border-color: $my-secondary,
29+
$disabled-foreground: $inactive-color
1730
);
1831

19-
:host ::ng-deep {
20-
@include css-vars($dark-paginator);
21-
.igx-paginator__pager{
22-
@include css-vars($dark-button);
23-
}
32+
$dark-select: select-theme(
33+
$toggle-button-background: $my-primary,
34+
$toggle-button-foreground: $inactive-color,
35+
);
36+
37+
$dark-input-group: input-group-theme(
38+
$filled-text-color: $my-secondary,
39+
$idle-text-color: $my-secondary,
40+
$focused-text-color: $my-secondary,
41+
$border-color: darken($inactive-color, 10%),
42+
$focused-border-color: $my-secondary,
43+
$input-suffix-color: $my-secondary,
44+
);
45+
46+
$dark-drop-down-theme: drop-down-theme(
47+
$background-color: $my-primary,
48+
$item-text-color: $my-secondary,
49+
$selected-item-background: $my-secondary,
50+
$selected-item-text-color: $dark-gray,
51+
$focused-item-background: $my-secondary,
52+
$focused-item-text-color: $dark-gray,
53+
$selected-focus-item-background: $my-secondary,
54+
$selected-focus-item-text-color: $dark-gray,
55+
$selected-hover-item-background: $my-secondary,
56+
$selected-hover-item-text-color: $dark-gray
57+
);
58+
59+
:host {
60+
::ng-deep {
61+
@include css-vars($dark-drop-down-theme);
62+
63+
igx-paginator {
64+
@include css-vars($dark-button);
65+
@include css-vars($dark-input-group);
66+
@include css-vars($dark-select);
67+
@include css-vars($dark-paginator);
68+
}
69+
}
2470
}

0 commit comments

Comments
 (0)