Changeset 3685:3f1bacac1ac3 for admin/style

Timestamp:

01/27/18 11:59:30 (8 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Switch from jQuery background fade plugin to CSS3 animation (plugin removed from distribution)

Location:

admin/style

Files:

• default.css (modified) (5 diffs)
• scss/partials/_forms.scss (modified) (1 diff)
• scss/partials/_messages.scss (modified) (4 diffs)
• scss/partials/_utils.scss (modified) (1 diff)

admin/style/default.css

@@ -1189 +1189 @@
   text-transform: none; }
 
+.missing {
+  background-color: inherit;
+  animation-name: kf-missing;
+  animation-duration: 1s; }
+
+@keyframes kf-missing {
+  0% {
+    background-color: inherit; }
+  50% {
+    background-color: #ffbaba; }
+  100% {
+    background-color: inherit; } }
 .no-more-info {
   display: none; }
@@ -1487 +1499 @@
 
 .error {
-  background: #FFBABA url(msg-error.png) no-repeat 0.7em 0.7em;
-  color: #000; }
-
+  background: #ffbaba url(msg-error.png) no-repeat 0.7em 0.7em;
+  color: #000;
+  animation-name: kf-error;
+  animation-duration: .5s; }
+
+@keyframes kf-error {
+  0% {
+    background-color: #fefacd; }
+  100% {
+    background-color: #ffbaba; } }
 .message,
 .static-msg {
@@ -1495 +1514 @@
   color: #fff; }
 
+.message {
+  animation-name: kf-message;
+  animation-duration: .5s; }
+
+@keyframes kf-message {
+  0% {
+    background-color: #ccc; }
+  100% {
+    background-color: #676e78; } }
 .message a,
 .static-msg a,
@@ -1506 +1534 @@
 
 .success {
-  background: #9bca1c url(msg-success.png) no-repeat 0.7em 0.7em; }
-
+  background: #bee74b url(msg-success.png) no-repeat 0.7em 0.7em;
+  animation-name: kf-success;
+  animation-duration: .5s; }
+
+@keyframes kf-success {
+  0% {
+    background-color: #9bca1c; }
+  100% {
+    background-color: #bee74b; } }
 .warning-msg {
   background: #ffd478 url(msg-warning.png) no-repeat 0.7em 0.7em;
-  border: 1px solid #ffd478; }
-
+  border: 1px solid #ffd478;
+  animation-name: kf-warning;
+  animation-duration: .5s; }
+
+@keyframes kf-warning {
+  0% {
+    background-color: #fefacd; }
+  100% {
+    background-color: #ffd478; } }
 .success a,
 .warning-msg a,
@@ -3199 +3241 @@
   border: 1px solid #ccc; }
 
-/* fadings ('color' est utilisé comme variable, pas comme text color) */
-.colorBeginPassword,
-.colorBeginValidatorErr,
-.colorBeginUserMail {
-  color: #fff; }
-
-.colorEndPassword,
-.colorEndError,
-.colorEndValidatorErr,
-.colorEndUserMail {
-  color: #ffbaba; }
-
-.colorBeginMessage {
-  color: #ccc; }
-
-.colorEndMessage,
-.colorBeginValidatorMsg {
-  color: #676e78; }
-
-.colorBeginError {
-  color: #fefacd; }
-
-.colorBeginSuccess {
-  color: #9BCA1C; }
-
-.colorEndSuccess {
-  color: #bee74b; }
-
-.colorEndValidatorMsg {
-  color: #ffcc00; }
-
 /* ------------------------------------------------------------------------------------
                                                                            UN POIL DE MEDIA QUERIES

admin/style/scss/partials/_forms.scss

@@ -245 +245 @@
 }
 
+.missing {
+  background-color: inherit;
+  animation-name: kf-missing;
+  animation-duration: 1s;
+}
+@keyframes kf-missing {
+  0% {
+    background-color: inherit;
+  }
+  50% {
+    background-color: #ffbaba;
+  }
+  100% {
+    background-color: inherit;
+  }
+}
+
 // .more-info Additional information on fieldset, field, … (may be hide from user-prefs)
 .more-info {}

admin/style/scss/partials/_messages.scss

@@ -60 +60 @@
 
 .error {
-     background: #FFBABA url(msg-error.png) no-repeat .7em .7em;
+     background: #ffbaba url(msg-error.png) no-repeat .7em .7em;
      color: #000;
+  animation-name: kf-error;
+  animation-duration: .5s;
+}
+@keyframes kf-error {
+  0% {
+    background-color: #fefacd;
+  }
+  100% {
+    background-color: #ffbaba;
+  }
 }
 
@@ -68 +78 @@
      background: #676e78 url(msg-std.png) no-repeat .7em .7em;
      color: #fff;
+}
+.message {
+  animation-name: kf-message;
+  animation-duration: .5s;
+}
+@keyframes kf-message {
+  0% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #676e78;
+  }
 }
 
@@ -83 +105 @@
 
 .success {
-     background: #9bca1c url(msg-success.png) no-repeat .7em .7em;
+     background: #bee74b url(msg-success.png) no-repeat .7em .7em;
+  animation-name: kf-success;
+  animation-duration: .5s;
+}
+@keyframes kf-success {
+  0% {
+    background-color: #9bca1c;
+  }
+  100% {
+    background-color: #bee74b;
+  }
 }
 
@@ -89 +121 @@
      background: #ffd478 url(msg-warning.png) no-repeat .7em .7em;
      border: 1px solid #ffd478;
+  animation-name: kf-warning;
+  animation-duration: .5s;
+}
+@keyframes kf-warning {
+  0% {
+    background-color: #fefacd;
+  }
+  100% {
+    background-color: #ffd478;
+  }
 }
 

admin/style/scss/partials/_utils.scss

@@ -14 +14 @@
      border: 1px solid #ccc;
 }
-
-
-/* fadings ('color' est utilisé comme variable, pas comme text color) */
-
-.colorBeginPassword,
-.colorBeginValidatorErr,
-.colorBeginUserMail {
-     color: #fff;
-}
-
-.colorEndPassword,
-.colorEndError,
-.colorEndValidatorErr,
-.colorEndUserMail {
-     color: #ffbaba;
-}
-
-.colorBeginMessage {
-     color: #ccc;
-}
-
-.colorEndMessage,
-.colorBeginValidatorMsg {
-     color: #676e78;
-}
-
-.colorBeginError {
-     color: #fefacd;
-}
-
-.colorBeginSuccess {
-     color: #9BCA1C;
-}
-
-.colorEndSuccess {
-     color: #bee74b;
-}
-
-.colorEndValidatorMsg {
-     color: #ffcc00;
-}