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                 line-height: normal;
  21         }
  22
  23         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
  24                 .transition( background-color 500ms ease-out );
  25         }
  26
  27         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
  28                 background-color: #eaf3ff; // Accent90
  29         }
  30
  31         &-wrapper {
  32                 .mw-rcfilters-ui-table {
  33                         margin-top: 0.3em;
  34                 }
  35
  36                 &-content {
  37                         &-title {
  38                                 font-weight: bold;
  39                                 color: #54595d;
  40                         }
  41
  42                         &-savedQueryTitle {
  43                                 color: #222; // Base10
  44                                 font-weight: bold;
  45                                 vertical-align: top;
  46                                 margin-left: 1em;
  47                                 width: ~'calc( 100% - 10em )';
  48                                 overflow: hidden;
  49                                 text-overflow: ellipsis;
  50                                 white-space: nowrap;
  51                         }
  52                 }
  53         }
  54
  55         &-views {
  56                 &-input {
  57                         width: 100%;
  58                 }
  59
  60                 &-select {
  61                         width: 1em;
  62
  63                         &-widget.oo-ui-widget {
  64                                 border: 1px solid #a2a9b1;
  65                                 border-left-width: 0;
  66                                 border-top-left-radius: 0;
  67                                 border-top-right-radius: 0;
  68                                 border-bottom-left-radius: 0;
  69
  70                                 display: block;
  71                                 text-align: right;
  72                                 height: 2.5em;
  73                                 box-sizing: border-box;
  74
  75                                 .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
  76                                         margin-left: 0;
  77                                 }
  78
  79                                 .oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
  80                                         margin-left: 0;
  81                                 }
  82                         }
  83                 }
  84         }
  85
  86         &-emptyFilters {
  87                 color: #72777d;
  88         }
  89
  90         &-cell-filters {
  91                 width: 100%;
  92
  93                 div.oo-ui-tagMultiselectWidget-group {
  94                         margin-top: 0.2em;
  95                         display: block;
  96                 }
  97         }
  98
  99         &-cell-reset {
 100                 text-align: right;
 101                 padding-left: 0.5em;
 102         }
 103 }