Add ability use operators with mq helper (#202)

ONSdigital · Feb 20, 2019 · 18c9410 · 18c9410
1 parent 702acc2
commit 18c9410
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss
@@ -77,7 +77,7 @@ $summary-col-spacing: 1rem;
     }
   }
 
-  @include mq(xs, m) {
+  @include mq(xs, m, $to-operator: '<') {
     &__items,
     &__item,
     &__item-title,

diff --git a/src/scss/helpers/_mq.scss b/src/scss/helpers/_mq.scss
@@ -1,4 +1,4 @@
-@mixin mq($from: none, $to: none) {
+@mixin mq($from: none, $to: none, $from-operator: none, $to-operator: none) {
   @if $from != none and type-of($from) == 'string' {
     $from: get-bp-width($from);
   }
@@ -11,14 +11,26 @@
     @if ($from == none or $from <= nth(nth($grid-bp, 1), 2)) and $to == none {
       @content;
     } @else if $from == none or $from <= nth(nth($grid-bp, 1), 2) {
+      @if $to-operator != none and $to-operator == '<' {
+        $to: $to - 1;
+      }
       @media only screen and (max-width: $to) {
         @content;
       }
     } @else if $to == none {
+      @if $from-operator != none and $from-operator == '<' {
+        $from: $from + 1;
+      }
       @media only screen and (min-width: $from) {
         @content;
       }
     } @else {
+      @if $from-operator != none and $from-operator == '<' {
+        $from: $from + 1;
+      }
+      @if $to-operator != none and $to-operator == '<' {
+        $to: $to - 1;
+      }
       @media only screen and (min-width: $from) and (max-width: $to) {
         @content;
       }