1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
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 {
mark.inline-block { mark.inline-block {
display: inline-block; display: inline-block;
} }
@-webkit-keyframes alert-anim {
0% {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
50% {
-webkit-transform: scale(1.005); -webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
55% { 55% {
-webkit-transform: scale(1);
}
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
} }
@keyframes alert-anim {
0% {
@keyframes alert-anim { @keyframes alert-anim {
45% {
transform: scale(1); transform: scale(1);
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
50% {
transform: scale(1.005); transform: scale(1.005);
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
55% { 55% {
transform: scale(1);
}
transform: scale(1); transform: scale(1);
transform-origin: 50% 50%; 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 {
mark.inline-block { mark.inline-block {
display: inline-block; display: inline-block;
} }
@-webkit-keyframes alert-anim {
0% {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
45% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
50% {
-webkit-transform: scale(1.005); -webkit-transform: scale(1.005);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
55% { 55% {
-webkit-transform: scale(1);
}
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
} }
} }
@keyframes alert-anim {
0% {
@keyframes alert-anim { @keyframes alert-anim {
45% {
transform: scale(1); transform: scale(1);
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
50% {
transform: scale(1.005); transform: scale(1.005);
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
55% { 55% {
transform: scale(1);
}
transform: scale(1); transform: scale(1);
transform-origin: 50% 50%; 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`. - Updated `package.json` with proper `homepage` link, changed order of keywords, added `node-sass` in `devDependencies`.
- Added `::placeholder` styling (no-prefix), dealing with #36. - Added `::placeholder` styling (no-prefix), dealing with #36.
- Bumped all flavor files to include updated `::placeholder` definitions. - 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 $include-alerts { // Turn off if you want to disable the alert component.
@if $alert-include-animated { @if $alert-include-animated {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
0% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
45% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005);} 55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
} }
@keyframes alert-anim { @keyframes alert-anim {
0% { transform: scale(1); } 45% { transform: scale(1); transform-origin: 50% 50%; }
45% { transform: scale(1); } 50% { transform: scale(1.005); transform-origin: 50% 50%; }
50% { transform: scale(1.005);} 55% { transform: scale(1); transform-origin: 50% 50%; }
55% { transform: scale(1); }
100% { transform: scale(1); }
} }
} }
} }