Merge pull request #912 from prezly/feature/care-5047-make-lena-collapse-into-mobile-header-sooner-same-as-bea

[CARE-5047] Fix - Replicate responsive behaviour from Bea

Author: kudlajz

components/RichText/styles.module.scss

@@ -23,7 +23,7 @@
 .htmlContent h1 {
     @include heading-2;
 
-    @include desktop-large-up {
+    @include desktop-up {
         @include heading-1;
     }
 
@@ -39,7 +39,7 @@
 .htmlContent h2 {
     @include heading-3;
 
-    @include desktop-large-up {
+    @include desktop-up {
         @include heading-2;
     }
 

components/StoryCards/HighlightedStoryCard.module.scss

@@ -53,7 +53,7 @@
     @include heading-2;
     @include ensure-max-text-height(4, $line-height-m);
 
-    @include desktop-large-up {
+    @include desktop-up {
         @include heading-1-xxl;
         @include ensure-max-text-height(2, $line-height-xl);
     }

modules/Story/HeaderRenderer/HeaderRenderer.module.scss

@@ -4,7 +4,7 @@
         .prezly-slate-heading--heading-1 {
             @include heading-2;
 
-            @include desktop-large-up {
+            @include desktop-up {
                 @include heading-1;
             }
 

styles/mixins/_container.scss

@@ -15,11 +15,6 @@
         padding-right: $grid-spacing-desktop;
         max-width: $grid-container-max-width;
     }
-
-    @include desktop-large-up {
-        padding-left: $grid-spacing-desktop-large;
-        padding-right: $grid-spacing-desktop-large;
-    }
 }
 
 /*

styles/mixins/_responsive.scss

@@ -1,31 +1,25 @@
 @import "../variables/breakpoints";
 
 @mixin mobile-only {
-    @media screen and (max-width: $breakpoint-tablet) {
+    @media screen and (max-width: $breakpoint-tablet - 1px) {
         @content;
     }
 }
 
 @mixin tablet-up {
-    @media screen and (min-width: $breakpoint-tablet + 1px) {
+    @media screen and (min-width: $breakpoint-tablet) {
         @content;
     }
 }
 
 @mixin tablet-only {
-    @media screen and (min-width: $breakpoint-tablet + 1px) and (max-width: $breakpoint-desktop) {
+    @media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop) {
         @content;
     }
 }
 
 @mixin desktop-up {
-    @media screen and (min-width: $breakpoint-desktop + 1px) {
-        @content;
-    }
-}
-
-@mixin desktop-large-up {
-    @media screen and (min-width: $breakpoint-desktop-large + 1px) {
+    @media screen and (min-width: $breakpoint-desktop) {
         @content;
     }
 }

styles/variables/_breakpoints.scss

@@ -1,5 +1,4 @@
-$breakpoint-tablet: 414px;
-$breakpoint-desktop: 768px;
-$breakpoint-desktop-large: 1024px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
 $breakpoint-cards-small: 600px;
 $breakpoint-cards-medium: 940px;

styles/variables/_spacing.scss

@@ -19,6 +19,5 @@ $grid-gutter-tablet: 2.5rem; // 40px
 $grid-spacing-tablet: 2.5rem; // 40px
 $grid-gutter-desktop: 2.5rem; // 40px
 $grid-spacing-desktop: 2.5rem; // 40px
-$grid-spacing-desktop-large: 5rem; // 80px
 
 $grid-container-max-width: 1280px; // 1120px + 80px spacing on the sides