flash-notice-animation.diff

Anonymous, 2019-01-15 09:49

Download (1.39 KB)

View differences:

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
}