Skip to content

Commit a8555cb

Browse files
committed
Use mat-button in simple snack bar.
1 parent fa441bc commit a8555cb

File tree

3 files changed

+25
-11
lines changed

3 files changed

+25
-11
lines changed
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{data.message}}
22

3-
<button
4-
class="mat-simple-snackbar-action"
5-
*ngIf="hasAction"
6-
(click)="action()">{{data.action}}</button>
3+
<div class="mat-simple-snackbar-action">
4+
<button mat-button *ngIf="hasAction"
5+
(click)="action()">{{data.action}}</button>
6+
</div>

src/lib/snack-bar/simple-snack-bar.scss

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,36 @@
22
@import '../core/style/button-common';
33
@import '../core/style/list-common';
44

5-
$mat-snack-bar-button-margin: 48px !default;
5+
$mat-snack-bar-button-horizontal-margin: 8px !default;
6+
$mat-snack-bar-button-height: 36px !default;
7+
$mat-snack-bar-line-height: 20px !default;
8+
// Button vertical margin is used to ensure that a button height of 36px, when the containing
9+
// space falls below 36px.
10+
$mat-snack-bar-button-vertical-margin:
11+
-(($mat-snack-bar-button-height - $mat-snack-bar-line-height) / 2);
612

713
.mat-simple-snackbar {
814
display: flex;
915
justify-content: space-between;
10-
line-height: 20px;
16+
line-height: $mat-snack-bar-line-height;
1117
opacity: 1;
1218
}
1319

1420
.mat-simple-snackbar-action {
15-
@include mat-button-reset;
16-
17-
background: none;
21+
display: flex;
22+
flex-direction: column;
1823
flex-shrink: 0;
19-
margin-left: $mat-snack-bar-button-margin;
24+
justify-content: space-around;
25+
margin: $mat-snack-bar-button-vertical-margin 0
26+
$mat-snack-bar-button-vertical-margin $mat-snack-bar-button-horizontal-margin;
27+
28+
button {
29+
flex: 1;
30+
max-height: $mat-snack-bar-button-height;
31+
}
2032

2133
[dir='rtl'] & {
22-
margin-right: $mat-snack-bar-button-margin;
2334
margin-left: 0;
35+
margin-right: $mat-snack-bar-button-horizontal-margin;
2436
}
2537
}

src/lib/snack-bar/snack-bar-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {PortalModule} from '@angular/cdk/portal';
1313
import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
1414
import {LayoutModule} from '@angular/cdk/layout';
1515
import {MatCommonModule} from '@angular/material/core';
16+
import {MatButtonModule} from '@angular/material/button';
1617
import {MatSnackBar} from './snack-bar';
1718
import {MatSnackBarContainer} from './snack-bar-container';
1819
import {SimpleSnackBar} from './simple-snack-bar';
@@ -23,6 +24,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
2324
OverlayModule,
2425
PortalModule,
2526
CommonModule,
27+
MatButtonModule,
2628
MatCommonModule,
2729
LayoutModule,
2830
],

0 commit comments

Comments
 (0)