wikimedia/mediawiki-extensions-InputBox
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/InputBox synced 2024-11-23 22:54:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-InputBox/resources/ext.inputBox.styles.less

30 lines
582 B
Plaintext
Raw Normal View History

Use native <input required> instead of JS-based disabled toggling Remove the JavaScript module and its logic to toggle the disabled state on the submit button. Instead, let the browser handle this natively by setting the `required` attribute, which naturally prevents early submissions. Retain the current styling for 99% of cases by using the :required:invalid selector to target the submit button to make it appear disabled. This slight duplication of styles is needed because, despite the form effectively being disabled natively, the core mediawiki-ui styles only account for :disabled on the button directly and not e.g. inherited via form:invalid. It is also unclear whether we would want that, since there is some value to be had from having the form give a consistent look with a progressive button that can be submitted even at the wrong time to yield an assistive message to the required field, so hence handling this locally for now instead of with a generalised approach. In order to use the required true/false idiom, I have switched the generating of the HTML string from the old Xml::element method to Html::element. This means there is no need to store it in an array first and conditionally set it since true/false will result in absence or required="" as needed. As side-effect from this, redundant attributes like value="" and type="text" are ommitted from the output, just as MediaWiki core does more generally. Bug: T283303 Change-Id: I2c75e09dd3f89fa11fca311b4e1f8133946b01b1
2021-05-21 02:03:06 +00:00
@import 'mediawiki.ui/variables.less';
.mw-inputbox-centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.mw-inputbox-inline {
display: inline;
}
.mw-inputbox-element {
Use // comments in LESS Change-Id: Ie0011ba2d4d280302613c2ebc8d9d34dde82a0fe
2021-10-16 19:24:22 +00:00
// important is needed to overwrite display:table from mw-ui checkbox
Use native <input required> instead of JS-based disabled toggling Remove the JavaScript module and its logic to toggle the disabled state on the submit button. Instead, let the browser handle this natively by setting the `required` attribute, which naturally prevents early submissions. Retain the current styling for 99% of cases by using the :required:invalid selector to target the submit button to make it appear disabled. This slight duplication of styles is needed because, despite the form effectively being disabled natively, the core mediawiki-ui styles only account for :disabled on the button directly and not e.g. inherited via form:invalid. It is also unclear whether we would want that, since there is some value to be had from having the form give a consistent look with a progressive button that can be submitted even at the wrong time to yield an assistive message to the required field, so hence handling this locally for now instead of with a generalised approach. In order to use the required true/false idiom, I have switched the generating of the HTML string from the old Xml::element method to Html::element. This means there is no need to store it in an array first and conditionally set it since true/false will result in absence or required="" as needed. As side-effect from this, redundant attributes like value="" and type="text" are ommitted from the output, just as MediaWiki core does more generally. Bug: T283303 Change-Id: I2c75e09dd3f89fa11fca311b4e1f8133946b01b1
2021-05-21 02:03:06 +00:00
display: inline-table !important;
white-space: nowrap;
}
.mw-inputbox-input {
margin-bottom: 0.5em;
}
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button {
Use // comments in LESS Change-Id: Ie0011ba2d4d280302613c2ebc8d9d34dde82a0fe
2021-10-16 19:24:22 +00:00
// appear like .mw-ui-input:disabled
Use native <input required> instead of JS-based disabled toggling Remove the JavaScript module and its logic to toggle the disabled state on the submit button. Instead, let the browser handle this natively by setting the `required` attribute, which naturally prevents early submissions. Retain the current styling for 99% of cases by using the :required:invalid selector to target the submit button to make it appear disabled. This slight duplication of styles is needed because, despite the form effectively being disabled natively, the core mediawiki-ui styles only account for :disabled on the button directly and not e.g. inherited via form:invalid. It is also unclear whether we would want that, since there is some value to be had from having the form give a consistent look with a progressive button that can be submitted even at the wrong time to yield an assistive message to the required field, so hence handling this locally for now instead of with a generalised approach. In order to use the required true/false idiom, I have switched the generating of the HTML string from the old Xml::element method to Html::element. This means there is no need to store it in an array first and conditionally set it since true/false will result in absence or required="" as needed. As side-effect from this, redundant attributes like value="" and type="text" are ommitted from the output, just as MediaWiki core does more generally. Bug: T283303 Change-Id: I2c75e09dd3f89fa11fca311b4e1f8133946b01b1
2021-05-21 02:03:06 +00:00
background-color: @colorGray12;
color: @color-base--inverted;
border-color: @colorGray12;
cursor: default;
}
Reference in a new issue Copy permalink