Support changing icon variants on hover
authorRoan Kattouw <roan.kattouw@gmail.com>
Wed, 13 May 2015 13:56:22 +0000 (14:56 +0100)
committerCatrope <roan.kattouw@gmail.com>
Fri, 15 May 2015 17:41:45 +0000 (17:41 +0000)
This introduces .mw-ui-icon-{name}-{variant}-hover which only
displays the icon when the containing .mw-ui-hovericon element
is hovered.

Bug: T97816
Change-Id: I5be26cee39ec77daef3506be20a7a4f59787de36

resources/Resources.php

index ae5b3f9..94e3864 100644 (file)
@@ -1768,7 +1768,7 @@ return array(
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.indicators' => array(
                'class' => 'ResourceLoaderImageModule',
@@ -1785,98 +1785,98 @@ return array(
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-alerts.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-content' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-content.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-editing-advanced' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-editing-advanced.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-editing-core' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-editing-core.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-editing-list' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-editing-list.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-editing-styling' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-editing-styling.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-interactions' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-interactions.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-layout' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-layout.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-location' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-location.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-media' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-media.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-moderation' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-moderation.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-movement' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-movement.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-user' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-user.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
        'oojs-ui.styles.icons-wikimedia' => array(
                'class' => 'ResourceLoaderImageModule',
                'localBasePath' => "$IP/resources/lib/oojs-ui/themes/mediawiki",
                'data' => 'icons-wikimedia.json',
                'selectorWithoutVariant' => '.oo-ui-icon-{name}, .mw-ui-icon-{name}:after, .mw-ui-icon-{name}:before',
-               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before',
+               'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .mw-ui-icon-{name}-{variant}:after, .mw-ui-icon-{name}-{variant}:before, .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before',
        ),
 
 );