resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3 @import 'mw.rcfilters.variables';
   4
   5 .mw-rcfilters-ui-filterTagMultiselectWidget {
   6         max-width: none;
   7
   8         .oo-ui-tagMultiselectWidget-input input {
   9                 // Make sure this uses the interface direction, not the content direction
  10                 direction: ltr;
  11                 border-bottom-right-radius: 0;
  12                 height: 2.5em;
  13         }
  14
  15         &.oo-ui-widget-enabled {
  16                 .oo-ui-tagMultiselectWidget-handle {
  17                         border: 1px solid @colorGray10;
  18                         border-bottom: 0;
  19                         background-color: @colorGray15;
  20                         border-radius: 2px 2px 0 0;
  21                         padding: 0 0.6em 0.6em 0.6em;
  22                         margin-top: 1em;
  23                         line-height: normal;
  24                 }
  25
  26                 // Hamburger menu for dropdown.
  27                 .oo-ui-tagMultiselectWidget-input > .oo-ui-icon-menu {
  28                         cursor: pointer;
  29                 }
  30         }
  31
  32         .mw-rcfilters-collapsed & {
  33                 // Taking from the handle, since border-bottom is set on the
  34                 // filters view which is hidden when collapsed
  35                 border-bottom: 1px solid @colorGray10;
  36
  37                 &.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  38                         padding-bottom: 0;
  39                         padding-top: 0;
  40                 }
  41
  42                 .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
  43                         border-left: 1px solid @colorGray10;
  44                 }
  45
  46                 &.oo-ui-tagMultiselectWidget-outlined {
  47                         // per T177206#4271707 we avoid keeping the collapsed element to take the whole width of the screen
  48                         // we are providing enough cues (keeping the labels) for it to be clear that the panel gets compacted
  49                         // to the left and the user not to feel lost with the transition.
  50                         width: unset;
  51                         max-width: 100%;
  52                 }
  53
  54                 // Hide inner elements
  55                 .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
  56                 .mw-rcfilters-ui-filterTagMultiselectWidget-views,
  57                 .mw-rcfilters-ui-filterTagMultiselectWidget-views-input {
  58                         display: none;
  59                 }
  60         }
  61
  62         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
  63                 .transition( background-color 500ms ease-out );
  64         }
  65
  66         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
  67                 background-color: @background-color-primary;
  68         }
  69
  70         &-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
  71                 // Override the OOUI default for buttons
  72                 font-weight: normal;
  73         }
  74
  75         &-wrapper {
  76                 &-top {
  77                         display: flex;
  78                         flex-wrap: nowrap;
  79                         justify-content: space-between;
  80
  81                         &-title {
  82                                 padding: 0.6em 0; // Same top padding as the handle
  83                                 flex: 0 0 auto;
  84                         }
  85
  86                         &-queryName {
  87                                 flex: 1 1 auto;
  88                                 padding: 0.6em 0; // Same top padding as the handle
  89                                 white-space: nowrap;
  90                                 min-width: 0; // This has to be here to enable the text truncation
  91                                 overflow: hidden;
  92                                 text-overflow: ellipsis;
  93                         }
  94
  95                         &-hideshow {
  96                                 flex: 0 0 auto;
  97                                 margin-left: 0.5em;
  98                                 padding-left: 0.5em;
  99                         }
 100                 }
 101
 102                 &-content {
 103                         &-title {
 104                                 font-weight: bold;
 105                                 color: @colorGray5;
 106                                 white-space: nowrap;
 107                         }
 108
 109                         &-savedQueryTitle {
 110                                 color: @colorGray2;
 111                                 padding-left: 1em;
 112                                 font-weight: bold;
 113                                 vertical-align: top;
 114                                 overflow: hidden;
 115                                 text-overflow: ellipsis;
 116                                 white-space: nowrap;
 117                                 // This is necessary for Firefox to be able to
 118                                 // truncate the text. Without this rule, the label
 119                                 // is treated as if it's full-width, and while it is
 120                                 // being truncated with the overflow:hidden,
 121                                 // the ellipses isn't showing properly.
 122                                 // This rule seems to convince Firefox to re-render,
 123                                 // fix the label's width properly, and add the ellipses
 124                                 max-width: 100%;
 125                         }
 126                 }
 127         }
 128
 129         &-views {
 130                 &-input {
 131                         width: 100%;
 132                 }
 133
 134                 &-select {
 135                         &-widget.oo-ui-widget {
 136                                 display: block;
 137                                 .box-sizing( border-box );
 138                                 height: 2.5em;
 139                                 border: 1px solid @colorGray10;
 140                                 border-left-width: 0;
 141                                 border-radius: 0 0 @borderRadius 0;
 142                                 // For `padding-right` using the 'left' value from
 143                                 // .oo-ui-buttonElement-frameless.oo-ui-iconElement >
 144                                 // .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
 145                                 padding-right: 0.35714286em;
 146                                 text-align: right;
 147                                 white-space: nowrap;
 148
 149                                 .oo-ui-buttonOptionWidget:first-child {
 150                                         margin-left: 0;
 151                                 }
 152                         }
 153                 }
 154         }
 155
 156         &-emptyFilters {
 157                 color: @colorGray7;
 158         }
 159
 160         &-cell-filters {
 161                 width: 100%;
 162
 163                 div.oo-ui-tagMultiselectWidget-group {
 164                         margin-top: 0.2em;
 165                         display: block;
 166                 }
 167         }
 168
 169         &-cell-reset {
 170                 text-align: right;
 171                 padding-left: 0.5em;
 172         }
 173 }