jenkins-bot has submitted this change and it was merged.
Change subject: Provide default margins for buttons and other widgets
......................................................................
Provide default margins for buttons and other widgets
Avoid bunching when the widgets are used inline.
* ButtonWidget
* ButtonGroupWidget
* ButtonSelectWidget
* ToggleSwitchWidget
* DropdownWidget
* ComboBoxWidget
* InputWidget (and subclasses)
Introduces new .oo-ui-inline-spacing() LESS mixin.
Bug: T76643
Change-Id: Ib062190b631972c7aca76ba615d8b1840be72b84
---
M src/styles/common.less
M src/themes/apex/layouts.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/layouts.less
M src/themes/mediawiki/widgets.less
5 files changed, 50 insertions(+), 13 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/styles/common.less b/src/styles/common.less
index d0dc08a..436c4e0 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -110,3 +110,10 @@
-ms-user-select: all;
user-select: all;
}
+
+.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
+ margin-right: @spacing;
+ &:last-child {
+ margin-right: @cancelled-spacing;
+ }
+}
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index f946bda..2939c51 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -55,6 +55,8 @@
}
> .oo-ui-popupButtonWidget {
+ .oo-ui-inline-spacing(0);
+
> .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
margin-top: 0.25em;
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 6a767bb..14f6cd3 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -30,6 +30,11 @@
white-space: nowrap;
border-radius: 0.3em;
+ .oo-ui-inline-spacing(0.5em);
+ .oo-ui-buttonWidget {
+ .oo-ui-inline-spacing(0);
+ }
+
.oo-ui-buttonElement-framed {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -49,7 +54,9 @@
}
}
-.theme-oo-ui-buttonWidget () {}
+.theme-oo-ui-buttonWidget () {
+ .oo-ui-inline-spacing(0.5em);
+}
.theme-oo-ui-actionWidget () {
&.oo-ui-pendingElement-pending {
@@ -97,6 +104,8 @@
margin: 0.25em 0;
width: 100%;
max-width: 50em;
+
+ .oo-ui-inline-spacing(0.5em);
&-handle {
height: 2.5em;
@@ -150,7 +159,9 @@
}
}
-.theme-oo-ui-inputWidget () {}
+.theme-oo-ui-inputWidget () {
+ .oo-ui-inline-spacing(0.5em);
+}
.theme-oo-ui-checkboxInputWidget () {}
@@ -174,7 +185,7 @@
outline: none;
}
}
-
+
&.oo-ui-widget-disabled {
select {
color: #ccc;
@@ -280,6 +291,8 @@
width: 100%;
max-width: 50em;
+ .oo-ui-inline-spacing(0.5em);
+
&-handle {
border: solid 1px rgba(0,0,0,0.1);
border-radius: 0.25em;
@@ -382,10 +395,6 @@
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- > .oo-ui-labelElement-label {
- padding: 0 0.5em;
}
}
@@ -551,6 +560,8 @@
.theme-oo-ui-buttonSelectWidget () {
border-radius: 0.3em;
+ .oo-ui-inline-spacing(0.5em);
+
.oo-ui-buttonOptionWidget {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -594,6 +605,8 @@
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
border: solid 1px #ccc;
+ .oo-ui-inline-spacing(0.5em);
+
.oo-ui-vertical-gradient(#ddd, #fff);
&.oo-ui-widget-disabled {
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index f946bda..2939c51 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -55,6 +55,8 @@
}
> .oo-ui-popupButtonWidget {
+ .oo-ui-inline-spacing(0);
+
> .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
margin-top: 0.25em;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index da21b65..f931fec 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -30,6 +30,11 @@
white-space: nowrap;
border-radius: @border-radius;
+ .oo-ui-inline-spacing(0.5em);
+ .oo-ui-buttonWidget {
+ .oo-ui-inline-spacing(0);
+ }
+
.oo-ui-buttonElement-framed {
&.oo-ui-buttonElement-active {
.oo-ui-buttonElement-button {
@@ -56,7 +61,9 @@
}
}
-.theme-oo-ui-buttonWidget () {}
+.theme-oo-ui-buttonWidget () {
+ .oo-ui-inline-spacing(0.5em);
+}
.theme-oo-ui-actionWidget () {
&.oo-ui-pendingElement-pending {
@@ -102,6 +109,8 @@
margin: 0.25em 0;
width: 100%;
max-width: 50em;
+
+ .oo-ui-inline-spacing(0.5em);
&-handle {
height: 2.5em;
@@ -158,7 +167,9 @@
}
}
-.theme-oo-ui-inputWidget () {}
+.theme-oo-ui-inputWidget () {
+ .oo-ui-inline-spacing(0.5em);
+}
.theme-oo-ui-checkboxInputWidget () {
position: relative;
@@ -449,6 +460,8 @@
width: 100%;
max-width: 50em;
+ .oo-ui-inline-spacing(0.5em);
+
.oo-ui-textInputWidget {
input,
textarea {
@@ -542,10 +555,6 @@
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- > .oo-ui-labelElement-label {
- padding: 0 0.5em;
}
}
@@ -730,6 +739,8 @@
.theme-oo-ui-buttonSelectWidget () {
border-radius: @border-radius;
+ .oo-ui-inline-spacing(0.5em);
+
.oo-ui-buttonOptionWidget {
&.oo-ui-buttonElement-active {
.oo-ui-buttonElement-button {
@@ -777,6 +788,8 @@
border-radius: 1em;
border: 1px #ddd solid;
+ .oo-ui-inline-spacing(0.5em);
+
&-grip {
top: 0.25em;
left: 0.25em;
--
To view, visit https://gerrit.wikimedia.org/r/185576
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib062190b631972c7aca76ba615d8b1840be72b84
Gerrit-PatchSet: 9
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
