From 3912a652d5a92facda21a5c4fa120d9342823483 Mon Sep 17 00:00:00 2001 From: Wojciech Duda <69160975+wojd0@users.noreply.github.com> Date: Mon, 23 Oct 2023 16:36:26 +0200 Subject: [PATCH] [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 --- angular.json | 124 +++++++++++++++--- lib/config/webpack.style.js | 8 +- lib/content-services/ng-package.json | 5 +- .../content-user-info.component.scss | 6 +- .../components/document-list.component.scss | 8 +- .../components/search-control.component.scss | 3 +- lib/core/ng-package.json | 5 +- lib/core/shell/ng-package.json | 7 +- .../lib/components/shell/shell.component.scss | 4 +- .../components/form-renderer.component.scss | 6 +- .../identity-user-info.component.scss | 7 +- .../components/header/header.component.scss | 4 +- lib/core/src/lib/styles/_default-class.scss | 6 +- .../error-content.component.scss | 25 ++++ lib/extensions/ng-package.json | 5 +- lib/insights/ng-package.json | 5 +- lib/process-services-cloud/ng-package.json | 5 +- .../components/app-list-cloud.component.scss | 6 +- .../edit-process-filter-cloud.component.scss | 4 +- .../start-task-cloud.component.scss | 4 +- ...base-edit-task-filter-cloud.component.scss | 4 +- .../task-header-cloud.component.scss | 4 +- lib/process-services/ng-package.json | 5 +- .../src/lib/app-list/apps-list.component.scss | 6 +- .../process-attachment-list.component.scss | 4 +- .../task-attachment-list.component.scss | 6 +- .../attach-file-widget.component.scss | 4 +- .../components/start-process.component.scss | 4 +- .../process-user-info.component.scss | 6 +- .../components/start-task.component.scss | 8 +- .../components/task-details.component.scss | 4 +- .../components/task-header.component.scss | 4 +- 32 files changed, 245 insertions(+), 61 deletions(-) diff --git a/angular.json b/angular.json index 47dca93ad4..afc2366a54 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,7 @@ "polyfills": "demo-shell/src/polyfills.ts", "stylePreprocessorOptions": { "includePaths": [ - "lib" + "lib", "lib/core/src/lib" ] }, "assets": [ @@ -272,6 +272,11 @@ "karmaConfig": "lib/core/karma.conf.js", "sourceMap": true, "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + }, "styles": [ "demo-shell/src/styles.scss" ] @@ -307,7 +312,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -328,7 +338,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -378,7 +393,12 @@ "command": "npm publish --tag {args.tag}", "forwardAllArgs": true } - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } } } @@ -410,7 +430,12 @@ "tsConfig": "lib/content-services/tsconfig.spec.json", "karmaConfig": "lib/content-services/karma.conf.js", "sourceMap": true, - "codeCoverage": true + "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } }, "lint": { @@ -435,7 +460,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -456,7 +486,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -518,7 +553,12 @@ "tsConfig": "lib/process-services/tsconfig.spec.json", "karmaConfig": "lib/process-services/karma.conf.js", "sourceMap": true, - "codeCoverage": true + "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } }, "lint": { @@ -584,7 +624,12 @@ "tsConfig": "lib/process-services-cloud/tsconfig.spec.json", "karmaConfig": "lib/process-services-cloud/karma.conf.js", "sourceMap": true, - "codeCoverage": true + "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } }, "lint": { @@ -609,7 +654,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -630,7 +680,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { @@ -703,7 +758,12 @@ "tsConfig": "lib/insights/tsconfig.spec.json", "karmaConfig": "lib/insights/karma.conf.js", "sourceMap": true, - "codeCoverage": true + "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } }, "lint": { @@ -768,7 +828,12 @@ "tsConfig": "lib/extensions/tsconfig.spec.json", "karmaConfig": "lib/extensions/karma.conf.js", "sourceMap": true, - "codeCoverage": true + "codeCoverage": true, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } } }, "lint": { @@ -816,7 +881,12 @@ "entryName": "shared", "entryPath": "/lib/testing/src/lib/shared/index.ts" } - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "production": { @@ -897,7 +967,12 @@ "outputPath": "dist/libs/eslint-plugin-eslint-angular", "main": "lib/eslint-angular/index.ts", "generatePackageJson" : true, - "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json" + "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json", + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "production": { @@ -956,7 +1031,12 @@ "options": { "commands": [ "cd lib/cli && npm i && npm run dist" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "production": { @@ -1032,6 +1112,11 @@ "browserTarget": "stories:storybook", "configDir": "lib/stories/.storybook", "compodoc": false, + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + }, "styles": [ "demo-shell/src/assets/fonts/muli/muli.css", "demo-shell/src/styles.scss", @@ -1059,7 +1144,12 @@ "demo-shell/src/custom-style-dev.scss", "node_modules/cropperjs/dist/cropper.min.css", "node_modules/pdfjs-dist/web/pdf_viewer.css" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "ci": { diff --git a/lib/config/webpack.style.js b/lib/config/webpack.style.js index 7cc117eb06..66c30f49a1 100644 --- a/lib/config/webpack.style.js +++ b/lib/config/webpack.style.js @@ -41,5 +41,11 @@ module.exports = { new DisableOutputWebpackPlugin({ test: /\.js$/, }) - ] + ], + + resolve: { + alias: { + 'styles': path.resolve(__dirname, '../core/src/lib/styles'), + } + } }; diff --git a/lib/content-services/ng-package.json b/lib/content-services/ng-package.json index 8e55456046..8f8e1bec0f 100644 --- a/lib/content-services/ng-package.json +++ b/lib/content-services/ng-package.json @@ -20,6 +20,9 @@ ], "lib": { "entryFile": "src/public-api.ts", - "flatModuleFile": "adf-content-services" + "flatModuleFile": "adf-content-services", + "styleIncludePaths": [ + "../core/src/lib" + ] } } diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss index d67e6a1c29..8d458c8f6e 100644 --- a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss +++ b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-userinfo-container { display: flex; @@ -12,7 +14,7 @@ &-userinfo-name { padding: 0 5px; - @media screen and (max-width: 959px) { + @include layout-bp(lt-md) { display: none; } } @@ -90,7 +92,7 @@ display: flex; justify-content: space-between; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { padding: 10px; } } diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss index ddf62dddb8..ac36c467e2 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.scss +++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf-document-list { min-height: 0; height: 100%; @@ -141,7 +143,7 @@ word-break: break-all; white-space: pre-line; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { font-size: 48px; } } @@ -163,12 +165,12 @@ object-fit: contain; margin-top: 17px; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { width: 250px; } } - @media screen and (max-width: 960px) { + @include layout-bp(lt-md) { &-drag-drop, &-any-files-here-to-add { display: none; diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss index c7b1afd089..6fb81dce03 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.scss +++ b/lib/content-services/src/lib/search/components/search-control.component.scss @@ -1,4 +1,5 @@ @use '@angular/material' as mat; +@import 'styles/flex'; $mat-menu-overlay-min-width: 112px !default; // 56 * 2 $mat-menu-overlay-max-width: 280px !default; // 56 * 5 @@ -23,7 +24,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5 background-color: var(--adf-theme-background-card-color); border-radius: 2px; - @media screen and (max-width: 959px) { + @include layout-bp(lt-md) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/lib/core/ng-package.json b/lib/core/ng-package.json index 45cd8ac6fd..385e6922c9 100644 --- a/lib/core/ng-package.json +++ b/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", diff --git a/lib/core/shell/ng-package.json b/lib/core/shell/ng-package.json index 1d9f99930d..4478cfc551 100644 --- a/lib/core/shell/ng-package.json +++ b/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" + ] } } diff --git a/lib/core/shell/src/lib/components/shell/shell.component.scss b/lib/core/shell/src/lib/components/shell/shell.component.scss index 8373fd4092..34c3eb0fec 100644 --- a/lib/core/shell/src/lib/components/shell/shell.component.scss +++ b/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; } diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index 6f8f444fa4..5254c61089 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/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%; } diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss index a95efbaf70..7beb2ac4f4 100644 --- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss +++ b/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; } } diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index 38a4bca467..76a13cceca 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/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; diff --git a/lib/core/src/lib/styles/_default-class.scss b/lib/core/src/lib/styles/_default-class.scss index 3afe0b48b9..a1c361a14a 100644 --- a/lib/core/src/lib/styles/_default-class.scss +++ b/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; } } diff --git a/lib/core/src/lib/templates/error-content/error-content.component.scss b/lib/core/src/lib/templates/error-content/error-content.component.scss index 2230f48dcf..dbd5769107 100644 --- a/lib/core/src/lib/templates/error-content/error-content.component.scss +++ b/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); + } } } diff --git a/lib/extensions/ng-package.json b/lib/extensions/ng-package.json index 8b677dfab5..1e50d3f4ab 100644 --- a/lib/extensions/ng-package.json +++ b/lib/extensions/ng-package.json @@ -4,6 +4,9 @@ "deleteDestPath": false, "lib": { "entryFile": "src/public-api.ts", - "flatModuleFile": "adf-extensions" + "flatModuleFile": "adf-extensions", + "styleIncludePaths": [ + "../core/src/lib" + ] } } diff --git a/lib/insights/ng-package.json b/lib/insights/ng-package.json index 5600d2ce08..64abae563d 100644 --- a/lib/insights/ng-package.json +++ b/lib/insights/ng-package.json @@ -15,6 +15,9 @@ ], "lib": { "entryFile": "src/public-api.ts", - "flatModuleFile": "adf-insights" + "flatModuleFile": "adf-insights", + "styleIncludePaths": [ + "../core/src/lib" + ] } } diff --git a/lib/process-services-cloud/ng-package.json b/lib/process-services-cloud/ng-package.json index 77936a8af6..1f81fd1801 100644 --- a/lib/process-services-cloud/ng-package.json +++ b/lib/process-services-cloud/ng-package.json @@ -21,7 +21,10 @@ "lib": { "entryFile": "src/public-api.ts", - "flatModuleFile": "adf-process-services-cloud" + "flatModuleFile": "adf-process-services-cloud", + "styleIncludePaths": [ + "../core/src/lib" + ] }, "allowedNonPeerDependencies": [ "@apollo/client", diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss index 457b5fc4af..9dc9e7f2be 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + adf-cloud-app-list { width: 100%; @@ -27,11 +29,11 @@ adf-cloud-app-list { flex: 1 1 100%; max-width: 33.3333%; - @media screen and (max-width: 960px) { + @include layout-bp(lt-md) { max-width: 50%; } - @media screen and (max-width: 600px) { + @include layout-bp(lt-sm) { max-width: 100%; } } diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss index e81e209b48..4d10f5dc51 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf-edit-process-filter-date-error-container { position: absolute; height: 20px; @@ -48,7 +50,7 @@ max-width: 23%; } - @media screen and (max-width: 600px) { + @include layout-bp(lt-sm) { flex-flow: column; :not(:last-child) { diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss index 15108a3ce6..2223dfed5e 100644 --- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf-cloud-start-task-heading { border-bottom: 1px solid var(--adf-theme-foreground-divider-color); margin-bottom: 10px; @@ -83,7 +85,7 @@ adf-cloud-start-task { } } - @media screen and (max-width: 960px) { + @include layout-bp(lt-md) { flex-direction: column; mat-form-field, diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss index 04c7ec9235..012b777547 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf-edit-task-filter-checkbox { font-size: var(--theme-subheading-2-font-size); padding-top: 10px; @@ -58,7 +60,7 @@ flex: 1 1 23%; } - @media screen and (max-width: 600px) { + @include layout-bp(lt-sm) { flex-flow: column; :not(:last-child) { diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss index 2f11070632..d5a428118b 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-controls { display: flex; @@ -26,7 +28,7 @@ } } -@media screen and (max-width: 959px) { +@include layout-bp(lt-md) { adf-card-view .adf-property-value { text-overflow: ellipsis; overflow: hidden; diff --git a/lib/process-services/ng-package.json b/lib/process-services/ng-package.json index f9fe1c857f..a51516c44a 100644 --- a/lib/process-services/ng-package.json +++ b/lib/process-services/ng-package.json @@ -20,6 +20,9 @@ ], "lib": { "entryFile": "src/public-api.ts", - "flatModuleFile": "adf-process-services" + "flatModuleFile": "adf-process-services", + "styleIncludePaths": [ + "../core/src/lib" + ] } } diff --git a/lib/process-services/src/lib/app-list/apps-list.component.scss b/lib/process-services/src/lib/app-list/apps-list.component.scss index 4561d2ab69..b0931310ba 100644 --- a/lib/process-services/src/lib/app-list/apps-list.component.scss +++ b/lib/process-services/src/lib/app-list/apps-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + /* stylelint-disable scss/no-global-function-names */ @mixin adf-line-clamp($line-height: 1.25, $lines: 3) { position: relative; @@ -66,12 +68,12 @@ $tile-themes: ( flex: 1 1 33.3333%; max-width: 33.3333%; - @media screen and (max-width: 960px) { + @include layout-bp(lt-md) { flex: 1 1 50%; max-width: 50%; } - @media screen and (max-width: 600px) { + @include layout-bp(lt-sm) { flex: 1 1 100%; max-width: 100%; } diff --git a/lib/process-services/src/lib/attachment/process-attachment-list.component.scss b/lib/process-services/src/lib/attachment/process-attachment-list.component.scss index 0d92d9621c..964aad4e39 100644 --- a/lib/process-services/src/lib/attachment/process-attachment-list.component.scss +++ b/lib/process-services/src/lib/attachment/process-attachment-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf-data-cell { cursor: pointer !important; } @@ -43,7 +45,7 @@ object-fit: contain; margin-top: 17px; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { width: 250px; } } diff --git a/lib/process-services/src/lib/attachment/task-attachment-list.component.scss b/lib/process-services/src/lib/attachment/task-attachment-list.component.scss index 384427ce23..a5dd4ad0dd 100644 --- a/lib/process-services/src/lib/attachment/task-attachment-list.component.scss +++ b/lib/process-services/src/lib/attachment/task-attachment-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + adf-datatable .adf-data-cell { cursor: pointer !important; } @@ -25,7 +27,7 @@ adf-datatable .adf-data-cell { word-break: break-all; white-space: pre-line; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { font-size: 40px; } } @@ -48,7 +50,7 @@ adf-datatable .adf-data-cell { object-fit: contain; margin-top: 17px; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { width: 250px; } } diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss index 24b8bdac46..72f2201e88 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-attach-widget-container { margin-bottom: 15px; @@ -72,7 +74,7 @@ max-width: 200px; } - @media screen and (max-width: 959px) { + @include layout-bp(lt-md) { .mat-list-text { max-width: 150px; } diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process.component.scss index 2d80d8b6fb..3c869ed94e 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.scss +++ b/lib/process-services/src/lib/process-list/components/start-process.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-start-process { width: 96%; @@ -71,7 +73,7 @@ } } -@media (max-width: 600px) { +@include layout-bp(lt-sm) { .adf-start-process { width: 90%; margin-left: auto; diff --git a/lib/process-services/src/lib/process-user-info/process-user-info.component.scss b/lib/process-services/src/lib/process-user-info/process-user-info.component.scss index d67e6a1c29..8d458c8f6e 100644 --- a/lib/process-services/src/lib/process-user-info/process-user-info.component.scss +++ b/lib/process-services/src/lib/process-user-info/process-user-info.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-userinfo-container { display: flex; @@ -12,7 +14,7 @@ &-userinfo-name { padding: 0 5px; - @media screen and (max-width: 959px) { + @include layout-bp(lt-md) { display: none; } } @@ -90,7 +92,7 @@ display: flex; justify-content: space-between; - @media screen and (max-width: 599px) { + @include layout-bp(lt-sm) { padding: 10px; } } diff --git a/lib/process-services/src/lib/task-list/components/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task.component.scss index ffa00e25f8..85eb027b29 100644 --- a/lib/process-services/src/lib/task-list/components/start-task.component.scss +++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + /* stylelint-disable no-descending-specificity */ .adf-new-task-heading { padding-top: 12px; @@ -28,11 +30,11 @@ } .input-row { - @media screen and (max-width: 960px){ + @include layout-bp(lt-md) { flex-direction: column; } - @media screen and (min-width: 960px) { + @include layout-bp(lt-md) { mat-form-field { margin-right: 20px; } @@ -44,7 +46,7 @@ box-sizing: border-box; max-width: 48%; - @media screen and (max-width: 600px){ + @include layout-bp(lt-sm) { max-width: 100%; } } diff --git a/lib/process-services/src/lib/task-list/components/task-details.component.scss b/lib/process-services/src/lib/task-list/components/task-details.component.scss index 42a94867c6..a41d467829 100644 --- a/lib/process-services/src/lib/task-list/components/task-details.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-details.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + adf-task-details { width: 100%; @@ -52,7 +54,7 @@ adf-task-details { &-sidebar { &-drawer { - @media screen and (max-width: 1279px) { + @include layout-bp(lt-lg) { margin-left: 0; } } diff --git a/lib/process-services/src/lib/task-list/components/task-header.component.scss b/lib/process-services/src/lib/task-list/components/task-header.component.scss index 5926950f50..0b4fc431e9 100644 --- a/lib/process-services/src/lib/task-list/components/task-header.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-header.component.scss @@ -1,3 +1,5 @@ +@import 'styles/flex'; + .adf { &-controls { display: flex; @@ -25,7 +27,7 @@ } } -@media screen and (max-width: 959px) { +@include layout-bp(lt-md) { adf-card-view .adf-property-value { text-overflow: ellipsis; overflow: hidden;