Patch #30433 » flash-notice-animation.diff
| public/stylesheets/application.css (working copy) | ||
|---|---|---|
| 876 | 876 |
font-size: 1.1em; |
| 877 | 877 |
border: 1px solid; |
| 878 | 878 |
border-radius: 3px; |
| 879 | ||
| 879 | 880 |
} |
| 880 | 881 | |
| 881 |
div.flash {margin-top: 8px;}
|
|
| 882 |
div.flash {
|
|
| 883 |
margin-top: 8px; |
|
| 884 |
animation: slideFlash 3s ease-in-out forwards; |
|
| 885 |
} |
|
| 882 | 886 | |
| 883 | 887 |
div.flash.error, #errorExplanation {
|
| 884 | 888 |
background: url(../images/exclamation.png) 8px 50% no-repeat; |
| 885 | 889 |
background-color: #ffe3e3; |
| 886 | 890 |
border-color: #d88; |
| 887 | 891 |
color: #880000; |
| 892 | ||
| 888 | 893 |
} |
| 889 | 894 | |
| 890 | 895 |
div.flash.notice {
|
| ... | ... | |
| 1523 | 1528 |
max-height: 100%; |
| 1524 | 1529 |
max-width: 100%; |
| 1525 | 1530 |
} |
| 1531 | ||
| 1532 |
/***** Animations section *****/ |
|
| 1533 |
@keyframes slideFlash {
|
|
| 1534 |
0% {
|
|
| 1535 |
background-size: 0; |
|
| 1536 |
font-size: 0; |
|
| 1537 |
padding: 0; |
|
| 1538 |
border-style: none; |
|
| 1539 |
display: none; |
|
| 1540 |
height: 0; |
|
| 1541 |
margin:0; |
|
| 1542 |
} |
|
| 1543 |
10% {
|
|
| 1544 |
background-size: 16px; |
|
| 1545 |
font-size: 1em; |
|
| 1546 |
border-style: solid; |
|
| 1547 |
padding: 6px 4px 6px 30px; |
|
| 1548 |
height: auto; |
|
| 1549 |
} |
|
| 1550 |
90% {
|
|
| 1551 |
background-size: 16px; |
|
| 1552 |
font-size: 1em; |
|
| 1553 |
border-style: solid; |
|
| 1554 |
padding: 6px 4px 6px 30px; |
|
| 1555 |
height: auto; |
|
| 1556 |
} |
|
| 1557 |
100% {
|
|
| 1558 |
background-size: 0; |
|
| 1559 |
font-size: 0; |
|
| 1560 |
padding: 0; |
|
| 1561 |
border-style: none; |
|
| 1562 |
display: none; |
|
| 1563 |
height: 0; |
|
| 1564 |
margin:0; |
|
| 1565 |
} |
|
| 1566 |
} |
|