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

77 lines
1.2 KiB
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;
InputBox uses Codex instead of mediawiki ui Bug: T353371 Change-Id: Iedfe34accc0c3469c9391208a1898cb544e896cb
2024-03-09 18:43:32 +00:00
.cdx-checkbox__icon {
text-align: initial;
}
}
.bodySearchWrap {
display: flex;
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-inline {
InputBox uses Codex instead of mediawiki ui Bug: T353371 Change-Id: Iedfe34accc0c3469c9391208a1898cb544e896cb
2024-03-09 18:43:32 +00:00
display: inline-flex;
min-width: auto;
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
}
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;
}
InputBox uses Codex instead of mediawiki ui Bug: T353371 Change-Id: Iedfe34accc0c3469c9391208a1898cb544e896cb
2024-03-09 18:43:32 +00:00
/* Allow support for the size attribute if it was set */
.mw-inputbox-input[ size ],
.mw-inputbox-createbox[ size ] {
width: auto !important;
}
form.mw-inputbox-form-inline {
display: flex;
justify-content: center;
column-gap: 4px;
.cdx-text-input {
min-width: auto !important;
}
}
form.mw-inputbox-form {
line-height: 0.6;
.cdx-text-input {
display: flex;
justify-content: center;
}
.mw-inputbox-label {
display: flex;
align-items: center;
}
.mw-inputbox-inline {
.cdx-text-input {
display: inline-flex;
min-width: auto;
}
}
}
form.createbox {
&:invalid .cdx-button {
// appear like .mw-ui-input:disabled
background-color: @background-color-disabled !important;
color: @color-inverted !important;
border-color: @border-color-disabled !important;
cursor: @cursor-base--disabled !important;
}
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