primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-03 03:33:40 +03:00
Code Issues Projects Releases Wiki Activity

Split animation

Browse Source
This commit is contained in:
simurai 2019-07-03 23:05:49 +09:00
parent f2020fd1ec
commit e04789e748
2 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/css/components/toasts.md
View File

@ -88,7 +88,7 @@ To create a default toast, use `.Toast`
```html title="Toast animating"
<div class="p-3">
<div class="Toast Toast-animated Toast--error">
<div class="Toast Toast--error Toast--animateIn">
<span class="Toast-icon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>

47
src/toasts/toasts.scss
View File

@ -7,7 +7,6 @@
border-radius: $border-radius;
box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
margin: $spacer-2;
transition: 0.2s ease;
@include breakpoint(sm) {
max-width: 450px;
@ -45,27 +44,6 @@
}
}
// Temporarily splitting this out
// to play with static styles.
.Toast-animated {
position: fixed;
bottom: -100px;
left: 0;
animation-name: toast;
animation-duration: 6s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
// Pop up animation
@keyframes toast {
0% {bottom:-100px;}
10% {bottom:0px;}
90% {bottom:0px;}
100% {bottom:-100px;}
}
// Modifier
.Toast--error .Toast-icon {
@ -80,3 +58,28 @@
.Toast--success .Toast-icon {
background-color: $green-500;
}
// Animations
.Toast--animateIn {
animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes Toast--animateIn {
0% {
opacity: 0;
transform: translateY(100%);
}
}
.Toast--animateOut {
animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes Toast--animateOut {
100% {
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
}