padding: 0.75em;
// TODO: Unify colors with official design palette
color: #54595d;
+ }
+
+ &-header {
border-bottom: 1px solid #c8ccd1;
background: #f8f9fa;
overflow: hidden;
+
+ &-highlight {
+ width: 1em;
+ vertical-align: middle;
+ }
+
+ &-title {
+ width: 100%;
+ vertical-align: middle;
+ }
}
&-noresults {
// TODO: Unify colors with official design palette
color: #666;
}
-
- &-hightlightButton {
- float: right;
- }
}
classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
} );
- this.$label.append( this.highlightButton.$element );
-
this.noResultsLabel = new OO.ui.LabelWidget( {
label: mw.msg( 'rcfilters-filterlist-noresults' ),
classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
this.$element
.addClass( 'mw-rcfilters-ui-filtersListWidget' )
.append(
- this.$label,
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
+ .append( this.$label ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
+ .append( this.highlightButton.$element )
+ )
+ ),
+ // this.$label,
this.$group
.addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
this.noResultsLabel.$element