RCFilters: Work around IE11 rendering issues
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.FilterItemWidget.less
index a874416..3d63831 100644 (file)
@@ -1,13 +1,37 @@
-@import "mediawiki.mixins";
+@import 'mediawiki.mixins';
 
 .mw-rcfilters-ui-filterItemWidget {
-       padding-left: 0.5em;
+       padding: 0 0.5em;
        .box-sizing( border-box );
 
+       &:not( :last-child ) {
+               border-bottom: solid 1px #eaecf0; // Base 80 AAA
+       }
+
+       &:hover {
+               background-color: #fbfbfb;
+       }
+
+       .mw-rcfilters-ui-table {
+               padding-top: 0.5em;
+       }
+
+       &-muted {
+               background-color: #f8f9fa; // Base90 AAA
+               .mw-rcfilters-ui-filterItemWidget-label-title,
+               .mw-rcfilters-ui-filterItemWidget-label-desc {
+                       color: #54595d; // Base20 AAA
+               }
+       }
+
+       &-selected {
+               background-color: #eaf3ff; // Accent90 AAA
+       }
+
        &-label {
                &-title {
                        font-weight: bold;
-                       font-size: 1.2em;
+                       font-size: 1.15em;
                        color: #222;
                }
                &-desc {
                }
        }
 
-       .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
-               // Override margin-top and -bottom rules from FieldLayout
-               margin: 0 !important;
+       &-filterCheckbox {
+               .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
+                       // Override margin-top and -bottom rules from FieldLayout
+                       margin: 0 !important; /* stylelint-disable-line declaration-no-important */
+               }
+
+               .oo-ui-checkboxInputWidget {
+                       // Workaround for IE11 rendering issues. T162098
+                       display: block;
+               }
        }
 
-       &-muted {
-               opacity: 0.5;
+       &-highlightButton {
+               width: 4em;
+               padding-left: 1em;
        }
 }