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 .oo-ui-tagMultiselectWidget-handle {
  16                 border: 1px solid @colorGray10;
  17                 border-bottom: 0;
  18                 background-color: @colorGray15;
  19                 border-radius: 2px 2px 0 0;
  20                 padding: 0 0.6em 0.6em 0.6em;
  21                 margin-top: 1em;
  22                 line-height: normal;
  23         }
  24
  25         .mw-rcfilters-collapsed & {
  26                 // Taking from the handle, since border-bottom is set on the
  27                 // filters view which is hidden when collapsed
  28                 border-bottom: 1px solid @colorGray10;
  29
  30                 &.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  31                         padding-bottom: 0;
  32                         padding-top: 0;
  33                 }
  34
  35                 .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
  36                         border-left: 1px solid @colorGray10;
  37                 }
  38
  39                 &.oo-ui-tagMultiselectWidget-outlined {
  40                         width: unset;
  41                         max-width: 100%;
  42                 }
  43
  44                 // Hide inner elements
  45                 .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
  46                 .mw-rcfilters-ui-filterTagMultiselectWidget-views {
  47                         display: none;
  48                 }
  49         }
  50
  51         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
  52                 .transition( background-color 500ms ease-out );
  53         }
  54
  55         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
  56                 background-color: @background-color-primary;
  57         }
  58
  59         &-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
  60                 // Override the OOUI default for buttons
  61                 font-weight: normal;
  62         }
  63
  64         &-wrapper {
  65                 &-top {
  66                         display: flex;
  67                         flex-wrap: nowrap;
  68                         justify-content: space-between;
  69
  70                         &-title {
  71                                 padding: 0.6em 0; // Same top padding as the handle
  72                                 flex: 0 0 auto;
  73                         }
  74                         &-queryName {
  75                                 flex: 1 1 auto;
  76                                 padding: 0.6em 0; // Same top padding as the handle
  77                                 white-space: nowrap;
  78                                 min-width: 0; // This has to be here to enable the text truncation
  79                                 overflow: hidden;
  80                                 text-overflow: ellipsis;
  81                         }
  82
  83                         &-hideshow {
  84                                 flex: 0 0 auto;
  85                                 margin-left: 0.5em;
  86                                 padding-left: 0.5em;
  87                         }
  88                 }
  89
  90                 &-content {
  91                         &-title {
  92                                 font-weight: bold;
  93                                 color: @colorGray5;
  94                                 white-space: nowrap;
  95                         }
  96
  97                         &-savedQueryTitle {
  98                                 color: @colorGray2;
  99                                 padding-left: 1em;
 100                                 font-weight: bold;
 101                                 vertical-align: top;
 102                                 overflow: hidden;
 103                                 text-overflow: ellipsis;
 104                                 white-space: nowrap;
 105                                 // This is necessary for Firefox to be able to
 106                                 // truncate the text. Without this rule, the label
 107                                 // is treated as if it's full-width, and while it is
 108                                 // being truncated with the overflow:hidden,
 109                                 // the ellipses isn't showing properly.
 110                                 // This rule seems to convince Firefox to re-render,
 111                                 // fix the label's width properly, and add the ellipses
 112                                 max-width: 100%;
 113                         }
 114                 }
 115         }
 116
 117         &-views {
 118                 &-input {
 119                         width: 100%;
 120                 }
 121
 122                 &-select {
 123                         width: 1em;
 124
 125                         &-widget.oo-ui-widget {
 126                                 border: 1px solid @colorGray10;
 127                                 border-left-width: 0;
 128                                 border-radius: 0 0 @borderRadius 0;
 129
 130                                 display: block;
 131                                 text-align: right;
 132                                 height: 2.5em;
 133                                 .box-sizing( border-box );
 134
 135                                 .oo-ui-buttonOptionWidget:first-child {
 136                                         margin-left: 0;
 137                                 }
 138                         }
 139                 }
 140         }
 141
 142         &-emptyFilters {
 143                 color: @colorGray7;
 144         }
 145
 146         &-cell-filters {
 147                 width: 100%;
 148
 149                 div.oo-ui-tagMultiselectWidget-group {
 150                         margin-top: 0.2em;
 151                         display: block;
 152                 }
 153         }
 154
 155         &-cell-reset {
 156                 text-align: right;
 157                 padding-left: 0.5em;
 158         }
 159 }