if ( $this->isStructuredFilterUiEnabled() ) {
$rcfilterContainer = Html::element(
'div',
- [ 'class' => 'rcfilters-container' ]
+ // TODO: Remove deprecated rcfilters-container class
+ [ 'class' => 'rcfilters-container mw-rcfilters-container' ]
);
$loadingContainer = Html::rawElement(
'div',
- [ 'class' => 'rcfilters-spinner' ],
+ [ 'class' => 'mw-rcfilters-spinner' ],
Html::element(
'div',
- [ 'class' => 'rcfilters-spinner-bounce' ]
+ [ 'class' => 'mw-rcfilters-spinner-bounce' ]
)
);
$this->getOutput()->addHTML(
Html::rawElement(
'div',
- [ 'class' => 'rcfilters-head' ],
+ // TODO: Remove deprecated rcfilters-head class
+ [ 'class' => 'rcfilters-head mw-rcfilters-head' ],
$rcfilterContainer . $rcoptions
)
);
if ( $this->isStructuredFilterUiEnabled() ) {
$rcfilterContainer = Html::element(
'div',
- [ 'class' => 'rcfilters-container' ]
+ // TODO: Remove deprecated rcfilters-container class
+ [ 'class' => 'rcfilters-container mw-rcfilters-container' ]
);
$loadingContainer = Html::rawElement(
'div',
- [ 'class' => 'rcfilters-spinner' ],
+ [ 'class' => 'mw-rcfilters-spinner' ],
Html::element(
'div',
- [ 'class' => 'rcfilters-spinner-bounce' ]
+ [ 'class' => 'mw-rcfilters-spinner-bounce' ]
)
);
$this->getOutput()->addHTML(
Html::rawElement(
'div',
- [ 'class' => 'rcfilters-head' ],
+ // TODO: Remove deprecated rcfilters-head class
+ [ 'class' => 'rcfilters-head mw-rcfilters-head' ],
$rcfilterContainer . $form
)
);
@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
-/* stylelint-disable selector-class-pattern */
-
@rcfilters-spinner-size: 12px;
@rcfilters-head-min-height: 210px;
@rcfilters-head-margin-bottom: 20px;
// Corrections for the standard special page
.client-js {
+ /* stylelint-disable-next-line selector-class-pattern */
.cloptions {
border: 0;
}
// Reserve space for the UI while it loads
- .rcfilters-head {
+ .mw-rcfilters-head {
min-height: @rcfilters-head-min-height;
margin-bottom: @rcfilters-head-margin-bottom;
}
// On the watchlist, reserve a bit more
- .mw-special-Watchlist .rcfilters-head {
+ .mw-special-Watchlist .mw-rcfilters-head {
min-height: @rcfilters-wl-head-min-height;
}
.mw-rcfilters-collapsed {
- .rcfilters-head {
+ .mw-rcfilters-head {
min-height: @rcfilters-head-min-height-collapsed;
}
// On the watchlist, reserve a bit more
- &.mw-special-Watchlist .rcfilters-head {
+ &.mw-special-Watchlist .mw-rcfilters-head {
min-height: @rcfilters-wl-head-min-height-collapsed;
}
}
}
}
- .rcfilters-head {
+ .mw-rcfilters-head {
opacity: 0.5;
pointer-events: none;
+ /* stylelint-disable-next-line selector-class-pattern */
.cloptions {
display: none;
}
display: none;
}
+ /* stylelint-disable-next-line selector-class-pattern */
.errorbox {
display: none;
}
opacity: 0.5;
}
- .rcfilters-spinner {
+ .mw-rcfilters-spinner {
display: none;
position: absolute;
left: 50%;
margin-left: -3 * @rcfilters-spinner-size / 2;
white-space: nowrap;
- & .rcfilters-spinner-bounce,
+ & .mw-rcfilters-spinner-bounce,
&:before,
&:after {
content: '';
}
}
- body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
+ body:not( .mw-rcfilters-ui-initialized ) .mw-rcfilters-spinner {
display: block;
// When initializing, display the spinner on top of the area where the UI will appear
margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 1.5;
}
- body.mw-rcfilters-ui-loading .rcfilters-spinner {
+ body.mw-rcfilters-ui-loading .mw-rcfilters-spinner {
display: block;
// When loading new results, display the spinner on top of the results area
margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 8;
// Make the watchlist-details message display while loading, but make it not take up any
// space. This makes the min-height trick work better.
+ /* stylelint-disable-next-line selector-class-pattern */
.watchlistDetails {
float: left;
// The 20em should match the min-width we are setting up