[AAE-16369] use layout-bp mixin where applicable (#8945)

* [AAE-15828] layout-bp mixin for core

* [AAE-15828] fixed import

* [AAE-15828] layout-bp for process-services-cloud

* [AAE-15828] layout-bp for process-services

* [AAE-15828] layout-bp for content-services

* [AAE-15828] fixed incorrect values

* [AAE-15828] lint fix

* configure stylePreprocessorOptions for cross project scss importing

* scss import cardio

* set correct style paths for packages

* [AAE-16369] addded missing test config

* [ci:force] fix for the pretheme build

* unified configs for libs

lib/core/ng-package.json

@@ -35,7 +35,10 @@
   ],
   "lib": {
     "entryFile": "./src/public-api.ts",
-    "flatModuleFile": "adf-core"
+    "flatModuleFile": "adf-core",
+    "styleIncludePaths": [
+      "./src/lib"
+    ]
   },
   "allowedNonPeerDependencies": [
     "cropperjs",

lib/core/shell/ng-package.json

@@ -1,6 +1,9 @@
 {
-  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
-    "entryFile": "src/index.ts"
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": [
+      "../src/lib"
+    ]
   }
 }

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

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .app-shell {
     display: flex;
     flex-direction: column;
@@ -21,7 +23,7 @@
     }
 }
 
-@media screen and (max-width: 599px) {
+@include layout-bp(lt-sm) {
     .adf-app-title {
         display: none;
     }

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-hidden {
     display: none;
 }
@@ -22,7 +24,7 @@
 
 .adf-container-widget {
     .adf-grid-list-column-view {
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: flow;
         }
 
@@ -56,7 +58,7 @@
         padding-right: 3px;
     }
 
-    @media screen and (max-width: 959px) {
+    @include layout-bp(lt-md) {
         .adf-grid-list-item {
             flex: 1 0 100%;
         }

lib/core/src/lib/identity-user-info/identity-user-info.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-userinfo-container {
         display: flex;
@@ -11,8 +13,7 @@
 
     &-userinfo-name {
         padding: 0 5px;
-
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: none;
         }
     }
@@ -78,7 +79,7 @@
         display: flex;
         flex-direction: column;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             padding: 10px;
         }
     }

lib/core/src/lib/layout/components/header/header.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 adf-layout-header .mat-toolbar-single-row {
     color: var(--theme-header-text-color) !important;
     background-color: var(--theme-primary-color);
@@ -50,7 +52,7 @@ adf-layout-header .mat-toolbar-single-row {
         padding: 0;
     }
 
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         .adf-app-logo,
         .adf-app-title {
             display: none;

lib/core/src/lib/styles/_default-class.scss

@@ -1,11 +1,13 @@
+@import './flex';
+
 .adf-hide-small {
-    @media screen and (max-width: 959px) {
+    @include layout-bp(lt-md) {
         display: none !important;
     }
 }
 
 .adf-hide-xsmall {
-    @media screen and (max-width: 599px) {
+    @include layout-bp(lt-sm) {
         display: none !important;
     }
 }

lib/core/src/lib/templates/error-content/error-content.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-error-content {
     color: var(--adf-theme-foreground-text-color-054);
     display: flex;
@@ -30,5 +32,28 @@
         width: 50%;
         min-width: 250px;
         margin-bottom: 60px;
+        line-height: 30px;
+    }
+}
+
+@include layout-bp(lt-md) {
+    .adf-error-content {
+        &-code {
+            margin-top: 100px;
+            font-size: 50px;
+            margin-bottom: 25px;
+        }
+
+        &-shadow {
+            width: 100px;
+        }
+
+        &-title {
+            font-size: var(--theme-headline-font-size);
+        }
+
+        &-description {
+            font-size: var(--theme-subheading-2-font-size);
+        }
     }
 }