148e37b2d85b19656f725d1202da22ef558c4e2f
[lhc/web/wiklou.git] / 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-radius: 0 0 @borderRadius 0;
69
70 display: block;
71 text-align: right;
72 height: 2.5em;
73 .box-sizing( border-box );
74
75 .oo-ui-buttonOptionWidget:first-child {
76 margin-left: 0;
77 }
78 }
79 }
80 }
81
82 &-emptyFilters {
83 color: @colorGray7;
84 }
85
86 &-cell-filters {
87 width: 100%;
88
89 div.oo-ui-tagMultiselectWidget-group {
90 margin-top: 0.2em;
91 display: block;
92 }
93 }
94
95 &-cell-reset {
96 text-align: right;
97 padding-left: 0.5em;
98 }
99 }