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                         }
  46                 }
  47         }
  48
  49         &-views {
  50                 &-input {
  51                         width: 100%;
  52                 }
  53
  54                 &-select {
  55                         width: 1em;
  56
  57                         &-widget.oo-ui-widget {
  58                                 border: 1px solid #a2a9b1;
  59                                 border-left-width: 0;
  60                                 border-top-left-radius: 0;
  61                                 border-top-right-radius: 0;
  62                                 border-bottom-left-radius: 0;
  63
  64                                 display: block;
  65                                 text-align: right;
  66                                 height: 2.5em;
  67                                 box-sizing: border-box;
  68
  69                                 .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
  70                                         margin-left: 0;
  71                                 }
  72
  73                                 .oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
  74                                         margin-left: 0;
  75                                 }
  76                         }
  77                 }
  78         }
  79
  80         &-emptyFilters {
  81                 color: #72777d;
  82         }
  83
  84         &-cell-filters {
  85                 width: 100%;
  86
  87                 div.oo-ui-tagMultiselectWidget-group {
  88                         margin-top: 0.2em;
  89                         display: block;
  90                 }
  91         }
  92
  93         &-cell-reset {
  94                 text-align: right;
  95                 padding-left: 0.5em;
  96         }
  97 }