Changeset 3791 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

Timestamp:

08/09/2016 06:58:20 PM (9 years ago)

Author:

obenland

Message:

Plugin Directory: Show UI to favorite plugins.

Fills in transition animation and enables UI.

Fixes #1811.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

@@ -53 +53 @@
         }
 
-        .plugin-favorite-heart {
-            /* FIX ME */
-            color: gray;
-            line-heght: 3em;
-            font-size: 3em;
-
-            &.favorited,
-            &:hover,
-            &:focus {
-                color: red;
-            }
-
-            &:hover,
-            &:focus {
-                text-decoration: none;
-            }
-
-            &:after {
-                content: "\f487";
-                font-family: dashicons;
-                vertical-align: top;
-            }
-            
+        @keyframes favme-anime {
+            0% {
+                opacity: 1;
+                font-size: ms(0);
+                -webkit-text-stroke-color: transparent;
+            }
+            25% {
+                opacity: 0.6;
+                color: #fff;
+                font-size: ms(-2);
+                -webkit-text-stroke-width: 1px;
+                -webkit-text-stroke-color: #dc3232;
+            }
+            75% {
+                opacity: 0.6;
+                color: #fff;
+                font-size: ms(3);
+                -webkit-text-stroke-width: 1px;
+                -webkit-text-stroke-color: #dc3232;
+            }
+            100% {
+                opacity: 1;
+                font-size: ms(2);
+                -webkit-text-stroke-color: transparent;
+            }
+        }
+
+        @keyframes favme-hover {
+            from {
+                @include font-size( ms-unitless( ms(3) ) );
+            }
+            80% {
+                @include font-size( ms-unitless( ms(2) ) );
+            }
+        }
+
+        .plugin-favorite{
+            display: inline-block;
+            height: 36px;
+            text-align: center;
+            width: 36px;
+
+            .plugin-favorite-heart {
+                align-items: center;
+                color: #cbcdce;
+                display: flex;
+                @include font-size( ms-unitless( ms(2) ) );
+                height: 100%;
+                justify-content: center;
+                line-height: 1;
+                transition: all .2s ease;
+
+                &.favorited {
+                    color: #dc3232;
+                }
+
+                &:hover {
+                    animation: favme-hover .3s infinite alternate;
+                }
+
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                }
+
+                &:after {
+                    content: "\f487";
+                    font-family: dashicons;
+                    vertical-align: top;
+                }
+
+                &.is-animating {
+                    animation: favme-anime .3s;
+                }
+            }
+
         }