diff --git a/angular.json b/angular.json index 47dca93ad4..e589bd085c 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": { @@ -410,7 +425,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 +455,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 +481,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 +548,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 +619,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 +649,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 +675,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 +753,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 +823,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 +876,12 @@ "entryName": "shared", "entryPath": "/lib/testing/src/lib/shared/index.ts" } - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "production": { @@ -897,7 +962,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 +1026,12 @@ "options": { "commands": [ "cd lib/cli && npm i && npm run dist" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "lib", "lib/core/src/lib" + ] + } }, "configurations": { "production": { @@ -1032,6 +1107,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 +1139,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/cli/package-lock.json b/lib/cli/package-lock.json index 531d0a03f3..f256a1ded4 100644 --- a/lib/cli/package-lock.json +++ b/lib/cli/package-lock.json @@ -9,7 +9,7 @@ "version": "6.3.0", "license": "Apache-2.0", "dependencies": { - "@alfresco/js-api": ">=6.3.0-1271", + "@alfresco/js-api": ">=6.3.0-1031", "commander": "^6.2.1", "ejs": "^3.1.9", "license-checker": "^25.0.1", @@ -30,13 +30,13 @@ } }, "node_modules/@alfresco/js-api": { - "version": "6.3.0-1280", - "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-6.3.0-1280.tgz", - "integrity": "sha512-xRf7YpSe9F9iNnimQS5DnNqCeb1P3EhBRnx/hOsqn9bC20c5plwjJWt2EIMcPvCz1TBhnw24BP14hUR6oq0pdQ==", + "version": "6.3.0-1035", + "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-6.3.0-1035.tgz", + "integrity": "sha512-+1xjwpx+/+kTlVfbxT1znlGPEfWYPv6KpSNneIz51OH+sFJ030mtkWeU4OnTbgeypSR72BN+G+RMJia7QT6qfA==", "dependencies": { "event-emitter": "^0.3.5", - "superagent": "^8.0.9", - "tslib": "^2.6.1" + "superagent": "^6.0.0", + "tslib": "^2.0.0" } }, "node_modules/@types/ejs": { @@ -317,9 +317,9 @@ } }, "node_modules/dezalgo": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz", - "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.3.tgz", + "integrity": "sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=", "dependencies": { "asap": "^2.0.0", "wrappy": "1" @@ -475,9 +475,9 @@ } }, "node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz", + "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -488,15 +488,10 @@ } }, "node_modules/formidable": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/formidable/-/formidable-2.1.2.tgz", - "integrity": "sha512-CM3GuJ57US06mlpQ47YcunuUZ9jpm8Vx+P2CGt2j7HpgkKZO/DJYQ0Bobim8G6PFQmK5lOqOOdUXboU+h73A4g==", - "dependencies": { - "dezalgo": "^1.0.4", - "hexoid": "^1.0.0", - "once": "^1.4.0", - "qs": "^6.11.0" - }, + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz", + "integrity": "sha512-KcpbcpuLNOwrEjnbpMC0gS+X8ciDoZE1kkqzat4a8vrprf+s9pKNQ/QIwWfbfs4ltgmFl3MD177SNTkve3BwGQ==", + "deprecated": "Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau", "funding": { "url": "https://ko-fi.com/tunnckoCore/commissions" } @@ -512,13 +507,12 @@ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "node_modules/get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", + "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==", "dependencies": { "function-bind": "^1.1.1", "has": "^1.0.3", - "has-proto": "^1.0.1", "has-symbols": "^1.0.3" }, "funding": { @@ -619,14 +613,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/hexoid": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz", - "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==", - "engines": { - "node": ">=8" - } - }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -1048,9 +1034,9 @@ } }, "node_modules/qs": { - "version": "6.11.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", - "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==", + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz", + "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==", "dependencies": { "side-channel": "^1.0.4" }, @@ -1096,6 +1082,19 @@ "npm-normalize-package-bin": "^1.0.0" } }, + "node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/readdir-scoped-modules": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz", @@ -1359,24 +1358,34 @@ "node": ">=0.10.0" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/superagent": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/superagent/-/superagent-8.1.2.tgz", - "integrity": "sha512-6WTxW1EB6yCxV5VFOIPQruWGHqc3yI7hEmZK6h+pyk69Lk/Ut7rLUY6W/ONF2MjBuGjvmMiIpsrVJ2vjrHlslA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/superagent/-/superagent-6.1.0.tgz", + "integrity": "sha512-OUDHEssirmplo3F+1HWKUrUjvnQuA+nZI6i/JJBdXb5eq9IyEQwPyPpqND+SSsxf6TygpBEkUjISVRN4/VOpeg==", + "deprecated": "Please upgrade to v7.0.2+ of superagent. We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing. See the releases tab for more information at .", "dependencies": { "component-emitter": "^1.3.0", - "cookiejar": "^2.1.4", - "debug": "^4.3.4", - "fast-safe-stringify": "^2.1.1", - "form-data": "^4.0.0", - "formidable": "^2.1.2", + "cookiejar": "^2.1.2", + "debug": "^4.1.1", + "fast-safe-stringify": "^2.0.7", + "form-data": "^3.0.0", + "formidable": "^1.2.2", "methods": "^1.1.2", - "mime": "2.6.0", - "qs": "^6.11.0", - "semver": "^7.3.8" + "mime": "^2.4.6", + "qs": "^6.9.4", + "readable-stream": "^3.6.0", + "semver": "^7.3.2" }, "engines": { - "node": ">=6.4.0 <13 || >=14" + "node": ">= 7.0.0" } }, "node_modules/supports-color": { @@ -1411,9 +1420,9 @@ } }, "node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, "node_modules/tunnel-agent": { "version": "0.6.0", @@ -1457,6 +1466,11 @@ "punycode": "^2.1.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" + }, "node_modules/util-extend": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/util-extend/-/util-extend-1.0.3.tgz", 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 0f42de3b16..5fa1096b70 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; } } @@ -94,7 +96,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 4088c303ee..e028e3959d 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; } } @@ -94,7 +95,7 @@ display: flex; justify-content: space-between; - @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..6118c95946 100644 --- a/lib/core/src/lib/styles/_default-class.scss +++ b/lib/core/src/lib/styles/_default-class.scss @@ -1,11 +1,13 @@ +@import 'styles/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..c542c46ef6 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": [ + "../../dist/libs/core/src/lib" + ] } } diff --git a/lib/insights/ng-package.json b/lib/insights/ng-package.json index 5600d2ce08..5f990d0158 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": [ + "../../dist/libs/core/lib" + ] } } diff --git a/lib/process-services-cloud/ng-package.json b/lib/process-services-cloud/ng-package.json index 77936a8af6..92fd9ace75 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": [ + "../../dist/libs/core/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 0f42de3b16..5fa1096b70 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; } } @@ -94,7 +96,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;