Fix misconception on icon coloring
It's advisable to rely on default icon color and set it's color by opacity. With that we've got a better playing field to respond to user interaction with icon color changes, not relying on several icons at once for different states and also being backwards-compatible for a variety of browsers. Change-Id: Iaff869774007ed962104d704103f0392a3516f4f Bug: T246419
This commit is contained in:
parent
ba05e760b9
commit
fd250975c4
|
@ -26,8 +26,8 @@
|
||||||
mw-checkbox-hack-button
|
mw-checkbox-hack-button
|
||||||
mw-ui-icon
|
mw-ui-icon
|
||||||
mw-ui-icon-element
|
mw-ui-icon-element
|
||||||
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal-base20{{/sidebar-visible}}
|
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
|
||||||
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu-base20{{/sidebar-visible}}
|
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
|
||||||
"
|
"
|
||||||
for="mw-sidebar-checkbox"
|
for="mw-sidebar-checkbox"
|
||||||
data-event-name="ui.sidebar">
|
data-event-name="ui.sidebar">
|
||||||
|
|
|
@ -12,13 +12,13 @@ var vector = require( '../skins.vector.legacy.js/vector.js' );
|
||||||
function updateMenuIcon( checkbox, button ) {
|
function updateMenuIcon( checkbox, button ) {
|
||||||
button.classList.remove(
|
button.classList.remove(
|
||||||
checkbox.checked ?
|
checkbox.checked ?
|
||||||
'mw-ui-icon-wikimedia-menu-base20' :
|
'mw-ui-icon-wikimedia-menu' :
|
||||||
'mw-ui-icon-wikimedia-collapseHorizontal-base20'
|
'mw-ui-icon-wikimedia-collapseHorizontal'
|
||||||
);
|
);
|
||||||
button.classList.add(
|
button.classList.add(
|
||||||
checkbox.checked ?
|
checkbox.checked ?
|
||||||
'mw-ui-icon-wikimedia-collapseHorizontal-base20' :
|
'mw-ui-icon-wikimedia-collapseHorizontal' :
|
||||||
'mw-ui-icon-wikimedia-menu-base20'
|
'mw-ui-icon-wikimedia-menu'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
height: @size-sidebar-button;
|
height: @size-sidebar-button;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base, opacity @transition-duration-base; );
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
||||||
|
@ -45,14 +46,17 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// Center it horizontally.
|
// Center it horizontally.
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
opacity: 0.87;
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
||||||
|
opacity: 0.67;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @background-color-frameless--hover;
|
background-color: @background-color-frameless--hover;
|
||||||
}
|
|
||||||
|
|
||||||
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base; );
|
&:before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {
|
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {
|
||||||
|
|
|
@ -60,8 +60,7 @@
|
||||||
},
|
},
|
||||||
"skins.vector.icons": {
|
"skins.vector.icons": {
|
||||||
"class": "ResourceLoaderImageModule",
|
"class": "ResourceLoaderImageModule",
|
||||||
"selector": ".mw-ui-icon-wikimedia-{name}-base20:before",
|
"selector": ".mw-ui-icon-wikimedia-{name}:before",
|
||||||
"defaultColor": "#54595d",
|
|
||||||
"images": {
|
"images": {
|
||||||
"menu": "resources/skins.vector.icons/menu.svg",
|
"menu": "resources/skins.vector.icons/menu.svg",
|
||||||
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
|
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
|
||||||
|
|
Loading…
Reference in New Issue