Commit 0b819055 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Animate the notification error

parent 621e67c9
...@@ -1538,6 +1538,14 @@ div[data-gadget-scope='notification'] { ...@@ -1538,6 +1538,14 @@ div[data-gadget-scope='notification'] {
div[data-gadget-scope='notification'].visible { div[data-gadget-scope='notification'].visible {
transform: translate3d(-216pt, 0, 0); transform: translate3d(-216pt, 0, 0);
} }
div[data-gadget-scope='notification'].visible .error {
animation: pulseerrormobile 1s ease-in infinite;
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='notification'].visible .error {
animation: pulseerrordesktop 1s ease-in infinite;
}
}
@media not screen and (min-width: 45em) { @media not screen and (min-width: 45em) {
div[data-gadget-scope='notification'].visible { div[data-gadget-scope='notification'].visible {
transform: translate3d(-198pt, 0, 0); transform: translate3d(-198pt, 0, 0);
...@@ -1556,6 +1564,22 @@ div[data-gadget-scope='notification'] button.success { ...@@ -1556,6 +1564,22 @@ div[data-gadget-scope='notification'] button.success {
div[data-gadget-scope='notification'] button.error { div[data-gadget-scope='notification'] button.error {
background-color: #FF6600; background-color: #FF6600;
} }
@keyframes pulseerrormobile {
0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
}
100% {
box-shadow: 0 0 0 12pt rgba(255, 102, 0, 0);
}
}
@keyframes pulseerrordesktop {
0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
}
100% {
box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0);
}
}
/********************************************** /**********************************************
* JQM * JQM
**********************************************/ **********************************************/
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>965.34799.64195.37666</string> </value> <value> <string>965.39414.45181.36300</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1518776101.18</float> <float>1519049802.38</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -1770,6 +1770,12 @@ div[data-gadget-scope='notification'] { ...@@ -1770,6 +1770,12 @@ div[data-gadget-scope='notification'] {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-desktop, 0, 0); transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-desktop, 0, 0);
.error {
animation: pulseerrormobile 1s ease-in infinite;
@media @desktop {
animation: pulseerrordesktop 1s ease-in infinite;
}
}
@media @smartphone { @media @smartphone {
transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-smartphone, 0, 0); transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-smartphone, 0, 0);
} }
...@@ -1790,6 +1796,23 @@ div[data-gadget-scope='notification'] { ...@@ -1790,6 +1796,23 @@ div[data-gadget-scope='notification'] {
} }
} }
@keyframes pulseerrormobile {
0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
}
100% {
box-shadow: 0 0 0 @double-margin-size rgba(255, 102, 0, 0);
}
}
@keyframes pulseerrordesktop {
0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
}
100% {
box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0);
}
}
/********************************************** /**********************************************
* JQM * JQM
**********************************************/ **********************************************/
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment