Merge "resourceloader: Convert ImageModule test to stricter unit test"

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
index 6fa3aa2..75da5dd 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.ui/variables';
+
 .mw-rcfilters-ui-watchlistTopSectionWidget {
        &-watchlistDetails {
                width: 100%;
@@ -5,6 +7,10 @@
 
        &-editWatchlistButton {
                vertical-align: bottom;
+               // Match the width that we are setting up for the loading
+               // of the .watchlistDetails in mw.rcfilters.less
+               min-width: 20em;
+               text-align: right;
 
                // actual button
                .oo-ui-buttonWidget {
@@ -22,6 +28,22 @@
 
        &-separator {
                margin-top: 1em;
-               border-top: 2px solid #eaecf0; // Base80 AAA
+               border-top: 2px solid @colorGray14;
+       }
+}
+
+// On small screens, remove the table properties from the
+// top section. T225127#5518870
+@media screen and ( max-width: @width-breakpoint-tablet ) {
+       .mw-rcfilters-ui-watchlistTopSectionWidget {
+               .mw-rcfilters-ui-table,
+               .mw-rcfilters-ui-row,
+               .mw-rcfilters-ui-cell {
+                       display: block;
+               }
+
+               &-editWatchlistButton {
+                       margin-top: 1em;
+               }
        }
 }