Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/185576
Change subject: Provide default margins for buttons and other widgets
......................................................................
Provide default margins for buttons and other widgets
* ButtonWidget
* ButtonGroupWidget
* ButtonSelectWidget
* ToggleSwitchWidget
* DropdownWidget
* ComboBoxWidget
* InputWidget
Avoid bunching when the widgets are used inline.
Bug: T76643
Change-Id: Ib062190b631972c7aca76ba615d8b1840be72b84
---
M src/themes/apex/layouts.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/layouts.less
M src/themes/mediawiki/widgets.less
4 files changed, 77 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/76/185576/1
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index f946bda..4d1137b 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -55,6 +55,10 @@
}
> .oo-ui-popupButtonWidget {
+ &:not(:last-child) {
+ margin-right: 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..433fe17 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -30,6 +30,13 @@
white-space: nowrap;
border-radius: 0.3em;
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+ .oo-ui-buttonWidget:not(:last-child) {
+ margin-right: 0;
+ }
+
.oo-ui-buttonElement-framed {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -49,7 +56,11 @@
}
}
-.theme-oo-ui-buttonWidget () {}
+.theme-oo-ui-buttonWidget () {
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+}
.theme-oo-ui-actionWidget () {
&.oo-ui-pendingElement-pending {
@@ -97,6 +108,10 @@
margin: 0.25em 0;
width: 100%;
max-width: 50em;
+
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
&-handle {
height: 2.5em;
@@ -150,7 +165,11 @@
}
}
-.theme-oo-ui-inputWidget () {}
+.theme-oo-ui-inputWidget () {
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+}
.theme-oo-ui-checkboxInputWidget () {}
@@ -174,7 +193,7 @@
outline: none;
}
}
-
+
&.oo-ui-widget-disabled {
select {
color: #ccc;
@@ -279,6 +298,10 @@
.theme-oo-ui-comboBoxWidget () {
width: 100%;
max-width: 50em;
+
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
&-handle {
border: solid 1px rgba(0,0,0,0.1);
@@ -551,6 +574,10 @@
.theme-oo-ui-buttonSelectWidget () {
border-radius: 0.3em;
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+
.oo-ui-buttonOptionWidget {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -594,6 +621,10 @@
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
border: solid 1px #ccc;
+ &:not(:last-child) {
+ margin-right: 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..4d1137b 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -55,6 +55,10 @@
}
> .oo-ui-popupButtonWidget {
+ &:not(:last-child) {
+ margin-right: 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 baca6af..d6fdc87 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -30,6 +30,13 @@
white-space: nowrap;
border-radius: @border-radius;
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+ .oo-ui-buttonWidget:not(:last-child) {
+ margin-right: 0;
+ }
+
.oo-ui-buttonElement-framed {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -49,7 +56,11 @@
}
}
-.theme-oo-ui-buttonWidget () {}
+.theme-oo-ui-buttonWidget () {
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+}
.theme-oo-ui-actionWidget () {
&.oo-ui-pendingElement-pending {
@@ -95,6 +106,10 @@
margin: 0.25em 0;
width: 100%;
max-width: 50em;
+
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
&-handle {
height: 2.5em;
@@ -151,13 +166,18 @@
}
}
-.theme-oo-ui-inputWidget () {}
+.theme-oo-ui-inputWidget () {
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+}
.theme-oo-ui-checkboxInputWidget () {
position: relative;
line-height: @input-size;
// Prevent the fake span from jumping to the next line of text
white-space: nowrap;
+ margin-right: 0.5em;
* {
font: inherit;
@@ -182,7 +202,6 @@
& + span {
cursor: pointer;
- margin: 0 0.4em;
}
& + span::before {
@@ -269,6 +288,7 @@
line-height: @input-size;
// Prevent the fake span from jumping to the next line of text
white-space: nowrap;
+ margin-right: 0.5em;
* {
font: inherit;
@@ -293,7 +313,6 @@
& + span {
cursor: pointer;
- margin: 0 0.4em;
}
& + span::before {
@@ -442,6 +461,10 @@
.theme-oo-ui-comboBoxWidget () {
width: 100%;
max-width: 50em;
+
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
.oo-ui-textInputWidget {
input,
@@ -726,6 +749,10 @@
.theme-oo-ui-buttonSelectWidget () {
border-radius: @border-radius;
+ &:not(:last-child) {
+ margin-right: 0.5em;
+ }
+
.oo-ui-buttonOptionWidget {
.oo-ui-buttonElement-button {
border-radius: 0;
@@ -769,6 +796,10 @@
border-radius: 1em;
border: 1px #ddd solid;
+ &:not(:last-child) {
+ margin-right: 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: newchange
Gerrit-Change-Id: Ib062190b631972c7aca76ba615d8b1840be72b84
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
