Prefer mixin mq() versus govuk-media-query()

nhsuk · Feb 20, 2025 · cbcf74b · cbcf74b
1 parent 49f12b0
commit cbcf74b
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 11 deletions.
diff --git a/packages/components/error-summary/_error-summary.scss b/packages/components/error-summary/_error-summary.scss
@@ -13,13 +13,13 @@
   // Not using responsive spacing as we want smaller margin on mobile
   margin-bottom: nhsuk-spacing(5);
 
-  @include govuk-media-query($from: tablet) {
+  @include mq($from: tablet) {
     margin-bottom: nhsuk-spacing(7);
   }
 
   border: $nhsuk-border-width-mobile solid $nhsuk-error-color;
 
-  @include govuk-media-query($from: tablet) {
+  @include mq($from: tablet) {
     border: $nhsuk-border-width solid $nhsuk-error-color;
   }
 

diff --git a/packages/components/tabs/_tabs.scss b/packages/components/tabs/_tabs.scss
@@ -41,7 +41,7 @@
 
 // JavaScript enabled
 .js-enabled {
-  @include govuk-media-query($from: tablet) {
+  @include mq($from: tablet) {
     .nhsuk-tabs__list {
       @include clearfix;
       border-bottom: 1px solid $nhsuk-border-color;

diff --git a/packages/core/objects/_width-container.scss b/packages/core/objects/_width-container.scss
@@ -17,12 +17,12 @@
 
   max-width: $nhsuk-page-width; // [2]
 
-  @include govuk-media-query($from: desktop) {
+  @include mq($from: desktop) {
     margin: 0 $nhsuk-gutter; // [3]
   }
 
   // [4]
-  @include govuk-media-query($and: "(min-width: #{($nhsuk-page-width + $nhsuk-gutter * 2)})") {
+  @include mq($and: "(min-width: #{($nhsuk-page-width + $nhsuk-gutter * 2)})") {
     margin: 0 auto;
   }
 }
@@ -31,7 +31,7 @@
   margin: 0 $nhsuk-gutter-half;
   max-width: 100%; // [5]
 
-  @include govuk-media-query($from: desktop) {
+  @include mq($from: desktop) {
     margin: 0 $nhsuk-gutter; // [3]
   }
 }

diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
@@ -88,7 +88,7 @@ $_nhsuk-grid-widths: (
     @if $at != desktop {
       width: 100%;
     }
-    @include govuk-media-query($from: $at) {
+    @include mq($from: $at) {
       float: $float;
       width: grid-width($width);
     }

diff --git a/packages/core/tools/_spacing.scss b/packages/core/tools/_spacing.scss
@@ -107,7 +107,7 @@
         #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @include mq($from: $breakpoint) {
         @if $direction == all {
           #{$property}: $breakpoint-value iff($important, !important);
         } @else {

diff --git a/packages/core/tools/_typography.scss b/packages/core/tools/_typography.scss
@@ -19,7 +19,7 @@
 @mixin nhsuk-text-color {
   color: $nhsuk-text-color;
 
-  @include govuk-media-query($media-type: print) {
+  @include mq($media-type: print) {
     color: $nhsuk-print-text-color;
   }
 }
@@ -133,12 +133,12 @@
       font-size: $font-size-rem;
       line-height: $line-height;
     } @else if $breakpoint == "print" {
-      @include govuk-media-query($media-type: print) {
+      @include mq($media-type: print) {
         font-size: $font-size;
         line-height: $line-height;
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @include mq($from: $breakpoint) {
         font-size: $font-size;
         font-size: $font-size-rem;
         line-height: $line-height;