Define proper breakpoint definitions rather then typing @media (#4860)

CHANGELOG.txt

@@ -19,6 +19,7 @@ Changelog
  * Fix: Allow custom logos of any height in the admin menu (Meteor0id)
  * Fix: Allow nav menu to take up all available space instead of scrolling (Meteor0id)
  * Fix: Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
+ * Fix: Refactor all breakpoint definitions, removing style overlaps (Janneke Janssen)
 
 
 2.3 LTS (23.10.2018)

client/scss/_tools.breakpoints.scss

@@ -1,14 +0,0 @@
-$breakpoint-small: $breakpoint-mobile - 0.0625em;
-$breakpoint-medium: $breakpoint-mobile;
-
-@mixin small {
-    @media only screen and (max-width: $breakpoint-small) {
-        @content;
-    }
-}
-
-@mixin medium {
-    @media only screen and (min-width: $breakpoint-medium) {
-        @content;
-    }
-}

client/scss/_utilities.scss

@@ -3,38 +3,38 @@
     display: none !important;
 }
 
-.u-hidden\@medium {
-    @include medium {
+.u-hidden\@sm {
+    @include media-breakpoint-up(sm) {
         display: none !important;
     }
 }
 
-.u-hidden\@small {
-    @include small {
+.u-hidden\@xs {
+    @include media-breakpoint-down(xs) {
         display: none !important;
     }
 }
 
-.u-inline\@medium {
-    @include medium {
+.u-inline\@sm {
+    @include media-breakpoint-up(sm) {
         display: inline !important;
     }
 }
 
-.u-inline\@small {
-    @include small {
+.u-inline\@xs {
+    @include media-breakpoint-down(xs) {
         display: inline !important;
     }
 }
 
-.u-block\@medium {
-    @include medium {
+.u-block\@sm {
+    @include media-breakpoint-up(sm) {
         display: block !important;
     }
 }
 
-.u-block\@small {
-    @include small {
+.u-block\@xs {
+    @include media-breakpoint-down(xs) {
         display: block !important;
     }
 }

client/scss/styles.scss

@@ -2,7 +2,6 @@
 // Wagtail CMS main stylesheet
 // =============================================================================
 
-@import 'tools.breakpoints';
 @import 'objects';
 @import 'components';
 @import 'utilities';

client/src/components/Explorer/Explorer.scss

@@ -22,7 +22,7 @@ $menu-footer-height: 50px;
     display: flex;
     flex-direction: column;
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         width: 485px;
         height: 100vh;
         position: fixed;
@@ -37,7 +37,7 @@ $menu-footer-height: 50px;
     overflow: hidden;
     background: $c-explorer-bg;
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         box-shadow: 2px 2px 5px $c-explorer-bg-active;
     }
 }
@@ -66,7 +66,7 @@ $menu-footer-height: 50px;
         color: $c-explorer-secondary;
     }
 
-    @include small {
+    @include media-breakpoint-down(xs) {
         .explorer-open & {
             display: block;
         }
@@ -113,7 +113,7 @@ $menu-footer-height: 50px;
         font-size: 1rem;
     }
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         padding: 1em 1.5em;
     }
 }
@@ -122,7 +122,7 @@ $menu-footer-height: 50px;
     padding: 1em;
     color: $color-white;
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         padding: 1em 1.75em;
     }
 }
@@ -148,7 +148,7 @@ $menu-footer-height: 50px;
         background: $c-explorer-bg-active;
     }
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         padding: 1em 1.75em;
         height: $menu-footer-height;
     }

client/src/components/Explorer/ExplorerItem.scss

@@ -26,7 +26,7 @@
         background: $c-explorer-bg-active;
     }
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         padding: 1.45em 1.75em;
     }
 }

client/src/components/Hallo/_hallotoolbar.scss

@@ -13,7 +13,7 @@
     &.full {
         margin-left: $mobile-nice-padding;
 
-        @media screen and (min-width: $breakpoint-mobile) {
+        @include media-breakpoint-up(sm) {
             margin-left: $desktop-nice-padding;
         }
     }

docs/releases/2.4.rst

@@ -43,6 +43,7 @@ Bug fixes
  * Allow nav menu to take up all available space instead of scrolling (Meteor0id)
  * Users without the edit permission no longer see "Edit" links in list of pages waiting for moderation (Justin Focus, Fedor Selitsky)
  * Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
+ * Refactor all breakpoint definitions, removing style overlaps (Janneke Janssen)
 
 
 Upgrade considerations

wagtail/admin/static_src/wagtailadmin/scss/_grid.scss

@@ -56,7 +56,7 @@ $padding: $grid-gutter-width * 0.5;
     padding-left: $mobile-nice-padding;
     padding-right: $mobile-nice-padding;
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         padding-left: $desktop-nice-padding;
         padding-right: $desktop-nice-padding;
     }
@@ -66,7 +66,7 @@ $padding: $grid-gutter-width * 0.5;
     margin-left: $mobile-nice-padding;
     margin-right: $mobile-nice-padding;
 
-    @include medium {
+    @include media-breakpoint-up(sm) {
         margin-left: $desktop-nice-padding;
         margin-right: $desktop-nice-padding;
     }

wagtail/admin/static_src/wagtailadmin/scss/_mixins.scss

@@ -1,129 +1,2 @@
-// =============================================================================
-// Mixins
-// =============================================================================
-
-@import '../../../../../client/scss/tools.breakpoints';
-
-// Please note that the mixins partial shouldn't include any classes. This is so
-// it can be included in any file without accidentally producing output
-
-// Turns on font-smoothing when used. Use sparingly.
-@mixin font-smoothing {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-@mixin clearfix() {
-    &:before,
-    &:after {
-        content: ' ';
-        display: table;
-    }
-
-    &:after {
-        clear: both;
-    }
-}
-
-@mixin unlist() {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style-type: none;
-    font-style: normal;
-
-    li {
-        list-style-type: none;
-        font-style: normal;
-    }
-}
-
-
-// remove list styles, but only for the immediate element -
-// allow nested lists inside it to keep the default style
-
-@mixin unlistimmediate() {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style-type: none;
-    font-style: normal;
-
-    > li {
-        list-style-type: none;
-        font-style: normal;
-    }
-}
-
-@mixin transition($transition...) {
-    body.ready & {
-        transition: $transition;
-    }
-}
-
-@mixin visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-
-    &:active,
-    &:focus {
-        clip: auto;
-        height: auto;
-        margin: 0;
-        overflow: visible;
-        position: static;
-        width: auto;
-    }
-}
-
-
-@mixin visuallyvisible {
-    clip: none;
-    height: auto;
-    width: auto;
-    margin: auto;
-    overflow: visible;
-    position: initial;
-}
-
-
-@mixin icon () {
-    @include font-smoothing;
-    font-family: 'wagtail';
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    speak: none;
-    text-decoration: none;
-    width: 1.3em;
-    line-height: 1em;
-    text-align: left;
-    vertical-align: middle;
-    margin-right: 0.2em;
-}
-
-
-@mixin webfont($fontname, $filestub, $weight, $style:normal) {
-    @font-face {
-        font-family: '#{$fontname}';
-        src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
-            url('#{$font-root}#{$filestub}.woff') format('woff');
-        font-weight: $weight;
-        font-style: $style;
-    }
-}
-
-// Applies given rules on hover, except for touch screens.
-// Relies on feature detection to add a no-touch class on the html element.
-@mixin hover {
-    .no-touch &:hover {
-        @content;
-    }
-}
+@import 'wagtailadmin/scss/mixins/breakpoints';
+@import 'wagtailadmin/scss/mixins/general';

wagtail/admin/static_src/wagtailadmin/scss/_variables.scss

@@ -19,10 +19,13 @@ $mobile-nice-padding: 20px;
 $desktop-nice-padding: 50px;
 
 // screen breakpoints
-$breakpoint-mobile: 50em; // 800px
-$breakpoint-desktop-small: 56.25em; // 900px
-$breakpoint-desktop-large: 75em; // 1200px
-$breakpoint-desktop-larger: 100em; // 1600px
+$breakpoints: (
+    xs: 0,
+    sm: 50em,    // 800px
+    md: 56.25em, // 900px
+    lg: 75em,    // 1200px
+    xl: 100em,   // 1440px
+);
 
 // colours
 $color-teal: #007d7e;

wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -439,7 +439,7 @@ input[type=checkbox]:checked:before {
         border: 0;
     }
 
-    @media screen and (min-width: $breakpoint-mobile) {
+    @include media-breakpoint-up(sm) {
         font-size: 0.95em;
         padding: 0 1.4em;
         height: 3em;
@@ -605,7 +605,7 @@ a.button {
         line-height: 1.85em;
     }
 
-    @media screen and (min-width: $breakpoint-mobile) {
+    @include media-breakpoint-up(sm) {
         line-height: 2.9em;
     }
 }
@@ -617,7 +617,7 @@ input[type=button],
 button {
     padding: 0 1em;
 
-    @media screen and (min-width: $breakpoint-mobile) {
+    @include media-breakpoint-up(sm) {
         &.button-small {
             height: 2em;
         }
@@ -1177,7 +1177,7 @@ button {
     @include transition(opacity 0.2s ease);
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     label {
         @include column(2);
         padding-top: 1.2em;

wagtail/admin/static_src/wagtailadmin/scss/components/_header.scss

@@ -54,7 +54,7 @@ header {
     &.no-border {
         border: 0;
 
-        @media screen and (max-width: $breakpoint-mobile) {
+        @include media-breakpoint-down(xs) {
             // To all hamburger menu to be visible
             padding-left: $desktop-nice-padding;
             padding-top: 11px;
@@ -110,7 +110,7 @@ header {
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     header {
         padding-top: 1.5em;
         padding-bottom: 1.5em;
@@ -157,7 +157,7 @@ header {
 }
 
 .header-title {
-    @media screen and (max-width: $breakpoint-mobile) {
+    @include media-breakpoint-down(xs) {
         padding-left: $mobile-nav-indent;
     }
 }

wagtail/admin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -448,9 +448,6 @@ table.listing {
             position: absolute;
             right: 10%;
             top: 2em;
-            // @media screen and (min-width: $breakpoint-desktop-larger) {
-            //     right: 20em;
-            // }
         }
 
         .locked-indicator {
@@ -564,7 +561,7 @@ table.listing {
 }
 
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .listing {
         &.horiz > li {
             float: left;

wagtail/admin/static_src/wagtailadmin/scss/components/_logo.scss

@@ -30,7 +30,7 @@
 }
 
 // Desktop styling (override mobile styling):
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .logo {
         margin: 1em auto;
         text-align: center;

wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -11,7 +11,7 @@
     .inner {
         background: $nav-grey-1;
 
-        @include medium {
+        @include media-breakpoint-up(sm) {
             // On medium, make it possible for the nav links to scroll.
             display: flex;
             flex-flow: column nowrap;
@@ -123,7 +123,7 @@
 }
 
 .submenu-trigger:after {
-    @include medium {
+    @include media-breakpoint-up(sm) {
         // The menus are collapsible on desktop only.
         content: map-get($icons, arrow-right);
         width: auto;
@@ -268,7 +268,7 @@ body.explorer-open {
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .wrapper,
     body.nav-open .wrapper {
         transform: none;
@@ -493,8 +493,8 @@ body.explorer-open {
     }
 }
 
-@media all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: none),
-    all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: active) {
+@media all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: none),
+    all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: active) {
     body.explorer-open {
         .wrapper {
             left: 0;

wagtail/admin/static_src/wagtailadmin/scss/components/_messages.scss

@@ -89,7 +89,7 @@
     top: 0;
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .messages > ul > li {
         padding-left: 1.6em;
         padding-right: 3em;

wagtail/admin/static_src/wagtailadmin/scss/components/_modals.scss

@@ -109,15 +109,15 @@ $zindex-modal-background: 500;
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .modal-dialog {
         padding: 0 0 2em $menu-width;
     }
 }
 
-@media screen and (min-width: $breakpoint-desktop-larger) {
+@include media-breakpoint-up(xl) {
     .modal-dialog {
-        max-width: $breakpoint-desktop-larger;
+        max-width: 100em;
         padding: 0 0 2em;
     }
 }

wagtail/admin/static_src/wagtailadmin/scss/components/_streamfield.scss

@@ -365,7 +365,7 @@ li.sequence-member {
         }
     }
 
-    @media screen and (min-width: $breakpoint-mobile) {
+    @include media-breakpoint-up(sm) {
         li {
             @include column(2);
 

wagtail/admin/static_src/wagtailadmin/scss/components/_tabs.scss

@@ -94,7 +94,7 @@
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .tab-nav {
         // For cases where tab-nav should merge with header
         &.merged {
@@ -128,7 +128,7 @@
     }
 }
 
-@media screen and (max-width: $breakpoint-mobile) {
+@include media-breakpoint-down(xs) {
     // To allow tabs on the edit page to be editable
     .tab-nav li:first-of-type {
         padding-left: 1.6em;

wagtail/admin/static_src/wagtailadmin/scss/core.scss

@@ -116,7 +116,6 @@ body {
 }
 
 footer {
-    // @include transition(all 0.2s ease);
     @include transition(bottom 0.5s ease 1s);
     @include row();
     border-radius: 3px 3px 0 0;
@@ -167,7 +166,7 @@ footer {
         }
     }
 
-    @media screen and (max-width: $breakpoint-mobile) {
+    @include media-breakpoint-down(xs) {
         .actions,
         .preview,
         .preview .dropdown {
@@ -185,12 +184,6 @@ footer {
             }
         }
     }
-
-    $width-1440px: 90em;
-
-    @media screen and (min-width: $width-1440px) {
-        width: $width-1440px;
-    }
 }
 
 .breadcrumb {
@@ -326,7 +319,7 @@ footer,
     z-index: 100;
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .col1 {
         @include column(1);
     }

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -63,14 +63,14 @@ a.button.page404__button { // more specific to override standard button styles
 }
 
 // SMALL DESKTOP CHANGES:
-@media screen and (max-width: $breakpoint-desktop-small) { // 900px
+@include media-breakpoint-down(sm) {
     .wagtail-logo-container__desktop {
         display: none;
     }
 }
 
 // MOBILE CHANGES:
-@media screen and (max-width: $breakpoint-mobile) { // 800px
+@include media-breakpoint-down(xs) {
     .page404__text-container {
         width: 400px;
     }

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -14,7 +14,7 @@ header {
         padding: 0;
 
         // make way for the nav-menu button on mobile
-        @media screen and (max-width: $breakpoint-mobile) {
+        @include media-breakpoint-down(xs) {
             position: relative;
             left: $mobile-nav-indent;
         }
@@ -55,15 +55,15 @@ header {
             font-size: 6em;
             float: left;
 
-            @media screen and (max-width: $breakpoint-desktop-large) {
+            @include media-breakpoint-down(md) {
                 font-size: 5em;
             }
 
-            @media screen and (max-width: $breakpoint-desktop-small) {
+            @include media-breakpoint-down(sm) {
                 font-size: 4.5em;
             }
 
-            @media screen and (max-width: $breakpoint-mobile) {
+            @include media-breakpoint-down(xs) {
                 font-size: 4em;
             }
         }
@@ -82,15 +82,15 @@ header {
             line-height: 1em;
             font-weight: 300;
 
-            @media screen and (max-width: $breakpoint-desktop-large) {
+            @include media-breakpoint-down(md) {
                 font-size: 3em;
             }
 
-            @media screen and (max-width: $breakpoint-desktop-small) {
+            @include media-breakpoint-down(sm) {
                 font-size: 2.5em;
             }
 
-            @media screen and (max-width: $breakpoint-mobile) {
+            @include media-breakpoint-down(xs) {
                 font-size: 2em;
             }
         }

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -142,7 +142,7 @@ input[type=checkbox]:before {
     }
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .content-wrapper {
         float: none;
         height: auto;

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -11,7 +11,7 @@
     .breadcrumb {
         margin: -1.2em 0 2em;
 
-        @include medium {
+        @include media-breakpoint-up(sm) {
             margin-top: -1.8em;
         }
     }
@@ -36,7 +36,7 @@
     .header-title {
         padding-left: 3.1em;
 
-        @media screen and (max-width: $breakpoint-mobile) {
+        @include media-breakpoint-down(xs) {
             padding-left: 0;
             margin-left: -28px;
             // Because it's nested within tab-merged which we've given padding
@@ -345,7 +345,7 @@ $object-title-height: 40px;
 footer .preview {
     button,
     .button {
-        @media screen and (max-width: $breakpoint-mobile) {
+        @include media-breakpoint-down(xs) {
             width: 100%;
             margin-top: 2px;
             margin-bottom: 2px;
@@ -387,7 +387,7 @@ footer .preview {
     }
 }
 
-@include medium {
+@include media-breakpoint-up(sm) {
     .object {
         fieldset {
             // Override column mixin for column items.

wagtail/admin/static_src/wagtailadmin/scss/mixins/_breakpoints.scss

@@ -0,0 +1,59 @@
+// Based upon the fine work and thoughts from Bootstrap v4.
+//
+// Copyright 2011-2018 The Bootstrap Authors
+// Copyright 2011-2018 Twitter, Inc.
+// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+@function breakpoint-next($name) {
+    $breakpoint-names: map-keys($breakpoints);
+    $n: index($breakpoint-names, $name);
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm)
+//    50em
+@function breakpoint-min($name) {
+    $min: map-get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+//
+//    >> breakpoint-max(sm)
+//    56.1875em
+@function breakpoint-max($name) {
+    $next: breakpoint-next($name);
+    @return if($next, breakpoint-min($next) - 0.0625em, null);
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name) {
+    $min: breakpoint-min($name);
+    @if $min {
+        @media screen and (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name) {
+    $max: breakpoint-max($name);
+    @if $max {
+        @media screen and (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}

wagtail/admin/static_src/wagtailadmin/scss/mixins/_general.scss

@@ -0,0 +1,126 @@
+// =============================================================================
+// Mixins
+// =============================================================================
+// Please note that the mixins partial shouldn't include any classes. This is so
+// it can be included in any file without accidentally producing output
+
+// Turns on font-smoothing when used. Use sparingly.
+@mixin font-smoothing {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin clearfix() {
+    &:before,
+    &:after {
+        content: ' ';
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+}
+
+@mixin unlist() {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+    font-style: normal;
+
+    li {
+        list-style-type: none;
+        font-style: normal;
+    }
+}
+
+
+// remove list styles, but only for the immediate element -
+// allow nested lists inside it to keep the default style
+
+@mixin unlistimmediate() {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+    font-style: normal;
+
+    > li {
+        list-style-type: none;
+        font-style: normal;
+    }
+}
+
+@mixin transition($transition...) {
+    body.ready & {
+        transition: $transition;
+    }
+}
+
+@mixin visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+
+    &:active,
+    &:focus {
+        clip: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        position: static;
+        width: auto;
+    }
+}
+
+
+@mixin visuallyvisible {
+    clip: none;
+    height: auto;
+    width: auto;
+    margin: auto;
+    overflow: visible;
+    position: initial;
+}
+
+
+@mixin icon () {
+    @include font-smoothing;
+    font-family: 'wagtail';
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    speak: none;
+    text-decoration: none;
+    width: 1.3em;
+    line-height: 1em;
+    text-align: left;
+    vertical-align: middle;
+    margin-right: 0.2em;
+}
+
+
+@mixin webfont($fontname, $filestub, $weight, $style:normal) {
+    @font-face {
+        font-family: '#{$fontname}';
+        src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
+            url('#{$font-root}#{$filestub}.woff') format('woff');
+        font-weight: $weight;
+        font-style: $style;
+    }
+}
+
+// Applies given rules on hover, except for touch screens.
+// Relies on feature detection to add a no-touch class on the html element.
+@mixin hover {
+    .no-touch &:hover {
+        @content;
+    }
+}

wagtail/admin/templates/wagtailadmin/base.html

@@ -7,14 +7,14 @@
             <a href="{% url 'wagtailadmin_home' %}" class="logo" title="Wagtail v.{% wagtail_version %}">
                 {% block branding_logo %}
                     {# Mobile-only logo: #}
-                    <div class="wagtail-logo-container__mobile u-hidden@medium">
+                    <div class="wagtail-logo-container__mobile u-hidden@sm">
                         <img class="wagtail-logo wagtail-logo__full" src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
                     </div>
 
                     {# Desktop logo (animated): #}
                     {% include "wagtailadmin/shared/animated_logo.html" %}
                 {% endblock %}
-                <span class="u-hidden@medium">{% trans "Dashboard" %}</span>
+                <span class="u-hidden@sm">{% trans "Dashboard" %}</span>
             </a>
 
             {% menu_search %}

wagtail/admin/templates/wagtailadmin/shared/animated_logo.html

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags static %}
 
-<div class="wagtail-logo-container__desktop u-hidden@small">
+<div class="wagtail-logo-container__desktop u-hidden@xs">
     <img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
     <img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
     <img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss

@@ -1,10 +1,11 @@
 @import 'wagtailadmin/scss/variables';
+@import 'wagtailadmin/scss/mixins';
 
 .breadcrumb {
     margin: -1.2em 0 2em;
 }
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .breadcrumb {
         margin-top: -1.8em;
     }

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -1,4 +1,5 @@
 @import 'wagtailadmin/scss/variables';
+@import 'wagtailadmin/scss/mixins';
 
 .content header {
     margin-bottom: 0;
@@ -139,7 +140,7 @@ p.no-results {
 }
 
 
-@media screen and (min-width: $breakpoint-mobile) {
+@include media-breakpoint-up(sm) {
     .changelist-filter {
         float: right;
         padding: 0 1.5%;
@@ -175,8 +176,7 @@ p.no-results {
     }
 }
 
-
-@media screen and (min-width: $breakpoint-desktop-large) {
+@include media-breakpoint-up(lg) {
     .result-list.col9 {
         width: 79%;
     }