rcfilters mobile cleanup

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.RcTopSectionWidget.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
index aca3ea6..19b64b2 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.ui/variables';
+
 .mw-rcfilters-ui-rcTopSectionWidget {
        &-topLinks {
                &-table {
@@ -7,10 +9,6 @@
                &-top {
                        display: block;
                        width: 100%;
-
-                       .mw-recentchanges-toplinks {
-                               margin-bottom: 0.5em;
-                       }
                }
        }
 
@@ -18,27 +16,26 @@
                vertical-align: bottom;
                padding-left: 1em;
        }
+}
 
-       .mw-recentchanges-toplinks {
-               padding: 0 0.5em;
-
-               .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
-                       padding: 0 2.5em 0 0.5em;
+@media screen and ( max-width: @width-breakpoint-tablet ) {
+       .mw-rcfilters-ui-rcTopSectionWidget {
+               & > .mw-rcfilters-ui-table > .mw-rcfilters-ui-row {
+                       display: flex;
+                       flex-wrap: wrap;
                }
 
-               &-title,
-               .mw-collapsible-text {
-                       // Same as the legend
-                       font-size: 0.85em;
+               &-savedLinks {
+                       padding-left: 0;
                }
 
-               &:not( .mw-collapsed ) {
-                       // Same as the legend
-                       border: 1px solid #ddd;
+               &-topLinks-table {
+                       width: auto;
+                       flex-grow: 1;
                }
 
-               body:not( .mw-rcfilters-ui-initialized ) & {
-                       display: none;
+               .mw-rcfilters-ui-table-placeholder {
+                       width: auto;
                }
        }
 }