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).

Change-Id: I03bdf3b1c50be732435e10193f004230a6a3bacf

diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css b/resources/mediawiki.special/mediawiki.special.vforms.css
index db947a9..d9b950b 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 @@ $defaultFormWidth: $captchaContainerWidth;
         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 @@ $defaultFormWidth: $captchaContainerWidth;
             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 @@ $defaultFormWidth: $captchaContainerWidth;
 // 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;
 }