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

   1 @import 'mediawiki.ui/variables';
   2 @import 'mw.rcfilters.mixins.less';
   3
   4 .mw-rcfilters-ui-filterTagMultiselectWidget {
   5         max-width: none;
   6
   7         .oo-ui-tagMultiselectWidget-input input {
   8                 // Make sure this uses the interface direction, not the content direction
   9                 direction: ltr;
  10                 border-bottom-right-radius: 0;
  11                 height: 2.5em;
  12
  13                 .input-placeholder-color( @colorGray5 );
  14         }
  15
  16         &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  17                 border: 1px solid #a2a9b1;
  18                 border-bottom: 0;
  19                 background-color: #f8f9fa;
  20                 border-radius: 2px 2px 0 0;
  21                 padding: 0.6em;
  22                 margin-top: 1em;
  23                 line-height: normal;
  24         }
  25
  26         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
  27                 .transition( background-color 500ms ease-out );
  28         }
  29
  30         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
  31                 background-color: #eaf3ff; // Accent90
  32         }
  33
  34         &-wrapper {
  35                 .mw-rcfilters-ui-table {
  36                         margin-top: 0.3em;
  37                 }
  38
  39                 &-content {
  40                         &-title {
  41                                 font-weight: bold;
  42                                 color: #54595d;
  43                         }
  44
  45                         &-savedQueryTitle {
  46                                 color: #222; // Base10
  47                                 font-weight: bold;
  48                                 vertical-align: top;
  49                                 margin-left: 1em;
  50                                 width: ~'calc( 100% - 10em )';
  51                                 overflow: hidden;
  52                                 text-overflow: ellipsis;
  53                                 white-space: nowrap;
  54                         }
  55                 }
  56         }
  57
  58         &-views {
  59                 &-input {
  60                         width: 100%;
  61                 }
  62
  63                 &-select {
  64                         width: 1em;
  65
  66                         &-widget.oo-ui-widget {
  67                                 border: 1px solid #a2a9b1;
  68                                 border-left-width: 0;
  69                                 border-top-left-radius: 0;
  70                                 border-top-right-radius: 0;
  71                                 border-bottom-left-radius: 0;
  72
  73                                 display: block;
  74                                 text-align: right;
  75                                 height: 2.5em;
  76                                 box-sizing: border-box;
  77
  78                                 .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
  79                                         margin-left: 0;
  80                                 }
  81
  82                                 .oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
  83                                         margin-left: 0;
  84
  85                                         > .oo-ui-buttonElement-button {
  86                                                 color: @colorGray5;
  87                                         }
  88                                 }
  89                         }
  90                 }
  91         }
  92
  93         &-emptyFilters {
  94                 color: #72777d;
  95         }
  96
  97         &-cell-filters {
  98                 width: 100%;
  99
 100                 div.oo-ui-tagMultiselectWidget-group {
 101                         margin-top: 0.2em;
 102                         display: block;
 103                 }
 104         }
 105
 106         &-cell-reset {
 107                 text-align: right;
 108                 padding-left: 0.5em;
 109         }
 110 }