Skip to content

Commit b7252bd

Browse files
desig9steindesig9stein
committed
feat(samples): update paging styling samples for tree and hierarchical grids.
1 parent f82858b commit b7252bd

2 files changed

Lines changed: 120 additions & 32 deletions

File tree

‎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)