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

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