/* 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;
}
border: 1px solid #fac5c5;
background-color: #fae3e3;
text-shadow: 0 1px #fae3e3;
+ word-wrap: break-word;
}
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 {
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;
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;
.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;
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;
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;
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 {
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;
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;
.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;
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;
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;
// --------------------------------------------------------------------------
// 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);
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 {
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;
// 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;
}