VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/402757 )
Change subject: WikimediaUI theme: Align refined WikimediaUI icons in size and
position
......................................................................
WikimediaUI theme: Align refined WikimediaUI icons in size and position
With this and the depending parent change, the quirks of taking
canvas whitespace into account are greatly tamed,
enabling us to further fine-tune positioning to align to
design templates.
Decreasing base icon size – equivalent to missing canvas whitespace –
and slightly changing a few special cases, like
NumberInputWidget and checkboxes' checkmarks altogether
reduces CSS code needed for same visual appearance.
Bug: T177432
Depends-on: I35fee09dbeb4ac5da7de859c15a1506b5fa5ac6d
Change-Id: If5722df41e75a1d4bdf8afc83c81670d1be3a1b8
---
M src/themes/wikimediaui/common.less
M src/themes/wikimediaui/elements.less
M src/themes/wikimediaui/layouts.less
M src/themes/wikimediaui/widgets.less
4 files changed, 18 insertions(+), 26 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/57/402757/1
diff --git a/src/themes/wikimediaui/common.less
b/src/themes/wikimediaui/common.less
index c69de80..7e02b06 100644
--- a/src/themes/wikimediaui/common.less
+++ b/src/themes/wikimediaui/common.less
@@ -44,10 +44,10 @@
@min-size-icon: 16px; // values used for `min-height` are defined in `px`, see
T130691
@min-size-indicator: 12px;
-@min-size-tagitem-close: 20px;
@min-width-button-base: 40 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `3.125em`≈`40px` at base `font-size: 12.8px`
@min-width-button-combo-widget: @size-base;
@min-width-icon-numberinput: 20px;
+@min-width-tagitem-close: 14px;
@min-height-widget-base: @size-base;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-base: 50em;
@@ -55,21 +55,23 @@
@size-anchor: 9px;
@size-button-base: @size-base;
+@size-button-tagitem-close: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `1.5625em`≈`20px`
@size-icon: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`1.875em`≈`24px`
-@size-icon-numberinput: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `1.5625em`≈`20px`
-@size-icon-tagitem-close: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
+@size-icon-tagitem-close: 14 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `1.09375em`≈`14px`
+@size-icon-checkmark: 14 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; //
equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
// equals `3.4375em`≈`44px`
@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
@size-tool: 40 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals
`3.125em`≈`40px`
-@start-framed-icon-only: 10 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.547em`≈`7px`; HACK: We have to break with
`@padding-start-input-text-icon` to perfectly center in `@min-width-button-base`
-@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.46875em`≈`6px`
+@start-framed-icon-only: 11 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.859375em`≈`11px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-base`
+@start-framed-icon-only-numberinput: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.546875em`≈`7px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-base`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.703125em`≈`9px`
@start-frameless: -@start-frameless-icon;
-@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@start-frameless-icon: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@start-fieldlayout-help-icon: 3 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.234375em`≈`3px`
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-base; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-base`
@start-tool-icon-indicator: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
@start-toolbar-narrow-tool-icon: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-base;
diff --git a/src/themes/wikimediaui/elements.less
b/src/themes/wikimediaui/elements.less
index 946b7dc..4a86bc4 100644
--- a/src/themes/wikimediaui/elements.less
+++ b/src/themes/wikimediaui/elements.less
@@ -155,7 +155,7 @@
}
&.oo-ui-iconElement.oo-ui-labelElement >
.oo-ui-buttonElement-button {
- padding-left:
@padding-start-frameless-icon-plus;
+ padding-left: @padding-start-icon-only;
}
}
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index bb1b0e1..373d723 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -109,7 +109,7 @@
padding-left: @size-fieldlayout-help-icon;
.oo-ui-iconElement-icon {
- left: 0; // Reset Frameless ButtonWidget
+ left: @start-fieldlayout-help-icon; // HACK:
Providing correct inner position as long as old info icon is provided, see
T177432
}
}
}
diff --git a/src/themes/wikimediaui/widgets.less
b/src/themes/wikimediaui/widgets.less
index 810cd2b..6d2bec4 100644
--- a/src/themes/wikimediaui/widgets.less
+++ b/src/themes/wikimediaui/widgets.less
@@ -190,16 +190,12 @@
}
& .oo-ui-buttonElement-button {
// frameless reset
- min-width: 0;
- min-height: 0;
border: 0;
- padding-top: @size-icon-tagitem-close;
- padding-left: @size-icon-tagitem-close;
+ padding-top: @size-button-tagitem-close;
+ padding-left: @size-button-tagitem-close;
.oo-ui-icon-close {
- left: 0;
- min-width: @min-size-tagitem-close;
- min-height: @min-size-tagitem-close;
+ min-width: @min-width-tagitem-close;
width: @size-icon-tagitem-close;
}
@@ -367,7 +363,7 @@
& + span {
.oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check-invert' );
.oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/check-invert' );
- background-size: 90% 90%;
+ background-size: @size-icon-checkmark;
}
}
@@ -570,7 +566,7 @@
line-height: @line-height-reset;
.oo-ui-iconElement-icon {
- left: @padding-horizontal-input-text;
+ left: @padding-horizontal-base;
}
.oo-ui-indicatorElement-indicator {
@@ -850,8 +846,6 @@
.oo-ui-iconElement-icon {
left:
@start-framed-icon-only-numberinput;
- min-width: @min-width-icon-numberinput;
- width: @size-icon-numberinput;
}
}
}
@@ -1638,16 +1632,12 @@
}
& .oo-ui-buttonElement-button {
// frameless reset
- min-width: 0;
- min-height: 0;
border: 0;
- padding-top: @size-icon-tagitem-close;
- padding-left: @size-icon-tagitem-close;
+ padding-top: @size-button-tagitem-close;
+ padding-left: @size-button-tagitem-close;
.oo-ui-icon-close {
- left: 0;
- min-width: @min-size-tagitem-close;
- min-height: @min-size-tagitem-close;
+ min-width: @min-width-tagitem-close;
width: @size-icon-tagitem-close;
}
--
To view, visit https://gerrit.wikimedia.org/r/402757
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If5722df41e75a1d4bdf8afc83c81670d1be3a1b8
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
