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

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