AAE-34493 Improved internal mat-selectors (#10829)

lib/core/shell/src/lib/components/shell/shell.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../styles/flex' as flex;
 
 .app-shell {
     display: flex;
@@ -23,13 +23,13 @@
     }
 }
 
-@include layout-bp(lt-sm) {
+@include flex.layout-bp(lt-sm) {
     .adf-app-title {
         display: none;
     }
 }
 
-@media screen and (max-width: 719px) {
+@media screen and (width <= 719px) {
     .adf-app-logo {
         display: none;
     }

lib/core/shell/src/lib/styles/flex.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+/* stylelint-disable */
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+    xs: (
+        begin: 0,
+        end: 599.9px
+    ),
+    sm: (
+        begin: 600px,
+        end: 959.9px
+    ),
+    md: (
+        begin: 960px,
+        end: 1279.9px
+    ),
+    lg: (
+        begin: 1280px,
+        end: 1919.9px
+    ),
+    xl: (
+        begin: 1920px,
+        end: 4999.99px
+    )
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+    gt-xs: 600px,
+    gt-sm: 960px,
+    gt-md: 1280px,
+    gt-lg: 1920px
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+    lt-sm: 599.9px,
+    lt-md: 959.9px,
+    lt-lg: 1279.9px,
+    lt-xl: 1919.9px
+) !default;
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+    @if map-has-key($breakpoints, $bp) {
+        $min: map-get(map-get($breakpoints, $bp), begin);
+        $max: map-get(map-get($breakpoints, $bp), end);
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-gt, $bp) {
+        $min: map-get($overlapping-gt, $bp);
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map-has-key($overlapping-lt, $bp) {
+        $max: map-get($overlapping-lt, $bp);
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+}
+/* stylelint-enable */