[US TRTL-632] Add breakpoint mixins

ui/ui-frontend-common/src/sass/_layout.scss

+@import './mixins/breakpoints';
+
 $header-height: 72px !default;
 $footer-height: 100px !default;
 
@@ -7,23 +9,18 @@ $footer-height: 100px !default;
 
 // Defaut supported screen width is 1920px
 .vitamui-content, .vitamui-heading {
-    max-width: 1440px;
+    max-width: $large-widh;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1rem;
     padding-right: 1rem;
-}
 
-/** RESPONSIVE MANAGEMENT */
-@media screen and (max-width: 1440px) {
-    .vitamui-heading, .vitamui-content {
-        max-width: 1200px;
+    @include breakpoint(mediumScreen) {
+        max-width: $medium-widh;
     }
-}
-  
-@media screen and (max-width: 1200px) {
-    .vitamui-heading, .vitamui-content {
-        max-width: 1060px;
+
+    @include breakpoint(smallScreen) {
+        max-width: $small-widh;
     }
 }
 

ui/ui-frontend-common/src/sass/mixins/_breakpoints.scss

+$large-widh: 1440px;
+$medium-widh: 1200px;
+$small-widh: 1060px;
+
+$large-screen: 1920px;
+$medium-screen: 1440px;
+$small-screen: 1200px;
+
+@mixin breakpoint($point) {
+    @if $point == largeScreen {
+        @media screen and (max-width: #{$medium-screen}) {
+            @content;
+        }
+   }
+    @else if $point == mediumScreen {
+        @media screen and (max-width: #{$medium-screen}) {
+            @content;
+        }
+   }
+    @else if $point == smallScreen {
+        @media screen and (max-width: #{$small-screen} - 1) {
+            @content;
+        }
+   }
+ }
\ No newline at end of file