Skip to content

Commit 0213d35

Browse files
simeonoffsimeonoff
authored
Merge pull request #3549 from IgniteUI/sivanova/angular-material-sample
fix(angular-material): sample issues
2 parents cb59898 + a6f655f commit 0213d35

File tree

3 files changed

+85
-73
lines changed

3 files changed

+85
-73
lines changed

‎src/app/theming/angular/angular-sample.component.html

+57-66
Original file line numberDiff line numberDiff line change
@@ -31,79 +31,70 @@
3131
</div>
3232
</mat-toolbar>
3333

34-
<div igxLayout>
35-
<div class="card-wrapper">
36-
<igx-card elevated>
37-
<igx-card-media height="180px">
38-
<img src="assets/images/card/media/card-image1.png">
39-
</igx-card-media>
40-
<igx-card-header>
41-
<igx-avatar src="assets/images/avatar/11.jpg" shape="circle" size="small"></igx-avatar>
42-
<h5 igxCardHeaderTitle>Salaries</h5>
43-
<h5 igxCardHeaderSubtitle>$ 346,692.72</h5>
44-
</igx-card-header>
45-
46-
<igx-card-actions [vertical]="false">
47-
<button mat-stroked-button color="accent" (click)="openDialog()">More</button>
48-
<igx-dialog #dialog title="Confirmation" message="Do you want to download the full report?">
49-
<div igxDialogActions>
50-
<button igxButton="flat" (click)="dialog.close()">Cancel</button>
51-
<button igxButton="flat" (click)="dialog.close()">OK</button>
52-
</div>
53-
</igx-dialog>
54-
<igx-icon class="success" igxEnd>trending_up</igx-icon>
55-
</igx-card-actions>
56-
</igx-card>
57-
</div>
58-
<div class="card-wrapper">
59-
<igx-card elevated>
60-
<igx-card-media height="180px">
61-
<img src="assets/images/card/media/card-image2.png">
62-
</igx-card-media>
63-
<igx-card-header>
64-
<igx-avatar src="assets/images/avatar/8.jpg" shape="circle" size="small"></igx-avatar>
65-
<h5 igxCardHeaderTitle>Suppliers</h5>
66-
<h5 igxCardHeaderSubtitle>$ 122,745.832</h5>
67-
</igx-card-header>
68-
69-
<igx-card-actions [vertical]="false">
34+
<div class="cards-container">
35+
<igx-card elevated>
36+
<igx-card-media height="180px">
37+
<img src="assets/images/card/media/card-image1.png">
38+
</igx-card-media>
39+
<igx-card-header>
40+
<igx-avatar src="assets/images/avatar/11.jpg" shape="circle" size="small"></igx-avatar>
41+
<h5 igxCardHeaderTitle>Salaries</h5>
42+
<h5 igxCardHeaderSubtitle>$ 346,692.72</h5>
43+
</igx-card-header>
44+
<igx-card-actions [vertical]="false">
45+
<button mat-stroked-button color="accent" (click)="openDialog()">More</button>
46+
<igx-dialog #dialog title="Confirmation" message="Do you want to download the full report?">
47+
<div igxDialogActions>
48+
<button igxButton="flat" (click)="dialog.close()">Cancel</button>
49+
<button igxButton="flat" (click)="dialog.close()">OK</button>
50+
</div>
51+
</igx-dialog>
52+
<igx-icon class="success" igxEnd>trending_up</igx-icon>
53+
</igx-card-actions>
54+
</igx-card>
55+
<igx-card elevated>
56+
<igx-card-media height="180px">
57+
<img src="assets/images/card/media/card-image2.png">
58+
</igx-card-media>
59+
<igx-card-header>
60+
<igx-avatar src="assets/images/avatar/8.jpg" shape="circle" size="small"></igx-avatar>
61+
<h5 igxCardHeaderTitle>Suppliers</h5>
62+
<h5 igxCardHeaderSubtitle>$ 122,745.832</h5>
63+
</igx-card-header>
64+
<igx-card-actions [vertical]="false">
65+
<button mat-stroked-button color="accent" (click)="openDialog()">More</button>
66+
<igx-dialog #dialog title="Confirmation" message="Do you want to download the full report?">
67+
<div igxDialogActions>
68+
<button igxButton="flat" (click)="dialog.close()">Cancel</button>
69+
<button igxButton="flat" (click)="dialog.close()">OK</button>
70+
</div>
71+
</igx-dialog>
72+
<igx-icon class="warning" igxEnd>error</igx-icon>
73+
<igx-icon class="error" igxEnd>trending_down</igx-icon>
74+
</igx-card-actions>
75+
</igx-card>
76+
<igx-card elevated>
77+
<igx-card-media height="180px">
78+
<img src="assets/images/card/media/card-image3.png">
79+
</igx-card-media>
80+
<igx-card-header>
81+
<igx-avatar src="assets/images/avatar/9.jpg" shape="circle" size="small"></igx-avatar>
82+
<h5 igxCardHeaderTitle>Ads & Marketing</h5>
83+
<h5 igxCardHeaderSubtitle>$ 42,646.43</h5>
84+
</igx-card-header>
85+
<igx-card-actions [vertical]="false">
86+
<div igxOverlayOutlet>
7087
<button mat-stroked-button color="accent" (click)="openDialog()">More</button>
7188
<igx-dialog #dialog title="Confirmation" message="Do you want to download the full report?">
7289
<div igxDialogActions>
7390
<button igxButton="flat" (click)="dialog.close()">Cancel</button>
7491
<button igxButton="flat" (click)="dialog.close()">OK</button>
7592
</div>
7693
</igx-dialog>
77-
<igx-icon class="warning" igxEnd>error</igx-icon>
78-
<igx-icon class="error" igxEnd>trending_down</igx-icon>
79-
</igx-card-actions>
80-
</igx-card>
81-
</div>
82-
<div class="card-wrapper">
83-
<igx-card elevated>
84-
<igx-card-media height="180px">
85-
<img src="assets/images/card/media/card-image3.png">
86-
</igx-card-media>
87-
<igx-card-header>
88-
<igx-avatar src="assets/images/avatar/9.jpg" shape="circle" size="small"></igx-avatar>
89-
<h5 igxCardHeaderTitle>Ads & Marketing</h5>
90-
<h5 igxCardHeaderSubtitle>$ 42,646.43</h5>
91-
</igx-card-header>
92-
93-
<igx-card-actions [vertical]="false">
94-
<div igxOverlayOutlet>
95-
<button mat-stroked-button color="accent" (click)="openDialog()">More</button>
96-
<igx-dialog #dialog title="Confirmation" message="Do you want to download the full report?">
97-
<div igxDialogActions>
98-
<button igxButton="flat" (click)="dialog.close()">Cancel</button>
99-
<button igxButton="flat" (click)="dialog.close()">OK</button>
100-
</div>
101-
</igx-dialog>
102-
</div>
103-
<igx-icon class="success" igxEnd>trending_up</igx-icon>
104-
</igx-card-actions>
105-
</igx-card>
106-
</div>
94+
</div>
95+
<igx-icon class="success" igxEnd>trending_up</igx-icon>
96+
</igx-card-actions>
97+
</igx-card>
10798
</div>
10899
<igx-expansion-panel class="card-panel">
109100
<igx-expansion-panel-header>

‎src/app/theming/angular/angular-sample.component.scss

+27-7
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,12 @@ $custom-mat-dark-theme: mat.m2-define-dark-theme((
6969
::ng-deep {
7070
@include mat.core();
7171

72-
.light-menu-theme {
72+
.mat-menu {
7373
@include mat.menu-theme($custom-mat-light-theme);
7474
}
7575

7676
.dark-menu-theme {
77-
@include mat.menu-theme($custom-mat-dark-theme);
77+
@include mat.menu-color($custom-mat-dark-theme);
7878
}
7979
}
8080

@@ -90,9 +90,12 @@ mat-toolbar div {
9090
}
9191
}
9292

93-
.card-wrapper {
94-
margin: 16px;
95-
flex: 1 0 25%;
93+
.cards-container {
94+
display: grid;
95+
grid-template-columns: repeat(3, 1fr);
96+
margin: rem(16px);
97+
gap: rem(16px);
98+
align-items: stretch;
9699
}
97100

98101
.slider-wrapper {
@@ -169,18 +172,35 @@ igx-expansion-panel-body {
169172

170173
::ng-deep {
171174
@include dark-theme($custom-dark-palette);
172-
@include mat.all-component-themes($custom-mat-dark-theme);
175+
@include mat.all-component-colors($custom-mat-dark-theme);
173176

174177
.primary {
175178
color: color($custom-dark-palette, 'primary', 100);
176179
margin-left: 32px;
177180
}
178181

182+
.mat-mdc-slider.secondary .mdc-slider__track--inactive,
183+
.mat-mdc-slider.secondary .mdc-slider__thumb-knob {
184+
background-color: color($custom-mat-dark-theme, 'accent');
185+
}
186+
187+
.mat-mdc-slider.secondary .mdc-slider__track--active_fill,
188+
.mat-mdc-slider.secondary .mdc-slider__thumb-knob {
189+
border-color: color($custom-mat-dark-theme, 'accent');
190+
}
191+
192+
.mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
193+
background-color: color($custom-mat-dark-theme, 'accent');
194+
opacity: .12;
195+
}
196+
179197
.mat-step-header .mat-step-icon-selected {
180198
background-color: color($custom-dark-palette, 'secondary');
181199
}
182200

183-
.mat-stepper-horizontal {
201+
.mat-stepper-horizontal,
202+
.mat-mdc-form-field-focus-overlay,
203+
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
184204
background: color($custom-dark-palette, 'surface');
185205
}
186206

‎src/app/theming/angular/angular-sample.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export class AngularMaterialComponent implements OnInit {
4141

4242
private toggleOverlayClasses(theme: 'light' | 'dark') {
4343
const overlayClasses = this.overlayContainer.getContainerElement().classList;
44+
overlayClasses.add('mat-menu');
4445

4546
switch (theme) {
4647
case 'light':

0 commit comments

Comments
 (0)