Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-24 00:24:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve snackbar spacing

Browse source
This commit is contained in:
Marcos Moura 2016-12-26 23:56:21 -02:00
parent 9c8c5ce18c
commit 82dd4bb95b
1 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/mdSnackbar/mdSnackbar.scss
View file

@ -1,6 +1,9 @@
@import '../../core/stylesheets/variables.scss';
@import '../../core/stylesheets/mixins.scss';
$snackbar-height: 48px;
$snackbar-space: $snackbar-height / 2;
.md-snackbar {
display: flex;
position: fixed;
@ -17,25 +20,25 @@
&.md-position-top-right,
&.md-position-bottom-right {
margin-right: 8px;
margin-right: $snackbar-space;
justify-content: flex-end;
}
&.md-position-top-left,
&.md-position-bottom-left {
margin-left: 8px;
margin-left: $snackbar-space;
justify-content: flex-start;
}
&.md-position-top-right,
&.md-position-top-left,
&.md-position-top-center {
margin-top: 8px;
margin-top: $snackbar-space;
}
&.md-position-bottom-right,
&.md-position-bottom-left {
margin-bottom: 8px;
margin-bottom: $snackbar-space;
}
&.md-position-top-center,
@ -44,7 +47,7 @@
top: 0;
.md-snackbar-container {
transform: translate3D(0, calc(-100% - 8px), 0);
transform: translate3D(0, calc(-100% - #{$snackbar-space}), 0);
}
}
@ -54,7 +57,7 @@
bottom: 0;
.md-snackbar-container {
transform: translate3D(0, calc(100% + 8px), 0);
transform: translate3D(0, calc(100% + #{$snackbar-space}), 0);
}
}
@ -87,7 +90,7 @@
margin: -8px -16px;
&:last-child {
margin-left: 48px;
margin-left: $snackbar-height;
}
}
}
@ -96,7 +99,7 @@
width: auto;
min-width: 288px;
max-width: 568px;
min-height: 48px;
min-height: $snackbar-height;
padding: 14px 24px;
overflow: hidden;
border-radius: 2px;
@ -114,36 +117,36 @@
.md-has-toast-top-right {
.md-fab.md-fab-top-right {
transform: translate3D(0, 48px, 0);
transform: translate3D(0, $snackbar-height + $snackbar-space, 0);
}
}
.md-has-toast-top-center {
.md-fab.md-fab-top-center {
transform: translate3D(-50%, 48px, 0);
transform: translate3D(-50%, $snackbar-height + $snackbar-space, 0);
}
}
.md-has-toast-top-left {
.md-fab.md-fab-top-left {
transform: translate3D(0, 48px, 0);
transform: translate3D(0, $snackbar-height + $snackbar-space, 0);
}
}
.md-has-toast-bottom-right {
.md-fab.md-fab-bottom-right {
transform: translate3D(0, -48px, 0);
transform: translate3D(0, -$snackbar-height - $snackbar-space, 0);
}
}
.md-has-toast-bottom-center {
.md-fab.md-fab-bottom-center {
transform: translate3D(-50%, -48px, 0);
transform: translate3D(-50%, -$snackbar-height - $snackbar-space, 0);
}
}
.md-has-toast-bottom-left {
.md-fab.md-fab-bottom-left {
transform: translate3D(0, -48px, 0);
transform: translate3D(0, -$snackbar-height - $snackbar-space, 0);
}
}