Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-12 09:13:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add better spacing between fab and snackbar

Browse source
This commit is contained in:
Marcos Moura 2016-12-27 00:09:04 -02:00
parent 82dd4bb95b
commit 0f0f4e5b82
2 changed files with 57 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@
@import '../../core/stylesheets/mixins.scss';
$snackbar-height: 48px;
$snackbar-padding: 14px;
$snackbar-space: $snackbar-height / 2;
.md-snackbar {
@ -100,13 +101,13 @@ $snackbar-space: $snackbar-height / 2;
min-width: 288px;
max-width: 568px;
min-height: $snackbar-height;
padding: 14px 24px;
padding: $snackbar-padding 24px;
overflow: hidden;
border-radius: 2px;
background-color: #323232;
transition: $swift-ease-out;
color: #fff;
font-size: 14px;
font-size: $snackbar-padding;
@include layout-xsmall {
width: 100%;
@ -117,36 +118,78 @@ $snackbar-space: $snackbar-height / 2;
.md-has-toast-top-right {
.md-fab.md-fab-top-right {
transform: translate3D(0, $snackbar-height + $snackbar-space, 0);
transform: translate3D(0, $snackbar-height + $snackbar-padding + 6px, 0);
@include layout-xsmall {
transform: translate3D(0, $snackbar-height, 0);
}
}
}
.md-has-toast-top-center {
.md-fab.md-fab-top-center {
transform: translate3D(-50%, $snackbar-height + $snackbar-space, 0);
transform: translate3D(-50%, $snackbar-height + $snackbar-padding + 6px, 0);
@include layout-xsmall {
transform: translate3D(-50%, $snackbar-height, 0);
}
}
}
.md-has-toast-top-left {
.md-fab.md-fab-top-left {
transform: translate3D(0, $snackbar-height + $snackbar-space, 0);
transform: translate3D(0, $snackbar-height + $snackbar-padding + 6px, 0);
@include layout-xsmall {
transform: translate3D(0, $snackbar-height, 0);
}
}
}
.md-has-toast-bottom-right {
.md-fab.md-fab-bottom-right {
transform: translate3D(0, -$snackbar-height - $snackbar-space, 0);
transform: translate3D(0, -$snackbar-height - $snackbar-padding - 6px, 0);
@include layout-xsmall {
transform: translate3D(0, -$snackbar-height, 0);
}
}
}
.md-has-toast-bottom-center {
.md-fab.md-fab-bottom-center {
transform: translate3D(-50%, -$snackbar-height - $snackbar-space, 0);
transform: translate3D(-50%, -$snackbar-height - $snackbar-padding - 6px, 0);
@include layout-xsmall {
transform: translate3D(-50%, -$snackbar-height, 0);
}
}
}
.md-has-toast-bottom-left {
.md-fab.md-fab-bottom-left {
transform: translate3D(0, -$snackbar-height - $snackbar-space, 0);
transform: translate3D(0, -$snackbar-height - $snackbar-padding - 6px, 0);
@include layout-xsmall {
transform: translate3D(0, -$snackbar-height, 0);
}
}
}
.md-has-toast {
.md-fab.md-fab-top-right,
.md-fab.md-fab-top-center,
.md-fab.md-fab-top-left {
@include layout-xsmall {
transform: translate3D(0, $snackbar-height - 4px, 0);
}
}
.md-fab.md-fab-bottom-right,
.md-fab.md-fab-bottom-center,
.md-fab.md-fab-bottom-left {
@include layout-xsmall {
transform: translate3D(0, -$snackbar-height + 4px, 0);
}
}
}

9
src/components/mdSnackbar/mdSnackbar.vue
View file

@ -54,12 +54,15 @@
},
watch: {
active(active) {
const cssClass = 'md-has-toast-' + this.directionClass;
const directionClass = 'md-has-toast-' + this.directionClass;
const toastClass = 'md-has-toast';
if (active) {
document.body.classList.add(cssClass);
document.body.classList.add(directionClass);
document.body.classList.add(toastClass);
} else {
document.body.classList.remove(cssClass);
document.body.classList.remove(directionClass);
document.body.classList.remove(toastClass);
}
}
},