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

29 lines
555 B
Plaintext
Raw Normal View History

styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' @import with new skin-aware 'mediawiki.skin.variables.less' standard. Also - replacing several static values with new Codex design token featuring skin variables. Bump to required MediaWiki core version >= v1.41.0. Bug: T332541 Change-Id: I1ba1bed9b4f5d49014d2e51c116df8b0f320b949
2023-03-29 21:03:54 +00:00
@import 'mediawiki.skin.variables.less';
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
.mw-inputbox-centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.mw-inputbox-inline {
display: inline;
}
Remove an !important and use classdoubling instead !important creates unnecessarily high specificity Change-Id: Ia7abc6847d9c77fe1e68277ed0246fde623d9336
2021-12-05 21:43:09 +00:00
.mw-inputbox-element.mw-inputbox-element {
display: inline-table;
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
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
styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' @import with new skin-aware 'mediawiki.skin.variables.less' standard. Also - replacing several static values with new Codex design token featuring skin variables. Bump to required MediaWiki core version >= v1.41.0. Bug: T332541 Change-Id: I1ba1bed9b4f5d49014d2e51c116df8b0f320b949
2023-03-29 21:03:54 +00:00
background-color: @background-color-disabled;
color: @color-inverted;
border-color: @border-color-disabled;
cursor: @cursor-base--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
}
Reference in a new issue Copy permalink