Fixed the way .animated .alert displays on webkit-based browsers, should now behave better.
This commit is contained in:
Angelos Chalaris 2017-04-21 13:54:42 +03:00
parent fdd8168b58
commit 889071847d
6 changed files with 23 additions and 37 deletions

18
dist/mini-default.css vendored
View file

@ -1715,38 +1715,32 @@ mark.inline-block {
}
@-webkit-keyframes alert-anim {
0% {
-webkit-transform: scale(1);
}
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
0% {
transform: scale(1);
}
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
}
100% {
transform: scale(1);
transform-origin: 50% 50%;
}
}

File diff suppressed because one or more lines are too long

18
dist/mini-nord.css vendored
View file

@ -1707,38 +1707,32 @@ mark.inline-block {
}
@-webkit-keyframes alert-anim {
0% {
-webkit-transform: scale(1);
}
45% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
50% {
-webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%;
}
55% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes alert-anim {
0% {
transform: scale(1);
}
45% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(1.005);
transform-origin: 50% 50%;
}
55% {
transform: scale(1);
}
100% {
transform: scale(1);
transform-origin: 50% 50%;
}
}

File diff suppressed because one or more lines are too long

View file

@ -1012,3 +1012,5 @@
- Updated `package.json` with proper `homepage` link, changed order of keywords, added `node-sass` in `devDependencies`.
- Added `::placeholder` styling (no-prefix), dealing with #36.
- Bumped all flavor files to include updated `::placeholder` definitions.
- Updated `.animated` `.alert`s to deal with the way `webkit` renders them (#35).
- Bumped flavors again.

View file

@ -53,18 +53,14 @@ mark {
@if $include-alerts { // Turn off if you want to disable the alert component.
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
0% { -webkit-transform: scale(1); }
45% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.005);}
55% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
0% { transform: scale(1); }
45% { transform: scale(1); }
50% { transform: scale(1.005);}
55% { transform: scale(1); }
100% { transform: scale(1); }
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
}