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

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