vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Smooth animations for Toast

pull/12/head
cagataycivici 2019-02-08 16:44:30 +03:00
parent 35b5433d38
commit b533785c4c
10 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/themes/luna-amber/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/luna-blue/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/luna-green/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/luna-pink/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/nova-colored/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/nova-dark/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/nova-light/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

1
public/themes/rhea/theme.css
View File

@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close
color: #212121;
}
body .p-toast {
top: 120px;
opacity: 0.9;
filter: alpha(opacity=90);
}

17
src/components/toast/Toast.css
View File

@ -24,8 +24,8 @@
}
.p-toast-item-container {
position:relative;
margin:0 0 10px 0;
position: relative;
margin-bottom: 1em;
}
.p-toast-item {
@ -86,11 +86,16 @@
.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active,
.p-toast-message-leave-active {
-webkit-transition: all .3s;
transition: all .3s;
.p-toast-message-enter-active {
-webkit-transition: transform .3s, opacity .3s;
transition: transform .3s, opacity .3s;
}
.p-toast-message-leave-active {
-webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
}

2
src/views/toast/ToastDemo.vue
View File

@ -103,7 +103,7 @@ button.p-button {
}
.p-toast.p-toast-topright,
.p-toast.p-toast-left {
.p-toast.p-toast-topleft {
top: 100px;
}
</style>