Page MenuHomeWickedGov Phorge
Files F4103307

mw.rcfilters.ui.FilterTagMultiselectWidget.less
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

mw.rcfilters.ui.FilterTagMultiselectWidget.less
View Options

@import 'mediawiki.skin.variables.less';
@import 'mw.rcfilters.variables.less';
@import 'mediawiki.mixins.less';
.mw-rcfilters-container {
.mw-rcfilters-ui-filterTagMultiselectWidget {
max-width: none;
margin-top: 16px;
.oo-ui-tagMultiselectWidget-input input {
// Make sure this uses the interface direction, not the content direction
direction: ltr;
border-bottom-right-radius: 0;
height: 2.5em;
}
&.oo-ui-widget-enabled {
.oo-ui-tagMultiselectWidget-handle {
background-color: @background-color-interactive-subtle;
border: @border-base;
border-bottom: 0;
border-radius: @border-radius-base @border-radius-base 0 0;
padding: 0 0.6em 0.6em 0.6em;
line-height: normal;
}
// Hamburger menu for dropdown.
.oo-ui-tagMultiselectWidget-input > .oo-ui-icon-menu {
cursor: pointer;
}
}
.mw-rcfilters-collapsed & {
// Taking from the handle, since border-bottom is set on the
// filters view which is hidden when collapsed
border-bottom: @border-base;
&.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
padding-bottom: 0;
padding-top: 0;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
border-left: @border-base;
}
&.oo-ui-tagMultiselectWidget-outlined {
// per T177206#4271707 we avoid keeping the collapsed element to take the whole width of the screen
// we are providing enough cues (keeping the labels) for it to be clear that the panel gets compacted
// to the left and the user not to feel lost with the transition.
width: auto;
max-width: 100%;
}
// Hide inner elements
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
.mw-rcfilters-ui-filterTagMultiselectWidget-views,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input {
display: none;
}
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
transition: background-color 500ms ease-out;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
background-color: @background-color-progressive-subtle;
}
&-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
// Override the OOUI default for buttons
font-weight: normal;
}
&-wrapper {
&-top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
&-title {
padding: 0.6em 0; // Same top padding as the handle
flex: 0 0 auto;
}
&-queryName {
flex: 1 1 auto;
padding: 0.6em 0; // Same top padding as the handle
white-space: nowrap;
min-width: 0; // This has to be here to enable the text truncation
overflow: hidden;
text-overflow: ellipsis;
}
&-hideshow {
flex: 0 0 auto;
margin-left: 0.5em;
padding-left: 0.5em;
}
}
&-content {
&-title {
font-weight: bold;
color: @color-subtle;
white-space: nowrap;
}
&-savedQueryTitle {
color: @color-base;
padding-left: 1em;
font-weight: bold;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// This is necessary for Firefox to be able to
// truncate the text. Without this rule, the label
// is treated as if it's full-width, and while it is
// being truncated with the overflow:hidden,
// the ellipses isn't showing properly.
// This rule seems to convince Firefox to re-render,
// fix the label's width properly, and add the ellipses
max-width: 100%;
}
}
&-filters {
.mw-rcfilters-ui-cell {
align-self: center;
}
}
}
&-views {
&-input {
flex-grow: 1;
}
&-select {
&-widget.oo-ui-widget {
display: block;
box-sizing: border-box;
height: 2.5em;
border: @border-base;
border-left-width: 0;
border-radius: 0 0 @border-radius-base 0;
// For `padding-right` using the 'left' value from
// .oo-ui-buttonElement-frameless.oo-ui-iconElement >
// .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
padding-right: 0.35714286em;
text-align: right;
white-space: nowrap;
.oo-ui-buttonWidget:first-child {
margin-left: 0;
}
}
}
}
&-emptyFilters {
color: @color-subtle;
}
&-cell-filters {
flex-grow: 1;
div.oo-ui-tagMultiselectWidget-group {
margin-top: 0.2em;
display: block;
}
}
&-cell-reset {
text-align: right;
padding-left: 0.5em;
.oo-ui-buttonElement > .oo-ui-buttonElement-button {
// T356467
white-space: normal;
}
}
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 17:54 (3 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
6e/64/c8ea2cfe55ad015f8fd7a9b1da89
Default Alt Text
mw.rcfilters.ui.FilterTagMultiselectWidget.less (4 KB)

Event Timeline