Mattflaschen has submitted this change and it was merged.
Change subject: Clean up, comments, remove obsolete mw-ui-formlist
......................................................................
Clean up, comments, remove obsolete mw-ui-formlist
* Remove obsolete ".mw-ui-formlist div label" selector, replaced by
".mw-ui-vform > div label".
* Rename mw-ui-block-label to mw-ui-label since it doesn't impose
block styling.
* Remove overspecified ".mw-ui-vform > div label.mw-ui-checkbox-label"
selectors, since the bare class applies the same styling.
Also in the CSS for the vertical forms,
* reduce the margin-bottom of #languagelinks
* allow word wrap to break words in the errorbox (bug 46966).
Backported from master for new opt-in Create account form.
Change-Id: I03bdf3b1c50be732435e10193f004230a6a3bacf
(cherry picked from commit caac580ffd177a6eea0c246c4b91f74b6aa3f54f)
---
M resources/mediawiki.special/mediawiki.special.vforms.css
M resources/mediawiki.ui/mediawiki.ui.default.css
M resources/mediawiki.ui/mediawiki.ui.vector.css
M resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
4 files changed, 39 insertions(+), 75 deletions(-)
Approvals:
Spage: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css
b/resources/mediawiki.special/mediawiki.special.vforms.css
index db947a9..d9b950b 100644
--- a/resources/mediawiki.special/mediawiki.special.vforms.css
+++ b/resources/mediawiki.special/mediawiki.special.vforms.css
@@ -12,7 +12,7 @@
/* Reposition and resize language links, which appear on a per-wiki basis */
.mw-ui-container #languagelinks {
- margin-bottom: 3em;
+ margin-bottom: 2em;
font-size: 0.8em;
}
@@ -34,4 +34,5 @@
border: 1px solid #fac5c5;
background-color: #fae3e3;
text-shadow: 0 1px #fae3e3;
+ word-wrap: break-word;
}
diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css
b/resources/mediawiki.ui/mediawiki.ui.default.css
index 0e0b40e..2568f5a 100644
--- a/resources/mediawiki.ui/mediawiki.ui.default.css
+++ b/resources/mediawiki.ui/mediawiki.ui.default.css
@@ -128,21 +128,21 @@
border-bottom-right-radius: 3px;
}
-/* line 12, sourcefiles/scss/components/default/_forms.scss */
+/* line 14, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 290px;
}
-/* line 17, sourcefiles/scss/components/default/_forms.scss */
+/* line 19, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 26, sourcefiles/scss/components/default/_forms.scss */
+/* line 28, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div label,
.mw-ui-vform > div .mw-ui-button {
@@ -153,7 +153,7 @@
margin: 0;
width: 100%;
}
-/* line 33, sourcefiles/scss/components/default/_forms.scss */
+/* line 35, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input {
outline: 0;
border-style: solid;
@@ -167,7 +167,7 @@
box-shadow: #4091ed 0px 0px 5px;
border-color: #4091ed;
}
-/* line 37, sourcefiles/scss/components/default/_forms.scss */
+/* line 39, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div label {
font-size: 0.9em;
color: #7d7d7d;
@@ -179,26 +179,7 @@
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 44, sourcefiles/scss/components/default/_forms.scss */
-.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div
label.mw-ui-radio-label {
- margin-bottom: 0.5em;
- cursor: pointer;
- vertical-align: bottom;
- line-height: normal;
- font-weight: normal;
-}
-/* line 50, sourcefiles/scss/mixins/_forms.scss */
-.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] {
- width: auto;
- height: auto;
- margin: 0 0.1em 0em 0;
- padding: 0;
- border-style: solid;
- border-width: 1px;
- border-color: #c9c9c9;
- cursor: pointer;
-}
-/* line 51, sourcefiles/scss/components/default/_forms.scss */
+/* line 49, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -208,7 +189,7 @@
width: auto;
}
-/* line 66, sourcefiles/scss/components/default/_forms.scss */
+/* line 65, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-input {
outline: 0;
border-style: solid;
@@ -223,17 +204,17 @@
border-color: #4091ed;
}
-/* line 71, sourcefiles/scss/components/default/_forms.scss */
-.mw-ui-block-label, .mw-ui-formlist div label {
+/* line 72, sourcefiles/scss/components/default/_forms.scss */
+.mw-ui-label {
font-size: 0.9em;
color: #7d7d7d;
}
/* line 34, sourcefiles/scss/mixins/_forms.scss */
-.mw-ui-block-label *, .mw-ui-formlist div label * {
+.mw-ui-label * {
font-weight: normal;
}
-/* line 80, sourcefiles/scss/components/default/_forms.scss */
+/* line 81, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css
b/resources/mediawiki.ui/mediawiki.ui.vector.css
index b830649..fd1ed47 100644
--- a/resources/mediawiki.ui/mediawiki.ui.vector.css
+++ b/resources/mediawiki.ui/mediawiki.ui.vector.css
@@ -257,21 +257,21 @@
text-shadow: none;
}
-/* line 12, sourcefiles/scss/components/default/_forms.scss */
+/* line 14, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 290px;
}
-/* line 17, sourcefiles/scss/components/default/_forms.scss */
+/* line 19, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 26, sourcefiles/scss/components/default/_forms.scss */
+/* line 28, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div label,
.mw-ui-vform > div .mw-ui-button {
@@ -282,7 +282,7 @@
margin: 0;
width: 100%;
}
-/* line 33, sourcefiles/scss/components/default/_forms.scss */
+/* line 35, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input {
outline: 0;
border-style: solid;
@@ -296,7 +296,7 @@
box-shadow: #4091ed 0px 0px 5px;
border-color: #4091ed;
}
-/* line 37, sourcefiles/scss/components/default/_forms.scss */
+/* line 39, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div label {
font-size: 0.9em;
color: #7d7d7d;
@@ -308,26 +308,7 @@
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 44, sourcefiles/scss/components/default/_forms.scss */
-.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div
label.mw-ui-radio-label {
- margin-bottom: 0.5em;
- cursor: pointer;
- vertical-align: bottom;
- line-height: normal;
- font-weight: normal;
-}
-/* line 50, sourcefiles/scss/mixins/_forms.scss */
-.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] {
- width: auto;
- height: auto;
- margin: 0 0.1em 0em 0;
- padding: 0;
- border-style: solid;
- border-width: 1px;
- border-color: #c9c9c9;
- cursor: pointer;
-}
-/* line 51, sourcefiles/scss/components/default/_forms.scss */
+/* line 49, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -337,7 +318,7 @@
width: auto;
}
-/* line 66, sourcefiles/scss/components/default/_forms.scss */
+/* line 65, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-input {
outline: 0;
border-style: solid;
@@ -352,17 +333,17 @@
border-color: #4091ed;
}
-/* line 71, sourcefiles/scss/components/default/_forms.scss */
-.mw-ui-block-label, .mw-ui-formlist div label {
+/* line 72, sourcefiles/scss/components/default/_forms.scss */
+.mw-ui-label {
font-size: 0.9em;
color: #7d7d7d;
}
/* line 34, sourcefiles/scss/mixins/_forms.scss */
-.mw-ui-block-label *, .mw-ui-formlist div label * {
+.mw-ui-label * {
font-weight: normal;
}
-/* line 80, sourcefiles/scss/components/default/_forms.scss */
+/* line 81, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
diff --git
a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
index 440669e..86a891a 100644
--- a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
+++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
@@ -5,10 +5,12 @@
// --------------------------------------------------------------------------
// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
-// 'vform' stacked div design, the form can't be narrower than this.
+// 'VForm' design, the form can't be narrower than this.
$captchaContainerWidth: 290px;
$defaultFormWidth: $captchaContainerWidth;
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it.
.mw-ui-vform {
@include box-sizing(border-box);
@@ -20,7 +22,7 @@
padding: 0;
width: 100%;
- // MW currently doesn't use the type attribute everywhere on inputs
+ // MW currently doesn't use the type attribute everywhere on inputs.
input,
label,
.mw-ui-button {
@@ -40,13 +42,9 @@
width: auto;
margin: 0 0 0.2em 0;
padding: 0;
-
- &.mw-ui-checkbox-label, &.mw-ui-radio-label {
- @include agora-inline-label-styling;
- }
}
- // Override the above styling just for checkboxes and radio inputs
+ // Override input styling just for checkboxes and radio inputs.
input[type="checkbox"],
input[type="radio"] {
display: inline;
@@ -61,22 +59,25 @@
// Elements
// --------------------------------------------------------------------------
-// Apply mw-ui-input to fields individually to style them
-// You don't need to use this if <input> is within a Agora form container
+// Apply mw-ui-input to individual input fields to style them.
+// You generally don't need to use this class if <input> is within an Agora
+// form container such as mw-ui-vform
.mw-ui-input {
@include agora-field-styling; // mixins/_forms.scss
}
-// Default label styling is mw-ui-block-label
-.mw-ui-block-label, .mw-ui-formlist div label {
+// Apply mw-ui-label to individual elements to style them.
+// You generally don't need to use this class if <label> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-label {
@include agora-label-styling; // mixins/_forms.scss
}
-// Checkbox and radio button label alignment hack
+// Nesting an input checkbox or radio button inside a label with this class
+// improves alignment, e.g.
// <label class="mw-ui-checkbox-label">
-// <input type="checkbox" />Label
+// <input type="checkbox">The label text
// </label>
-
.mw-ui-checkbox-label, .mw-ui-radio-label {
@include agora-inline-label-styling;
}
--
To view, visit https://gerrit.wikimedia.org/r/60739
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I03bdf3b1c50be732435e10193f004230a6a3bacf
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: wmf/1.22wmf2
Gerrit-Owner: Spage <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
