@keyframes get borked about uebersicht

[felixhageloh]

yeah that's a know shortcoming of the current implementation. You are right, it is because Übersicht scopes all css rules to the widget id, so that css styles don't leak across widgets. This doesn't work for keyframe animations tho. A workaround I have used in the past is to just include a style tag in your render method and put the keyframe definition in there, like:

render: -> """
  <div>
    <style>
      @-webkit-keyframes spin {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }
    </style>
    <div> content goes in here </div>
  </div>
"""

You can then use the update method to insert your content and/or apply css classes to trigger the animation. The CircleCi widget has an example of that actually.

[ttscoff]

Oh, perfect. Hadn't thought of that. Thanks!

-Brett

On 20 Aug 2014, at 2:58, Felix wrote:

yeah that's a know shortcoming of the current implementation. You are
right, it is because Übersicht scopes all css rules to the widget id,
so that css styles don't leak across widgets. This doesn't work for
keyframe animations tho. A workaround I have used in the past is to
just include a style tag in your render method and put the keyframe
definition in there, like:

render: -> """
<div>
 <style>
   @-webkit-keyframes spin {
     from {
       -webkit-transform: rotate(0deg);
     }
     to {
       -webkit-transform: rotate(360deg);
     }
   }
 </style>
 <div> content goes in here </div>
</div>
"""

You can then use the update method to insert your content and/or apply
css classes to trigger the animation. The CircleCi
widget has an
example of that actually.

---

Reply to this email directly or view it on GitHub:
#35 (comment)