Skip to content

Commit 0cdea98

Browse files
ChronosSFChronosSF
committed
Merge remote-tracking branch 'origin/vnext' into sstoychev/input-size-changes
2 parents eab8885 + 27458e2 commit 0cdea98

7 files changed

Lines changed: 178 additions & 101 deletions

File tree

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@
5656
"@angular/platform-browser-dynamic": "^15.2.3",
5757
"@angular/router": "^15.2.3",
5858
"@igniteui/material-icons-extended": "^2.10.0",
59-
"igniteui-angular-extras": "^15.1.0",
6059
"@microsoft/signalr": "^5.0.11",
6160
"@ng-bootstrap/ng-bootstrap": "^14.0.0",
6261
"@popperjs/core": "2.11.6",
@@ -66,9 +65,10 @@
6665
"bootstrap": "^5.2.3",
6766
"file-saver": "^2.0.2",
6867
"hammerjs": "^2.0.8",
69-
"igniteui-angular": "^15.1.0-rc.1",
68+
"igniteui-angular": "^15.1.0",
7069
"igniteui-angular-charts": "^15.0.0",
7170
"igniteui-angular-core": "^15.0.0",
71+
"igniteui-angular-extras": "^15.1.0",
7272
"igniteui-angular-i18n": "^15.0.15",
7373
"igniteui-dockmanager": "^1.12.3",
7474
"igniteui-live-editing": "^2.0.6",

‎projects/app-crm/src/app/grid-crm/grid-crm.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
1616
</div>
1717
<div class="sample-flex-container">
18-
<igx-input-group type="search" class="searchInputGroup">
18+
<igx-input-group type="search" class="searchInputGroup" displayDensity="compact">
1919
<igx-prefix>
2020
<igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
2121
<igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
@@ -34,11 +34,13 @@
3434
No results
3535
</span>
3636
</div>
37+
3738
<div class="caseSensitiveButton">
3839
<button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()" [class]="caseSensitive? 'case-sensitive--active' : ''">
3940
<igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
4041
</button>
4142
</div>
43+
4244
<div class="searchButtons">
4345
<button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="grid1.findPrev(searchText, caseSensitive)">
4446
<igx-icon family="material">navigate_before</igx-icon>

‎projects/app-crm/src/app/grid-crm/grid-crm.component.scss‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -114,15 +114,6 @@
114114
max-width: 68ch;
115115
}
116116

117-
.igx-grid-toolbar__button-space {
118-
.igx-icon {
119-
font-size: 1rem;
120-
display: flex;
121-
justify-content: center;
122-
align-items: center;
123-
}
124-
}
125-
126117
.igx-grid-toolbar__custom-content {
127118
flex: 1 0 0%;
128119
}
@@ -161,28 +152,11 @@
161152
width: 100%;
162153
}
163154

164-
.igx-input-group--search .igx-input-group__bundle {
165-
height: rem(36px);
166-
width: 100%;
167-
overflow: hidden;
168-
169-
.igx-input-group__bundle-main {
170-
padding-top: 0.6rem;
171-
height: 36px;
172-
}
173-
}
174-
175155
.sample-flex-container {
176156
.igx-input-group,
177157
.igx-input-group--focused {
178158
font-size: 13px;
179159
overflow: hidden;
180-
181-
igx-icon {
182-
font-size: 1rem;
183-
width: 1rem;
184-
height: 1rem;
185-
}
186160
}
187161

188162
.igx-input-group__input {

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