VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/349865 )
Change subject: TabOptionWidget: Cleanup & align paddings/position to dialog
environment
......................................................................
TabOptionWidget: Cleanup & align paddings/position to dialog environment
Cleaning up TabOptionWidget's selectors, removing unused indicatorElement
selectors and simplifying others.
Also
- aligning padding/positioning to dialogs layout, especially
to button in `.oo-ui-window-head` and
- adding `box-sizing: border-box` as general approach.
Change-Id: I6fa788a14325a50dfa2a36201d31b4786e736fa2
---
M src/styles/widgets/TabOptionWidget.less
M src/themes/apex/common.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
5 files changed, 35 insertions(+), 39 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/65/349865/1
diff --git a/src/styles/widgets/TabOptionWidget.less
b/src/styles/widgets/TabOptionWidget.less
index 0b83154..fdc3bf0 100644
--- a/src/styles/widgets/TabOptionWidget.less
+++ b/src/styles/widgets/TabOptionWidget.less
@@ -2,6 +2,7 @@
.oo-ui-tabOptionWidget {
display: inline-block;
+ .oo-ui-box-sizing( border-box );
vertical-align: bottom;
.theme-oo-ui-tabOptionWidget();
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 622e4c9..5526db1 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -35,6 +35,7 @@
@size-indicator: unit( 12 / 16 / 0.8, em );
@border-radius-default: 0.25em;
+@border-radius-taboption: 0.5em;
@line-height-default: 1.4;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 2d5a14f..13bd86c 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -959,23 +959,17 @@
}
.theme-oo-ui-tabOptionWidget () {
- padding: 0.5em 1em;
margin: 0.5em 0 0 0.75em;
- border: 1px solid transparent;
- border-bottom: 0;
- border-top-left-radius: 0.5em;
- border-top-right-radius: 0.5em;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 1px 0 1px;
+ border-top-left-radius: @border-radius-taboption;
+ border-top-right-radius: @border-radius-taboption;
+ padding: 0.5em 1em;
- &.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
- }
-
- .oo-ui-selectWidget-pressed &.oo-ui-optionWidget-pressed {
- background-color: transparent;
+ &.oo-ui-optionWidget-selected {
+ background-color: @background-color-main;
+ border-color: #ddd;
}
&.oo-ui-widget-enabled {
@@ -988,13 +982,10 @@
background-color: @background-color-main;
border-color: #ddd;
}
- }
- .oo-ui-selectWidget-pressed &.oo-ui-optionWidget-selected,
- .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected,
- &.oo-ui-optionWidget-selected:hover {
- background-color: @background-color-main;
- border-color: #ddd;
+ &.oo-ui-optionWidget-selected:hover {
+ background-color: @background-color-main;
+ }
}
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 0907636..fa6d520 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -90,6 +90,7 @@
@height-icon-element: 100%;
@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
+@margin-taboption: @margin-dialog-bar-button-framed;
@border-default: @border-width-default solid @border-color-default;
@border-disabled: @border-width-default solid @border-color-disabled;
@@ -128,8 +129,10 @@
@padding-input-text: @padding-top-default @padding-horizontal-input-text
@padding-bottom-default;
@padding-menu: @padding-top-menu @padding-horizontal-default
@padding-bottom-menu;
@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-default (
@padding-bottom-menu * 1.5 );
+@padding-taboption: @padding-top-default @padding-horizontal-taboption
@padding-bottom-default;
@padding-horizontal-default: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`12px`
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`13px`;
@padding-horizontal-default = @border-width-default
@padding-vertical-label: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.3125em`≈`4px`
@padding-top-default: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
// equals `0.625em`≈`8px`
@padding-top-icon-indicator: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e0a7440..0e77e8b 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1498,17 +1498,28 @@
.theme-oo-ui-tabOptionWidget () {
color: @color-default;
- margin: 0.5em 0 0 0.75em;
- border: 1px solid transparent;
- border-bottom: 0;
+ margin: @margin-taboption 0 0 @margin-taboption;
+ border-color: transparent;
+ border-style: @border-style-default;
+ border-width: @border-width-default @border-width-default 0
@border-width-default;
border-top-left-radius: @border-radius-default;
border-top-right-radius: @border-radius-default;
- padding: 0.35em 1em;
+ padding: @padding-taboption;
font-weight: bold;
+ line-height: @line-height-reset;
.oo-ui-transition(
background-color @transition-ease-quick,
color @transition-ease-quick
);
+
+ &.oo-ui-optionWidget-selected {
+ background-color: @background-color-default;
+ color: @color-default-active;
+ }
+
+ .oo-ui-labelElement-label {
+ line-height: @line-height-widget-singleline;
+ }
&.oo-ui-widget-enabled {
&:hover {
@@ -1518,21 +1529,10 @@
&:active {
background-color: rgba( 255, 255, 255, 0.8 );
}
- }
- &.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
- }
-
- .oo-ui-selectWidget-pressed &.oo-ui-optionWidget-selected,
- .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected,
- &.oo-ui-optionWidget-selected:hover {
- background-color: @background-color-default;
- color: @color-default-active;
+ &.oo-ui-optionWidget-selected:hover {
+ background-color: @background-color-default;
+ }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/349865
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6fa788a14325a50dfa2a36201d31b4786e736fa2
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
