WordPress.org

Making WordPress.org


Ignore:
Timestamp:
08/09/2016 06:58:20 PM (5 years ago)
Author:
obenland
Message:

Plugin Directory: Show UI to favorite plugins.

Fills in transition animation and enables UI.

Fixes #1811.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r3676 r3791  
    5353        }
    5454
    55         .plugin-favorite-heart {
    56             /* FIX ME */
    57             color: gray;
    58             line-heght: 3em;
    59             font-size: 3em;
    60 
    61             &.favorited,
    62             &:hover,
    63             &:focus {
    64                 color: red;
    65             }
    66 
    67             &:hover,
    68             &:focus {
    69                 text-decoration: none;
    70             }
    71 
    72             &:after {
    73                 content: "\f487";
    74                 font-family: dashicons;
    75                 vertical-align: top;
    76             }
    77            
     55        @keyframes favme-anime {
     56            0% {
     57                opacity: 1;
     58                font-size: ms(0);
     59                -webkit-text-stroke-color: transparent;
     60            }
     61            25% {
     62                opacity: 0.6;
     63                color: #fff;
     64                font-size: ms(-2);
     65                -webkit-text-stroke-width: 1px;
     66                -webkit-text-stroke-color: #dc3232;
     67            }
     68            75% {
     69                opacity: 0.6;
     70                color: #fff;
     71                font-size: ms(3);
     72                -webkit-text-stroke-width: 1px;
     73                -webkit-text-stroke-color: #dc3232;
     74            }
     75            100% {
     76                opacity: 1;
     77                font-size: ms(2);
     78                -webkit-text-stroke-color: transparent;
     79            }
     80        }
     81
     82        @keyframes favme-hover {
     83            from {
     84                @include font-size( ms-unitless( ms(3) ) );
     85            }
     86            80% {
     87                @include font-size( ms-unitless( ms(2) ) );
     88            }
     89        }
     90
     91        .plugin-favorite{
     92            display: inline-block;
     93            height: 36px;
     94            text-align: center;
     95            width: 36px;
     96
     97            .plugin-favorite-heart {
     98                align-items: center;
     99                color: #cbcdce;
     100                display: flex;
     101                @include font-size( ms-unitless( ms(2) ) );
     102                height: 100%;
     103                justify-content: center;
     104                line-height: 1;
     105                transition: all .2s ease;
     106
     107                &.favorited {
     108                    color: #dc3232;
     109                }
     110
     111                &:hover {
     112                    animation: favme-hover .3s infinite alternate;
     113                }
     114
     115                &:hover,
     116                &:focus {
     117                    text-decoration: none;
     118                }
     119
     120                &:after {
     121                    content: "\f487";
     122                    font-family: dashicons;
     123                    vertical-align: top;
     124                }
     125
     126                &.is-animating {
     127                    animation: favme-anime .3s;
     128                }
     129            }
     130
    78131        }
    79132
Note: See TracChangeset for help on using the changeset viewer.