# Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader, then applies it to the
# KSS style guide
$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
- @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP)
+ @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP)
@node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template
@rm $(KSS_RL_TMP)
$out = $this->getOutput();
$out->allowClickjacking();
$out->addModuleStyles( array(
- 'mediawiki.special', 'mediawiki.special.search', 'mediawiki.ui', 'mediawiki.ui.button'
+ 'mediawiki.special', 'mediawiki.special.search', 'mediawiki.ui', 'mediawiki.ui.button',
+ 'mediawiki.ui.input',
) );
// Strip underscores from title parameter; most of the time we'll want
'id' => $this->profile === 'advanced' ? 'powerSearchText' : 'searchText',
'size' => '50',
'autofocus',
- 'class' => 'mw-ui-input',
+ 'class' => 'mw-ui-input mw-ui-input-inline',
) ) . "\n";
$out .= Html::hidden( 'fulltext', 'Search' ) . "\n";
$out .= Xml::submitButton(
$out->addModuleStyles( array(
'mediawiki.ui',
'mediawiki.ui.button',
+ 'mediawiki.ui.input',
'mediawiki.special.userlogin.common.styles'
) );
$out->addModules( array(
</label>
<?php
echo Html::input( 'wpName', $this->data['name'], 'text', array(
- 'class' => 'mw-input loginText',
+ 'class' => 'mw-ui-input loginText',
'id' => 'wpName2',
'tabindex' => '1',
'size' => '20',
<label for='wpPassword2'><?php $this->msg( 'userlogin-yourpassword' ); ?></label>
<?php
echo Html::input( 'wpPassword', null, 'password', array(
- 'class' => 'mw-input loginPassword',
+ 'class' => 'mw-ui-input loginPassword',
'id' => 'wpPassword2',
'tabindex' => '3',
'size' => '20',
?>
<div class="mw-ui-vform-field" id="mw-user-domain-section">
<label for="wpDomain"><?php $this->msg( 'yourdomainname' ); ?></label>
- <div class="mw-input">
+ <div>
<?php echo $select->getHTML(); ?>
</div>
</div>
<label for='wpRetype'><?php $this->msg( 'createacct-yourpasswordagain' ); ?></label>
<?php
echo Html::input( 'wpRetype', null, 'password', array(
- 'class' => 'mw-input loginPassword',
+ 'class' => 'mw-ui-input loginPassword',
'id' => 'wpRetype',
'tabindex' => '5',
'size' => '20',
</label>
<?php
echo Html::input( 'wpEmail', $this->data['email'], 'email', array(
- 'class' => 'mw-input loginText',
+ 'class' => 'mw-ui-input loginText',
'id' => 'wpEmail',
'tabindex' => '6',
'size' => '20',
<?php if ( $this->data['userealname'] ) { ?>
<div class="mw-ui-vform-field">
<label for='wpRealName'><?php $this->msg( 'createacct-realname' ); ?></label>
- <input type='text' class='mw-input loginText' name="wpRealName" id="wpRealName"
+ <input type='text' class='mw-ui-input loginText' name="wpRealName" id="wpRealName"
tabindex="7"
value="<?php $this->text( 'realname' ); ?>" size='20' />
<div class="prefsectiontip">
<div class="mw-ui-vform-field">
<label for='wpReason'><?php $this->msg( 'createacct-reason' ); ?></label>
<?php echo Html::input( 'wpReason', $this->data['reason'], 'text', array(
- 'class' => 'mw-input loginText',
+ 'class' => 'mw-ui-input loginText',
'id' => 'wpReason',
'tabindex' => '8',
'size' => '20',
<?php } ?>
<input
type="<?php echo htmlspecialchars( $inputItem['type'] ); ?>"
- class="mw-input"
+ class="mw-ui-input"
name="<?php echo htmlspecialchars( $inputItem['name'] ); ?>"
tabindex="<?php echo $tabIndex++; ?>"
value="<?php echo htmlspecialchars( $inputItem['value'] ); ?>"
<?php
$extraAttrs = array();
echo Html::input( 'wpName', $this->data['name'], 'text', array(
- 'class' => 'loginText',
+ 'class' => 'loginText mw-ui-input',
'id' => 'wpName1',
'tabindex' => '1',
'size' => '20',
</label>
<?php
echo Html::input( 'wpPassword', null, 'password', array(
- 'class' => 'loginPassword',
+ 'class' => 'loginPassword mw-ui-input',
'id' => 'wpPassword1',
'tabindex' => '2',
'size' => '20',
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
+ 'mediawiki.ui.input' => array(
+ 'styles' => array(
+ 'resources/src/mediawiki.ui/components/inputs.less',
+ ),
+ 'position' => 'top',
+ 'targets' => array( 'desktop', 'mobile' ),
+ ),
/* es5-shim */
'es5-shim' => array(
// ----------------------------------------------------------------------------
// Form styling mixins
// ----------------------------------------------------------------------------
-
-// Font is not included.
-.agora-field-styling() {
-
- border: 1px solid @colorFieldBorder;
-
- &:focus {
- // Styling focus of native checkboxes etc on Mac is almost impossible.
- &:not([type=checkbox]):not([type=radio]) {
- outline: 0; // Removes OS field focus
- }
-
- box-shadow: lighten(@colorProgressive, 6%) 0 0 5px;
-
- border-color: lighten(@colorProgressive, 6%);
- }
-
- color: @colorText;
- padding: 0.35em 0.5em 0.35em 0.5em;
-
- // Ensure that buttons and inputs are nicely aligned when they have differing heights
- vertical-align: middle;
-}
-
.agora-label-styling() {
font-size: 0.9em;
color: @colorText;
// VForm
//
// Style a compact vertical stacked form ("VForm") and the elements in divs
-// within it. See button section on guidance of how and when to use mw-ui-constructive.
+// within it. See button and inputs section on guidance of how and when to use them.
//
// Markup:
// <form class="mw-ui-vform">
// <div class="mw-ui-vform-field">This is a form example.</div>
// <div class="mw-ui-vform-field">
// <label>Username </label>
-// <input value="input">
+// <input class="mw-ui-input" value="input">
// </div>
// <div class="mw-ui-vform-field">
// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
width: @defaultFormWidth;
// MW currently doesn't use the type attribute everywhere on inputs.
- input,
select,
.mw-ui-button {
display: block;
width: 100%;
}
- // We exclude buttons because they'll generally use mw-ui-button.
- // Otherwise, we'll unintentionally override that.
- input:not([type=button]):not([type=submit]):not([type=file]) {
- .agora-field-styling(); // mixins/forms.less
- }
-
// Give dropdown lists the same spacing as input fields for consistency.
// Values taken from .agora-field-styling() in mixins/form.less
select {
margin: 0 0 15px;
padding: 0;
width: 100%;
-
- input {
- font-size: 1em;
- line-height: 1.4;
- }
-}
-
-// 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 {
- .agora-field-styling(); // mixins/forms.less
- font-size: 1em;
- line-height: 1.4em;
}
// Apply mw-ui-label to individual elements to style them.
--- /dev/null
+// Inputs
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Placeholder text styling helper
+.field-placeholder-styling() {
+ font-style: italic;
+ font-weight: normal;
+}
+// Inputs
+//
+// When using an input or textarea apply the mw-ui-input class.
+//
+// Styleguide 1.
+
+// mw-ui-input
+//
+// Style an input using MediaWiki UI.
+// Currently in draft status and subject to change.
+// When focused a progressive highlight appears to the left of the field.
+//
+// Markup:
+// <input value="input" class="mw-ui-input" value="input">
+// <textarea class="mw-ui-input">textarea</textarea>
+//
+// Styleguide 1.1.
+.mw-ui-input {
+ // turn off default input styling for input[type="search"] fields
+ -webkit-appearance: none;
+ border: 1px solid @colorFieldBorder;
+ .box-sizing(border-box);
+ width: 100%;
+ padding: .3em .3em .3em .6em;
+ display: block;
+ // Override user agent stylesheet properties. Instead use parent element.
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ .transition(~"border linear .2s, box-shadow linear .2s");
+
+ // Placeholder text styling must be set individually for each browser @winter
+ &::-webkit-input-placeholder { // webkit
+ .field-placeholder-styling;
+ }
+ &::-moz-placeholder { // FF 4-18
+ .field-placeholder-styling;
+ }
+ &:-moz-placeholder { // FF >= 19
+ .field-placeholder-styling;
+ }
+ &:-ms-input-placeholder { // IE >= 10
+ .field-placeholder-styling;
+ }
+
+ &:focus {
+ box-shadow: inset .45em 0 0 #5088f7;
+ border-color: @colorGrayDark;
+ // Remove focus glow on input[type="search"]
+ outline: 0;
+ }
+}
+
+textarea.mw-ui-input {
+ min-height: 8em;
+}
+
+// mw-ui-input-inline
+//
+// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input.
+//
+// Markup:
+// <input value="input" class="mw-ui-input mw-ui-input-inline" value="input">
+// <button class="mw-ui-button mw-ui-constructive">go</button>
+//
+// Styleguide 1.2.
+.mw-ui-input-inline {
+ display: inline-block;
+ width: auto;
+}
+
+// mw-ui-input-large
+//
+// Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you
+// want to draw more attention to one instance. For example add topic / reply to post forms.
+// Currently in draft status and subject to change. When used on an input, the text is styled
+// in a large font. When used alongside another mw-ui-input large they are pushed together to seem like
+// one contiguous input.
+//
+// Markup:
+// <input value="input" class="mw-ui-input mw-ui-input-large" value="input">
+// <textarea class="mw-ui-input mw-ui-input-large">textarea</textarea>
+//
+// Styleguide 1.3.
+.mw-ui-input-large {
+ margin-top: 0;
+ margin-bottom: 0;
+ & + .mw-ui-input-large {
+ border-top-width: 0;
+ }
+}
+
+input.mw-ui-input-large {
+ font-size: 1.75em;
+ font-weight: bold;
+ line-height: 1.25em;
+}
dépôts / lhc / web / wiklou.git / commitdiff