diff --git a/.github/workflows/CreateGitHubRelease.yml b/.github/workflows/CreateGitHubRelease.yml index 80b7fc8ff..c46a87f5a 100644 --- a/.github/workflows/CreateGitHubRelease.yml +++ b/.github/workflows/CreateGitHubRelease.yml @@ -6,6 +6,11 @@ on: package: description: "Package name to release (name in package.json)" required: true + type: choice + options: + - atlas-core + - atlas-content-native + - atlas-web-content jobs: create-release: diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md index b7020fa85..4ea0e45c0 100644 --- a/packages/atlas-core/CHANGELOG.md +++ b/packages/atlas-core/CHANGELOG.md @@ -6,6 +6,84 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue with radio buttons being distorted in some cases. +- We fixed an app exception caused by fontSize: 0 in the React Native New Architecture. + +## [4.3.0] Atlas Core - 2025-10-10 + +### Breaking change + +- Layout Behavior: behavioral changes may be observed in layouts, particularly concerning the topbar component +- Language selector: we changed language selector to use combobox instead of the widget. + +### Changed + +- Moved .sr-only from bootstrap to base +- Topbar redesign incl. horizontal centering +- Introduced configurable options for the topbar bottom border and sidebar border +- General layout improvements + +### Fixed + +- We fixed an issue with sidebar menu not overlaying some elements in modern client. +- We fixed an issue where sr-only input checkbox still showed up in switch widget. +- Resolved issues pertaining to active navigation item styling and behavior +- Reduced navigation padding + +## [4.1.3] Atlas Core - 2025-7-28 + +### Fixed + +- We fixed an issue where form label incorrectly aligned. +- We fixed an issue where focus styling on input gets clipped by dataview. + +## [4.1.2] Atlas Core - 2025-7-17 + +### Fixed + +- We fixed an issue where dataview scrollbar is not placed on content when dataview is placed as first element on the page. +- We fixed an issue where filter failed to render correctly on ios. + +## [4.1.1] Atlas Core - 2025-7-2 + +### Fixed + +- We fixed login page is not showing the image. +- We fixed too much spacing between radio buttons and their values. +- We fixed broken slider with label. +- We fixed invisible checkbox disabled control. + +## [4.1.0] Atlas Core - 2025-6-20 + +### Breaking change + +- Design properties updates: + - Introduced group names. + - Introduced form orientation on document level. + - Introduced label width on document level. + - Introduced design properties on layout grid columns and rows. +- Theme variables updates: + - accessibility improvements. + - consistency and flexibililty improvements. +- Default fonts (Poppins) is now shipped with atlas. +- Introduced hover effect on input widgets. +- Apply similar styling for modal header if h2 is used. + +## [4.0.1] Atlas Core - 2025-6-2 + +### Fixed + +- We fixed an issue where first element on the page failed to set to full height on react client. +- We fixed an issue where form vertical label not rendered correctly on rtl direction. + +## [4.0.0] Atlas Core - 2025-5-8 + +### Breaking change + +- Atlas major changes. Atlas 4 will fully utilize css variables instead of SASS variables. + ## [3.18.0] Atlas Core - 2025-5-27 ### Fixed diff --git a/packages/atlas-core/README.md b/packages/atlas-core/README.md index 1563d11a5..da5403dcc 100644 --- a/packages/atlas-core/README.md +++ b/packages/atlas-core/README.md @@ -5,3 +5,54 @@ This is the package being used to automate the release of Atlas Core module. ## Changelog Changes in the module should be present in the `CHANGELOG.md` file. + +## Atlas 3 to Atlas 4 + +### Highlight + +- Atlas 4 will fully utilize css variables instead of SASS variables. All the available css variables can be seen at `Atlas-core/Styling/web/themes/_theme-default.scss`. +- Currently, atlas 4 is released under compatibility mode. To fully ignore SASS variables mapping in styling, user can add `$use-css-variables: true;` inside their `Styling/web/custom-variables.scss`. +- For backward compatibility, we maintain `_variables-css-mappings.scss` file which contains conversion from SASS to CSS variables. + This file is now renamed into `_css-variables-mappings.scss` with a few minor changes. + +### Debugging and overriding css variables + +CSS variables can easily be viewed and overridden on the browser. +Simply run the application, open developer console (`F12` or `(ctrl|cmd) + shift + I`). + +In the elements tab, on the right side, find the Styles tab. +Scroll down, and user can see the compiled version of css variables from `color-variants.scss` and `theme-default.scss` +right click and press "copy rule". +paste this rules inside your own Styling folder to change the value and overrides. + +### Color mix + +darker, dark, light, lighter suffix variables (gray, brand-primary, brand-success, brand-warning, brand-danger, brand-default) will no longer use sass function `mix` in favor of css function color-mix. +and there will be a new `color-variants.scss` file to support this mapping which will produce css variables such as: + +``` + --gray-50: color-mix(in srgb, var(--gray), var(--color-base) 90%); + --gray-100: color-mix(in srgb, var(--gray), var(--color-base) 80%); + --gray-200: color-mix(in srgb, var(--gray), var(--color-base) 60%); + --gray-300: color-mix(in srgb, var(--gray), var(--color-base) 40%); + --gray-400: color-mix(in srgb, var(--gray), var(--color-base) 20%); + --gray-500: color-mix(in srgb, var(--gray), var(--color-contrast) 0%); + --gray-600: color-mix(in srgb, var(--gray), var(--color-contrast) 20%); + --gray-700: color-mix(in srgb, var(--gray), var(--color-contrast) 40%); + --gray-800: color-mix(in srgb, var(--gray), var(--color-contrast) 50%); + --gray-900: color-mix(in srgb, var(--gray), var(--color-contrast) 60%); +``` + +These variables will then mapped to the previously darker, dark, light, and lighter color variants: + +``` + --gray-lighter: var(--gray-50); + --gray-light: var(--gray-300); + --gray-primary: var(--gray-200); + --gray-dark: var(--gray-700); + --gray-darker: var(--gray-800); +``` + +The full list of css variables can be seen inside developer console upon running the application. + +If you previously rely on the sass functions to build your color variants, please update. diff --git a/packages/atlas-core/package.json b/packages/atlas-core/package.json index eb19c2b68..6a6a0b372 100644 --- a/packages/atlas-core/package.json +++ b/packages/atlas-core/package.json @@ -1,7 +1,7 @@ { "name": "atlas-core", "moduleName": "Atlas Core", - "version": "3.18.0", + "version": "4.3.2", "license": "Apache-2.0", "copyright": "© Mendix Technology BV 2024. All rights reserved.", "repository": { @@ -9,13 +9,13 @@ "url": "https://github.com/mendix/atlas.git" }, "marketplace": { - "minimumMXVersion": "10.21.0.64362", + "minimumMXVersion": "11.0.0.73100", "marketplaceId": 117187 }, "testProject": { "githubUrl": "https://github.com/mendix/Atlas-Design-System", "branchName": "main", - "mxVersion": "10.21.0.64362" + "mxVersion": "11.0.0.73100" }, "scripts": { "build:module": "ts-node ./scripts/build.ts build", diff --git a/packages/atlas-web-content/CHANGELOG.md b/packages/atlas-web-content/CHANGELOG.md index 12569fe00..5fe7ec6bd 100644 --- a/packages/atlas-web-content/CHANGELOG.md +++ b/packages/atlas-web-content/CHANGELOG.md @@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +## [4.1.0] Atlas Web Content - 2025-8-18 + +### Changed + +- We removed select entity page templates that still uses dojo core widget (template grid). + +## [4.0.0] Atlas Web Content - 2025-5-8 + +### Breaking change + +- Atlas major changes. Atlas 4 will fully utilize css variables instead of SASS variables. + ## [3.8.0] Atlas Web Content - 2025-4-16 ### Changed diff --git a/packages/atlas-web-content/package.json b/packages/atlas-web-content/package.json index d33430dcf..c276fc102 100644 --- a/packages/atlas-web-content/package.json +++ b/packages/atlas-web-content/package.json @@ -1,21 +1,21 @@ { "name": "atlas-web-content", "moduleName": "Atlas Web Content", - "version": "3.8.0", + "version": "4.1.0", "license": "Apache-2.0", - "copyright": "© Mendix Technology BV 2024. All rights reserved.", + "copyright": "© Mendix Technology BV 2025. All rights reserved.", "repository": { "type": "git", "url": "https://github.com/mendix/atlas.git" }, "marketplace": { - "minimumMXVersion": "10.21.0.64362", + "minimumMXVersion": "11.0.0.73100", "marketplaceId": 117183 }, "testProject": { "githubUrl": "https://github.com/mendix/Atlas-Design-System", "branchName": "main", - "mxVersion": "10.21.0.64362" + "mxVersion": "11.0.0.73100" }, "scripts": { "build:module": "ts-node ./scripts/build.ts build", diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/accordions.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/accordions.png index 263794fe2..6e2a0d741 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/accordions.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/accordions.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/alerts.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/alerts.png index db5f9afa1..b7529a308 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/alerts.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/alerts.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badge-buttons.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badge-buttons.png index 8fb245eaa..18fd1e776 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badge-buttons.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badge-buttons.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badges.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badges.png index 128d7cdda..b76ab8d72 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badges.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/badges.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/breadcrumbs.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/breadcrumbs.png index 955ab1b72..356fac671 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/breadcrumbs.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/breadcrumbs.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/buttons.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/buttons.png index 8156b0d43..a6f8476be 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/buttons.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/buttons.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card-withimage.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card-withimage.png deleted file mode 100644 index 66bfdf71e..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card-withimage.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card.png index d1a107ca4..bd7a73d9c 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/card.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/carousels.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/carousels.png index cbea7e7ed..558395b96 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/carousels.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/carousels.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/checkboxes.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/checkboxes.png index 53a5c5b0a..7c48daa95 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/checkboxes.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/checkboxes.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/combobox.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/combobox.png index 5e1d4e451..c3b8c5c11 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/combobox.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/combobox.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/confirmation-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/confirmation-tablet.png index 69f6349d7..152eb1811 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/confirmation-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/confirmation-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/containers.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/containers.png index 6cefdbb8e..d415b3222 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/containers.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/containers.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard-springboard-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard-springboard-phone.png index 14c024da9..be13c6f8b 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard-springboard-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard-springboard-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard.png index ab792a5e4..2fc7f5680 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dashboard.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrid-2.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrid-2.png index ede25355b..da1aed099 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrid-2.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrid-2.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrids.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrids.png deleted file mode 100644 index bffec8788..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/datagrids.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/date-pickers.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/date-pickers.png index 599838988..fcc88ae12 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/date-pickers.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/date-pickers.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-confirmation-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-confirmation-phone.png index 69f6349d7..77fc3ba4b 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-confirmation-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-confirmation-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-phone.png index 8b41f6c22..3e710ab74 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/detail-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdown-buttons.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdown-buttons.png deleted file mode 100644 index e3135edb8..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdown-buttons.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdowns.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdowns.png deleted file mode 100644 index c903a6389..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/dropdowns.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/file-managers.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/file-managers.png index d18b22b67..b433a1454 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/file-managers.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/file-managers.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-details-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-details-tablet.png index f3f74f92f..420225a25 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-details-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-details-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-phone.png index 05efb1edf..579173e15 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-tablet.png index 05efb1edf..579173e15 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/form-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formhorizontal.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formhorizontal.png index 692bb233a..3b09dd141 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formhorizontal.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formhorizontal.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formvertical.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formvertical.png index e40be40e6..843245cfa 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formvertical.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/formvertical.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/groupboxes.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/groupboxes.png index 1895f82bc..a70471db2 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/groupboxes.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/groupboxes.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/headerhero.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/headerhero.png index 75621c495..4c88e5ce2 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/headerhero.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/headerhero.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/images.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/images.png index f76ceeab9..4a49881da 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/images.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/images.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/labels.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/labels.png index 3b314f8ea..9a9c853e3 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/labels.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/labels.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-default.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-default.png index b796f9dd8..2a79ad31e 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-default.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-default.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-grids.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-grids.png index b251559c5..8f6f2621b 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-grids.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-grids.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-topbar.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-topbar.png index 014e95aa5..63ecdfb2d 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-topbar.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/layout-topbar.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-doubleline-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-doubleline-phone.png index 742bf4cc6..06f9d3c3a 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-doubleline-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-doubleline-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-tabbed-phone.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-tabbed-phone.png index 65c41a9a2..83e23aab3 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-tabbed-phone.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/list-tabbed-phone.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listitems.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listitems.png index 9cc9465b4..8d5be0c0d 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listitems.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listitems.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/lists.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/lists.png index 46066dcc5..b4035ffc3 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/lists.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/lists.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listviews.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listviews.png index 5294c585a..8b7db453e 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listviews.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/listviews.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/login-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/login-tablet.png index 050bb8c36..07f27d8e4 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/login-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/login-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/master-detail-form-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/master-detail-form-tablet.png index 6f540efda..4e558c831 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/master-detail-form-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/master-detail-form-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail-detail-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail-detail-tablet.png index cb16ee049..55e5f804e 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail-detail-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail-detail-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail.png index bfd0b5d43..5219313e1 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/masterdetail.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/menu-bars.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/menu-bars.png index 137607ca0..84d3fef8f 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/menu-bars.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/menu-bars.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-lists.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-lists.png index 78099ca07..f8eed9efd 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-lists.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-lists.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-trees.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-trees.png index 1e0977901..662d1c8ea 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-trees.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/navigation-trees.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheader.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheader.png index db0baef6f..d36ded31c 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheader.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheader.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheaderimage.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheaderimage.png index 8a12279b1..35fbb579f 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheaderimage.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pageheaderimage.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-bottombar.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-bottombar.png index 38f38edf7..5a38dc148 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-bottombar.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-bottombar.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-default.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-default.png index 9ad0c7660..9918d9a74 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-default.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-default.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-topbar.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-topbar.png index 865575971..2105de708 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-topbar.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/phone-topbar.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/popup-menus.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/popup-menus.png index 5b89a011b..db44df7a7 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/popup-menus.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/popup-menus.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-bars.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-bars.png index 786029240..d9b778c6c 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-bars.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-bars.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-circles.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-circles.png index 0a31d5046..688dc7af4 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-circles.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/progress-circles.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-centered.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-centered.png index 6f29732a1..287dc77f4 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-centered.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-centered.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-columns.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-columns.png index badfd24ce..6149cf86d 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-columns.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-columns.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-horizontal.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-horizontal.png index 4f14f1680..e97d8be9d 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-horizontal.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-horizontal.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-split.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-split.png index 51b81a784..534569f3a 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-split.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-split.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-vertical.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-vertical.png index b69ca8d8a..60ee52a1a 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-vertical.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-form-vertical.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-tablet-list.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-tablet-list.png index dc2960862..b19b5ded7 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-tablet-list.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/pt-tablet-list.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/radiobuttons.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/radiobuttons.png index 9ea1524d4..6a2fce75a 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/radiobuttons.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/radiobuttons.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/range-sliders.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/range-sliders.png index c124c8200..20dfa9caf 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/range-sliders.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/range-sliders.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/ratings.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/ratings.png index cc888ce78..37356b4fe 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/ratings.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/ratings.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/sliders.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/sliders.png index a9d118f14..f094bdbfb 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/sliders.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/sliders.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/switches.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/switches.png index 6729fecab..dbf73e650 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/switches.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/switches.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabbed-list-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabbed-list-tablet.png index 6f110a1fd..83e23aab3 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabbed-list-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabbed-list-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tables.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tables.png index bac1de660..e002aaf90 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tables.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tables.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-bottombaronly.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-bottombaronly.png index 38f38edf7..5a38dc148 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-bottombaronly.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-bottombaronly.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-default.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-default.png index d523c5df1..dad0764ee 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-default.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-default.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-fullpage.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-fullpage.png index b0846e4fb..b2588184c 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-fullpage.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-fullpage.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-equal.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-equal.png index d523c5df1..dd7d63b8b 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-equal.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-equal.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-left.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-left.png index d523c5df1..05f203384 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-left.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-left.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-right.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-right.png index d523c5df1..28d5cd7ce 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-right.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-right.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-topbaronly.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-topbaronly.png index 2dde53ecf..76da5bacc 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-topbaronly.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-topbaronly.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabs.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabs.png index 57d80ecb7..1b388e4f5 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabs.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tabs.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textareas.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textareas.png index 9ca69859f..4494ee5c5 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textareas.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textareas.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textboxes.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textboxes.png index c19ab03c1..8984d346d 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textboxes.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/textboxes.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/texts.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/texts.png index 3c16e40e6..0c019cade 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/texts.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/texts.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timeline.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timeline.png index 48fd0d661..9b5ec9b36 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timeline.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timeline.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timelines.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timelines.png index 87a538be7..2887e5f9f 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timelines.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/timelines.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/view-detail-tablet.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/view-detail-tablet.png index 8b41f6c22..3e710ab74 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/view-detail-tablet.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/view-detail-tablet.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-actioncenter.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-actioncenter.png index c318939a6..ad45d7ae5 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-actioncenter.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-actioncenter.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-navigation.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-navigation.png index b5366dac8..e4c57c3e4 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-navigation.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-navigation.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-pagesetting.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-pagesetting.png index 0e82def92..cac8615ca 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-pagesetting.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-pagesetting.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-status.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-status.png index 120843cd5..6fd27cf2a 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-status.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-status.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-transactions.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-transactions.png index ebd4f7626..352ca20c2 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-transactions.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-dashboard-transactions.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-cards.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-cards.png index 253c88214..bd0ffb668 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-cards.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-cards.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-summary.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-summary.png index fbfc732aa..7e78c8368 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-summary.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-summary.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-timeline.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-timeline.png index e3981ebd9..85941003c 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-timeline.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-detail-timeline.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-card.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-card.png deleted file mode 100644 index 24c62aa1c..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-card.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-tabbed.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-tabbed.png deleted file mode 100644 index 89a94f530..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-tabbed.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-withnavigation.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-withnavigation.png deleted file mode 100644 index 521140111..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid-withnavigation.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid.png deleted file mode 100644 index 8e6c1e5e2..000000000 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-grid.png and /dev/null differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-columns.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-columns.png index 388f5306d..95e5820bb 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-columns.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-columns.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-filtered.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-filtered.png index 290ad212e..259c8c2eb 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-filtered.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-filtered.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-masterdetail.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-masterdetail.png index 47fb5b09a..7f72f6b62 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-masterdetail.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-masterdetail.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-status.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-status.png index f74fc4def..fb42ab202 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-status.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list-status.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list.png index 5b3ab1f33..8f07fc1ac 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-list.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-login.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-login.png index 8f1690108..2f8621ca8 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-login.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-login.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-card.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-card.png index fe031b510..97e2ef865 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-card.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-card.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-form.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-form.png index 74065486a..712940b22 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-form.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-form.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-gallery.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-gallery.png index 9bf7a1837..a2adcb1d9 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-gallery.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-tabs-gallery.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form-centered.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form-centered.png index 0d10fea8e..82f04cb69 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form-centered.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form-centered.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form.png index 4fea6ed23..0981be477 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/web-wizard-form.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardarrow.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardarrow.png index 548742111..d894595b0 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardarrow.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardarrow.png differ diff --git a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardcircle.png b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardcircle.png index 0369a4a8e..2aef6ee6e 100644 Binary files a/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardcircle.png and b/packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/wizardcircle.png differ diff --git a/packages/atlas/e2e/fixtures/pagesCollection.json b/packages/atlas/e2e/fixtures/pagesCollection.json index a64b0c2f3..07176fcd4 100644 --- a/packages/atlas/e2e/fixtures/pagesCollection.json +++ b/packages/atlas/e2e/fixtures/pagesCollection.json @@ -1,110 +1,102 @@ [ - "/p/alerts", - "/p/layout-default", - "/p/layout-topbar", - "/p/breadcrumbs", - "/p/card", - "/p/card-withimage", - "/p/dashboard", - "/p/web-dashboard-actioncenter", - "/p/web-dashboard-navigation", - "/p/web-dashboard-pagesetting", - "/p/web-dashboard-status", - "/p/web-dashboard-transactions", - "/p/web-detail-cards", - "/p/web-detail-summary", - "/p/web-detail-timeline", - "/p/formhorizontal", - "/p/formvertical", - "/p/pt_form_centered", - "/p/pt_form_columns", - "/p/pt_form_horizontal", - "/p/pt_form_split", - "/p/pt_form_vertical", - "/p/web-grid", - "/p/web-grid-card", - "/p/web-grid-tabbed", - "/p/web-grid-withnavigation", - "/p/headerhero", - "/p/web-list", - "/p/listitems", - "/p/web-list-columns", - "/p/web-list-filtered", - "/p/web-list-masterdetail", - "/p/web-list-status", - "/p/lists", - "/p/web-login", - "/p/masterdetail", - "/p/pageheader", - "/p/pageheaderimage", - "/p/phone-bottombar", - "/p/dashboard-springboard-phone", - "/p/phone-default", - "/p/detail-phone", - "/p/detail-confirmation-phone", - "/p/form-phone", - "/p/phone-fullpage", - "/p/list-doubleline-phone", - "/p/list-tabbed-phone", - "/p/phone-topbar", - "/p/confirmation-tablet", - "/p/tablet-bottombaronly", - "/p/tablet-default", - "/p/view-detail-tablet", - "/p/masterdetail-detail-tablet", - "/p/form-tablet", - "/p/form-details-tablet", - "/p/master-detail-form-tablet", - "/p/tablet-fullpage", - "/p/pt_tablet_list", - "/p/tabbed-list-tablet", - "/p/login-tablet", - "/p/tablet-split-equal", - "/p/tablet-split-left", - "/p/tablet-split-right", - "/p/tablet-topbaronly", - "/p/web-tabs-card", - "/p/web-tabs-form", - "/p/web-tabs-gallery", - "/p/timeline", "/p/accordions", + "/p/alerts", "/p/badge-buttons", "/p/badges", + "/p/breadcrumbs", "/p/buttons", + "/p/card", "/p/carousels", "/p/checkboxes", "/p/combobox", + "/p/confirmation-tablet", "/p/containers", - "/p/datagrids", + "/p/dashboard", + "/p/dashboard-springboard-phone", "/p/datagrid-2", "/p/date-pickers", - "/p/dropdowns", - "/p/dropdown-buttons", + "/p/detail-confirmation-phone", + "/p/detail-phone", "/p/file-managers", + "/p/form-details-tablet", + "/p/form-phone", + "/p/form-tablet", + "/p/formhorizontal", + "/p/formvertical", "/p/groupboxes", + "/p/headerhero", "/p/images", "/p/labels", + "/p/layout-default", "/p/layout-grids", + "/p/layout-topbar", + "/p/list-doubleline-phone", + "/p/list-tabbed-phone", + "/p/listitems", + "/p/lists", "/p/listviews", + "/p/login-tablet", + "/p/master-detail-form-tablet", + "/p/masterdetail", + "/p/masterdetail-detail-tablet", "/p/menu-bars", "/p/navigation-lists", "/p/navigation-trees", + "/p/pageheader", + "/p/pageheaderimage", + "/p/phone-bottombar", + "/p/phone-default", + "/p/phone-fullpage", + "/p/phone-topbar", "/p/popup-menus", "/p/progress-bars", "/p/progress-circles", + "/p/pt_form_centered", + "/p/pt_form_columns", + "/p/pt_form_horizontal", + "/p/pt_form_split", + "/p/pt_form_vertical", + "/p/pt_tablet_list", "/p/radiobuttons", "/p/range-sliders", "/p/ratings", "/p/sliders", "/p/switches", - "/p/tabs", + "/p/tabbed-list-tablet", + "/p/tablet-bottombaronly", + "/p/tablet-default", + "/p/tablet-fullpage", + "/p/tablet-split-equal", + "/p/tablet-split-left", + "/p/tablet-split-right", + "/p/tablet-topbaronly", "/p/tables", - "/p/texts", + "/p/tabs", "/p/textareas", "/p/textboxes", + "/p/texts", + "/p/timeline", "/p/timelines", - "/p/wizardarrow", - "/p/wizardcircle", + "/p/view-detail-tablet", + "/p/web-dashboard-navigation", + "/p/web-dashboard-pagesetting", + "/p/web-dashboard-status", + "/p/web-dashboard-transactions", + "/p/web-dashboard-actioncenter", + "/p/web-detail-cards", + "/p/web-detail-summary", + "/p/web-detail-timeline", + "/p/web-list", + "/p/web-list-columns", + "/p/web-list-filtered", + "/p/web-list-masterdetail", + "/p/web-list-status", + "/p/web-login", + "/p/web-tabs-card", + "/p/web-tabs-form", + "/p/web-tabs-gallery", "/p/web-wizard-form", - "/p/web-wizard-form-centered" + "/p/web-wizard-form-centered", + "/p/wizardarrow", + "/p/wizardcircle" ] diff --git a/packages/atlas/package-lock.json b/packages/atlas/package-lock.json index 723d94cef..6c8e6b923 100644 --- a/packages/atlas/package-lock.json +++ b/packages/atlas/package-lock.json @@ -1,14 +1,14 @@ { "name": "@mendix/atlas-ui", - "version": "3.2.6", + "version": "4.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@mendix/atlas-ui", - "version": "3.2.6", + "version": "4.0.0", "license": "MIT", - "dependencies": { + "devDependencies": { "@playwright/test": "^1.49.1", "node-fetch": "^3.3.1", "shelljs": "^0.8.5" @@ -18,6 +18,7 @@ "version": "1.49.1", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz", "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==", + "dev": true, "dependencies": { "playwright": "1.49.1" }, @@ -31,12 +32,14 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -45,12 +48,14 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "dev": true, "engines": { "node": ">= 12" } @@ -59,6 +64,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "dev": true, "funding": [ { "type": "github", @@ -81,6 +87,7 @@ "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "dev": true, "dependencies": { "fetch-blob": "^3.1.2" }, @@ -91,12 +98,14 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -109,12 +118,14 @@ "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -134,6 +145,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, "dependencies": { "function-bind": "^1.1.1" }, @@ -145,6 +157,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -153,12 +166,14 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "node_modules/interpret": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true, "engines": { "node": ">= 0.10" } @@ -167,6 +182,7 @@ "version": "2.12.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", + "dev": true, "dependencies": { "has": "^1.0.3" }, @@ -178,6 +194,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -189,6 +206,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "dev": true, "funding": [ { "type": "github", @@ -207,6 +225,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz", "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==", + "dev": true, "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", @@ -224,6 +243,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "dependencies": { "wrappy": "1" } @@ -232,6 +252,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -239,12 +260,14 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true }, "node_modules/playwright": { "version": "1.49.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz", "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==", + "dev": true, "dependencies": { "playwright-core": "1.49.1" }, @@ -262,6 +285,7 @@ "version": "1.49.1", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz", "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==", + "dev": true, "bin": { "playwright-core": "cli.js" }, @@ -273,6 +297,7 @@ "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", + "dev": true, "dependencies": { "resolve": "^1.1.6" }, @@ -284,6 +309,7 @@ "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dev": true, "dependencies": { "is-core-module": "^2.11.0", "path-parse": "^1.0.7", @@ -300,6 +326,7 @@ "version": "0.8.5", "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", + "dev": true, "dependencies": { "glob": "^7.0.0", "interpret": "^1.0.0", @@ -316,6 +343,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, "engines": { "node": ">= 0.4" }, @@ -327,6 +355,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "dev": true, "engines": { "node": ">= 8" } @@ -334,7 +363,8 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true } }, "dependencies": { @@ -342,6 +372,7 @@ "version": "1.49.1", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz", "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==", + "dev": true, "requires": { "playwright": "1.49.1" } @@ -349,12 +380,14 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -363,17 +396,20 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", - "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==" + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "dev": true }, "fetch-blob": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "dev": true, "requires": { "node-domexception": "^1.0.0", "web-streams-polyfill": "^3.0.3" @@ -383,6 +419,7 @@ "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "dev": true, "requires": { "fetch-blob": "^3.1.2" } @@ -390,23 +427,27 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "optional": true }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true }, "glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -420,6 +461,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -428,6 +470,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -436,17 +479,20 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "interpret": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", - "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==" + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true }, "is-core-module": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", + "dev": true, "requires": { "has": "^1.0.3" } @@ -455,6 +501,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -462,12 +509,14 @@ "node-domexception": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", - "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==" + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "dev": true }, "node-fetch": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz", "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==", + "dev": true, "requires": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", @@ -478,6 +527,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "requires": { "wrappy": "1" } @@ -485,17 +535,20 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true }, "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true }, "playwright": { "version": "1.49.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz", "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==", + "dev": true, "requires": { "fsevents": "2.3.2", "playwright-core": "1.49.1" @@ -504,12 +557,14 @@ "playwright-core": { "version": "1.49.1", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz", - "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==" + "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==", + "dev": true }, "rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", + "dev": true, "requires": { "resolve": "^1.1.6" } @@ -518,6 +573,7 @@ "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dev": true, "requires": { "is-core-module": "^2.11.0", "path-parse": "^1.0.7", @@ -528,6 +584,7 @@ "version": "0.8.5", "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", + "dev": true, "requires": { "glob": "^7.0.0", "interpret": "^1.0.0", @@ -537,17 +594,20 @@ "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true }, "web-streams-polyfill": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", - "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==" + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "dev": true }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true } } } diff --git a/packages/atlas/package.json b/packages/atlas/package.json index 2176addb2..a2b02acc9 100644 --- a/packages/atlas/package.json +++ b/packages/atlas/package.json @@ -1,11 +1,11 @@ { "name": "@mendix/atlas-ui", - "version": "3.2.6", + "version": "4.0.0", "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.", "testProject": { "githubUrl": "https://github.com/mendix/Atlas-Design-System", "branchName": "main", - "mxVersion": "10.21.1.64969" + "mxVersion": "11.0.0.73100" }, "scripts": { "build": "node ./scripts/build.js", @@ -14,7 +14,7 @@ "e2edev": "npx playwright test --ui", "release": "node ./scripts/build.js release", "release-ts": "tsc", - "update-screenshots": "npm run e2e && docker run -t --rm --ipc=host --network=host -v $(pwd):/tests -w /tests mcr.microsoft.com/playwright:v1.36.2-jammy bash -c 'npx playwright test --project=chromium --update-snapshots'" + "update-screenshots": "npm run e2e && docker run -t --rm --ipc=host --network=host -v $(pwd):/tests -w /tests mcr.microsoft.com/playwright:v1.49.1-jammy bash -c 'npx playwright test --project=chromium --update-snapshots'" }, "repository": { "type": "git", diff --git a/packages/atlas/scripts/e2e.playwright.js b/packages/atlas/scripts/e2e.playwright.js index 2e275eff5..ee68cf904 100644 --- a/packages/atlas/scripts/e2e.playwright.js +++ b/packages/atlas/scripts/e2e.playwright.js @@ -14,7 +14,6 @@ main().catch(e => { }); async function main() { - try { execSync("docker info"); } catch (e) { @@ -79,7 +78,7 @@ async function main() { execSync( `docker run --name mxbuild -t -v ${process.cwd()}:/source ` + `--rm mxbuild:${mendixVersion} bash -c "mx update-widgets --loose-version-check /source/${projectFile} && mxbuild ` + - `-o /tmp/automation.mda /source/${projectFile}"`, + `--modern-web-client --ignore-unsupported-widgets -o /tmp/automation.mda /source/${projectFile}"`, { stdio: "inherit" } ); console.log("Bundle created and all the widgets are updated"); @@ -158,7 +157,7 @@ async function copyGitHubTestProject() { ); } mkdir("-p", "tests/testProject"); - await promisify(exec)(`unzip -o ${testArchivePath} -d tests/testProject`); + execSync(`unzip -o ${testArchivePath} -d tests/testProject`, { stdio: "inherit" }); if (process.argv.includes("--remove-atlas-files")) { rm( "-rf", diff --git a/packages/atlas/src/theme/web/_theme-dark.scss b/packages/atlas/src/theme/web/_theme-dark.scss new file mode 100644 index 000000000..b55b7df05 --- /dev/null +++ b/packages/atlas/src/theme/web/_theme-dark.scss @@ -0,0 +1,60 @@ +:root.theme-dark { + --brand-primary: color-mix(in srgb, #264ae5, var(--color-base) 25%); + --brand-success: color-mix(in srgb, #1ac61a, var(--color-base) 25%); + --brand-warning: color-mix(in srgb, #f0b000, var(--color-base) 25%); + --brand-danger: color-mix(in srgb, #ea3337, var(--color-base) 25%); + + --color-base: rgb(30, 30, 30); + --color-contrast: #ffffff; + + --border-color-default: #6c757d; + + --bg-color: var(--brand-primary-50); + --bg-color-secondary: var(--brand-primary-100); + + --font-color-header: color-mix(in srgb, var(--brand-primary-900), white 80%); + --font-color-detail: color-mix(in srgb, var(--brand-primary-900), white 60%); + + --shadow-color: rgb(50, 50, 50); + --topbar-bg: linear-gradient(to bottom, var(--brand-primary-400), var(--brand-primary-300)); + --sidebar-bg: linear-gradient(to bottom, var(--brand-primary-300), var(--brand-primary-200)); + + --link-color: var(--brand-primary-900); + + --navigation-color: var(--color-contrast); + --navigation-color-hover: var(--color-contrast); + --navigation-color-active: var(--color-contrast); + --navigation-sub-color: var(--color-contrast); + --navigation-sub-color-hover: var(--color-contrast); + --navigation-sub-color-active: var(--color-contrast); + --navsidebar-sub-bg: var(--brand-primary-800); + + --navtopbar-bg: var(--topbar-bg); + --navtopbar-bg-hover: rgba(255, 255, 255, 0.1); + --navtopbar-bg-active: rgba(255, 255, 255, 0.2); + --navtopbar-color: var(--black); + --navtopbar-color-hover: color-mix(in srgb, var(--navtopbar-color) 85%, var(--color-base)); + --navtopbar-color-active: color-mix(in srgb, var(--navtopbar-color) 85%, var(--color-base)); + + --navtopbar-sub-color: var(--navigation-color); + --navtopbar-sub-color-hover: var(--navigation-color); + --navtopbar-sub-color-active: var(--navigation-color); + + --form-input-bg: var(--brand-primary-50); + --form-input-bg-hover: var(--brand-primary-50); + --form-input-bg-focus: var(--brand-primary-50); + --form-input-border-focus-color: var(--brand-primary-600); + + --btn-default-bg: var(--gray-lighter); + --btn-default-color: var(--font-color-base); + --btn-link-bg-hover: var(--brand-default-900); + --btn-primary-color: var(--font-color-base); + --btn-success-color: var(--font-color-base); + --btn-warning-color: var(--font-color-base); + --btn-danger-color: var(--font-color-base); + + --header-text-color: var(--font-color-default); + --header-text-color-detail: rgba(255, 255, 255, 0.2); + + --tabs-bg-pills: #343a40; +} diff --git a/packages/atlas/src/theme/web/_theme-neutral.scss b/packages/atlas/src/theme/web/_theme-neutral.scss new file mode 100644 index 000000000..97c86fd68 --- /dev/null +++ b/packages/atlas/src/theme/web/_theme-neutral.scss @@ -0,0 +1,57 @@ +:root.theme-neutral { + --brand-primary: rgb(37, 37, 67); + --sidebar-bg: var(--brand-default-100); + + // --brand-primary: rgb(0, 13, 110); + --navigation-color: var(--font-color-base); + --navigation-color-hover: var(--font-color-base); + --navigation-color-active: var(--font-color-base); + + --navigation-sub-color: var(--navigation-color); + --navigation-sub-color-hover: var(--navigation-color-hover); + --navigation-sub-color-active: var(--navigation-color-active); + + /* Sidebar Navigation */ + --navigation-bg: var(--topbar-bg); + --navigation-bg-hover: rgba(0, 0, 0, 0.1); + --navigation-bg-active: rgba(0, 0, 0, 0.1); + + --navigation-sub-bg: rgba(0, 0, 0, 0.1); + --navigation-sub-bg-hover: var(--navigation-bg-hover); + --navigation-sub-bg-active: var(--navigation-bg-active); + + --navigation-border-color: var(--navigation-bg-hover); + + --navsidebar-bg: var(--sidebar-bg); + --navsidebar-bg-hover: var(--navigation-bg-hover); + --navsidebar-bg-active: var(--navigation-bg-active); + + --navsidebar-sub-bg: rgba(0, 0, 0, 0.1); + --navsidebar-sub-bg-hover: var(--navigation-bg-hover); + --navsidebar-sub-bg-active: var(--navigation-bg-active); + --navsidebar-sub-bg-header: rgba(0, 0, 0, 0.1); + --navsidebar-sub-bg-collapsed: var(--brand-primary-50); + + --navsidebar-border-color: var(--border-color-default); + --navsidebar-shadow: 0 0 1px rgb(0 0 0 / 14%), 1px 1px 1px rgba(83, 83, 83, 0.28); + + --navsidebar-font-size: var(--font-size-default); + --navsidebar-sub-font-size: var(--font-size-small); + --navsidebar-glyph-size: 20px; + + --navsidebar-color: var(--navigation-color); + --navsidebar-color-hover: var(--navigation-color-hover); + --navsidebar-color-active: var(--navigation-color-active); + + --navsidebar-sub-color: var(--navigation-color); + --navsidebar-sub-color-hover: var(--navigation-color-hover); + --navsidebar-sub-color-active: var(--navigation-color-active); + + --navsidebar-width-closed: 52px; + --navsidebar-width-open: 232px; + --navsidebar-toggle-size: 32px; + + --border-radius-s: 0; + --border-radius-m: 1px; + --border-radius-l: 2px; +} diff --git a/packages/atlas/src/theme/web/custom-variables.scss b/packages/atlas/src/theme/web/custom-variables.scss index 7cbb2c590..a93b8955c 100644 --- a/packages/atlas/src/theme/web/custom-variables.scss +++ b/packages/atlas/src/theme/web/custom-variables.scss @@ -1,723 +1,603 @@ -// -// ██████╗ █████╗ ███████╗██╗ ██████╗ -// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ -// ██████╔╝███████║███████╗██║██║ -// ██╔══██╗██╔══██║╚════██║██║██║ -// ██████╔╝██║ ██║███████║██║╚██████╗ -// ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ -// - -//== Gray Shades -//## Different gray shades to be used for our variables and components -$gray-darker: #0a1325; -$gray-dark: #474e5c; -$gray: #787d87; -$gray-light: #a9acb3; -$gray-primary: #e7e7e9; -$gray-lighter: #f8f8f8; - -//== Step 1: Brand Colors -$brand-default: $gray-primary; -$brand-primary: #264ae5; -$brand-success: #3cb33d; -$brand-warning: #eca51c; -$brand-danger: #e33f4e; - +// Theme options $brand-logo: false; -$brand-logo-height: 32px; -$brand-logo-width: 32px; // Only used for CSS brand logo - -//== Step 2: UI Customization - -// Default Font Size & Color -$font-size-default: 14px; -$font-color-default: #0a1325; - -// Global Border Color -$border-color-default: #ced0d3; -$border-radius-default: 4px; - -// Topbar -$topbar-bg: #020557; -$topbar-minimalheight: 48px; -$topbar-border-color: $border-color-default; - -// Sidebar -$sidebar-bg: #24276c; - -// Topbar mobile -$m-header-height: 45px; -$m-header-bg: $topbar-bg; -$m-header-color: #fff; -$m-header-title-size: 16px; - -// Navbar Brand Name / For your company, product, or project name (used in layouts/base/) -$navbar-brand-name: #fff; - -// Background Colors -// Backgrounds -$bg-color: #f8f8f8; -$bg-color-secondary: #fff; - -// Default Link Color -$link-color: $brand-primary; -$link-hover-color: darken($link-color, 15%); - -// -// █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ -// ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ -// ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ -// ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ -// ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ -// ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ -// - -//== Typography -//## Change your font family, weight, line-height, headings and more (used in components/typography) - -// Font Family Import (Used for google font plugin in theme creater) -$font-family-import: "resources/fonts/open-sans/open-sans.css"; - -// Font Family / False = fallback from Bootstrap (Helvetica Neue) -$font-family-base: "Open Sans", sans-serif; - -// Font Sizes -$font-size-large: 18px; -$font-size-small: 12px; - -// Font Weights -$font-weight-light: 100; -$font-weight-normal: normal; -$font-weight-semibold: 600; -$font-weight-bold: bold; - -// Font Size Headers -$font-size-h1: 31px; -$font-size-h2: 26px; -$font-size-h3: 24px; -$font-size-h4: 18px; -$font-size-h5: $font-size-default; -$font-size-h6: 12px; - -// Font Weight Headers -$font-weight-header: $font-weight-semibold; - -// Line Height -$line-height-base: 1.428571429; - -// Spacing -$font-header-margin: 0 0 8px 0; - -// Text Colors -$font-color-detail: #6c717e; -$font-color-header: #0a1325; - -//== Navigation -//## Used in components/navigation - -// Default Navigation styling -$navigation-item-height: unset; -$navigation-item-padding: 8px; - -$navigation-font-size: 14px; -$navigation-sub-font-size: $font-size-small; -$navigation-glyph-size: 20px; // For glyphicons that you can select in the Mendix Modeler - -$navigation-color: #fff; -$navigation-color-hover: #fff; -$navigation-color-active: #fff; - -$navigation-sub-color: #fff; -$navigation-sub-color-hover: #fff; -$navigation-sub-color-active: #fff; - -// Navigation Sidebar -$navsidebar-bg: $sidebar-bg; -$navsidebar-bg-hover: darken($navsidebar-bg, 10%); -$navsidebar-bg-active: darken($navsidebar-bg, 10%); - -$navsidebar-sub-bg: $navsidebar-bg-hover; -$navsidebar-sub-bg-hover: $navsidebar-bg; -$navsidebar-sub-bg-active: $navsidebar-bg; - -$navsidebar-border-color: $navsidebar-bg-hover; - -$navsidebar-font-size: $font-size-default; -$navsidebar-sub-font-size: $font-size-small; -$navsidebar-glyph-size: 20px; // For glyphicons that you can select in the Mendix Modeler - -$navsidebar-color: #fff; -$navsidebar-color-hover: #fff; -$navsidebar-color-active: #fff; - -$navsidebar-sub-color: #fff; -$navsidebar-sub-color-hover: #fff; -$navsidebar-sub-color-active: #fff; - -$navsidebar-width-closed: 52px; -$navsidebar-width-open: 232px; - -// Navigation topbar -$navtopbar-font-size: $font-size-default; -$navtopbar-sub-font-size: $font-size-small; -$navtopbar-glyph-size: 1.2em; // For glyphicons that you can select in the Mendix Modeler - -$navtopbar-bg: $topbar-bg; -$navtopbar-bg-hover: mix($topbar-bg, white, 85%); -$navtopbar-bg-active: mix($topbar-bg, white, 85%); -$navtopbar-color: #fff; -$navtopbar-color-hover: $navtopbar-color; -$navtopbar-color-active: $navtopbar-color; - -$navtopbar-sub-bg: $topbar-bg; -$navtopbar-sub-bg-hover: $navtopbar-bg-hover; -$navtopbar-sub-bg-active: $navtopbar-bg-hover; -$navtopbar-sub-color: #fff; -$navtopbar-sub-color-hover: #fff; -$navtopbar-sub-color-active: #fff; - -//## Used in layouts/base -$navtopbar-border-color: $topbar-border-color; - -//== Form -//## Used in components/inputs - -// Values that can be used default | lined +$font-family-import: false; $form-input-style: default; - -// Form Label -$form-label-color: $font-color-default; -$form-label-size: $font-size-default; -$form-label-weight: $font-weight-semibold; -$form-label-gutter: 8px; - -// Form Input dimensions -$form-input-height: auto; -$form-input-padding-y: 8px; -$form-input-padding-x: 8px; -$form-input-static-padding-y: 8px; -$form-input-static-padding-x: 0; -$form-input-font-size: $form-label-size; -$form-input-line-height: $line-height-base; -$form-input-border-radius: $border-radius-default; - -// Form Input styling -$form-input-bg: #fff; -$form-input-bg-focus: #fff; -$form-input-bg-hover: $gray-primary; -$form-input-bg-disabled: $bg-color; -$form-input-color: $font-color-default; -$form-input-focus-color: $form-input-color; -$form-input-disabled-color: #9da1a8; -$form-input-placeholder-color: #6c717c; -$form-input-border-color: $gray-primary; -$form-input-border-focus-color: $brand-primary; - -// Form Input Static styling -$form-input-static-border-color: $gray-primary; - -// Form Group -$form-group-margin-bottom: 16px; -$form-group-gutter: 16px; - -//== Buttons -//## Define background-color, border-color and text. Used in components/buttons - -// Default button style -$btn-font-size: 14px; $btn-bordered: false; // Default value false, set to true if you want this effect -$btn-border-radius: $border-radius-default; - -// Button Background Color -$btn-default-bg: #fff; -$btn-primary-bg: $brand-primary; -$btn-success-bg: $brand-success; -$btn-warning-bg: $brand-warning; -$btn-danger-bg: $brand-danger; - -// Button Border Color -$btn-default-border-color: $gray-primary; -$btn-primary-border-color: $brand-primary; -$btn-success-border-color: $brand-success; -$btn-warning-border-color: $brand-warning; -$btn-danger-border-color: $brand-danger; - -// Button Text Color -$btn-default-color: $brand-primary; -$btn-primary-color: #fff; -$btn-success-color: #fff; -$btn-warning-color: #fff; -$btn-danger-color: #fff; - -// Button Icon Color -$btn-default-icon-color: $gray; - -// Button Background Color -$btn-default-bg-hover: $btn-default-border-color; -$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%); -$btn-success-bg-hover: mix($btn-success-bg, black, 80%); -$btn-warning-bg-hover: mix($btn-warning-bg, black, 80%); -$btn-danger-bg-hover: mix($btn-danger-bg, black, 80%); -$btn-link-bg-hover: $gray-lighter; - -//== Header blocks -//## Define look and feel over multible building blocks that serve as header - -$header-min-height: 240px; -$header-bg-color: $brand-primary; -$header-bgimage-filter: brightness(60%); -$header-text-color: #fff; -$header-text-color-detail: rgba(0, 0, 0, 0.2); - -// -// ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ -// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ -// █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ -// ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ -// ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ -// ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ -// - -//== Color variations -//## These variations are used to support several other variables and components - -// Color variations -$color-default-darker: mix($brand-default, black, 60%); -$color-default-dark: mix($brand-default, black, 70%); -$color-default-light: mix($brand-default, white, 40%); -$color-default-lighter: mix($brand-default, white, 20%); - -$color-primary-darker: mix($brand-primary, black, 60%); -$color-primary-dark: mix($brand-primary, black, 70%); -$color-primary-light: mix($brand-primary, white, 40%); -$color-primary-lighter: mix($brand-primary, white, 20%); - -$color-success-darker: mix($brand-success, black, 60%); -$color-success-dark: mix($brand-success, black, 70%); -$color-success-light: mix($brand-success, white, 40%); -$color-success-lighter: mix($brand-success, white, 20%); - -$color-warning-darker: mix($brand-warning, black, 60%); -$color-warning-dark: mix($brand-warning, black, 70%); -$color-warning-light: mix($brand-warning, white, 40%); -$color-warning-lighter: mix($brand-warning, white, 20%); - -$color-danger-darker: mix($brand-danger, black, 60%); -$color-danger-dark: mix($brand-danger, black, 70%); -$color-danger-light: mix($brand-danger, white, 40%); -$color-danger-lighter: mix($brand-danger, white, 20%); - -$brand-gradient: linear-gradient(to right top, #264ae5, #2239c5, #1b29a6, #111988, #03096c); - -//== Grids -//## Used for Datagrid, Templategrid, Listview & Tables (see components folder) - -// Default Border Colors -$grid-border-color: $border-color-default; - -// Spacing -// Default -$grid-padding-top: 16px; -$grid-padding-right: 16px; -$grid-padding-bottom: 16px; -$grid-padding-left: 16px; - -// Listview -$listview-padding-top: 16px; -$listview-padding-right: 16px; -$listview-padding-bottom: 16px; -$listview-padding-left: 16px; - -// Dropdown -$dropdown-outer-padding: 10px; -$dropdown-border-radius: 7px; - -// Background Colors -$grid-bg: transparent; -$grid-bg-header: transparent; // Grid Headers -$grid-bg-hover: mix($grid-border-color, #fff, 20%); -$grid-bg-selected: mix($grid-border-color, #fff, 30%); -$grid-bg-selected-hover: mix($grid-border-color, #fff, 50%); - -// Striped Background Color -$grid-bg-striped: mix($grid-border-color, #fff, 10%); - -// Background Footer Color -$grid-footer-bg: $gray-primary; - -// Text Color -$grid-selected-color: $font-color-default; - -// Paging Colors -$grid-paging-bg: transparent; -$grid-paging-bg-hover: transparent; -$grid-paging-border-color: transparent; -$grid-paging-border-color-hover: transparent; -$grid-paging-color: $gray-light; -$grid-paging-color-hover: $brand-primary; - -//== Tabs -//## Default variables for Tab Container Widget (used in components/tabcontainer) - -// Text Color -$tabs-color: $font-color-detail; -$tabs-color-active: $font-color-default; -$tabs-lined-color-active: $font-color-default; - -$tabs-lined-border-width: 3px; - -// Border Color -$tabs-border-color: $border-color-default; -$tabs-lined-border-color: $brand-primary; - -// Background Color -$tabs-bg: transparent; -$tabs-bg-pills: #e7e7e9; -$tabs-bg-hover: lighten($tabs-border-color, 5); -$tabs-bg-active: $brand-primary; - -//== Modals -//## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) - -// Background Color -$modal-header-bg: transparent; - -// Border Color -$modal-header-border-color: $border-color-default; - -// Text Color -$modal-header-color: $font-color-default; - -//== Dataview -//## Default variables for Dataview Widget (used in components/dataview) - -// Controls -$dataview-controls-bg: transparent; -$dataview-controls-border-color: $border-color-default; - -// Empty Message -$dataview-emptymessage-bg: $bg-color; -$dataview-emptymessage-color: $font-color-default; - -//== Alerts -//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) - -// Background Color -$alert-success-bg: $color-success-lighter; -$alert-warning-bg: $color-warning-lighter; -$alert-danger-bg: $color-danger-lighter; - -// Text Color -$alert-success-color: $color-success-darker; -$alert-warning-color: $color-warning-darker; -$alert-danger-color: $color-danger-darker; - -// Border Color -$alert-success-border-color: $color-success-dark; -$alert-warning-border-color: $color-warning-dark; -$alert-danger-border-color: $color-danger-dark; - -//== Wizard - -$wizard-step-height: 48px; -$wizard-step-number-size: 64px; -$wizard-step-number-font-size: $font-size-h3; - -//Wizard step states -$wizard-default-bg: #fff; -$wizard-default-color: #fff; -$wizard-default-step-color: $font-color-default; -$wizard-default-border-color: $border-color-default; - -$wizard-active-bg: $color-primary-lighter; -$wizard-active-color: $color-primary-dark; -$wizard-active-step-color: $color-primary-dark; -$wizard-active-border-color: $color-primary-dark; - -$wizard-visited-bg: $color-success-lighter; -$wizard-visited-color: $color-success-dark; -$wizard-visited-step-color: $color-success-dark; -$wizard-visited-border-color: $color-success-dark; - -//== Labels -//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) - -// Background Color -$label-default-bg: $brand-default; -$label-primary-bg: $brand-primary; -$label-success-bg: $brand-success; -$label-warning-bg: $brand-warning; -$label-danger-bg: $brand-danger; - -// Border Color -$label-default-border-color: $brand-default; -$label-primary-border-color: $brand-primary; -$label-success-border-color: $brand-success; -$label-warning-border-color: $brand-warning; -$label-danger-border-color: $brand-danger; - -// Text Color -$label-default-color: $font-color-default; -$label-primary-color: #fff; -$label-success-color: #fff; -$label-warning-color: #fff; -$label-danger-color: #fff; - -//== Groupbox -//## Default variables for Groupbox Widget (used in components/groupbox) - -// Background Color -$groupbox-default-bg: $gray-primary; -$groupbox-primary-bg: $brand-primary; -$groupbox-success-bg: $brand-success; -$groupbox-warning-bg: $brand-warning; -$groupbox-danger-bg: $brand-danger; -$groupbox-white-bg: #fff; - -// Text Color -$groupbox-default-color: $font-color-default; -$groupbox-primary-color: #fff; -$groupbox-success-color: #fff; -$groupbox-warning-color: #fff; -$groupbox-danger-color: #fff; -$groupbox-white-color: $font-color-default; - -//== Callout (groupbox) Colors -//## Extended variables for Groupbox Widget (used in components/groupbox) - -// Text and Border Color -$callout-default-color: $font-color-default; -$callout-success-color: $brand-success; -$callout-warning-color: $brand-warning; -$callout-danger-color: $brand-danger; - -// Background Color -$callout-default-bg: $color-default-lighter; -$callout-success-bg: $color-success-lighter; -$callout-warning-bg: $color-warning-lighter; -$callout-danger-bg: $color-danger-lighter; - -//== Timeline -//## Extended variables for Timeline Widget -// Colors -$timeline-icon-color: $brand-primary; -$timeline-border-color: $border-color-default; -$timeline-event-time-color: $brand-primary; - -// Sizes -$timeline-icon-size: 18px; -$timeline-image-size: 36px; - -//Timeline grouping -$timeline-grouping-size: 120px; -$timeline-grouping-border-radius: 30px; -$timeline-grouping-border-color: $timeline-border-color; - -//== Accordions -//## Extended variables for Accordion Widget - -// Default -$accordion-header-default-bg: $bg-color-secondary; -$accordion-header-default-bg-hover: $bg-color; -$accordion-header-default-color: $font-color-header; -$accordion-default-border-color: $border-color-default; - -$accordion-bg-striped: $grid-bg-striped; -$accordion-bg-striped-hover: $grid-bg-selected; - -// Semantic background colors -$accordion-header-primary-bg: $btn-primary-bg; -$accordion-header-secondary-bg: $btn-default-bg; -$accordion-header-success-bg: $btn-success-bg; -$accordion-header-warning-bg: $btn-warning-bg; -$accordion-header-danger-bg: $btn-danger-bg; - -$accordion-header-primary-bg-hover: $btn-primary-bg-hover; -$accordion-header-secondary-bg-hover: $btn-default-bg-hover; -$accordion-header-success-bg-hover: $btn-success-bg-hover; -$accordion-header-warning-bg-hover: $btn-warning-bg-hover; -$accordion-header-danger-bg-hover: $btn-danger-bg-hover; - -// Semantic text colors -$accordion-header-primary-color: $btn-primary-color; -$accordion-header-secondary-color: $btn-default-color; -$accordion-header-success-color: $btn-success-color; -$accordion-header-warning-color: $btn-warning-color; -$accordion-header-danger-color: $btn-danger-color; - -// Semantic border colors -$accordion-primary-border-color: $btn-primary-border-color; -$accordion-secondary-border-color: $btn-default-border-color; -$accordion-success-border-color: $btn-success-border-color; -$accordion-warning-border-color: $btn-warning-border-color; -$accordion-danger-border-color: $btn-danger-border-color; - -//== Spacing -//## Advanced layout options (used in base/mixins/default-spacing) - -// Smallest spacing -$spacing-smallest: 2px; - -// Smaller spacing -$spacing-smaller: 4px; - -// Small spacing -$spacing-small: 8px; - -// Medium spacing -$spacing-medium: 16px; -$t-spacing-medium: 16px; -$m-spacing-medium: 16px; - -// Large spacing -$spacing-large: 24px; -$t-spacing-large: 24px; -$m-spacing-large: 16px; - -// Larger spacing -$spacing-larger: 32px; - -// Largest spacing -$spacing-largest: 48px; - -// Layout spacing -$layout-spacing-top: 24px; -$layout-spacing-right: 24px; -$layout-spacing-bottom: 24px; -$layout-spacing-left: 24px; - -$t-layout-spacing-top: 24px; -$t-layout-spacing-right: 24px; -$t-layout-spacing-bottom: 24px; -$t-layout-spacing-left: 24px; - -$m-layout-spacing-top: 16px; -$m-layout-spacing-right: 16px; -$m-layout-spacing-bottom: 16px; -$m-layout-spacing-left: 16px; - -// Combined layout spacing -$layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left; -$m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left; -$t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left; - -// Gutter size -$gutter-size: 8px; - -//== Tables -//## Table spacing options (used in components/tables) - -$padding-table-cell-top: 8px; -$padding-table-cell-bottom: 8px; -$padding-table-cell-left: 8px; -$padding-table-cell-right: 8px; - -//== Media queries breakpoints -//## Define the breakpoints at which your layout will change, adapting to different screen sizes. - -$screen-xs: 480px; -$screen-sm: 576px; -$screen-md: 768px; -$screen-lg: 992px; -$screen-xl: 1200px; - -// So media queries don't overlap when required, provide a maximum (used for max-width) -$screen-xs-max: calc(#{$screen-sm} - 1px); -$screen-sm-max: calc(#{$screen-md} - 1px); -$screen-md-max: calc(#{$screen-lg} - 1px); -$screen-lg-max: calc(#{$screen-xl} - 1px); - -//== Settings -//## Enable or disable your desired framework features -// Use of !important -$important-flex: true; // ./base/flex.scss -$important-spacing: true; // ./base/spacing.scss -$important-helpers: true; // ./helpers/helperclasses.scss - -//===== Legacy variables ===== - -//== Step 1: Brand Colors -$brand-inverse: #24276c; -$brand-info: #0086d9; - -//== Step 2: UI Customization - -//== Buttons -//## Define background-color, border-color and text. Used in components/buttons - -// Button Background Color -$btn-inverse-bg: $brand-inverse; -$btn-info-bg: $brand-info; -// Button Border Color -$btn-inverse-border-color: $brand-inverse; -$btn-info-border-color: $brand-info; +:root { + /* Brand Colors */ + --brand-primary: #264ae5; + --brand-success: #16aa16; + --brand-warning: #cd8501; + --brand-danger: #EA3337; + --brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9); + --gray: #B8BABF; + +// /* Hover Color Variants */ +// --brand-default-hover: var(--brand-default-100); +// --brand-primary-hover: var(--brand-primary-700); +// --brand-success-hover: var(--brand-success-700); +// --brand-warning-hover: var(--brand-warning-700); +// --brand-danger-hover: var(--brand-danger-700); + +// /* Brand Logo */ +// --brand-logo-height: 24px; +// --brand-logo-width: 32px; +// --brand-gradient: linear-gradient(to bottom, var(--brand-primary-900), var(--brand-primary-700)); + +// /* Default Font Size & Color */ +// --font-size-default: 14px; +// --font-color-default: var(--gray-900); +// --font-color-contrast: var(--color-base); + +// /* Global Border */ +// --border-color-default: var(--brand-default-300); +// --border-radius-s: 4px; +// --border-radius-m: 8px; +// --border-radius-l: 12px; +// --border-radius-default: var(--border-radius-s); +// --border-width-thin: 1px; +// --border-width-medium: 2px; +// --border-width-thick: 3px; +// --border-width-default: var(--border-width-thin); +// --border-default: var(--border-width-default) solid var(--border-color-default); + +// /* Focus indicators for accessibility */ +// --focus-outline: 2px solid var(--form-input-border-focus-color); +// --focus-outline-offset: 2px; + +// /* Topbar */ +// --topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600)); +// --topbar-minimalheight: 48px; +// --topbar-border-color: var(--border-color-default); + +// /* Sidebar */ +// --sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700)); + +// /* Topbar mobile */ +// --m-header-height: 45px; +// --m-header-bg: var(--topbar-bg); +// --m-header-color: var(--font-color-contrast); +// --m-header-title-size: 16px; + +// /* Navbar Brand Name */ +// --navbar-brand-name: var(--font-color-default); + +// /* Background Colors */ +// --bg-color: var(--brand-default-100); +// --bg-color-secondary: var(--color-base); + +// /* Default Link Color */ +// --link-color: var(--brand-primary); +// --link-hover-color: var(--brand-primary-400); + +// /* Font Family */ +// --font-family-base: "Poppins", sans-serif; + +// /* Font Sizes */ +// --font-size-large: 18px; +// --font-size-small: 12px; + +// /* Font Weights */ +// --font-weight-light: 300; +// --font-weight-normal: 400; +// --font-weight-semibold: 600; +// --font-weight-bold: 700; + +// /* Header Font Sizes */ +// --font-size-h1: 34px; +// --font-size-h2: 26px; +// --font-size-h3: 24px; +// --font-size-h4: 16px; +// --font-size-h5: var(--font-size-default); +// --font-size-h6: 12px; + +// /* Header Font Weight */ +// --font-weight-header: var(--font-weight-semibold); + +// /* Line Height */ +// --line-height-base: 1.428571429; + +// /* Header Margin */ +// --font-header-margin: 0 0 8px 0; + +// /* Font Colors */ +// --font-color-detail: var(--brand-primary-700); +// --font-color-header: var(--brand-primary-800); + +// /* Navigation */ +// --navigation-item-height: unset; +// --navigation-item-padding: var(--spacing-medium); +// --navigation-border-radius: var(--border-radius-m); +// --navigation-scrollbar-color: rgba(255, 255, 255, 0.5) transparent; + +// --navigation-font-size: var(--font-size-default); +// --navigation-sub-font-size: var(--font-size-small); +// --navigation-glyph-size: 20px; + +// --navigation-color: var(--font-color-contrast); +// --navigation-color-hover: var(--font-color-contrast); +// --navigation-color-active: var(--font-color-contrast); + +// --navigation-sub-color: var(--navigation-color); +// --navigation-sub-color-hover: var(--navigation-color-hover); +// --navigation-sub-color-active: var(--navigation-color-active); + +// /* Sidebar Navigation */ +// --navigation-bg: var(--topbar-bg); +// --navigation-bg-hover: rgba(0, 0, 0, 0.2); +// --navigation-bg-active: rgba(0, 0, 0, 0.3); + +// --navigation-sub-bg: rgba(0, 0, 0, 0.2); +// --navigation-sub-bg-hover: var(--navigation-bg-hover); +// --navigation-sub-bg-active: var(--navigation-bg-active); + +// --navigation-border-color: var(--navigation-bg-hover); + +// --navsidebar-bg: var(--sidebar-bg); +// --navsidebar-bg-hover: var(--navigation-bg-hover); +// --navsidebar-bg-active: var(--navigation-bg-active); + +// --navsidebar-sub-bg: rgba(0, 0, 0, 0.2); +// --navsidebar-sub-bg-hover: var(--navigation-bg-hover); +// --navsidebar-sub-bg-active: var(--navigation-bg-active); +// --navsidebar-sub-bg-header: rgba(0, 0, 0, 0.2); +// --navsidebar-sub-bg-collapsed: var(--brand-primary-700); + +// --navsidebar-border-color: var(--border-color-default); +// --navsidebar-border-radius: var(--navigation-border-radius); +// --navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%); + +// --navsidebar-font-size: var(--font-size-default); +// --navsidebar-sub-font-size: var(--font-size-small); +// --navsidebar-glyph-size: 20px; + +// --navsidebar-color: var(--navigation-color); +// --navsidebar-color-hover: var(--navigation-color-hover); +// --navsidebar-color-active: var(--navigation-color-active); + +// --navsidebar-sub-color: var(--navigation-color); +// --navsidebar-sub-color-hover: var(--navigation-color-hover); +// --navsidebar-sub-color-active: var(--navigation-color-active); + +// --navsidebar-width-closed: 48px; +// --navsidebar-width-open: 232px; +// --navsidebar-toggle-size: 32px; + +// --navsidebar-icon-height: 48px; +// --navsidebar-icon-width: 48px; +// --navsidebar-animation-duration: 250ms; +// --navsidebar-animation-function: ease-in; + +// /* Topbar Navigation */ +// --navtopbar-font-size: var(--font-size-small); +// --navtopbar-sub-font-size: var(--font-size-small); +// --navtopbar-glyph-size: 1.2em; + +// --navtopbar-bg: var(--topbar-bg); +// --navtopbar-bg-hover: var(--navigation-bg-hover); +// --navtopbar-bg-active: var(--navigation-bg-active); +// --navtopbar-color: var(--navigation-color); +// --navtopbar-color-hover: var(--navigation-color-hover); +// --navtopbar-color-active: var(--navigation-color-active); + +// --navtopbar-sub-bg: var(--navtopbar-bg); +// --navtopbar-sub-bg-hover: var(--navtopbar-bg-hover); +// --navtopbar-sub-bg-active: var(--navtopbar-bg-active); +// --navtopbar-sub-color: var(--navigation-color); +// --navtopbar-sub-color-hover: var(--navigation-color-hover); +// --navtopbar-sub-color-active: var(--navigation-color-active); + +// --navtopbar-border-color: var(--topbar-border-color); +// --navtopbar-border-radius: var(--navigation-border-radius); + +// /* Shadows */ +// --shadow-color-border: var(--border-color-default); +// --shadow-color: var(--brand-default-300); +// --shadow-small: 0 2px 4px 0; +// --shadow-medium: 0 4px 6px 0; +// --shadow-large: 0 8px 10px 0; + +// /* Form Inputs */ +// --form-label-color: var(--font-color-default); +// --form-label-size: var(--font-size-default); +// --form-label-weight: var(--font-weight-normal); +// --form-label-gutter: 8px; + +// --form-input-height: auto; +// --form-input-padding-y: 8px; +// --form-input-padding-x: 8px; +// --form-input-static-padding-y: 8px; +// --form-input-static-padding-x: 0; +// --form-input-font-size: var(--form-label-size); +// --form-input-line-height: var(--line-height-base); +// --form-input-border-radius: 6px; + +// --form-input-bg: var(--color-base); +// --form-input-bg-focus: var(--color-base); +// --form-input-bg-hover: var(--color-base); +// --form-input-bg-disabled: var(--bg-color); +// --form-input-color: var(--font-color-default); +// --form-input-focus-color: var(--form-input-color); +// --form-input-disabled-color: var(--gray-700); +// --form-input-placeholder-color: var(--gray-600); +// --form-input-border-color: var(--brand-default); +// --form-input-border-focus-color: var(--brand-primary); +// --form-input-border-hover-color: color-mix(in srgb, var(--form-input-border-color), var(--form-input-border-focus-color) 50%); + +// --form-input-static-border-color: var(--gray-200); + +// --form-group-margin-bottom: 16px; +// --form-group-gutter: 16px; + +// /* Buttons */ +// --btn-font-size: var(--font-size-default); +// --btn-border-radius: var(--border-radius-default); + +// --btn-default-bg: var(--color-base); +// --btn-primary-bg: var(--brand-primary-600); +// --btn-success-bg: var(--brand-success-600); +// --btn-warning-bg: var(--brand-warning-600); +// --btn-danger-bg: var(--brand-danger-600); + +// --btn-default-border-color: var(--brand-default); +// --btn-primary-border-color: var(--brand-primary-600); +// --btn-success-border-color: var(--brand-success-600); +// --btn-warning-border-color: var(--brand-warning-600); +// --btn-danger-border-color: var(--brand-danger-600); + +// --btn-default-color: var(--brand-primary); +// --btn-primary-color: var(--font-color-contrast); +// --btn-success-color: var(--font-color-contrast); +// --btn-warning-color: var(--font-color-contrast); +// --btn-danger-color: var(--font-color-contrast); + +// --btn-default-icon-color: var(--gray); + +// --btn-default-bg-hover: var(--brand-default-hover); +// --btn-primary-bg-hover: var(--brand-primary-hover); +// --btn-success-bg-hover: var(--brand-success-hover); +// --btn-warning-bg-hover: var(--brand-warning-hover); +// --btn-danger-bg-hover: var(--brand-danger-hover); +// --btn-link-bg-hover: var(--brand-default-hover); + +// --btn-default-bg-active: var(--brand-default-300); +// --btn-primary-bg-active: var(--brand-primary-500); +// --btn-success-bg-active: var(--brand-success-500); +// --btn-warning-bg-active: var(--brand-warning-500); +// --btn-danger-bg-active: var(--brand-danger-500); +// --btn-link-bg-active: var(--brand-default-500); + +// /* Header */ +// --header-min-height: 240px; +// --header-bg-color: var(--brand-primary); +// --header-bgimage-filter: brightness(60%); +// --header-text-color: var(--color-base); +// --header-text-color-detail: rgba(0, 0, 0, 0.2); + +// /* Grid */ +// --grid-border-color: var(--border-color-default); + +// --grid-bg: transparent; +// --grid-bg-header: transparent; +// --grid-bg-hover: var(--brand-default-hover); +// --grid-bg-selected: var(--brand-default); +// --grid-bg-selected-hover: var(--brand-default-600); +// --grid-bg-striped: var(--brand-default-50); +// --grid-footer-bg: var(--brand-default); + +// --grid-selected-color: var(--font-color-default); + +// --grid-paging-bg: transparent; +// --grid-paging-bg-hover: transparent; +// --grid-paging-border-color: transparent; +// --grid-paging-border-color-hover: transparent; +// --grid-paging-color: var(--gray-300); +// --grid-paging-color-hover: var(--brand-primary); + +// /* Tabs */ +// --tabs-color: var(--font-color-default); +// --tabs-color-active: var(--font-color-detail); +// --tabs-lined-color-active: var(--font-color-detail); + +// --tabs-lined-border-width: 3px; +// --tabs-border-color: var(--border-color-default); +// --tabs-lined-border-color: var(--brand-primary); +// --tabs-bg: transparent; +// --tabs-bg-pills: var(--brand-default-200); +// --tabs-bg-hover: var(--brand-default-300); +// --tabs-bg-active: var(--brand-primary-600); + +// /* Modal */ +// --modal-header-bg: transparent; +// --modal-header-border-color: var(--border-color-default); +// --modal-header-color: var(--font-color-header); +// --modal-body-bg: var(--bg-color-secondary); +// --modal-footer-bg: var(--bg-color-secondary); + +// /* Data View */ +// --dataview-controls-bg: inherit; +// --dataview-controls-border-color: var(--border-color-default); +// --dataview-controls-alignment: left; + +// --dataview-emptymessage-bg: var(--bg-color); +// --dataview-emptymessage-color: var(--font-color-default); + +// /* Cards */ +// --card-shadow: var(--shadow-small) var(--shadow-color); +// --card-border: var(--border-default); +// --card-border-radius: var(--border-radius-m); +// --card-padding: var(--spacing-large); +// --card-margin-bottom: var(--spacing-smaller); +// --card-bg: var(--bg-color-secondary); + +// /* Alerts */ +// --alert-primary-bg: var(--brand-primary-50); +// --alert-success-bg: var(--brand-success-50); +// --alert-warning-bg: var(--brand-warning-50); +// --alert-danger-bg: var(--brand-danger-50); + +// --alert-primary-color: var(--brand-primary-700); +// --alert-success-color: var(--brand-success-700); +// --alert-warning-color: var(--brand-warning-700); +// --alert-danger-color: var(--brand-danger-700); + +// --alert-primary-border-color: var(--brand-primary-600); +// --alert-success-border-color: var(--brand-success-600); +// --alert-warning-border-color: var(--brand-warning-600); +// --alert-danger-border-color: var(--brand-danger-600); + +// /* Wizard */ +// --wizard-step-height: 48px; +// --wizard-step-number-size: 64px; +// --wizard-step-number-font-size: var(--font-size-h3); + +// --wizard-default-bg: var(--color-base); +// --wizard-default-color: var(--color-base); +// --wizard-default-step-color: var(--font-color-default); +// --wizard-default-border-color: var(--border-color-default); + +// --wizard-active-bg: var(--brand-primary-200); +// --wizard-active-color: var(--brand-primary-700); +// --wizard-active-step-color: var(--brand-primary-700); +// --wizard-active-border-color: var(--brand-primary-700); + +// --wizard-visited-bg: var(--brand-success-200); +// --wizard-visited-color: var(--brand-success-700); +// --wizard-visited-step-color: var(--brand-success-700); +// --wizard-visited-border-color: var(--brand-success-700); + +// /* Labels */ +// --label-default-bg: var(--brand-default); +// --label-primary-bg: var(--brand-primary-600); +// --label-success-bg: var(--brand-success-600); +// --label-warning-bg: var(--brand-warning-600); +// --label-danger-bg: var(--brand-danger-600); + +// --label-default-border-color: var(--brand-default-600); +// --label-primary-border-color: var(--brand-primary-600); +// --label-success-border-color: var(--brand-success-600); +// --label-warning-border-color: var(--brand-warning-600); +// --label-danger-border-color: var(--brand-danger-600); + +// --label-default-color: var(--font-color-default); +// --label-primary-color: var(--color-base); +// --label-success-color: var(--color-base); +// --label-warning-color: var(--color-base); +// --label-danger-color: var(--color-base); + +// /* Groupbox */ +// --groupbox-default-bg: var(--brand-default); +// --groupbox-primary-bg: var(--brand-primary-600); +// --groupbox-success-bg: var(--brand-success-600); +// --groupbox-warning-bg: var(--brand-warning-600); +// --groupbox-danger-bg: var(--brand-danger-600); +// --groupbox-white-bg: var(--color-base-600); + +// --groupbox-default-color: var(--font-color-default); +// --groupbox-primary-color: var(--font-color-contrast); +// --groupbox-success-color: var(--font-color-contrast); +// --groupbox-warning-color: var(--font-color-contrast); +// --groupbox-danger-color: var(--font-color-contrast); +// --groupbox-white-color: var(--font-color-default); + +// /* Callouts */ +// --callout-primary-color: var(--brand-primary-600); +// --callout-default-color: var(--font-color-default); +// --callout-success-color: var(--brand-success-700); +// --callout-warning-color: var(--brand-warning-700); +// --callout-danger-color: var(--brand-danger-600); + +// --callout-primary-bg: var(--brand-primary-100); +// --callout-default-bg: var(--gray-50); +// --callout-success-bg: var(--brand-success-100); +// --callout-warning-bg: var(--brand-warning-100); +// --callout-danger-bg: var(--brand-danger-100); + +// /* Timeline */ +// --timeline-icon-color: var(--brand-primary); +// --timeline-border-color: var(--border-color-default); +// --timeline-event-time-color: var(--brand-primary); +// --timeline-icon-size: 18px; +// --timeline-image-size: 36px; +// --timeline-grouping-size: 120px; +// --timeline-grouping-border-radius: 30px; +// --timeline-grouping-border-color: var(--timeline-border-color); + +// /* Accordion */ +// --accordion-header-default-bg: var(--bg-color-secondary); +// --accordion-header-default-bg-hover: var(--brand-default-hover); +// --accordion-header-default-color: var(--font-color-header); +// --accordion-default-border-color: var(--border-color-default); +// --accordion-bg-striped: var(--brand-default-200); +// --accordion-bg-striped-hover: var(--brand-default-hover); + +// --accordion-header-primary-bg: var(--brand-primary-600); +// --accordion-header-secondary-bg: var(--bg-color-secondary); +// --accordion-header-success-bg: var(--brand-success-600); +// --accordion-header-warning-bg: var(--brand-warning-600); +// --accordion-header-danger-bg: var(--brand-danger-600); + +// --accordion-header-primary-bg-hover: var(--brand-primary-hover); +// --accordion-header-secondary-bg-hover: var(---brand-default-hover); +// --accordion-header-success-bg-hover: var(--brand-success-hover); +// --accordion-header-warning-bg-hover: var(--brand-warning-hover); +// --accordion-header-danger-bg-hover: var(--brand-danger-hover); + +// --accordion-header-primary-color: var(--font-color-contrast); +// --accordion-header-secondary-color: var(--brand-primary); +// --accordion-header-success-color: var(--font-color-contrast); +// --accordion-header-warning-color: var(--font-color-contrast); +// --accordion-header-danger-color: var(--font-color-contrast); + +// --accordion-primary-border-color: var(--brand-primary); +// --accordion-secondary-border-color: var(--gray-200); +// --accordion-success-border-color: var(--brand-success); +// --accordion-warning-border-color: var(--brand-warning); +// --accordion-danger-border-color: var(--brand-danger); + +// /* Spacing */ +// --spacing-none: 0px; +// --spacing-smallest: 2px; +// --spacing-smaller: 4px; +// --spacing-small: 8px; +// --spacing-medium: 16px; + +// --t-spacing-medium: 16px; +// --m-spacing-medium: 16px; + +// --spacing-large: 24px; +// --t-spacing-large: 24px; +// --m-spacing-large: 16px; + +// --spacing-larger: 32px; +// --spacing-largest: 48px; + +// --layout-spacing-top: 24px; +// --layout-spacing-right: 24px; +// --layout-spacing-bottom: 24px; +// --layout-spacing-left: 24px; + +// --t-layout-spacing-top: 24px; +// --t-layout-spacing-right: 24px; +// --t-layout-spacing-bottom: 24px; +// --t-layout-spacing-left: 24px; + +// --m-layout-spacing-top: 16px; +// --m-layout-spacing-right: 16px; +// --m-layout-spacing-bottom: 16px; +// --m-layout-spacing-left: 16px; + +// --layout-spacing: var(--layout-spacing-top) var(--layout-spacing-right) var(--layout-spacing-bottom) var(--layout-spacing-left); +// --m-layout-spacing: var(--m-layout-spacing-top) var(--m-layout-spacing-right) var(--m-layout-spacing-bottom) var(--m-layout-spacing-left); +// --t-layout-spacing: var(--t-layout-spacing-top) var(--t-layout-spacing-right) var(--t-layout-spacing-bottom) var(--t-layout-spacing-left); + +// --gutter-size: var(--spacing-medium); + +// --padding-table-cell-top: 8px; +// --padding-table-cell-bottom: 8px; +// --padding-table-cell-left: 8px; +// --padding-table-cell-right: 8px; + +// /* Brand Variants */ +// --btn-inverse-bg: var(--brand-primary-400); +// --btn-info-bg: var(--brand-primary-300); +// --btn-inverse-border-color: var(--brand-primary-400); +// --btn-info-border-color: var(--brand-primary-300); + +// --btn-inverse-color: var(--color-base); +// --btn-info-color: var(--color-base); + +// --btn-inverse-bg-hover: var(--brand-primary-300); +// --btn-info-bg-hover: var(--brand-primary-300); + +// /* Alerts */ +// --alert-info-bg: var(--brand-primary-50); +// --alert-info-color: var(--brand-primary-600); +// --alert-info-border-color: var(--brand-primary); + +// /* Labels */ +// --label-info-bg: var(--brand-primary-300); +// --label-inverse-bg: var(--brand-primary-600); + +// --label-info-border-color: var(--brand-primary-300); +// --label-inverse-border-color: var(--brand-primary-600); + +// --label-info-color: var(--color-base); +// --label-inverse-color: var(--color-base); + +// /* Groupbox */ +// --groupbox-inverse-bg: var(--brand-primary-600); +// --groupbox-info-bg: var(--brand-primary-300); + +// --groupbox-inverse-color: var(--color-base); +// --groupbox-info-color: var(--color-base); + +// /* Callouts */ +// --callout-info-color: var(--brand-primary-300); +// --callout-info-bg: var(--brand-primary-50); + +// --screen-xs: #{$screen-xs}; +// --screen-sm: #{$screen-sm}; +// --screen-md: #{$screen-md}; +// --screen-lg: #{$screen-lg}; +// --screen-xl: #{$screen-xl}; +// --screen-xxl: #{$screen-xxl}; + +// /* Legacy variables */ +// --gray-lighter: var(--gray-50); +// --gray-light: var(--gray-300); +// --gray-primary: var(--gray-200); +// --gray-dark: var(--gray-700); +// --gray-darker: var(--gray-800); + +// /* Color variations */ +// --color-default-darker: var(--gray-700); +// --color-default-dark: var(--gray-600); +// --color-default-light: var(--gray-100); +// --color-default-lighter: var(--gray-50); + +// --color-primary-darker: var(--brand-primary-700); +// --color-primary-dark: var(--brand-primary-600); +// --color-primary-light: var(--brand-primary-100); +// --color-primary-lighter: var(--brand-primary-50); + +// --color-success-darker: var(--brand-success-700); +// --color-success-dark: var(--brand-success-600); +// --color-success-light: var(--brand-success-100); +// --color-success-lighter: var(--brand-success-50); + +// --color-warning-darker: var(--brand-warning-700); +// --color-warning-dark: var(--brand-warning-600); +// --color-warning-light: var(--brand-warning-100); +// --color-warning-lighter: var(--brand-warning-50); + +// --color-danger-darker: var(--brand-danger-700); +// --color-danger-dark: var(--brand-danger-600); +// --color-danger-light: var(--brand-danger-100); +// --color-danger-lighter: var(--brand-danger-50); + +// --grid-padding-top: 16px; +// --grid-padding-right: 16px; +// --grid-padding-bottom: 16px; +// --grid-padding-left: 16px; + +// --listview-padding-top: 16px; +// --listview-padding-right: 16px; +// --listview-padding-bottom: 16px; +// --listview-padding-left: 16px; +} -// Button Text Color -$btn-inverse-color: #fff; -$btn-info-color: #fff; -// Button Background Color -$btn-inverse-bg-hover: mix($btn-inverse-bg, white, 80%); -$btn-info-bg-hover: mix($btn-info-bg, black, 80%); - -//== Color variations -//## These variations are used to support several other variables and components - -// Color variations -$color-inverse-darker: mix($brand-inverse, black, 60%); -$color-inverse-dark: mix($brand-inverse, black, 70%); -$color-inverse-light: mix($brand-inverse, white, 60%); -$color-inverse-lighter: mix($brand-inverse, white, 20%); - -$color-info-darker: mix($brand-info, black, 60%); -$color-info-dark: mix($brand-info, black, 70%); -$color-info-light: mix($brand-info, white, 60%); -$color-info-lighter: mix($brand-info, white, 20%); - -//== Alerts -//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) - -// Background Color -$alert-info-bg: $color-primary-lighter; - -// Text Color -$alert-info-color: $color-primary-darker; - -// Border Color -$alert-info-border-color: $color-primary-dark; - -//== Labels -//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) - -// Background Color -$label-info-bg: $brand-info; -$label-inverse-bg: $brand-inverse; - -// Border Color -$label-info-border-color: $brand-info; -$label-inverse-border-color: $brand-inverse; - -// Text Color -$label-info-color: #fff; -$label-inverse-color: #fff; - -//== Groupbox -//## Default variables for Groupbox Widget (used in components/groupbox) - -// Background Color -$groupbox-inverse-bg: $brand-inverse; -$groupbox-info-bg: $brand-info; - -// Text Color -$groupbox-inverse-color: #fff; -$groupbox-info-color: #fff; - -//== Callout (groupbox) Colors -//## Extended variables for Groupbox Widget (used in components/groupbox) - -// Text and Border Color -$callout-info-color: $brand-info; - -// Background Color -$callout-info-bg: $color-info-lighter; +//== Media queries breakpoints +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. +// $screen-xs: 480px; +// $screen-sm: 576px; +// $screen-md: 768px; +// $screen-lg: 992px; +// $screen-xl: 1200px; +// $screen-xxl: 1400px; + +// Ensures backwards compatibility. Set to false if the theme variables is not using CSS variables (e.g. --brand-primary). +$use-css-variables: true; +@import "../../themesource/atlas_core/web/variables"; \ No newline at end of file diff --git a/packages/atlas/src/theme/web/exclusion-variables.scss b/packages/atlas/src/theme/web/exclusion-variables.scss index fdffb43bd..951ad7413 100644 --- a/packages/atlas/src/theme/web/exclusion-variables.scss +++ b/packages/atlas/src/theme/web/exclusion-variables.scss @@ -17,6 +17,7 @@ $exclude-badge-button-helpers: false; $exclude-barcode-scanner: false; $exclude-button: false; $exclude-button-helpers: false; +$exclude-combobox: false; $exclude-check-box: false; $exclude-custom-dijit-widget: false; $exclude-custom-switch: false; diff --git a/packages/atlas/src/theme/web/main.scss b/packages/atlas/src/theme/web/main.scss index fffc41283..e672c18d7 100644 --- a/packages/atlas/src/theme/web/main.scss +++ b/packages/atlas/src/theme/web/main.scss @@ -1 +1,3 @@ @import "custom-variables"; +@import "theme-dark"; +@import "theme-neutral"; diff --git a/packages/atlas/src/themesource/atlas_core/native/core/helpers/buttons.ts b/packages/atlas/src/themesource/atlas_core/native/core/helpers/buttons.ts index 1ce946aa0..78d03f4c7 100644 --- a/packages/atlas/src/themesource/atlas_core/native/core/helpers/buttons.ts +++ b/packages/atlas/src/themesource/atlas_core/native/core/helpers/buttons.ts @@ -96,7 +96,7 @@ export const btnIcon: ActionButtonType = { color: font.colorTitle }, caption: { - fontSize: 0 + display: "none" } }; export const btnIconPrimary: ActionButtonType = merge(btnIcon, { @@ -144,7 +144,7 @@ export const btnIconGrayRounded: ActionButtonType = { color: contrast.high }, caption: { - fontSize: 0 + display: "none" } }; // diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt new file mode 100644 index 000000000..da31af082 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf new file mode 100644 index 000000000..71c0f995e Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf new file mode 100644 index 000000000..7aeb58bd1 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf new file mode 100644 index 000000000..00559eeb2 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf new file mode 100644 index 000000000..e61e8e88b Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf new file mode 100644 index 000000000..df7093608 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf new file mode 100644 index 000000000..14d2b375d Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf new file mode 100644 index 000000000..e76ec69a6 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf new file mode 100644 index 000000000..89513d946 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf new file mode 100644 index 000000000..12b7b3c40 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf new file mode 100644 index 000000000..bc36bcc24 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf new file mode 100644 index 000000000..9e70be6a9 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf new file mode 100644 index 000000000..6bcdcc27f Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf new file mode 100644 index 000000000..be67410fd Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf new file mode 100644 index 000000000..9f0c71b70 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf new file mode 100644 index 000000000..74c726e32 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf new file mode 100644 index 000000000..3e6c94223 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf new file mode 100644 index 000000000..03e736613 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf new file mode 100644 index 000000000..e26db5dd3 Binary files /dev/null and b/packages/atlas/src/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf differ diff --git a/packages/atlas/src/themesource/atlas_core/web/_breakpoints.scss b/packages/atlas/src/themesource/atlas_core/web/_breakpoints.scss new file mode 100644 index 000000000..5d2c2e90d --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/_breakpoints.scss @@ -0,0 +1,15 @@ +//== Media queries breakpoints +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. +$screen-xs: 480px !default; +$screen-sm: 576px !default; +$screen-md: 768px !default; +$screen-lg: 992px !default; +$screen-xl: 1200px !default; +$screen-xxl: 1400px !default; + +// So media queries don't overlap when required, provide a maximum (used for max-width) +$screen-xs-max: ($screen-sm - 1) !default; +$screen-sm-max: ($screen-md - 1) !default; +$screen-md-max: ($screen-lg - 1) !default; +$screen-lg-max: ($screen-xl - 1) !default; +$screen-xl-max: ($screen-xxl - 1) !default; diff --git a/packages/atlas/src/themesource/atlas_core/web/_color-variants.scss b/packages/atlas/src/themesource/atlas_core/web/_color-variants.scss new file mode 100644 index 000000000..75c08dc4a --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/_color-variants.scss @@ -0,0 +1,59 @@ +// Color variations +// Function to convert to HSL and adjust +@function adjust-color-lightness($color, $adjustment) { + @if $adjustment > 0 { + @return color-mix(in srgb, $color, var(--color-base) $adjustment); + } @else { + @return color-mix(in srgb, $color, var(--color-contrast) calc($adjustment * -1)); + } +} + +$brand-colors: ( + "brand-primary" "background-primary" "text-primary" var(--brand-primary), + "brand-success" "background-success" "text-success" var(--brand-success), + "brand-warning" "background-warning" "text-warning" var(--brand-warning), + "brand-danger" "background-danger" "text-danger" var(--brand-danger), + "brand-default" "background-default" "text-default" var(--brand-default), + "gray" "" "" var(--gray) +); +$lightness-steps: ( + 50: 90%, + 100: 80%, + 200: 60%, + 300: 40%, + 400: 20%, + 500: 0%, + 600: -20%, + 700: -40%, + 800: -50%, + 900: -60% +); + +// generate corresponding CSS variables +:root { + @each $name, $bg-class, $text-class, $base-color in $brand-colors { + @each $shade, $adjustment in $lightness-steps { + --#{$name}-#{$shade}: #{adjust-color-lightness($base-color, $adjustment)}; + } + + @if ($bg-class != "") { + .#{$bg-class} { + @each $shade, $adjustment in $lightness-steps { + &.shade-#{$shade} { + background-color: adjust-color-lightness($base-color, $adjustment); + } + } + } + } + + @if ($text-class != "") { + .#{$text-class} { + @each $shade, $adjustment in $lightness-steps { + &.shade-#{$shade} { + color: adjust-color-lightness($base-color, $adjustment); + } + } + } + } + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss b/packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss similarity index 77% rename from packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss rename to packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss index 1f4e3de59..36fcd8fe3 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss @@ -1,29 +1,25 @@ -:root { +/* +DISCLAIMER: +This mapping file provides backwards compatibility for projects which were still using SASS variables. +Do not change this file because it is core styling. +Customizing core files will make updating Atlas much more difficult in the future. +*/ +@mixin legacy-variables() { + :root { /* - DISCLAIMER: - This is a mapping file which will be used to help moving towards CSS variables over time. - Do not change this file because it is core styling. - Customizing core files will make updating Atlas much more difficult in the future. - To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. - - - ██████╗ █████╗ ███████╗██╗ ██████╗ - ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ - ██████╔╝███████║███████╗██║██║ - ██╔══██╗██╔══██║╚════██║██║██║ - ██████╔╝██║ ██║███████║██║╚██████╗ - ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ - */ - + ██████╗ █████╗ ███████╗██╗ ██████╗ + ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ + ██████╔╝███████║███████╗██║██║ + ██╔══██╗██╔══██║╚════██║██║██║ + ██████╔╝██║ ██║███████║██║╚██████╗ + ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ + */ /*== Gray Shades*/ /*## Different gray shades to be used for our variables and components */ - --gray-darker: #{$gray-darker}; - --gray-dark: #{$gray-dark}; --gray: #{$gray}; - --gray-light: #{$gray-light}; - --gray-primary: #{$gray-primary}; - --gray-lighter: #{$gray-lighter}; - + --color-base: #{$color-base}; + --color-contrast: #{$color-contrast}; + /*== Step 1: Brand Colors */ --brand-default: #{$brand-default}; --brand-primary: #{$brand-primary}; @@ -31,19 +27,35 @@ --brand-warning: #{$brand-warning}; --brand-danger: #{$brand-danger}; - --brand-logo: #{$brand-logo}; + --brand-default-hover: #{$color-default-light}; + --brand-primary-hover: #{$color-primary-darker}; + --brand-success-hover: #{$color-success-darker}; + --brand-warning-hover: #{$color-warning-darker}; + --brand-danger-hover: #{$color-danger-darker}; + --brand-logo-height: #{$brand-logo-height}; - --brand-logo-width: #{$brand-logo-width}; /* Only used for CSS brand logo */ + --brand-logo-width: #{$brand-logo-width}; + + /* Only used for CSS brand logo */ /*== Step 2: UI Customization */ /* Default Font Size & Color */ --font-size-default: #{$font-size-default}; --font-color-default: #{$font-color-default}; + --font-color-contrast: #{$font-color-contrast}; - /* Global Border Color */ + /* Global Border */ --border-color-default: #{$border-color-default}; + --border-radius-s: #{$border-radius-s}; + --border-radius-m: #{$border-radius-m}; + --border-radius-l: #{$border-radius-l}; --border-radius-default: #{$border-radius-default}; + --border-width-thin: #{$border-width-thin}; + --border-width-medium: #{$border-width-medium}; + --border-width-thick: #{$border-width-thick}; + --border-width-default: #{$border-width-default}; + --border-default: #{$border-default}; /* Topbar */ --topbar-bg: #{$topbar-bg}; @@ -62,7 +74,6 @@ /* Background Colors */ /* Backgrounds */ --bg-color: #{$bg-color}; - --bg-color: #f8f8f8; --bg-color-secondary: #{$bg-color-secondary}; /* Default Link Color */ @@ -70,20 +81,17 @@ --link-hover-color: #{$link-hover-color}; /* - █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ - ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ - ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ - ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ - ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ - ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ - */ + █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ + ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ + ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ + ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ + ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ + ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ + */ /*== Typography */ /*## Change your font family, weight, line-height, headings and more (used in components/typography) */ - /* Font Family Import (Used for google font plugin in theme creater) */ - --font-family-import: #{$font-family-import}; - /* Font Family / False = fallback from Bootstrap (Helvetica Neue) */ --font-family-base: #{$font-family-base}; @@ -120,14 +128,15 @@ /*== Navigation */ /*## Used in components/navigation - - /* Default Navigation styling */ + + /* Default Navigation styling */ --navigation-item-height: #{$navigation-item-height}; --navigation-item-padding: #{$navigation-item-padding}; --navigation-font-size: #{$navigation-font-size}; --navigation-sub-font-size: #{$navigation-sub-font-size}; - --navigation-glyph-size: #{$navigation-glyph-size}; /* For glyphicons that you can select in the Mendix Modeler */ + --navigation-glyph-size: #{$navigation-glyph-size}; + /* For glyphicons that you can select in the Mendix Modeler */ --navigation-color: #{$navigation-color}; --navigation-color-hover: #{$navigation-color-hover}; @@ -140,7 +149,8 @@ /* Navigation Sidebar */ --navsidebar-font-size: #{$navsidebar-font-size}; --navsidebar-sub-font-size: #{$navsidebar-sub-font-size}; - --navsidebar-glyph-size: #{$navsidebar-glyph-size}; /* For glyphicons that you can select in the Mendix Modeler */ + --navsidebar-glyph-size: #{$navsidebar-glyph-size}; + /* For glyphicons that you can select in the Mendix Modeler */ --navsidebar-color: #{$navsidebar-color}; --navsidebar-color-hover: #{$navsidebar-color-hover}; @@ -188,9 +198,6 @@ /*== Form */ /*## Used in components/inputs */ - /* Values that can be used default | lined */ - --form-input-style: #{$form-input-style}; - /* Form Label */ --form-label-size: #{$form-label-size}; --form-label-weight: #{$form-label-weight}; @@ -217,6 +224,7 @@ --form-input-placeholder-color: #{$form-input-placeholder-color}; --form-input-border-color: #{$form-input-border-color}; --form-input-border-focus-color: #{$form-input-border-focus-color}; + --form-input-border-hover-color: #{$form-input-border-hover-color}; /* Form Input Static styling */ --form-input-static-border-color: #{$form-input-static-border-color}; @@ -230,7 +238,7 @@ /* Default button style */ --btn-font-size: #{$btn-font-size}; - --btn-bordered: #{$btn-bordered}; /* Default value false, set to true if you want this effect */ + /* Default value false, set to true if you want this effect */ --btn-border-radius: #{$btn-border-radius}; /* Button Background Color */ @@ -275,42 +283,42 @@ --header-text-color-detail: #{$header-text-color-detail}; /* - ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ - ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ - █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ - ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ - ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ - ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ - */ + ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ + ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ + █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ + ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ + ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ + ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ + */ /*== Color variations */ /*## These variations are used to support several other variables and components */ /* Color variations */ - --color-default-darker: #{$color-default-darker}; - --color-default-dark: #{$color-default-dark}; - --color-default-light: #{$color-default-light}; - --color-default-lighter: #{$color-default-lighter}; - - --color-primary-darker: #{$color-primary-darker}; - --color-primary-dark: #{$color-primary-dark}; - --color-primary-light: #{$color-primary-light}; - --color-primary-lighter: #{$color-primary-lighter}; - - --color-success-darker: #{$color-success-darker}; - --color-success-dark: #{$color-success-dark}; - --color-success-light: #{$color-success-light}; - --color-success-lighter: #{$color-success-lighter}; - - --color-warning-darker: #{$color-warning-darker}; - --color-warning-dark: #{$color-warning-dark}; - --color-warning-light: #{$color-warning-light}; - --color-warning-lighter: #{$color-warning-lighter}; - - --color-danger-darker: #{$color-danger-darker}; - --color-danger-dark: #{$color-danger-dark}; - --color-danger-light: #{$color-danger-light}; - --color-danger-lighter: #{$color-danger-lighter}; + --brand-default-700: #{$color-default-darker}; + --brand-default-600: #{$color-default-dark}; + --brand-default-200: #{$color-default-light}; + --brand-default-100: #{$color-default-lighter}; + + --brand-primary-700: #{$color-primary-darker}; + --brand-primary-600: #{$color-primary-dark}; + --brand-primary-200: #{$color-primary-light}; + --brand-primary-100: #{$color-primary-lighter}; + + --brand-success-700: #{$color-success-darker}; + --brand-success-600: #{$color-success-dark}; + --brand-success-200: #{$color-success-light}; + --brand-success-100: #{$color-success-lighter}; + + --brand-warning-700: #{$color-warning-darker}; + --brand-warning-600: #{$color-warning-dark}; + --brand-warning-200: #{$color-warning-light}; + --brand-warning-100: #{$color-warning-lighter}; + + --brand-danger-700: #{$color-danger-darker}; + --brand-danger-600: #{$color-danger-dark}; + --brand-danger-200: #{$color-danger-light}; + --brand-danger-100: #{$color-danger-lighter}; --brand-gradient: #{$brand-gradient}; @@ -379,15 +387,11 @@ /*== Modals */ /*## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) */ - - /* Background Color */ --modal-header-bg: #{$modal-header-bg}; - - /* Border Color */ --modal-header-border-color: #{$modal-header-border-color}; - - /* Text Color */ --modal-header-color: #{$modal-header-color}; + --modal-body-bg: #{$modal-body-bg}; + --modal-footer-bg: #{$modal-footer-bg}; /*== Dataview */ /*## Default variables for Dataview Widget (used in components/dataview) */ @@ -395,6 +399,8 @@ /* Controls */ --dataview-controls-bg: #{$dataview-controls-bg}; --dataview-controls-border-color: #{$dataview-controls-border-color}; + --dataview-controls-alignment: #{$dataview-controls-alignment}; + /* Empty Message */ --dataview-emptymessage-bg: #{$dataview-emptymessage-bg}; @@ -405,21 +411,18 @@ /* Background Color */ --alert-primary-bg: #{$alert-primary-bg}; - --alert-secondary-bg: #{$alert-secondary-bg}; --alert-success-bg: #{$alert-success-bg}; --alert-warning-bg: #{$alert-warning-bg}; --alert-danger-bg: #{$alert-danger-bg}; /* Text Color */ --alert-primary-color: #{$alert-primary-color}; - --alert-secondary-color: #{$alert-secondary-color}; --alert-success-color: #{$alert-success-color}; --alert-warning-color: #{$alert-warning-color}; --alert-danger-color: #{$alert-danger-color}; /* Border Color */ --alert-primary-border-color: #{$alert-primary-border-color}; - --alert-secondary-border-color: #{$alert-secondary-border-color}; --alert-success-border-color: #{$alert-success-border-color}; --alert-warning-border-color: #{$alert-warning-border-color}; --alert-danger-border-color: #{$alert-danger-border-color}; @@ -430,11 +433,6 @@ --wizard-step-number-size: #{$wizard-step-number-size}; --wizard-step-number-font-size: #{$wizard-step-number-font-size}; - /*Wizard states */ - --wizard-default: #{$wizard-default}; - --wizard-active: #{$wizard-active}; - --wizard-visited: #{$wizard-visited}; - /*Wizard step states */ --wizard-default-bg: #{$wizard-default-bg}; --wizard-default-color: #{$wizard-default-color}; @@ -569,6 +567,9 @@ /*== Spacing */ /*## Advanced layout options (used in base/mixins/default-spacing) */ + /* No spacing */ + --spacing-none: #{$spacing-none}; + /* Smallest spacing */ --spacing-smallest: #{$spacing-smallest}; @@ -626,34 +627,7 @@ --padding-table-cell-left: #{$padding-table-cell-left}; --padding-table-cell-right: #{$padding-table-cell-right}; - /*== Media queries breakpoints */ - /*## Define the breakpoints at which your layout will change, adapting to different screen sizes. */ - - --screen-xs: #{$screen-xs}; - --screen-sm: #{$screen-sm}; - --screen-md: #{$screen-md}; - --screen-lg: #{$screen-lg}; - --screen-xl: #{$screen-xl}; - - /* So media queries don't overlap when required, provide a maximum (used for max-width) */ - --screen-xs-max: #{$screen-xs-max}; - --screen-sm-max: #{$screen-sm-max}; - --screen-md-max: #{$screen-md-max}; - --screen-lg-max: #{$screen-lg-max}; - - /*== Settings */ - /*## Enable or disable your desired framework features */ - /* Use of !important */ - --important-flex: #{$important-flex}; // ./base/flex.scss - --important-spacing: #{$important-spacing}; // ./base/spacing.scss - --important-helpers: #{$important-helpers}; // ./helpers/helperclasses.scss - /*===== Legacy variables ===== */ - - /*== Step 1: Brand Colors */ - --brand-inverse: #{$brand-inverse}; - --brand-info: #{$brand-info}; - /*== Step 2: UI Customization */ /* Sidebar */ --sidebar-bg: #{$sidebar-bg}; @@ -680,8 +654,11 @@ --navsidebar-sub-bg: #{$navsidebar-sub-bg}; --navsidebar-sub-bg-hover: #{$navsidebar-sub-bg-hover}; --navsidebar-sub-bg-active: #{$navsidebar-sub-bg-active}; + --navsidebar-sub-bg-header: #{$navsidebar-sub-bg}; + --navsidebar-sub-bg-collapsed: #{$navsidebar-sub-bg}; --navsidebar-border-color: #{$navsidebar-border-color}; + --navsidebar-shadow: #{$navsidebar-shadow}; /*== Form */ /*## Used in components/inputs */ @@ -708,20 +685,6 @@ --btn-inverse-bg-hover: #{$btn-inverse-bg-hover}; --btn-info-bg-hover: #{$btn-info-bg-hover}; - /*== Color variations */ - /*## These variations are used to support several other variables and components */ - - /* Color variations */ - --color-inverse-darker: #{$color-inverse-darker}; - --color-inverse-dark: #{$color-inverse-dark}; - --color-inverse-light: #{$color-inverse-light}; - --color-inverse-lighter: #{$color-inverse-lighter}; - - --color-info-darker: #{$color-info-darker}; - --color-info-dark: #{$color-info-dark}; - --color-info-light: #{$color-info-light}; - --color-info-lighter: #{$color-info-lighter}; - /*== Alerts */ /*## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) */ @@ -766,4 +729,5 @@ /* Background Color */ --callout-info-bg: #{$callout-info-bg}; + } } diff --git a/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss b/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss index be6629881..03f5431a3 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_exclusion-variables-defaults.scss @@ -14,6 +14,8 @@ $exclude-flex: false; $exclude-spacing: false; $exclude-base: false; $exclude-login: false; +$exclude-card: false; +$exclude-focus-ring: false; //== Widget style exclusion $exclude-accordion: false; @@ -26,12 +28,16 @@ $exclude-barcode-scanner: false; $exclude-button: false; $exclude-button-helpers: false; $exclude-check-box: false; +$exclude-check-box-radio-button: false; +$exclude-combobox: false; $exclude-custom-dijit-widget: false; $exclude-custom-switch: false; $exclude-data-grid: false; $exclude-data-grid-helpers: false; $exclude-data-view: false; $exclude-data-picker: false; +$exclude-demo-user-switcher: false; +$exclude-div-container: false; $exclude-glyphicon: false; $exclude-grid: false; $exclude-group-box: false; diff --git a/packages/atlas/src/themesource/atlas_core/web/_generated-exclusion-variables.scss b/packages/atlas/src/themesource/atlas_core/web/_generated-exclusion-variables.scss index 6ed7e6441..1a55e3576 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_generated-exclusion-variables.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_generated-exclusion-variables.scss @@ -1,2 +1,2 @@ // THIS FILE IS AUTO-GENERATED. PLEASE DO NOT MODIFY THIS FILE. -$use-modern-client: false; +$use-modern-client: true; \ No newline at end of file diff --git a/packages/atlas/src/themesource/atlas_core/web/_variables.scss b/packages/atlas/src/themesource/atlas_core/web/_variables.scss index ed029cd1e..6d181ee81 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_variables.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_variables.scss @@ -1,199 +1,195 @@ -// -// DISCLAIMER: -// Do not change this file because it is core styling. -// Customizing core files will make updating Atlas much more difficult in the future. -// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. -// -// -// ██████╗ █████╗ ███████╗██╗ ██████╗ -// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ -// ██████╔╝███████║███████╗██║██║ -// ██╔══██╗██╔══██║╚════██║██║██║ -// ██████╔╝██║ ██║███████║██║╚██████╗ -// ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ -// - -//== Gray Shades -//## Different gray shades to be used for our variables and components -$gray-darker: #3b4251 !default; -$gray-dark: #606671 !default; -$gray: #787d87 !default; -$gray-light: #6c7180 !default; -$gray-primary: #ced0d3 !default; -$gray-lighter: #f8f8f8 !default; - -//== Step 1: Brand Colors -$brand-default: $gray-primary !default; -$brand-primary: #264ae5 !default; -$brand-success: #3cb33d !default; -$brand-warning: #eca51c !default; -$brand-danger: #e33f4e !default; +/* +DISCLAIMER: +This mapping file provides defaults for sass variables to provide backwards compatibility for modules which are still using SASS variables. +Do not change this file because it is core styling. Customizing core files will make updating Atlas much more difficult in the future. +*/ +@import "breakpoints"; -$brand-logo: false !default; -$brand-logo-height: 26px !default; -$brand-logo-width: 26px !default; // Only used for CSS brand logo +$use-css-variables: false !default; -//== Step 2: UI Customization +/* Brand Colors */ +$brand-primary: #264ae5 !default; +$brand-success: #1ac61a !default; +$brand-warning: #f0b000 !default; +$brand-danger: #ea3337 !default; -// Default Font Size & Color -$font-size-default: 14px !default; -$font-color-default: #6c717e !default; +/* Gray Shades */ +$gray: #b8babf !default; +$color-base: #fff !default; +$color-contrast: #000 !default; +$brand-default: mix($brand-primary, #e7e7e9, 10%) !default; -// Global Border Color -$border-color-default: #ced0d3 !default; -$border-radius-default: 5px !default; +$brand-logo: false !default; +$brand-logo-height: 24px !default; +$brand-logo-width: 32px !default; +$brand-gradient: linear-gradient(to bottom, var(--brand-primary-900), var(--brand-primary-700)) !default; -// Topbar -$topbar-bg: #fff !default; -$topbar-minimalheight: 60px !default; +/* Default Font Size & Color */ +$font-size-default: 14px !default; +$font-color-default: var(--gray-900) !default; +$font-color-contrast: $color-base !default; + +/* Global Border */ +$border-color-default: var(--gray-300) !default; +$border-radius-s: 4px !default; +$border-radius-m: 8px !default; +$border-radius-l: 12px !default; +$border-radius-default: $border-radius-m !default; +$border-width-thin: 1px !default; +$border-width-medium: 2px !default; +$border-width-thick: 3px !default; +$border-width-default: $border-width-thin !default; +$border-default: $border-width-default solid $border-color-default !default; + +/* Topbar */ +$topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600)) !default; +$topbar-minimalheight: 48px !default; $topbar-border-color: $border-color-default !default; -// Topbar mobile +/* Sidebar */ +$sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700)) !default; + +/* Topbar mobile */ $m-header-height: 45px !default; -$m-header-bg: $brand-primary !default; -$m-header-color: #fff !default; +$m-header-bg: $topbar-bg !default; +$m-header-color: $font-color-contrast !default; $m-header-title-size: 16px !default; -// Navbar Brand Name / For your company, product, or project name (used in layouts/base/) +/* Navbar Brand Name */ $navbar-brand-name: $font-color-default !default; -// Background Colors -// Backgrounds -$bg-color: #f8f8f8 !default; -$bg-color-secondary: #fff !default; +/* Background Colors */ +$bg-color: var(--brand-default-100) !default; +$bg-color-secondary: $color-base !default; -// Default Link Color +/* Default Link Color */ $link-color: $brand-primary !default; -$link-hover-color: darken($link-color, 15%) !default; +$link-hover-color: var(--brand-primary-400) !default; -// -// █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ -// ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ -// ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ -// ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ -// ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ -// ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ -// +/* Font Family */ +$font-family-import: "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap" !default; +$font-family-base: "Poppins", sans-serif !default; -//== Typography -//## Change your font family, weight, line-height, headings and more (used in components/typography) - -// Font Family Import (Used for google font plugin in theme creater) -$font-family-import: "resources/fonts/open-sans/open-sans.css" !default; - -// Font Family / False = fallback from Bootstrap (Helvetica Neue) -$font-family-base: "Open Sans", sans-serif !default; - -// Font Sizes +/* Font Sizes */ $font-size-large: 18px !default; $font-size-small: 12px !default; -// Font Weights -$font-weight-light: 100 !default; -$font-weight-normal: normal !default; +/* Font Weights */ +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; $font-weight-semibold: 600 !default; -$font-weight-bold: bold !default; +$font-weight-bold: 700 !default; -// Font Size Headers -$font-size-h1: 31px !default; +/* Header Font Sizes */ +$font-size-h1: 34px !default; $font-size-h2: 26px !default; $font-size-h3: 24px !default; -$font-size-h4: 18px !default; +$font-size-h4: 16px !default; $font-size-h5: $font-size-default !default; $font-size-h6: 12px !default; -// Font Weight Headers +/* Header Font Weight */ $font-weight-header: $font-weight-semibold !default; -// Line Height +/* Line Height */ $line-height-base: 1.428571429 !default; -// Spacing +/* Header Margin */ $font-header-margin: 0 0 8px 0 !default; -// Text Colors -$font-color-detail: #6c717e !default; -$font-color-header: #0a1326 !default; +/* Font Colors */ +$font-color-detail: var(--brand-primary-700) !default; +$font-color-header: var(--brand-primary-800) !default; -//== Navigation -//## Used in components/navigation - -// Default Navigation styling +/* Navigation */ $navigation-item-height: unset !default; -$navigation-item-padding: 16px !default; +$navigation-item-padding: 8px !default; $navigation-font-size: $font-size-default !default; $navigation-sub-font-size: $font-size-small !default; -$navigation-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler +$navigation-glyph-size: 20px !default; + +$navigation-color: $font-color-contrast !default; +$navigation-color-hover: $font-color-contrast !default; +$navigation-color-active: $font-color-contrast !default; + +$navigation-sub-color: $navigation-color !default; +$navigation-sub-color-hover: $navigation-color-hover !default; +$navigation-sub-color-active: $navigation-color-active !default; -$navigation-color: #fff !default; -$navigation-color-hover: #fff !default; -$navigation-color-active: #fff !default; +/* Sidebar Navigation */ +$navigation-bg: $topbar-bg !default; +$navigation-bg-hover: rgba(0, 0, 0, 0.2) !default; +$navigation-bg-active: rgba(0, 0, 0, 0.3) !default; -$navigation-sub-color: #aaa !default; -$navigation-sub-color-hover: $brand-primary !default; -$navigation-sub-color-active: $brand-primary !default; +$navigation-sub-bg: color-mix(in srgb, $navigation-bg, black 20%) !default; +$navigation-sub-bg-hover: $navigation-bg-hover !default; +$navigation-sub-bg-active: $navigation-bg-active !default; + +$navigation-border-color: $navigation-bg-hover !default; + +$navsidebar-bg: $sidebar-bg !default; +$navsidebar-bg-hover: $navigation-bg-hover !default; +$navsidebar-bg-active: $navigation-bg-active !default; + +$navsidebar-sub-bg: var(--brand-primary-800) !default; +$navsidebar-sub-bg-hover: $navigation-bg-hover !default; +$navsidebar-sub-bg-active: $navigation-bg-active !default; + +$navsidebar-border-color: $border-color-default !default; +$navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%) !default; -// Navigation Sidebar $navsidebar-font-size: $font-size-default !default; $navsidebar-sub-font-size: $font-size-small !default; -$navsidebar-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler +$navsidebar-glyph-size: 20px !default; -$navsidebar-color: #fff !default; -$navsidebar-color-hover: #fff !default; -$navsidebar-color-active: #fff !default; +$navsidebar-color: $navigation-color !default; +$navsidebar-color-hover: $navigation-color-hover !default; +$navsidebar-color-active: $navigation-color-active !default; -$navsidebar-sub-color: #aaa !default; -$navsidebar-sub-color-hover: $brand-primary !default; -$navsidebar-sub-color-active: $brand-primary !default; +$navsidebar-sub-color: $navigation-color !default; +$navsidebar-sub-color-hover: $navigation-color-hover !default; +$navsidebar-sub-color-active: $navigation-color-active !default; $navsidebar-width-closed: 52px !default; $navsidebar-width-open: 232px !default; -// Navigation topbar -$navtopbar-font-size: $font-size-default !default; +/* Topbar Navigation */ +$navtopbar-font-size: $font-size-small !default; $navtopbar-sub-font-size: $font-size-small !default; -$navtopbar-glyph-size: 1.2em !default; // For glyphicons that you can select in the Mendix Modeler +$navtopbar-glyph-size: 1.2em !default; $navtopbar-bg: $topbar-bg !default; -$navtopbar-bg-hover: darken($navtopbar-bg, 4) !default; -$navtopbar-bg-active: darken($navtopbar-bg, 8) !default; -$navtopbar-color: $font-color-default !default; -$navtopbar-color-hover: $navtopbar-color !default; -$navtopbar-color-active: $navtopbar-color !default; - -$navtopbar-sub-bg: lighten($navtopbar-bg, 4) !default; -$navtopbar-sub-bg-hover: $navtopbar-sub-bg !default; -$navtopbar-sub-bg-active: $navtopbar-sub-bg !default; -$navtopbar-sub-color: #aaa !default; -$navtopbar-sub-color-hover: $brand-primary !default; -$navtopbar-sub-color-active: $brand-primary !default; - -//== Cards -// Shadow color -$shadow-color-border: rgba($gray-primary, 0.5); -$shadow-color: rgba($gray-primary, 0.66); - -//Shadow size -$shadow-small: 0 2px 4px 0; -$shadow-medium: 0 5px 7px 0; -$shadow-large: 0 8px 10px 0; - -//## Used in layouts/base +$navtopbar-bg-hover: $navigation-bg-hover !default; +$navtopbar-bg-active: $navigation-bg-active !default; +$navtopbar-color: $navigation-color !default; +$navtopbar-color-hover: $navigation-color-hover !default; +$navtopbar-color-active: $navigation-color-active !default; + +$navtopbar-sub-bg: $navtopbar-bg !default; +$navtopbar-sub-bg-hover: $navtopbar-bg-hover !default; +$navtopbar-sub-bg-active: $navtopbar-bg-active !default; +$navtopbar-sub-color: $navigation-color !default; +$navtopbar-sub-color-hover: $navigation-color-hover !default; +$navtopbar-sub-color-active: $navigation-color-active !default; + $navtopbar-border-color: $topbar-border-color !default; -//== Form -//## Used in components/inputs +/* Shadows */ +$shadow-color-border: $border-color-default !default; +$shadow-color: var(--gray-200) !default; +$shadow-small: 0 2px 4px 0 !default; +$shadow-medium: 0 4px 6px 0 !default; +$shadow-large: 0 8px 10px 0 !default; -// Values that can be used default | lined +/* Form Inputs */ $form-input-style: default !default; -// Form Label +$form-label-color: $font-color-default !default; $form-label-size: $font-size-default !default; -$form-label-weight: $font-weight-semibold !default; +$form-label-weight: $font-weight-normal !default; $form-label-gutter: 8px !default; -// Form Input dimensions $form-input-height: auto !default; $form-input-padding-y: 8px !default; $form-input-padding-x: 8px !default; @@ -201,397 +197,261 @@ $form-input-static-padding-y: 8px !default; $form-input-static-padding-x: 0 !default; $form-input-font-size: $form-label-size !default; $form-input-line-height: $line-height-base !default; -$form-input-border-radius: $border-radius-default !default; +$form-input-border-radius: 6px !default; -// Form Input styling -$form-input-bg: #fff !default; -$form-input-bg-focus: #fff !default; -$form-input-bg-hover: $gray-primary !default; +$form-input-bg: $color-base !default; +$form-input-bg-focus: $color-base !default; +$form-input-bg-hover: var(--gray-200) !default; $form-input-bg-disabled: $bg-color !default; $form-input-color: $font-color-default !default; $form-input-focus-color: $form-input-color !default; -$form-input-disabled-color: #9da1a8 !default; -$form-input-placeholder-color: #6c717c !default; -$form-input-border-color: $gray-primary !default; +$form-input-disabled-color: var(--gray-700) !default; +$form-input-placeholder-color: var(--gray-600) !default; +$form-input-border-color: var(--gray-200) !default; $form-input-border-focus-color: $brand-primary !default; +$form-input-border-hover-color: color-mix( + in srgb, + $form-input-border-color, + $form-input-border-focus-color 50% +) !default; -// Form Input Static styling -$form-input-static-border-color: $gray-primary !default; +$form-input-static-border-color: var(--gray-200) !default; -// Form Group $form-group-margin-bottom: 16px !default; $form-group-gutter: 16px !default; -//== Buttons -//## Define background-color, border-color and text. Used in components/buttons - -// Default button style -$btn-font-size: 14px !default; -$btn-bordered: false !default; // Default value false, set to true if you want this effect +/* Buttons */ +$btn-font-size: $font-size-default !default; +$btn-bordered: false !default; $btn-border-radius: $border-radius-default !default; -// Button Background Color -$btn-default-bg: #fff !default; +$btn-default-bg: $color-base !default; $btn-primary-bg: $brand-primary !default; $btn-success-bg: $brand-success !default; $btn-warning-bg: $brand-warning !default; $btn-danger-bg: $brand-danger !default; -// Button Border Color -$btn-default-border-color: $gray-primary !default; +$btn-default-border-color: var(--gray-200) !default; $btn-primary-border-color: $brand-primary !default; $btn-success-border-color: $brand-success !default; $btn-warning-border-color: $brand-warning !default; $btn-danger-border-color: $brand-danger !default; -// Button Text Color $btn-default-color: $brand-primary !default; -$btn-primary-color: #fff !default; -$btn-success-color: #fff !default; -$btn-warning-color: #fff !default; -$btn-danger-color: #fff !default; +$btn-primary-color: $font-color-contrast !default; +$btn-success-color: $font-color-contrast !default; +$btn-warning-color: $font-color-contrast !default; +$btn-danger-color: $font-color-contrast !default; -// Button Icon Color $btn-default-icon-color: $gray !default; -// Button Background Color -$btn-default-bg-hover: $btn-default-border-color !default; -$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%) !default; -$btn-success-bg-hover: mix($btn-success-bg, black, 80%) !default; -$btn-warning-bg-hover: mix($btn-warning-bg, black, 80%) !default; -$btn-danger-bg-hover: mix($btn-danger-bg, black, 80%) !default; -$btn-link-bg-hover: $gray-lighter !default; - -//== Header blocks -//## Define look and feel over multible building blocks that serve as header +$btn-default-bg-hover: var(--gray-200) !default; +$btn-primary-bg-hover: var(--brand-primary-600) !default; +$btn-success-bg-hover: var(--brand-success-600) !default; +$btn-warning-bg-hover: var(--brand-warning-600) !default; +$btn-danger-bg-hover: var(--brand-danger-600) !default; +$btn-link-bg-hover: var(--gray-50) !default; +/* Header */ $header-min-height: 240px !default; $header-bg-color: $brand-primary !default; $header-bgimage-filter: brightness(60%) !default; -$header-text-color: #fff !default; +$header-text-color: $color-base !default; $header-text-color-detail: rgba(0, 0, 0, 0.2) !default; -// -// ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ -// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ -// █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ -// ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ -// ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ -// ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ -// - -//== Color variations -//## These variations are used to support several other variables and components - -// Color variations -$color-default-darker: mix($brand-default, black, 60%) !default; -$color-default-dark: mix($brand-default, black, 70%) !default; -$color-default-light: mix($brand-default, white, 20%) !default; -$color-default-lighter: mix($brand-default, white, 10%) !default; - -$color-primary-darker: mix($brand-primary, black, 60%) !default; -$color-primary-dark: mix($brand-primary, black, 70%) !default; -$color-primary-light: mix($brand-primary, white, 20%) !default; -$color-primary-lighter: mix($brand-primary, white, 10%) !default; - -$color-success-darker: mix($brand-success, black, 60%) !default; -$color-success-dark: mix($brand-success, black, 70%) !default; -$color-success-light: mix($brand-success, white, 20%) !default; -$color-success-lighter: mix($brand-success, white, 10%) !default; - -$color-warning-darker: mix($brand-warning, black, 60%) !default; -$color-warning-dark: mix($brand-warning, black, 70%) !default; -$color-warning-light: mix($brand-warning, white, 20%) !default; -$color-warning-lighter: mix($brand-warning, white, 10%) !default; - -$color-danger-darker: mix($brand-danger, black, 60%) !default; -$color-danger-dark: mix($brand-danger, black, 70%) !default; -$color-danger-light: mix($brand-danger, white, 20%) !default; -$color-danger-lighter: mix($brand-danger, white, 10%) !default; - -$brand-gradient: linear-gradient(to right top, #264ae5, #2239c5, #1b29a6, #111988, #03096c) !default; - -//== Grids -//## Used for Datagrid, Templategrid, Listview & Tables (see components folder) - -// Default Border Colors +/* Grid */ $grid-border-color: $border-color-default !default; -// Spacing -// Default -$grid-padding-top: 16px !default; -$grid-padding-right: 16px !default; -$grid-padding-bottom: 16px !default; -$grid-padding-left: 16px !default; - -// Listview -$listview-padding-top: 16px !default; -$listview-padding-right: 16px !default; -$listview-padding-bottom: 16px !default; -$listview-padding-left: 16px !default; - -// Background Colors $grid-bg: transparent !default; -$grid-bg-header: transparent !default; // Grid Headers -$grid-bg-hover: mix($grid-border-color, #fff, 20%) !default; -$grid-bg-selected: mix($grid-border-color, #fff, 30%) !default; -$grid-bg-selected-hover: mix($grid-border-color, #fff, 50%) !default; - -// Striped Background Color -$grid-bg-striped: mix($grid-border-color, #fff, 10%) !default; +$grid-bg-header: transparent !default; +$grid-bg-hover: var(--gray-100) !default; +$grid-bg-selected: var(--gray-200) !default; +$grid-bg-selected-hover: var(--gray-300) !default; +$grid-bg-striped: var(--gray-50) !default; +$grid-footer-bg: var(--gray-200) !default; -// Background Footer Color -$grid-footer-bg: $gray-primary !default; - -// Text Color $grid-selected-color: $font-color-default !default; -// Paging Colors $grid-paging-bg: transparent !default; $grid-paging-bg-hover: transparent !default; $grid-paging-border-color: transparent !default; $grid-paging-border-color-hover: transparent !default; -$grid-paging-color: $gray-light !default; +$grid-paging-color: var(--gray-300) !default; $grid-paging-color-hover: $brand-primary !default; -//== Tabs -//## Default variables for Tab Container Widget (used in components/tabcontainer) - -// Text Color +/* Tabs */ $tabs-color: $font-color-detail !default; $tabs-color-active: $font-color-default !default; $tabs-lined-color-active: $font-color-default !default; $tabs-lined-border-width: 3px !default; - -// Border Color $tabs-border-color: $border-color-default !default; $tabs-lined-border-color: $brand-primary !default; - -// Background Color $tabs-bg: transparent !default; -$tabs-bg-pills: #e7e7e9 !default; -$tabs-bg-hover: lighten($tabs-border-color, 5) !default; +$tabs-bg-pills: var(--gray-100) !default; +$tabs-bg-hover: var(--gray-200) !default; $tabs-bg-active: $brand-primary !default; -//== Modals -//## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) - -// Background Color +/* Modal */ $modal-header-bg: transparent !default; - -// Border Color $modal-header-border-color: $border-color-default !default; +$modal-header-color: $font-color-header !default; +$modal-body-bg: $bg-color !default; +$modal-footer-bg: $bg-color-secondary !default; -// Text Color -$modal-header-color: $font-color-default !default; - -//== Dataview -//## Default variables for Dataview Widget (used in components/dataview) - -// Controls -$dataview-controls-bg: transparent !default; +/* Data View */ +$dataview-controls-bg: inherit !default; $dataview-controls-border-color: $border-color-default !default; +$dataview-controls-alignment: left !default; -// Empty Message $dataview-emptymessage-bg: $bg-color !default; $dataview-emptymessage-color: $font-color-default !default; -//== Alerts -//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) - -// Background Color -$alert-primary-bg: $color-primary-lighter !default; -$alert-secondary-bg: $color-primary-lighter !default; -$alert-success-bg: $color-success-lighter !default; -$alert-warning-bg: $color-warning-lighter !default; -$alert-danger-bg: $color-danger-lighter !default; - -// Text Color -$alert-primary-color: $color-primary-darker !default; -$alert-secondary-color: $color-primary-darker !default; -$alert-success-color: $color-success-darker !default; -$alert-warning-color: $color-warning-darker !default; -$alert-danger-color: $color-danger-darker !default; - -// Border Color -$alert-primary-border-color: $color-primary-dark !default; -$alert-secondary-border-color: $color-primary-dark !default; -$alert-success-border-color: $color-success-dark !default; -$alert-warning-border-color: $color-warning-dark !default; -$alert-danger-border-color: $color-danger-dark !default; - -//== Wizard - +/* Alerts */ +$alert-primary-bg: var(--brand-primary-100) !default; +$alert-secondary-bg: var(--brand-default-100) !default; +$alert-success-bg: var(--brand-success-100) !default; +$alert-warning-bg: var(--brand-warning-100) !default; +$alert-danger-bg: var(--brand-danger-100) !default; + +$alert-primary-color: var(--brand-primary-700) !default; +$alert-secondary-color: var(--brand-default-700) !default; +$alert-success-color: var(--brand-success-700) !default; +$alert-warning-color: var(--brand-warning-700) !default; +$alert-danger-color: var(--brand-danger-700) !default; + +$alert-primary-border-color: var(--brand-primary-700) !default; +$alert-secondary-border-color: var(--brand-secondary-700) !default; +$alert-success-border-color: var(--brand-success-700) !default; +$alert-warning-border-color: var(--brand-warning-700) !default; +$alert-danger-border-color: var(--brand-danger-700) !default; + +/* Wizard */ $wizard-step-height: 48px !default; $wizard-step-number-size: 64px !default; $wizard-step-number-font-size: $font-size-h3 !default; -//Wizard states -$wizard-default: #fff !default; -$wizard-active: $brand-primary !default; -$wizard-visited: $brand-success !default; - -//Wizard step states -$wizard-default-bg: $wizard-default !default; -$wizard-default-color: $wizard-default !default; +$wizard-default-bg: $color-base !default; +$wizard-default-color: $color-base !default; $wizard-default-step-color: $font-color-default !default; $wizard-default-border-color: $border-color-default !default; -$wizard-active-bg: $wizard-active !default; -$wizard-active-color: $wizard-default !default; -$wizard-active-step-color: $wizard-active !default; -$wizard-active-border-color: $wizard-active !default; - -$wizard-visited-bg: $wizard-visited !default; -$wizard-visited-color: $wizard-default !default; -$wizard-visited-step-color: $wizard-visited !default; -$wizard-visited-border-color: $wizard-visited !default; +$wizard-active-bg: var(--brand-primary-200) !default; +$wizard-active-color: var(--brand-primary-700) !default; +$wizard-active-step-color: var(--brand-primary-700) !default; +$wizard-active-border-color: var(--brand-primary-700) !default; -//== Labels -//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) +$wizard-visited-bg: var(--brand-success-200) !default; +$wizard-visited-color: var(--brand-success-700) !default; +$wizard-visited-step-color: var(--brand-success-700) !default; +$wizard-visited-border-color: var(--brand-success-700) !default; -// Background Color +/* Labels */ $label-default-bg: $brand-default !default; $label-primary-bg: $brand-primary !default; $label-success-bg: $brand-success !default; $label-warning-bg: $brand-warning !default; $label-danger-bg: $brand-danger !default; -// Border Color $label-default-border-color: $brand-default !default; $label-primary-border-color: $brand-primary !default; $label-success-border-color: $brand-success !default; $label-warning-border-color: $brand-warning !default; $label-danger-border-color: $brand-danger !default; -// Text Color $label-default-color: $font-color-default !default; -$label-primary-color: #fff !default; -$label-success-color: #fff !default; -$label-warning-color: #fff !default; -$label-danger-color: #fff !default; - -//== Groupbox -//## Default variables for Groupbox Widget (used in components/groupbox) +$label-primary-color: $color-base !default; +$label-success-color: $color-base !default; +$label-warning-color: $color-base !default; +$label-danger-color: $color-base !default; -// Background Color -$groupbox-default-bg: $gray-primary !default; +/* Groupbox */ +$groupbox-default-bg: var(--gray-200) !default; $groupbox-primary-bg: $brand-primary !default; $groupbox-success-bg: $brand-success !default; $groupbox-warning-bg: $brand-warning !default; $groupbox-danger-bg: $brand-danger !default; -$groupbox-white-bg: #fff !default; +$groupbox-white-bg: $color-base !default; -// Text Color $groupbox-default-color: $font-color-default !default; -$groupbox-primary-color: #fff !default; -$groupbox-success-color: #fff !default; -$groupbox-warning-color: #fff !default; -$groupbox-danger-color: #fff !default; +$groupbox-primary-color: $color-base !default; +$groupbox-success-color: $color-base !default; +$groupbox-warning-color: $color-base !default; +$groupbox-danger-color: $color-base !default; $groupbox-white-color: $font-color-default !default; -//== Callout (groupbox) Colors -//## Extended variables for Groupbox Widget (used in components/groupbox) - -// Text and Border Color -$callout-default-color: $font-color-default !default; +/* Callouts */ $callout-primary-color: $brand-primary !default; +$callout-default-color: $font-color-default !default; $callout-success-color: $brand-success !default; $callout-warning-color: $brand-warning !default; $callout-danger-color: $brand-danger !default; -// Background Color -$callout-default-bg: $color-default-lighter !default; -$callout-primary-bg: $color-primary-lighter !default; -$callout-success-bg: $color-success-lighter !default; -$callout-warning-bg: $color-warning-lighter !default; -$callout-danger-bg: $color-danger-lighter !default; +$callout-primary-bg: var(--brand-primary-200) !default; +$callout-default-bg: var(--gray-50) !default; +$callout-success-bg: var(--brand-success-200) !default; +$callout-warning-bg: var(--brand-warning-200) !default; +$callout-danger-bg: var(--brand-danger-200) !default; -//== Timeline -//## Extended variables for Timeline Widget -// Colors +/* Timeline */ $timeline-icon-color: $brand-primary !default; $timeline-border-color: $border-color-default !default; $timeline-event-time-color: $brand-primary !default; - -// Sizes $timeline-icon-size: 18px !default; $timeline-image-size: 36px !default; - -//Timeline grouping $timeline-grouping-size: 120px !default; $timeline-grouping-border-radius: 30px !default; $timeline-grouping-border-color: $timeline-border-color !default; -//== Accordions -//## Extended variables for Accordion Widget - -// Default +/* Accordion */ $accordion-header-default-bg: $bg-color-secondary !default; $accordion-header-default-bg-hover: $bg-color !default; $accordion-header-default-color: $font-color-header !default; $accordion-default-border-color: $border-color-default !default; - $accordion-bg-striped: $grid-bg-striped !default; $accordion-bg-striped-hover: $grid-bg-selected !default; -// Semantic background colors -$accordion-header-primary-bg: $btn-primary-bg !default; -$accordion-header-secondary-bg: $btn-default-bg !default; -$accordion-header-success-bg: $btn-success-bg !default; -$accordion-header-warning-bg: $btn-warning-bg !default; -$accordion-header-danger-bg: $btn-danger-bg !default; - -$accordion-header-primary-bg-hover: $btn-primary-bg-hover !default; -$accordion-header-secondary-bg-hover: $btn-default-bg-hover !default; -$accordion-header-success-bg-hover: $btn-success-bg-hover !default; -$accordion-header-warning-bg-hover: $btn-warning-bg-hover !default; -$accordion-header-danger-bg-hover: $btn-danger-bg-hover !default; - -// Semantic text colors -$accordion-header-primary-color: $btn-primary-color !default; -$accordion-header-secondary-color: $btn-default-color !default; -$accordion-header-success-color: $btn-success-color !default; -$accordion-header-warning-color: $btn-warning-color !default; -$accordion-header-danger-color: $btn-danger-color !default; - -// Semantic border colors -$accordion-primary-border-color: $btn-primary-border-color !default; -$accordion-secondary-border-color: $btn-default-border-color !default; -$accordion-success-border-color: $btn-success-border-color !default; -$accordion-warning-border-color: $btn-warning-border-color !default; -$accordion-danger-border-color: $btn-danger-border-color !default; - -//== Spacing -//## Advanced layout options (used in base/mixins/default-spacing) - -// Smallest spacing +$accordion-header-primary-bg: $brand-primary !default; +$accordion-header-secondary-bg: $bg-color-secondary !default; +$accordion-header-success-bg: $brand-success !default; +$accordion-header-warning-bg: $brand-warning !default; +$accordion-header-danger-bg: $brand-danger !default; + +$accordion-header-primary-bg-hover: var(--brand-primary-600) !default; +$accordion-header-secondary-bg-hover: var(--gray-50) !default; +$accordion-header-success-bg-hover: var(--brand-success-600) !default; +$accordion-header-warning-bg-hover: var(--brand-warning-600) !default; +$accordion-header-danger-bg-hover: var(--brand-danger-600) !default; + +$accordion-header-primary-color: $font-color-contrast !default; +$accordion-header-secondary-color: $brand-primary !default; +$accordion-header-success-color: $font-color-contrast !default; +$accordion-header-warning-color: $font-color-contrast !default; +$accordion-header-danger-color: $font-color-contrast !default; + +$accordion-primary-border-color: $brand-primary !default; +$accordion-secondary-border-color: var(--gray-200) !default; +$accordion-success-border-color: $brand-success !default; +$accordion-warning-border-color: $brand-warning !default; +$accordion-danger-border-color: $brand-danger !default; + +/* Spacing */ +$spacing-none: 0px !default; $spacing-smallest: 2px !default; - -// Smaller spacing $spacing-smaller: 4px !default; - -// Small spacing $spacing-small: 8px !default; - -// Medium spacing $spacing-medium: 16px !default; + $t-spacing-medium: 16px !default; $m-spacing-medium: 16px !default; -// Large spacing $spacing-large: 24px !default; $t-spacing-large: 24px !default; $m-spacing-large: 16px !default; -// Larger spacing $spacing-larger: 32px !default; - -// Largest spacing $spacing-largest: 48px !default; -// Layout spacing $layout-spacing-top: 24px !default; $layout-spacing-right: 24px !default; $layout-spacing-bottom: 24px !default; @@ -607,159 +467,94 @@ $m-layout-spacing-right: 16px !default; $m-layout-spacing-bottom: 16px !default; $m-layout-spacing-left: 16px !default; -// Combined layout spacing $layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left !default; $m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left !default; $t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left !default; -// Gutter size -$gutter-size: 8px !default; - -//== Tables -//## Table spacing options (used in components/tables) +$gutter-size: $spacing-small !default; $padding-table-cell-top: 8px !default; $padding-table-cell-bottom: 8px !default; $padding-table-cell-left: 8px !default; $padding-table-cell-right: 8px !default; -//== Media queries breakpoints -//## Define the breakpoints at which your layout will change, adapting to different screen sizes. - -$screen-xs: 480px !default; -$screen-sm: 576px !default; -$screen-md: 768px !default; -$screen-lg: 992px !default; -$screen-xl: 1200px !default; - -// So media queries don't overlap when required, provide a maximum (used for max-width) -$screen-xs-max: calc(#{$screen-sm} - 1px) !default; -$screen-sm-max: calc(#{$screen-md} - 1px) !default; -$screen-md-max: calc(#{$screen-lg} - 1px) !default; -$screen-lg-max: calc(#{$screen-xl} - 1px) !default; - -//== Settings -//## Enable or disable your desired framework features -// Use of !important -$important-flex: true !default; // ./base/flex.scss -$important-spacing: true !default; // ./base/spacing.scss -$important-helpers: true !default; // ./helpers/helperclasses.scss - -//===== Legacy variables ===== - -//== Step 1: Brand Colors -$brand-inverse: #24276c !default; -$brand-info: #0086d9 !default; - -//== Step 2: UI Customization -// Sidebar -$sidebar-bg: $brand-inverse !default; +/* Brand Variants */ +$btn-inverse-bg: var(--brand-primary-400) !default; +$btn-info-bg: var(--brand-primary-300) !default; +$btn-inverse-border-color: var(--brand-primary-400) !default; +$btn-info-border-color: var(--brand-primary-300) !default; -//== Navigation -//## Used in components/navigation +$btn-inverse-color: $color-base !default; +$btn-info-color: $color-base !default; -// Default Navigation styling -$navigation-bg: $brand-inverse !default; -$navigation-bg-hover: lighten($navigation-bg, 4) !default; -$navigation-bg-active: lighten($navigation-bg, 8) !default; +$btn-inverse-bg-hover: var(--brand-primary-300) !default; +$btn-info-bg-hover: var(--brand-primary-300) !default; -$navigation-sub-bg: darken($navigation-bg, 4) !default; -$navigation-sub-bg-hover: $navigation-sub-bg !default; -$navigation-sub-bg-active: $navigation-sub-bg !default; +/* Alerts */ +$alert-info-bg: var(--brand-primary-50) !default; +$alert-info-color: var(--brand-primary-600) !default; +$alert-info-border-color: $brand-primary !default; -$navigation-border-color: $navigation-bg-hover !default; - -// Navigation Sidebar -$navsidebar-bg: $sidebar-bg !default; -$navsidebar-bg-hover: darken($navsidebar-bg, 4) !default; -$navsidebar-bg-active: darken($navsidebar-bg, 8) !default; - -$navsidebar-sub-bg: darken($navsidebar-bg, 4) !default; -$navsidebar-sub-bg-hover: $navsidebar-sub-bg !default; -$navsidebar-sub-bg-active: $navsidebar-sub-bg !default; - -$navsidebar-border-color: $navsidebar-bg-hover !default; - -//== Form -//## Used in components/inputs - -// Form Label -$form-label-color: $brand-inverse !default; +/* Labels */ +$label-info-bg: var(--brand-primary-300) !default; +$label-inverse-bg: var(--brand-primary-600) !default; -//== Buttons -//## Define background-color, border-color and text. Used in components/buttons +$label-info-border-color: var(--brand-primary-300) !default; +$label-inverse-border-color: var(--brand-primary-600) !default; -// Button Background Color -$btn-inverse-bg: $brand-inverse !default; -$btn-info-bg: $brand-info !default; +$label-info-color: $color-base !default; +$label-inverse-color: $color-base !default; -// Button Border Color -$btn-inverse-border-color: $brand-inverse !default; -$btn-info-border-color: $brand-info !default; +/* Groupbox */ +$groupbox-inverse-bg: var(--brand-primary-600) !default; +$groupbox-info-bg: var(--brand-primary-300) !default; -// Button Text Color -$btn-inverse-color: #fff !default; -$btn-info-color: #fff !default; +$groupbox-inverse-color: $color-base !default; +$groupbox-info-color: $color-base !default; -// Button Background Color -$btn-inverse-bg-hover: mix($btn-inverse-bg, white, 80%) !default; -$btn-info-bg-hover: mix($btn-info-bg, black, 80%) !default; +/* Callouts */ +$callout-info-color: var(--brand-primary-300) !default; +$callout-info-bg: var(--brand-primary-50) !default; -//== Color variations -//## These variations are used to support several other variables and components +//== Legacy variables +$gray-lighter: var(--gray-50); +$gray-light: var(--gray-300); +$gray-primary: var(--gray-200); +$gray-dark: var(--gray-700); +$gray-darker: var(--gray-800); // Color variations -$color-inverse-darker: mix($brand-inverse, black, 60%) !default; -$color-inverse-dark: mix($brand-inverse, black, 70%) !default; -$color-inverse-light: mix($brand-inverse, white, 40%) !default; -$color-inverse-lighter: mix($brand-inverse, white, 20%) !default; - -$color-info-darker: mix($brand-info, black, 60%) !default; -$color-info-dark: mix($brand-info, black, 70%) !default; -$color-info-light: mix($brand-info, white, 60%) !default; -$color-info-lighter: mix($brand-info, white, 20%) !default; - -//== Alerts -//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) - -// Background Color -$alert-info-bg: $color-primary-lighter !default; - -// Text Color -$alert-info-color: $color-primary-darker !default; - -// Border Color -$alert-info-border-color: $color-primary-dark !default; -//== Labels -//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) - -// Background Color -$label-info-bg: $brand-info !default; -$label-inverse-bg: $brand-inverse !default; +$color-default-darker: var(--gray-700) !default; +$color-default-dark: var(--gray-600) !default; +$color-default-light: var(--gray-100) !default; +$color-default-lighter: var(--gray-50) !default; + +$color-primary-darker: var(--brand-primary-700) !default; +$color-primary-dark: var(--brand-primary-600) !default; +$color-primary-light: var(--brand-primary-100) !default; +$color-primary-lighter: var(--brand-primary-50) !default; + +$color-success-darker: var(--brand-success-700) !default; +$color-success-dark: var(--brand-success-600) !default; +$color-success-light: var(--brand-success-100) !default; +$color-success-lighter: var(--brand-success-50) !default; + +$color-warning-darker: var(--brand-warning-700) !default; +$color-warning-dark: var(--brand-warning-600) !default; +$color-warning-light: var(--brand-warning-100) !default; +$color-warning-lighter: var(--brand-warning-50) !default; + +$color-danger-darker: var(--brand-danger-700) !default; +$color-danger-dark: var(--brand-danger-600) !default; +$color-danger-light: var(--brand-danger-100) !default; +$color-danger-lighter: var(--brand-danger-50) !default; -// Border Color -$label-info-border-color: $brand-info !default; -$label-inverse-border-color: $brand-inverse !default; - -// Text Color -$label-info-color: #fff !default; -$label-inverse-color: #fff !default; - -//== Groupbox -//## Default variables for Groupbox Widget (used in components/groupbox) - -// Background Color -$groupbox-inverse-bg: $brand-inverse !default; -$groupbox-info-bg: $brand-info !default; - -// Text Color -$groupbox-inverse-color: #fff !default; -$groupbox-info-color: #fff !default; -//== Callout (groupbox) Colors -//## Extended variables for Groupbox Widget (used in components/groupbox) - -// Text and Border Color -$callout-info-color: $brand-info !default; +$grid-padding-top: 16px !default; +$grid-padding-right: 16px !default; +$grid-padding-bottom: 16px !default; +$grid-padding-left: 16px !default; -// Background Color -$callout-info-bg: $color-info-lighter !default; +$listview-padding-top: 16px !default; +$listview-padding-right: 16px !default; +$listview-padding-bottom: 16px !default; +$listview-padding-left: 16px !default; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/_mxui.scss b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/_mxui.scss index 1ad6ffb1f..2c7256156 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/_mxui.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/_mxui.scss @@ -2352,19 +2352,8 @@ Main class hierarchy: display: inline-block; } - .form-horizontal .form-group.no-columns { - padding-left: 15px; - padding-right: 15px; - } - - .mx-radiobuttons.inline .radio { - display: inline-block; - margin-right: 20px; - } - .mx-radiobuttons .radio input[type="radio"] { /* Reset bootstrap rules */ - position: static; margin-right: 8px; margin-left: 0; } @@ -2380,19 +2369,6 @@ Main class hierarchy: white-space: pre-line; } - //.mx-compound-control { - // display: flex; - //} - - //.mx-compound-control button { - // margin-left: 5px; - //} - // - //[dir="rtl"] .mx-compound-control button { - // margin-left: 0; - // margin-right: 5px; - //} - .mx-tooltip { margin: 10px; } @@ -2617,9 +2593,6 @@ Main class hierarchy: .mx-datagrid tbody tr:first-child td { border-top: none; } - //.mx-datagrid tbody tr:nth-child(2n+1) td { - // background-color: #f9f9f9; - //} .mx-datagrid tbody .selected td { background-color: #eee; } @@ -2708,12 +2681,6 @@ Main class hierarchy: .mx-navigationtree ul { list-style: none; } - //.mx-navigationtree ul li { - // border-bottom: 1px solid #dfe6ea; - //} - //.mx-navigationtree li:last-child { - // border-style: none; - //} .mx-navigationtree a { display: block; padding: 5px 10px; @@ -2724,7 +2691,6 @@ Main class hierarchy: .mx-navigationtree a.active { color: #fff; text-shadow: none; - background: #3498db; border-radius: 3px; } .mx-navigationtree .mx-navigationtree-collapsed ul { @@ -2734,9 +2700,6 @@ Main class hierarchy: margin: 0; padding: 0; } - //.mx-navigationtree ul li { - // padding: 5px 0; - //} .mx-navigationtree ul li ul { padding: 0; margin-left: 10px; @@ -2805,23 +2768,6 @@ Main class hierarchy: float: left; } - .mx-dataview { - position: relative; - } - .mx-dataview-controls { - padding: 19px 20px 12px; - background-color: #f5f5f5; - border-top: 1px solid #eee; - } - - .mx-dataview-controls .mx-button { - margin-bottom: 8px; - } - - .mx-dataview-controls .mx-button + .mx-button { - margin-left: 0.3em; - } - .mx-dataview-message { background: #fff; position: absolute; @@ -2973,31 +2919,6 @@ Main class hierarchy: padding: 0px; list-style: none; } - // .mx-listview > ul > li { - // padding: 5px 10px 10px; - // border: 1px #ddd; - // border-style: solid solid none; - // background-color: #fff; - // outline: none; - // } - // .mx-listview > ul > li:first-child { - // border-top-left-radius: 4px; - // border-top-right-radius: 4px; - // } - // .mx-listview > ul > li:last-child { - // border-bottom-style: solid; - // border-bottom-left-radius: 4px; - // border-bottom-right-radius: 4px; - // } - //.mx-listview li:nth-child(2n+1) { - // background: #f9f9f9; - //} - //.mx-listview li:nth-child(2n+1):hover { - // background: #f5f5f5; - //} - .mx-listview > ul > li.selected { - // background: #eee; - } .mx-listview-clickable > ul > li { cursor: pointer; } @@ -3071,7 +2992,6 @@ Main class hierarchy: .mx-navigationlist li:focus, .mx-navigationlist li.active { color: #fff; - background-color: #3498db; } .mx-navigationlist * { cursor: pointer; @@ -3266,79 +3186,6 @@ Main class hierarchy: .mx-dropdown .selected { background: #f8f8f8; } - //.mx-selectbox { - // text-align: left; - //} - //.mx-selectbox-caret-wrapper { - // float: right; - // height: 100%; - //} - - .mx-demouserswitcher { - position: fixed; - top: 0; - right: 0; - width: 360px; - height: 100%; - z-index: 20000; - box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2); - } - .mx-demouserswitcher-content { - padding: 80px 40px 20px; - height: 100%; - color: #387ea2; - font-size: 14px; - overflow: auto; - background: url(resources/switcher.png) top right no-repeat #1b3149; - /* background-attachement local is not supported on IE8 - * when this is part of background the complete background is ignored */ - background-attachment: local; - } - .mx-demouserswitcher ul { - padding: 0; - margin-top: 25px; - list-style-type: none; - border-top: 1px solid #496076; - } - .mx-demouserswitcher a { - display: block; - padding: 10px 0; - color: #387ea2; - border-bottom: 1px solid #496076; - } - .mx-demouserswitcher h2 { - margin: 20px 0 5px; - color: #5bc4fe; - font-size: 28px; - } - .mx-demouserswitcher h3 { - margin: 0 0 2px; - color: #5bc4fe; - font-size: 18px; - font-weight: normal; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .mx-demouserswitcher .active h3 { - color: #11efdb; - } - .mx-demouserswitcher p { - margin-bottom: 0; - } - .mx-demouserswitcher-toggle { - position: absolute; - top: 25%; - left: -35px; - width: 35px; - height: 38px; - margin-top: -40px; - cursor: pointer; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2); - background: url(resources/switcher-toggle.png) center center no-repeat #1b3149; - } /* master details screen for mobile */ .mx-master-detail-screen { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss index 3bf6ffa79..fc112ccb0 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss @@ -1340,7 +1340,6 @@ @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { - margin-right: -15px; margin-left: auto; } } @@ -1370,12 +1369,10 @@ float: right !important; } .navbar-right:last-child { - margin-left: -15px; margin-right: auto; } .navbar-right.flip { float: left !important; - margin-left: -15px; margin-right: auto; } .navbar-right .dropdown-menu { @@ -1716,12 +1713,10 @@ .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { margin-left: 0; - margin-right: -15px; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { margin-left: 0; - margin-right: -15px; } .carousel-caption { left: 20%; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss index 304deb6be..42fdf03c5 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss @@ -169,7 +169,7 @@ fieldset { padding: 0.35em 0.625em 0.75em; margin: 0 2px; - border: 1px solid #c0c0c0; + border: var(--border-default); } legend { padding: 0; @@ -1099,20 +1099,6 @@ font-size: inherit; line-height: inherit; } - a { - color: #337ab7; - text-decoration: none; - } - a:hover, - a:focus { - color: #23527c; - text-decoration: underline; - } - a:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - } figure { margin: 0; } @@ -1138,7 +1124,7 @@ padding: 4px; line-height: 1.42857143; background-color: #fff; - border: 1px solid #ddd; + border: var(--border-default); border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -1153,25 +1139,6 @@ border: 0; border-top: 1px solid #eee; } - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } - .sr-only-focusable:active, - .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; - } [role="button"] { cursor: pointer; } @@ -1596,743 +1563,6 @@ width: 1170px; } } - .container-fluid { - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; - } - .row { - margin-right: -15px; - margin-left: -15px; - } - //.col-xs-1, - //.col-sm-1, - //.col-md-1, - //.col-lg-1, - //.col-xs-2, - //.col-sm-2, - //.col-md-2, - //.col-lg-2, - //.col-xs-3, - //.col-sm-3, - //.col-md-3, - //.col-lg-3, - //.col-xs-4, - //.col-sm-4, - //.col-md-4, - //.col-lg-4, - //.col-xs-5, - //.col-sm-5, - //.col-md-5, - //.col-lg-5, - //.col-xs-6, - //.col-sm-6, - //.col-md-6, - //.col-lg-6, - //.col-xs-7, - //.col-sm-7, - //.col-md-7, - //.col-lg-7, - //.col-xs-8, - //.col-sm-8, - //.col-md-8, - //.col-lg-8, - //.col-xs-9, - //.col-sm-9, - //.col-md-9, - //.col-lg-9, - //.col-xs-10, - //.col-sm-10, - //.col-md-10, - //.col-lg-10, - //.col-xs-11, - //.col-sm-11, - //.col-md-11, - //.col-lg-11, - //.col-xs-12, - //.col-sm-12, - //.col-md-12, - //.col-lg-12 { - // position: relative; - // min-height: 1px; - // padding-right: 15px; - // padding-left: 15px; - //} - //.col-xs-1, - //.col-xs-2, - //.col-xs-3, - //.col-xs-4, - //.col-xs-5, - //.col-xs-6, - //.col-xs-7, - //.col-xs-8, - //.col-xs-9, - //.col-xs-10, - //.col-xs-11, - //.col-xs-12 { - // float: left; - //} - //.col-xs-12 { - // width: 100%; - //} - //.col-xs-11 { - // width: 91.66666667%; - //} - //.col-xs-10 { - // width: 83.33333333%; - //} - //.col-xs-9 { - // width: 75%; - //} - //.col-xs-8 { - // width: 66.66666667%; - //} - //.col-xs-7 { - // width: 58.33333333%; - //} - //.col-xs-6 { - // width: 50%; - //} - //.col-xs-5 { - // width: 41.66666667%; - //} - //.col-xs-4 { - // width: 33.33333333%; - //} - //.col-xs-3 { - // width: 25%; - //} - //.col-xs-2 { - // width: 16.66666667%; - //} - //.col-xs-1 { - // width: 8.33333333%; - //} - //.col-xs-pull-12 { - // right: 100%; - //} - //.col-xs-pull-11 { - // right: 91.66666667%; - //} - //.col-xs-pull-10 { - // right: 83.33333333%; - //} - //.col-xs-pull-9 { - // right: 75%; - //} - //.col-xs-pull-8 { - // right: 66.66666667%; - //} - //.col-xs-pull-7 { - // right: 58.33333333%; - //} - //.col-xs-pull-6 { - // right: 50%; - //} - //.col-xs-pull-5 { - // right: 41.66666667%; - //} - //.col-xs-pull-4 { - // right: 33.33333333%; - //} - //.col-xs-pull-3 { - // right: 25%; - //} - //.col-xs-pull-2 { - // right: 16.66666667%; - //} - //.col-xs-pull-1 { - // right: 8.33333333%; - //} - //.col-xs-pull-0 { - // right: auto; - //} - //.col-xs-push-12 { - // left: 100%; - //} - //.col-xs-push-11 { - // left: 91.66666667%; - //} - //.col-xs-push-10 { - // left: 83.33333333%; - //} - //.col-xs-push-9 { - // left: 75%; - //} - //.col-xs-push-8 { - // left: 66.66666667%; - //} - //.col-xs-push-7 { - // left: 58.33333333%; - //} - //.col-xs-push-6 { - // left: 50%; - //} - //.col-xs-push-5 { - // left: 41.66666667%; - //} - //.col-xs-push-4 { - // left: 33.33333333%; - //} - //.col-xs-push-3 { - // left: 25%; - //} - //.col-xs-push-2 { - // left: 16.66666667%; - //} - //.col-xs-push-1 { - // left: 8.33333333%; - //} - //.col-xs-push-0 { - // left: auto; - //} - //.col-xs-offset-12 { - // margin-left: 100%; - //} - //.col-xs-offset-11 { - // margin-left: 91.66666667%; - //} - //.col-xs-offset-10 { - // margin-left: 83.33333333%; - //} - //.col-xs-offset-9 { - // margin-left: 75%; - //} - //.col-xs-offset-8 { - // margin-left: 66.66666667%; - //} - //.col-xs-offset-7 { - // margin-left: 58.33333333%; - //} - //.col-xs-offset-6 { - // margin-left: 50%; - //} - //.col-xs-offset-5 { - // margin-left: 41.66666667%; - //} - //.col-xs-offset-4 { - // margin-left: 33.33333333%; - //} - //.col-xs-offset-3 { - // margin-left: 25%; - //} - //.col-xs-offset-2 { - // margin-left: 16.66666667%; - //} - //.col-xs-offset-1 { - // margin-left: 8.33333333%; - //} - //.col-xs-offset-0 { - // margin-left: 0; - //} - //@media (min-width: 768px) { - // .col-sm-1, - // .col-sm-2, - // .col-sm-3, - // .col-sm-4, - // .col-sm-5, - // .col-sm-6, - // .col-sm-7, - // .col-sm-8, - // .col-sm-9, - // .col-sm-10, - // .col-sm-11, - // .col-sm-12 { - // float: left; - // } - // .col-sm-12 { - // width: 100%; - // } - // .col-sm-11 { - // width: 91.66666667%; - // } - // .col-sm-10 { - // width: 83.33333333%; - // } - // .col-sm-9 { - // width: 75%; - // } - // .col-sm-8 { - // width: 66.66666667%; - // } - // .col-sm-7 { - // width: 58.33333333%; - // } - // .col-sm-6 { - // width: 50%; - // } - // .col-sm-5 { - // width: 41.66666667%; - // } - // .col-sm-4 { - // width: 33.33333333%; - // } - // .col-sm-3 { - // width: 25%; - // } - // .col-sm-2 { - // width: 16.66666667%; - // } - // .col-sm-1 { - // width: 8.33333333%; - // } - // .col-sm-pull-12 { - // right: 100%; - // } - // .col-sm-pull-11 { - // right: 91.66666667%; - // } - // .col-sm-pull-10 { - // right: 83.33333333%; - // } - // .col-sm-pull-9 { - // right: 75%; - // } - // .col-sm-pull-8 { - // right: 66.66666667%; - // } - // .col-sm-pull-7 { - // right: 58.33333333%; - // } - // .col-sm-pull-6 { - // right: 50%; - // } - // .col-sm-pull-5 { - // right: 41.66666667%; - // } - // .col-sm-pull-4 { - // right: 33.33333333%; - // } - // .col-sm-pull-3 { - // right: 25%; - // } - // .col-sm-pull-2 { - // right: 16.66666667%; - // } - // .col-sm-pull-1 { - // right: 8.33333333%; - // } - // .col-sm-pull-0 { - // right: auto; - // } - // .col-sm-push-12 { - // left: 100%; - // } - // .col-sm-push-11 { - // left: 91.66666667%; - // } - // .col-sm-push-10 { - // left: 83.33333333%; - // } - // .col-sm-push-9 { - // left: 75%; - // } - // .col-sm-push-8 { - // left: 66.66666667%; - // } - // .col-sm-push-7 { - // left: 58.33333333%; - // } - // .col-sm-push-6 { - // left: 50%; - // } - // .col-sm-push-5 { - // left: 41.66666667%; - // } - // .col-sm-push-4 { - // left: 33.33333333%; - // } - // .col-sm-push-3 { - // left: 25%; - // } - // .col-sm-push-2 { - // left: 16.66666667%; - // } - // .col-sm-push-1 { - // left: 8.33333333%; - // } - // .col-sm-push-0 { - // left: auto; - // } - // .col-sm-offset-12 { - // margin-left: 100%; - // } - // .col-sm-offset-11 { - // margin-left: 91.66666667%; - // } - // .col-sm-offset-10 { - // margin-left: 83.33333333%; - // } - // .col-sm-offset-9 { - // margin-left: 75%; - // } - // .col-sm-offset-8 { - // margin-left: 66.66666667%; - // } - // .col-sm-offset-7 { - // margin-left: 58.33333333%; - // } - // .col-sm-offset-6 { - // margin-left: 50%; - // } - // .col-sm-offset-5 { - // margin-left: 41.66666667%; - // } - // .col-sm-offset-4 { - // margin-left: 33.33333333%; - // } - // .col-sm-offset-3 { - // margin-left: 25%; - // } - // .col-sm-offset-2 { - // margin-left: 16.66666667%; - // } - // .col-sm-offset-1 { - // margin-left: 8.33333333%; - // } - // .col-sm-offset-0 { - // margin-left: 0; - // } - //} - //@media (min-width: 992px) { - // .col-md-1, - // .col-md-2, - // .col-md-3, - // .col-md-4, - // .col-md-5, - // .col-md-6, - // .col-md-7, - // .col-md-8, - // .col-md-9, - // .col-md-10, - // .col-md-11, - // .col-md-12 { - // float: left; - // } - // .col-md-12 { - // width: 100%; - // } - // .col-md-11 { - // width: 91.66666667%; - // } - // .col-md-10 { - // width: 83.33333333%; - // } - // .col-md-9 { - // width: 75%; - // } - // .col-md-8 { - // width: 66.66666667%; - // } - // .col-md-7 { - // width: 58.33333333%; - // } - // .col-md-6 { - // width: 50%; - // } - // .col-md-5 { - // width: 41.66666667%; - // } - // .col-md-4 { - // width: 33.33333333%; - // } - // .col-md-3 { - // width: 25%; - // } - // .col-md-2 { - // width: 16.66666667%; - // } - // .col-md-1 { - // width: 8.33333333%; - // } - // .col-md-pull-12 { - // right: 100%; - // } - // .col-md-pull-11 { - // right: 91.66666667%; - // } - // .col-md-pull-10 { - // right: 83.33333333%; - // } - // .col-md-pull-9 { - // right: 75%; - // } - // .col-md-pull-8 { - // right: 66.66666667%; - // } - // .col-md-pull-7 { - // right: 58.33333333%; - // } - // .col-md-pull-6 { - // right: 50%; - // } - // .col-md-pull-5 { - // right: 41.66666667%; - // } - // .col-md-pull-4 { - // right: 33.33333333%; - // } - // .col-md-pull-3 { - // right: 25%; - // } - // .col-md-pull-2 { - // right: 16.66666667%; - // } - // .col-md-pull-1 { - // right: 8.33333333%; - // } - // .col-md-pull-0 { - // right: auto; - // } - // .col-md-push-12 { - // left: 100%; - // } - // .col-md-push-11 { - // left: 91.66666667%; - // } - // .col-md-push-10 { - // left: 83.33333333%; - // } - // .col-md-push-9 { - // left: 75%; - // } - // .col-md-push-8 { - // left: 66.66666667%; - // } - // .col-md-push-7 { - // left: 58.33333333%; - // } - // .col-md-push-6 { - // left: 50%; - // } - // .col-md-push-5 { - // left: 41.66666667%; - // } - // .col-md-push-4 { - // left: 33.33333333%; - // } - // .col-md-push-3 { - // left: 25%; - // } - // .col-md-push-2 { - // left: 16.66666667%; - // } - // .col-md-push-1 { - // left: 8.33333333%; - // } - // .col-md-push-0 { - // left: auto; - // } - // .col-md-offset-12 { - // margin-left: 100%; - // } - // .col-md-offset-11 { - // margin-left: 91.66666667%; - // } - // .col-md-offset-10 { - // margin-left: 83.33333333%; - // } - // .col-md-offset-9 { - // margin-left: 75%; - // } - // .col-md-offset-8 { - // margin-left: 66.66666667%; - // } - // .col-md-offset-7 { - // margin-left: 58.33333333%; - // } - // .col-md-offset-6 { - // margin-left: 50%; - // } - // .col-md-offset-5 { - // margin-left: 41.66666667%; - // } - // .col-md-offset-4 { - // margin-left: 33.33333333%; - // } - // .col-md-offset-3 { - // margin-left: 25%; - // } - // .col-md-offset-2 { - // margin-left: 16.66666667%; - // } - // .col-md-offset-1 { - // margin-left: 8.33333333%; - // } - // .col-md-offset-0 { - // margin-left: 0; - // } - //} - //@media (min-width: 1200px) { - // .col-lg-1, - // .col-lg-2, - // .col-lg-3, - // .col-lg-4, - // .col-lg-5, - // .col-lg-6, - // .col-lg-7, - // .col-lg-8, - // .col-lg-9, - // .col-lg-10, - // .col-lg-11, - // .col-lg-12 { - // float: left; - // } - // .col-lg-12 { - // width: 100%; - // } - // .col-lg-11 { - // width: 91.66666667%; - // } - // .col-lg-10 { - // width: 83.33333333%; - // } - // .col-lg-9 { - // width: 75%; - // } - // .col-lg-8 { - // width: 66.66666667%; - // } - // .col-lg-7 { - // width: 58.33333333%; - // } - // .col-lg-6 { - // width: 50%; - // } - // .col-lg-5 { - // width: 41.66666667%; - // } - // .col-lg-4 { - // width: 33.33333333%; - // } - // .col-lg-3 { - // width: 25%; - // } - // .col-lg-2 { - // width: 16.66666667%; - // } - // .col-lg-1 { - // width: 8.33333333%; - // } - // .col-lg-pull-12 { - // right: 100%; - // } - // .col-lg-pull-11 { - // right: 91.66666667%; - // } - // .col-lg-pull-10 { - // right: 83.33333333%; - // } - // .col-lg-pull-9 { - // right: 75%; - // } - // .col-lg-pull-8 { - // right: 66.66666667%; - // } - // .col-lg-pull-7 { - // right: 58.33333333%; - // } - // .col-lg-pull-6 { - // right: 50%; - // } - // .col-lg-pull-5 { - // right: 41.66666667%; - // } - // .col-lg-pull-4 { - // right: 33.33333333%; - // } - // .col-lg-pull-3 { - // right: 25%; - // } - // .col-lg-pull-2 { - // right: 16.66666667%; - // } - // .col-lg-pull-1 { - // right: 8.33333333%; - // } - // .col-lg-pull-0 { - // right: auto; - // } - // .col-lg-push-12 { - // left: 100%; - // } - // .col-lg-push-11 { - // left: 91.66666667%; - // } - // .col-lg-push-10 { - // left: 83.33333333%; - // } - // .col-lg-push-9 { - // left: 75%; - // } - // .col-lg-push-8 { - // left: 66.66666667%; - // } - // .col-lg-push-7 { - // left: 58.33333333%; - // } - // .col-lg-push-6 { - // left: 50%; - // } - // .col-lg-push-5 { - // left: 41.66666667%; - // } - // .col-lg-push-4 { - // left: 33.33333333%; - // } - // .col-lg-push-3 { - // left: 25%; - // } - // .col-lg-push-2 { - // left: 16.66666667%; - // } - // .col-lg-push-1 { - // left: 8.33333333%; - // } - // .col-lg-push-0 { - // left: auto; - // } - // .col-lg-offset-12 { - // margin-left: 100%; - // } - // .col-lg-offset-11 { - // margin-left: 91.66666667%; - // } - // .col-lg-offset-10 { - // margin-left: 83.33333333%; - // } - // .col-lg-offset-9 { - // margin-left: 75%; - // } - // .col-lg-offset-8 { - // margin-left: 66.66666667%; - // } - // .col-lg-offset-7 { - // margin-left: 58.33333333%; - // } - // .col-lg-offset-6 { - // margin-left: 50%; - // } - // .col-lg-offset-5 { - // margin-left: 41.66666667%; - // } - // .col-lg-offset-4 { - // margin-left: 33.33333333%; - // } - // .col-lg-offset-3 { - // margin-left: 25%; - // } - // .col-lg-offset-2 { - // margin-left: 16.66666667%; - // } - // .col-lg-offset-1 { - // margin-left: 8.33333333%; - // } - // .col-lg-offset-0 { - // margin-left: 0; - // } - //} table { background-color: transparent; } @@ -2618,13 +1848,6 @@ select[size] { height: auto; } - input[type="file"]:focus, - input[type="radio"]:focus, - input[type="checkbox"]:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - } output { display: block; padding-top: 7px; @@ -2981,9 +2204,6 @@ .has-feedback label ~ .form-control-feedback { top: 25px; } - .has-feedback label.sr-only ~ .form-control-feedback { - top: 0; - } .help-block { display: block; margin-top: 5px; @@ -3052,10 +2272,6 @@ .form-horizontal .checkbox { min-height: 27px; } - .form-horizontal .form-group { - margin-right: -15px; - margin-left: -15px; - } @media (min-width: 768px) { .form-horizontal .control-label { padding-top: 7px; @@ -3097,342 +2313,6 @@ border: 1px solid transparent; border-radius: 4px; } - .btn:focus, - .btn:active:focus, - .btn.active:focus, - .btn.focus, - .btn:active.focus, - .btn.active.focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - } - .btn:hover, - .btn:focus, - .btn.focus { - color: #333; - text-decoration: none; - } - .btn:active, - .btn.active { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - } - .btn.disabled, - .btn[disabled], - fieldset[disabled] .btn { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - box-shadow: none; - opacity: 0.65; - } - .btn-default { - color: #333; - background-color: #fff; - border-color: #ccc; - } - .btn-default:hover, - .btn-default:focus, - .btn-default.focus, - .btn-default:active, - .btn-default.active, - .open > .dropdown-toggle.btn-default { - color: #333; - background-color: #e6e6e6; - border-color: #adadad; - } - .btn-default:active, - .btn-default.active, - .open > .dropdown-toggle.btn-default { - background-image: none; - } - .btn-default.disabled, - .btn-default[disabled], - fieldset[disabled] .btn-default, - .btn-default.disabled:hover, - .btn-default[disabled]:hover, - fieldset[disabled] .btn-default:hover, - .btn-default.disabled:focus, - .btn-default[disabled]:focus, - fieldset[disabled] .btn-default:focus, - .btn-default.disabled.focus, - .btn-default[disabled].focus, - fieldset[disabled] .btn-default.focus, - .btn-default.disabled:active, - .btn-default[disabled]:active, - fieldset[disabled] .btn-default:active, - .btn-default.disabled.active, - .btn-default[disabled].active, - fieldset[disabled] .btn-default.active { - background-color: #fff; - border-color: #ccc; - } - .btn-default .badge { - color: #fff; - background-color: #333; - } - .btn-primary { - color: #fff; - background-color: #337ab7; - border-color: #2e6da4; - } - .btn-primary:hover, - .btn-primary:focus, - .btn-primary.focus, - .btn-primary:active, - .btn-primary.active, - .open > .dropdown-toggle.btn-primary { - color: #fff; - background-color: #286090; - border-color: #204d74; - } - .btn-primary:active, - .btn-primary.active, - .open > .dropdown-toggle.btn-primary { - background-image: none; - } - .btn-primary.disabled, - .btn-primary[disabled], - fieldset[disabled] .btn-primary, - .btn-primary.disabled:hover, - .btn-primary[disabled]:hover, - fieldset[disabled] .btn-primary:hover, - .btn-primary.disabled:focus, - .btn-primary[disabled]:focus, - fieldset[disabled] .btn-primary:focus, - .btn-primary.disabled.focus, - .btn-primary[disabled].focus, - fieldset[disabled] .btn-primary.focus, - .btn-primary.disabled:active, - .btn-primary[disabled]:active, - fieldset[disabled] .btn-primary:active, - .btn-primary.disabled.active, - .btn-primary[disabled].active, - fieldset[disabled] .btn-primary.active { - background-color: #337ab7; - border-color: #2e6da4; - } - .btn-primary .badge { - color: #337ab7; - background-color: #fff; - } - .btn-success { - color: #fff; - background-color: #5cb85c; - border-color: #4cae4c; - } - .btn-success:hover, - .btn-success:focus, - .btn-success.focus, - .btn-success:active, - .btn-success.active, - .open > .dropdown-toggle.btn-success { - color: #fff; - background-color: #449d44; - border-color: #398439; - } - .btn-success:active, - .btn-success.active, - .open > .dropdown-toggle.btn-success { - background-image: none; - } - .btn-success.disabled, - .btn-success[disabled], - fieldset[disabled] .btn-success, - .btn-success.disabled:hover, - .btn-success[disabled]:hover, - fieldset[disabled] .btn-success:hover, - .btn-success.disabled:focus, - .btn-success[disabled]:focus, - fieldset[disabled] .btn-success:focus, - .btn-success.disabled.focus, - .btn-success[disabled].focus, - fieldset[disabled] .btn-success.focus, - .btn-success.disabled:active, - .btn-success[disabled]:active, - fieldset[disabled] .btn-success:active, - .btn-success.disabled.active, - .btn-success[disabled].active, - fieldset[disabled] .btn-success.active { - background-color: #5cb85c; - border-color: #4cae4c; - } - .btn-success .badge { - color: #5cb85c; - background-color: #fff; - } - .btn-info { - color: #fff; - background-color: #5bc0de; - border-color: #46b8da; - } - .btn-info:hover, - .btn-info:focus, - .btn-info.focus, - .btn-info:active, - .btn-info.active, - .open > .dropdown-toggle.btn-info { - color: #fff; - background-color: #31b0d5; - border-color: #269abc; - } - .btn-info:active, - .btn-info.active, - .open > .dropdown-toggle.btn-info { - background-image: none; - } - .btn-info.disabled, - .btn-info[disabled], - fieldset[disabled] .btn-info, - .btn-info.disabled:hover, - .btn-info[disabled]:hover, - fieldset[disabled] .btn-info:hover, - .btn-info.disabled:focus, - .btn-info[disabled]:focus, - fieldset[disabled] .btn-info:focus, - .btn-info.disabled.focus, - .btn-info[disabled].focus, - fieldset[disabled] .btn-info.focus, - .btn-info.disabled:active, - .btn-info[disabled]:active, - fieldset[disabled] .btn-info:active, - .btn-info.disabled.active, - .btn-info[disabled].active, - fieldset[disabled] .btn-info.active { - background-color: #5bc0de; - border-color: #46b8da; - } - .btn-info .badge { - color: #5bc0de; - background-color: #fff; - } - .btn-warning { - color: #fff; - background-color: #f0ad4e; - border-color: #eea236; - } - .btn-warning:hover, - .btn-warning:focus, - .btn-warning.focus, - .btn-warning:active, - .btn-warning.active, - .open > .dropdown-toggle.btn-warning { - color: #fff; - background-color: #ec971f; - border-color: #d58512; - } - .btn-warning:active, - .btn-warning.active, - .open > .dropdown-toggle.btn-warning { - background-image: none; - } - .btn-warning.disabled, - .btn-warning[disabled], - fieldset[disabled] .btn-warning, - .btn-warning.disabled:hover, - .btn-warning[disabled]:hover, - fieldset[disabled] .btn-warning:hover, - .btn-warning.disabled:focus, - .btn-warning[disabled]:focus, - fieldset[disabled] .btn-warning:focus, - .btn-warning.disabled.focus, - .btn-warning[disabled].focus, - fieldset[disabled] .btn-warning.focus, - .btn-warning.disabled:active, - .btn-warning[disabled]:active, - fieldset[disabled] .btn-warning:active, - .btn-warning.disabled.active, - .btn-warning[disabled].active, - fieldset[disabled] .btn-warning.active { - background-color: #f0ad4e; - border-color: #eea236; - } - .btn-warning .badge { - color: #f0ad4e; - background-color: #fff; - } - .btn-danger { - color: #fff; - background-color: #d9534f; - border-color: #d43f3a; - } - .btn-danger:hover, - .btn-danger:focus, - .btn-danger.focus, - .btn-danger:active, - .btn-danger.active, - .open > .dropdown-toggle.btn-danger { - color: #fff; - background-color: #c9302c; - border-color: #ac2925; - } - .btn-danger:active, - .btn-danger.active, - .open > .dropdown-toggle.btn-danger { - background-image: none; - } - .btn-danger.disabled, - .btn-danger[disabled], - fieldset[disabled] .btn-danger, - .btn-danger.disabled:hover, - .btn-danger[disabled]:hover, - fieldset[disabled] .btn-danger:hover, - .btn-danger.disabled:focus, - .btn-danger[disabled]:focus, - fieldset[disabled] .btn-danger:focus, - .btn-danger.disabled.focus, - .btn-danger[disabled].focus, - fieldset[disabled] .btn-danger.focus, - .btn-danger.disabled:active, - .btn-danger[disabled]:active, - fieldset[disabled] .btn-danger:active, - .btn-danger.disabled.active, - .btn-danger[disabled].active, - fieldset[disabled] .btn-danger.active { - background-color: #d9534f; - border-color: #d43f3a; - } - .btn-danger .badge { - color: #d9534f; - background-color: #fff; - } - .btn-link { - font-weight: normal; - color: #337ab7; - border-radius: 0; - } - .btn-link, - .btn-link:active, - .btn-link.active, - .btn-link[disabled], - fieldset[disabled] .btn-link { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - } - .btn-link, - .btn-link:hover, - .btn-link:focus, - .btn-link:active { - border-color: transparent; - } - .btn-link:hover, - .btn-link:focus { - color: #23527c; - text-decoration: underline; - background-color: transparent; - } - .btn-link[disabled]:hover, - fieldset[disabled] .btn-link:hover, - .btn-link[disabled]:focus, - fieldset[disabled] .btn-link:focus { - color: #777; - text-decoration: none; - } .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; @@ -4217,22 +3097,22 @@ max-height: 200px; } } - .container > .navbar-header, - .container-fluid > .navbar-header, - .container > .navbar-collapse, - .container-fluid > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; - } - @media (min-width: 768px) { - .container > .navbar-header, - .container-fluid > .navbar-header, - .container > .navbar-collapse, - .container-fluid > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } - } + // .container > .navbar-header, + // .container-fluid > .navbar-header, + // .container > .navbar-collapse, + // .container-fluid > .navbar-collapse { + // margin-right: -15px; + // margin-left: -15px; + // } + // @media (min-width: 768px) { + // .container > .navbar-header, + // .container-fluid > .navbar-header, + // .container > .navbar-collapse, + // .container-fluid > .navbar-collapse { + // margin-right: 0; + // margin-left: 0; + // } + // } .navbar-static-top { z-index: 1000; border-width: 0 0 1px; @@ -4278,12 +3158,12 @@ .navbar-brand > img { display: block; } - @media (min-width: 768px) { - .navbar > .container .navbar-brand, - .navbar > .container-fluid .navbar-brand { - margin-left: -15px; - } - } + // @media (min-width: 768px) { + // .navbar > .container .navbar-brand, + // .navbar > .container-fluid .navbar-brand { + // margin-left: -15px; + // } + // } .navbar-toggle { position: relative; float: right; @@ -4963,27 +3843,9 @@ .jumbotron > hr { border-top-color: #d5d5d5; } - .container .jumbotron, - .container-fluid .jumbotron { - border-radius: 6px; - } .jumbotron .container { max-width: 100%; } - @media screen and (min-width: 768px) { - .jumbotron { - padding: 48px 0; - } - .container .jumbotron, - .container-fluid .jumbotron { - padding-right: 60px; - padding-left: 60px; - } - .jumbotron h1, - .jumbotron .h1 { - font-size: 63px; - } - } .thumbnail { display: block; padding: 4px; @@ -6556,7 +5418,7 @@ .modal-footer:before, .modal-footer:after { display: table; - content: " "; + // content: " "; } .clearfix:after, .dl-horizontal dd:after, diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_base.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_base.scss index 4d64a0169..64eb1ea1f 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/_base.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_base.scss @@ -16,28 +16,34 @@ body { min-height: 100%; - color: $font-color-default; - background-color: $bg-color; - font-family: $font-family-base; - font-size: $font-size-default; - font-weight: $font-weight-normal; - line-height: $line-height-base; + color: var(--font-color-default); + background-color: var(--bg-color); + font-family: var(--font-family-base); + font-size: var(--font-size-default); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-base); } a { transition: 0.25s; - color: $link-color; + color: var(--link-color); + text-decoration: none; -webkit-backface-visibility: hidden; } a:hover { text-decoration: underline; - color: $link-hover-color; + color: var(--link-hover-color); } // Address `outline` inconsistency between Chrome and other browsers. a:focus { - outline: thin dotted; + outline: 0; + } + + // Improve accessibility when navigating using the keyboard + a:focus-visible { + @extend .focus-ring !optional; } // Improve readability when focused and also mouse hovered in all browsers @@ -66,6 +72,33 @@ box-shadow: none; } + // Accessibility helpers: + // .sr-only visually hides elements but keeps them accessible to screen readers. + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + border: 0; + } + // .sr-only-focusable makes hidden elements visible when focused (keyboard navigation). + .sr-only-focusable:active, + .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip-path: none; + } + // .has-feedback label.sr-only ~ .form-control-feedback positions feedback for screen reader-only labels. + .has-feedback label.sr-only ~ .form-control-feedback { + top: 0; + } + .mx-underlay { position: fixed; top: 0; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss new file mode 100644 index 000000000..1da8c2495 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss @@ -0,0 +1,22 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// +@mixin card() { + + /* ========================================================================== + Cards + ========================================================================== */ + .card { + border: var(--card-border); + border-radius: var(--card-border-radius); + background-color: var(--card-bg); + overflow: hidden; + position: relative; + padding: var(--card-padding); + box-shadow: var(--card-shadow); + margin-bottom: var(--card-margin-bottom); + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_flex.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_flex.scss index 90eb0e691..aaef7b2ef 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/_flex.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_flex.scss @@ -10,55 +10,155 @@ Flex classes ========================================================================== */ @mixin flex() { + :root { + --flex-shrink: 0 1 auto; + --flex-auto: 1; + --flex-grow: 1 0 auto; + @for $i from 1 through 12 { + --flex-#{$i}: #{$i}; + } + --flex-gap: var(--gutter-size); + } + $important-flex-value: if($important-flex, " !important", ""); // Flex layout .flexcontainer { - display: flex; - overflow: hidden; - flex: 1; - flex-direction: row; - - .flexitem { - margin-right: $gutter-size; - - &:last-child { - margin-right: 0; - } - } - - .flexitem-main { - overflow: hidden; - flex: 1; - } + display: flex #{$important-flex-value}; + gap: var(--flex-gap) #{$important-flex-value}; } // These classes define the order of the children .flex-row { - flex-direction: row #{$important-flex-value}; + @extend .flexcontainer; + @extend .row-alignments; + flex-flow: row #{$important-flex-value}; + flex-wrap: wrap; } .flex-column { + @extend .flexcontainer; + @extend .column-alignments; flex-direction: column #{$important-flex-value}; } .flex-row-reverse { + @extend .flexcontainer; + @extend .row-alignments; flex-direction: row-reverse #{$important-flex-value}; } .flex-column-reverse { + @extend .flexcontainer; + @extend .column-alignments; flex-direction: column-reverse #{$important-flex-value}; } + .row-alignments { + &.align-x-left { + @extend .justify-start; + } + &.align-x-center { + @extend .justify-center; + } + &.align-x-right { + @extend .justify-end; + } + &.align-x-stretch { + @extend .justify-stretch; + } + &.align-x-between { + @extend .justify-between; + } + &.align-x-around { + @extend .justify-around; + } + &.align-x-evenly { + @extend .justify-evenly; + } + &.align-y-top { + @extend .align-children-start; + } + &.align-y-center { + @extend .align-children-center; + } + &.align-y-bottom { + @extend .align-children-end; + } + &.align-y-stretch { + @extend .align-children-stretch; + } + &.align-y-baseline { + @extend .align-children-baseline; + } + } + + .column-alignments { + &.align-x-left { + @extend .align-children-start; + } + &.align-x-center { + @extend .align-children-center; + } + &.align-x-right { + @extend .align-children-end; + } + &.align-x-stretch { + @extend .align-children-stretch; + } + &.align-x-baseline { + @extend .align-children-baseline; + } + &.align-y-top { + @extend .justify-start; + } + &.align-y-center { + @extend .justify-center; + } + &.align-y-bottom { + @extend .justify-end; + } + &.align-y-stretch { + @extend .justify-stretch; + } + &.align-y-between { + @extend .justify-between; + } + &.align-y-around { + @extend .justify-around; + } + &.align-y-evenly { + @extend .justify-evenly; + } + } + + .flex-align-left { + align-items: center #{$important-flex-value}; + justify-content: flex-start #{$important-flex-value}; + } + + .flex-align-center { + align-items: center #{$important-flex-value}; + justify-content: flex-start #{$important-flex-value}; + } + + .flex-align-right { + align-items: center #{$important-flex-value}; + justify-content: flex-start #{$important-flex-value}; + } + .flex-wrap { + @extend .flexcontainer; flex-wrap: wrap #{$important-flex-value}; } .flex-nowrap { + @extend .flexcontainer; flex-wrap: nowrap #{$important-flex-value}; } .flex-wrap-reverse { + @extend .flexcontainer; flex-wrap: wrap-reverse #{$important-flex-value}; } @@ -69,32 +169,32 @@ } // These classes define the alignment of the children - .justify-content-start { + .justify-start { justify-content: flex-start #{$important-flex-value}; } - .justify-content-end { + .justify-end { justify-content: flex-end #{$important-flex-value}; } - .justify-content-center { + .justify-center { justify-content: center #{$important-flex-value}; } - .justify-content-between { + .justify-between { justify-content: space-between #{$important-flex-value}; } - .justify-content-around { + .justify-around { justify-content: space-around #{$important-flex-value}; } - .justify-content-evenly { + .justify-evenly { // Not Supported in IE11 justify-content: space-evenly #{$important-flex-value}; } - .justify-content-stretch { + .justify-stretch { justify-content: stretch #{$important-flex-value}; } @@ -132,6 +232,10 @@ align-content: center #{$important-flex-value}; } + .align-content-baseline { + align-content: baseline #{$important-flex-value}; + } + .align-content-between { align-content: space-between #{$important-flex-value}; } @@ -169,6 +273,131 @@ align-self: stretch #{$important-flex-value}; } + .flex-width { + --flex-gap-parent: var(--flex-gap); + $flex-2-columns: calc(50% - var(--flex-gap) / 2); + $flex-items-2-columns: calc(50% - var(--flex-gap-parent) / 2); + $flex-3-columns: calc(33.33% - 2 * var(--flex-gap) / 3); + $flex-items-3-columns: calc(33.33% - 2 * var(--flex-gap-parent) / 3); + $flex-4-columns: calc(25% - 3 * var(--flex-gap) / 4); + $flex-items-4-columns: calc(25% - 3 * var(--flex-gap-parent) / 4); + + &.flex-small, + &.flex-medium, + &.flex-large, + &.flex-items-small > *, + &.flex-items-medium > *, + &.flex-items-large > * { + flex-basis: 100%; + min-width: 0; + } + + @media (min-width: $screen-sm) { + &.flex-small > { + flex-basis: $flex-2-columns; + min-width: 240px; + } + &.flex-items-small > * { + flex-basis: $flex-items-2-columns; + min-width: 240px; + } + } + + @media (min-width: $screen-md) { + &.flex-small { + flex-basis: $flex-2-columns; + min-width: 240px; + } + &.flex-medium { + flex-basis: $flex-2-columns; + min-width: 300px; + } + &.flex-large { + flex-basis: 100%; + min-width: 400px; + } + &.flex-items-small > * { + flex-basis: $flex-items-2-columns; + min-width: 240px; + } + &.flex-items-medium > * { + flex-basis: $flex-items-2-columns; + min-width: 300px; + } + &.flex-items-large > * { + flex-basis: 100%; + min-width: 400px; + } + } + + @media (min-width: $screen-lg) { + &.flex-small { + flex-basis: $flex-3-columns; + min-width: 240px; + } + &.flex-medium { + flex-basis: $flex-2-columns; + min-width: 300px; + } + &.flex-large { + flex-basis: 100%; + min-width: 400px; + } + &.flex-items-small > * { + flex-basis: $flex-items-4-columns; + min-width: 240px; + } + &.flex-items-medium > * { + flex-basis: $flex-items-2-columns; + min-width: 300px; + } + &.flex-items-large > * { + flex-basis: 100%; + min-width: 400px; + } + } + + @media (min-width: $screen-xl) { + &.flex-small { + flex-basis: $flex-4-columns; + min-width: 240px; + } + &.flex-medium { + flex-basis: $flex-3-columns; + min-width: 300px; + } + &.flex-large { + flex-basis: $flex-2-columns; + min-width: 400px; + } + &.flex-items-small > * { + flex-basis: $flex-items-4-columns; + min-width: 240px; + } + &.flex-items-medium > * { + flex-basis: $flex-items-3-columns; + min-width: 300px; + } + &.flex-items-large > * { + flex-basis: $flex-items-2-columns; + min-width: 400px; + } + } + } + + .flex-items-shrink > * { + flex: var(--flex-shrink); + } + .flex-items-auto > * { + flex: var(--flex-auto); + } + .flex-items-grow > * { + flex: var(--flex-grow); + } + .flex-items-fixed > * { + flex: none; + } + @include flex-items($number: 12); } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_focus-ring.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_focus-ring.scss new file mode 100644 index 000000000..35a20c055 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_focus-ring.scss @@ -0,0 +1,20 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// +/* ========================================================================== + focus ring for keyboard tab indicators +========================================================================== */ +@mixin focus-ring() { + + .topbar-content, .region-bottombar{ + --focus-outline-offset: 0; + } + + .focus-ring { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } +} \ No newline at end of file diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_login.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_login.scss index 70c68b970..c1f72300c 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/_login.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_login.scss @@ -63,7 +63,7 @@ } .btn { - border-radius: $border-radius-default; + border-radius: var(--border-radius-default); } // Form label + input @@ -77,11 +77,11 @@ .control-label { flex: 4; margin-bottom: 0; - font-size: $font-size-default; + font-size: var(--font-size-default); font-weight: 500; @media only screen and (max-width: $screen-sm-max) { flex: 1; - margin-bottom: $spacing-small; + margin-bottom: var(--spacing-small); } } @@ -102,23 +102,23 @@ position: absolute; top: 50%; - left: $form-input-padding-x; + left: var(--form-input-padding-x); transform: translateY(-50%); &-eye-open:hover, &-eye-close:hover { cursor: pointer; - color: $brand-primary; + color: var(--brand-primary); } } .form-control { - padding: $form-input-padding-y $form-input-padding-x $form-input-padding-y 45px; + padding: var(--form-input-padding-y) var(--form-input-padding-x) var(--form-input-padding-y) 45px; width: 100%; } .form-control:focus ~ .glyphicon:before { - color: $brand-primary; + color: var(--brand-primary); } } } @@ -168,7 +168,7 @@ height: 100%; animation: makePointer 1s ease-out both; background: left / cover no-repeat - linear-gradient(to right, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%), + linear-gradient(to right, color-mix(in srgb, var(--brand-primary) 90%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 60%, transparent) 100%), left / cover no-repeat url("./resources/work-do-more.jpeg"); -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/_spacing.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_spacing.scss index a53fce2a2..593de209e 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/_spacing.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_spacing.scss @@ -55,63 +55,63 @@ // Spacing small .spacing-inner { - padding: $spacing-small #{$important-spacing-value}; + padding: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-top { - padding-top: $spacing-small #{$important-spacing-value}; + padding-top: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-right { - padding-right: $spacing-small #{$important-spacing-value}; + padding-right: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-bottom { - padding-bottom: $spacing-small #{$important-spacing-value}; + padding-bottom: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-left { - padding-left: $spacing-small #{$important-spacing-value}; + padding-left: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-vertical { - padding-top: $spacing-small #{$important-spacing-value}; - padding-bottom: $spacing-small #{$important-spacing-value}; + padding-top: var(--spacing-small) #{$important-spacing-value}; + padding-bottom: var(--spacing-small) #{$important-spacing-value}; } .spacing-inner-horizontal { - padding-left: $spacing-small #{$important-spacing-value}; - padding-right: $spacing-small #{$important-spacing-value}; + padding-left: var(--spacing-small) #{$important-spacing-value}; + padding-right: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer { - margin: $spacing-small #{$important-spacing-value}; + margin: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-top { - margin-top: $spacing-small #{$important-spacing-value}; + margin-top: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-right { - margin-right: $spacing-small #{$important-spacing-value}; + margin-right: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-bottom { - margin-bottom: $spacing-small #{$important-spacing-value}; + margin-bottom: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-left { - margin-left: $spacing-small #{$important-spacing-value}; + margin-left: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-vertical { - margin-top: $spacing-small #{$important-spacing-value}; - margin-bottom: $spacing-small #{$important-spacing-value}; + margin-top: var(--spacing-small) #{$important-spacing-value}; + margin-bottom: var(--spacing-small) #{$important-spacing-value}; } .spacing-outer-horizontal { - margin-left: $spacing-small #{$important-spacing-value}; - margin-right: $spacing-small #{$important-spacing-value}; + margin-left: var(--spacing-small) #{$important-spacing-value}; + margin-right: var(--spacing-small) #{$important-spacing-value}; } // Spacing Medium diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_buttons.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_buttons.scss index 42a9079d5..96e50ef4f 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_buttons.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_buttons.scss @@ -5,20 +5,25 @@ // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. // -@mixin button-variant($color, $background, $border, $hover) { +@mixin button-variant($color, $background, $border, $hover, $active, $accent) { @if not $exclude-button { color: $color; border-color: $border; background-color: $background; &:hover, - &:focus, - &:active, - &.active, .open > &.dropdown-toggle { color: $color; - border-color: $hover; background-color: $hover; + border-color: $border; + @if $color == var(--btn-default-color) { + border-color: $color; + } + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-color: $active; } &:active, &.active, @@ -31,28 +36,57 @@ fieldset[disabled] { &, &:hover, - &:focus, &:active, &.active { - border-color: $border; background-color: $background; } } + &.btn-style-icon { + @if $color != var(--btn-default-color) { + color: $accent; + background: color-mix(in srgb, white, $background 15%); + } + + &:hover, + .open > &.dropdown-toggle { + color: $color; + background-color: $border; + border-color: $border; + @if $color == var(--btn-default-color) { + border-color: $color; + } + } + + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + background-color: $active; + border-color: $border; + } + } + // Button bordered &.btn-bordered { background-color: transparent; - @if $color != $btn-default-color { + @if $color != var(--btn-default-color) { color: $border; } &:hover, - &:focus, + .open > &.dropdown-toggle { + color: $color; + background-color: $border; + border-color: $border; + @if $color == var(--btn-default-color) { + border-color: $color; + } + } &:active, &.active, .open > &.dropdown-toggle { color: $color; - border-color: $border; - background-color: $border; + background-color: $active; } } // Button as link @@ -60,13 +94,13 @@ text-decoration: none; border-color: transparent; background-color: transparent; - @if $color != $btn-default-color { + @if $color != var(--btn-default-color) { color: $background; } &:hover { - border-color: $btn-link-bg-hover; - background-color: $btn-link-bg-hover; + border-color: var(--btn-link-bg-hover); + background-color: var(--btn-link-bg-hover); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss index 4287d92cd..e09b2508b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss @@ -14,78 +14,78 @@ @if $device==responsive { @if $direction==all { @media (max-width: $screen-sm-max) { - #{$type}: #{$m-layout-spacing}#{$suffix}; + #{$type}: var(--m-layout-spacing) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}: #{$t-layout-spacing}#{$suffix}; + #{$type}: var(--t-layout-spacing) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}: #{$layout-spacing}#{$suffix}; + #{$type}: var(--layout-spacing) #{$suffix}; } } @else if $direction==top { @media (max-width: $screen-sm-max) { - #{$type}-top: #{$m-layout-spacing-top}#{$suffix}; + #{$type}-top: var(--m-layout-spacing-top) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}-top: #{$t-layout-spacing-top}#{$suffix}; + #{$type}-top: var(--t-layout-spacing-top) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}-top: #{$layout-spacing-top}#{$suffix}; + #{$type}-top: var(--layout-spacing-top) #{$suffix}; } } @else if $direction==right { @media (max-width: $screen-sm-max) { - #{$type}-right: #{$m-layout-spacing-right}#{$suffix}; + #{$type}-right: var(--m-layout-spacing-right) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}-right: #{$t-layout-spacing-right}#{$suffix}; + #{$type}-right: var(--t-layout-spacing-right) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}-right: #{$layout-spacing-right}#{$suffix}; + #{$type}-right: var(--layout-spacing-right) #{$suffix}; } } @else if $direction==bottom { @media (max-width: $screen-sm-max) { - #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix}; + #{$type}-bottom: var(--m-layout-spacing-bottom) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix}; + #{$type}-bottom: var(--t-layout-spacing-bottom) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}-bottom: #{$layout-spacing-bottom}#{$suffix}; + #{$type}-bottom: var(--layout-spacing-bottom) #{$suffix}; } } @else if $direction==left { @media (max-width: $screen-sm-max) { - #{$type}-left: #{$m-layout-spacing-left}#{$suffix}; + #{$type}-left: var(--m-layout-spacing-left) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}-left: #{$t-layout-spacing-left}#{$suffix}; + #{$type}-left: var(--t-layout-spacing-left) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}-left: #{$layout-spacing-left}#{$suffix}; + #{$type}-left: var(--layout-spacing-left) #{$suffix}; } } } @else if $device==tablet { @if $direction==all { - #{$type}: #{$t-layout-spacing}#{$suffix}; + #{$type}: var(--t-layout-spacing) #{$suffix}; } @else if $direction==top { - #{$type}-top: #{$t-layout-spacing-top}#{$suffix}; + #{$type}-top: var(--t-layout-spacing-top) #{$suffix}; } @else if $direction==right { - #{$type}-right: #{$t-layout-spacing-right}#{$suffix}; + #{$type}-right: var(--t-layout-spacing-right) #{$suffix}; } @else if $direction==bottom { - #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix}; + #{$type}-bottom: var(--t-layout-spacing-bottom) #{$suffix}; } @else if $direction==left { - #{$type}-left: #{$t-layout-spacing-left}#{$suffix}; + #{$type}-left: var(--t-layout-spacing-left) #{$suffix}; } } @else if $device==mobile { @if $direction==all { - #{$type}: #{$m-layout-spacing}#{$suffix}; + #{$type}: var(--m-layout-spacing) #{$suffix}; } @else if $direction==top { - #{$type}-top: #{$m-layout-spacing-top}#{$suffix}; + #{$type}-top: var(--m-layout-spacing-top) #{$suffix}; } @else if $direction==right { - #{$type}-right: #{$m-layout-spacing-right}#{$suffix}; + #{$type}-right: var(--m-layout-spacing-right) #{$suffix}; } @else if $direction==bottom { - #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix}; + #{$type}-bottom: var(--m-layout-spacing-bottom) #{$suffix}; } @else if $direction==left { - #{$type}-left: #{$m-layout-spacing-left}#{$suffix}; + #{$type}-left: var(--m-layout-spacing-left) #{$suffix}; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_spacing.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_spacing.scss index 939de6452..7084788fd 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_spacing.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/mixins/_spacing.scss @@ -15,23 +15,23 @@ } @if $direction==all { @media (max-width: $screen-sm-max) { - #{$type}: #{$m-spacing-large}#{$suffix}; + #{$type}: var(--m-spacing-large) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}: #{$t-spacing-large}#{$suffix}; + #{$type}: var(--t-spacing-large) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}: #{$spacing-large}#{$suffix}; + #{$type}: var(--spacing-large) #{$suffix}; } } @else { @media (max-width: $screen-sm-max) { - #{$type}#{$dash}#{$direction}: #{$m-spacing-large}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--m-spacing-large) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}#{$dash}#{$direction}: #{$t-spacing-large}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--t-spacing-large) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}#{$dash}#{$direction}: #{$spacing-large}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--spacing-large) #{$suffix}; } } } @@ -47,23 +47,23 @@ } @if $direction==all { @media (max-width: $screen-sm-max) { - #{$type}: #{$m-spacing-medium}#{$suffix}; + #{$type}: var(--m-spacing-medium) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}: #{$t-spacing-medium}#{$suffix}; + #{$type}: var(--t-spacing-medium) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}: #{$spacing-medium}#{$suffix}; + #{$type}: var(--spacing-medium) #{$suffix}; } } @else { @media (max-width: $screen-sm-max) { - #{$type}#{$dash}#{$direction}: #{$m-spacing-medium}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--m-spacing-medium) #{$suffix}; } @media (min-width: $screen-md) { - #{$type}#{$dash}#{$direction}: #{$t-spacing-medium}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--t-spacing-medium) #{$suffix}; } @media (min-width: $screen-lg) { - #{$type}#{$dash}#{$direction}: #{$spacing-medium}#{$suffix}; + #{$type}#{$dash}#{$direction}: var(--spacing-medium) #{$suffix}; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_accordion.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_accordion.scss index c13ee7ad2..d881b966f 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_accordion.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_accordion.scss @@ -17,51 +17,51 @@ .widget-accordion-group { &.widget-accordion-brand-primary { @include get-accordion-group-styles( - $accordion-header-primary-bg, - $accordion-header-primary-bg-hover, - $accordion-header-primary-color, - $accordion-header-primary-color, - $accordion-primary-border-color + var(--accordion-header-primary-bg), + var(--accordion-header-primary-bg-hover), + var(--accordion-header-primary-color), + var(--accordion-header-primary-color), + var(--accordion-primary-border-color) ); } &.widget-accordion-brand-secondary { @include get-accordion-group-styles( - $accordion-header-secondary-bg, - $accordion-header-secondary-bg-hover, - $accordion-header-secondary-color, - $accordion-header-secondary-color, - $accordion-secondary-border-color + var(--accordion-header-secondary-bg), + var(--accordion-header-secondary-bg-hover), + var(--accordion-header-secondary-color), + var(--accordion-header-secondary-color), + var(--accordion-secondary-border-color) ); } &.widget-accordion-brand-success { @include get-accordion-group-styles( - $accordion-header-success-bg, - $accordion-header-success-bg-hover, - $accordion-header-success-color, - $accordion-header-success-color, - $accordion-success-border-color + var(--accordion-header-success-bg), + var(--accordion-header-success-bg-hover), + var(--accordion-header-success-color), + var(--accordion-header-success-color), + var(--accordion-success-border-color) ); } &.widget-accordion-brand-warning { @include get-accordion-group-styles( - $accordion-header-warning-bg, - $accordion-header-warning-bg-hover, - $accordion-header-warning-color, - $accordion-header-warning-color, - $accordion-warning-border-color + var(--accordion-header-warning-bg), + var(--accordion-header-warning-bg-hover), + var(--accordion-header-warning-color), + var(--accordion-header-warning-color), + var(--accordion-warning-border-color) ); } &.widget-accordion-brand-danger { @include get-accordion-group-styles( - $accordion-header-danger-bg, - $accordion-header-danger-bg-hover, - $accordion-header-danger-color, - $accordion-header-danger-color, - $accordion-danger-border-color + var(--accordion-header-danger-bg), + var(--accordion-header-danger-bg-hover), + var(--accordion-header-danger-color), + var(--accordion-header-danger-color), + var(--accordion-danger-border-color) ); } } @@ -69,23 +69,23 @@ &.widget-accordion-preview { .widget-accordion-group { &.widget-accordion-brand-primary { - @include get-accordion-preview-group-styles($accordion-header-primary-color); + @include get-accordion-preview-group-styles(var(--accordion-header-primary-color)); } &.widget-accordion-brand-secondary { - @include get-accordion-preview-group-styles($accordion-header-secondary-color); + @include get-accordion-preview-group-styles(var(--accordion-header-secondary-color)); } &.widget-accordion-brand-success { - @include get-accordion-preview-group-styles($accordion-header-success-color); + @include get-accordion-preview-group-styles(var(--accordion-header-success-color)); } &.widget-accordion-brand-warning { - @include get-accordion-preview-group-styles($accordion-header-warning-color); + @include get-accordion-preview-group-styles(var(--accordion-header-warning-color)); } &.widget-accordion-brand-danger { - @include get-accordion-preview-group-styles($accordion-header-danger-color); + @include get-accordion-preview-group-styles(var(--accordion-header-danger-color)); } } } @@ -119,19 +119,19 @@ > .widget-accordion-group:not(:is(.widget-accordion-brand-primary, .widget-accordion-brand-secondary, .widget-accordion-brand-success, .widget-accordion-brand-warning, .widget-accordion-brand-danger)):nth-child(2n + 1) { > .widget-accordion-group-header > .widget-accordion-group-header-button { - background-color: $accordion-bg-striped; + background-color: var(--accordion-bg-striped); &.widget-accordion-group-header-button-clickable { &:hover, &:focus, &:active { - background-color: $accordion-bg-striped-hover; + background-color: var(--accordion-bg-striped-hover); } } } > .widget-accordion-group-content { - background-color: $accordion-bg-striped; + background-color: var(--accordion-bg-striped); } } } @@ -139,11 +139,11 @@ &.widget-accordion-compact { > .widget-accordion-group { > .widget-accordion-group-header > .widget-accordion-group-header-button { - padding: $spacing-smaller $spacing-small; + padding: var(--spacing-smaller) var(--spacing-small); } > .widget-accordion-group-content { - padding: $spacing-smaller $spacing-small $spacing-medium $spacing-small; + padding: var(--spacing-smaller) var(--spacing-small) var(--spacing-medium) var(--spacing-small); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_background.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_background.scss index 9f7578453..70cdac807 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_background.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_background.scss @@ -13,176 +13,176 @@ ========================================================================== */ .background-main { - background-color: $bg-color !important; + background-color: var(--bg-color); } //Brand variations .background-primary { - background-color: $brand-primary !important; + background-color: var(--brand-primary); } .background-primary-darker { - background-color: $color-primary-darker !important; + background-color: var(--brand-primary-700); } .background-primary.background-dark, .background-primary-dark { - background-color: $color-primary-dark !important; + background-color: var(--brand-primary-600); } .background-primary.background-light, .background-primary-light { - background-color: $color-primary-light !important; + background-color: var(--brand-primary-200); } .background-primary-lighter { - background-color: $color-primary-lighter !important; + background-color: var(--brand-primary-100); } .background-secondary { - background-color: $bg-color-secondary !important; + background-color: var(--bg-color-secondary); } .background-secondary.background-light { - background-color: $bg-color-secondary !important; + background-color: var(--bg-color-secondary); } .background-secondary.background-dark { - background-color: $bg-color-secondary !important; + background-color: var(--bg-color-secondary); } .background-brand-gradient { - background-image: $brand-gradient !important; + background-image: var(--brand-gradient); } //Semantic variations .background-success { - background-color: $brand-success !important; + background-color: var(--brand-success); } .background-success-darker { - background-color: $color-success-darker !important; + background-color: var(--brand-success-700); } .background-success.background-dark, .background-success-dark { - background-color: $color-success-dark !important; + background-color: var(--brand-success-600); } .background-success.background-light, .background-success-light { - background-color: $color-success-light !important; + background-color: var(--brand-success-200); } .background-success-lighter { - background-color: $color-success-lighter !important; + background-color: var(--brand-success-100); } .background-warning { - background-color: $brand-warning !important; + background-color: var(--brand-warning); } .background-warning-darker { - background-color: $color-warning-darker !important; + background-color: var(--brand-warning-700); } .background-warning.background-dark, .background-warning-dark { - background-color: $color-warning-dark !important; + background-color: var(--brand-warning-600); } .background-warning.background-light, .background-warning-light { - background-color: $color-warning-light !important; + background-color: var(--brand-warning-200); } .background-warning-lighter { - background-color: $color-warning-lighter !important; + background-color: var(--brand-warning-100); } .background-danger { - background-color: $brand-danger !important; + background-color: var(--brand-danger); } .background-danger-darker { - background-color: $color-danger-darker !important; + background-color: var(--brand-danger-700); } .background-danger.background-dark, .background-danger-dark { - background-color: $color-danger-dark !important; + background-color: var(--brand-danger-600); } .background-danger.background-light, .background-danger-light { - background-color: $color-danger-light !important; + background-color: var(--brand-danger-200); } .background-danger-lighter { - background-color: $color-danger-lighter !important; + background-color: var(--brand-danger-100); } //Bootstrap variations .background-default { - background-color: $brand-default !important; + background-color: var(--brand-default); } .background-default-darker { - background-color: $color-default-darker !important; + background-color: var(--brand-default-700); } .background-default-dark { - background-color: $color-default-dark !important; + background-color: var(--brand-default-600); } .background-default-light { - background-color: $color-default-light !important; + background-color: var(--brand-default-200); } .background-default-lighter { - background-color: $color-default-lighter !important; + background-color: var(--brand-default-100); } .background-inverse { - background-color: $brand-inverse !important; + background-color: var(--brand-primay-600); } .background-inverse-darker { - background-color: $color-inverse-darker !important; + background-color: var(--brand-primay-900); } .background-inverse-dark { - background-color: $color-inverse-dark !important; + background-color: var(--brand-primary-800); } .background-inverse-light { - background-color: $color-inverse-light !important; + background-color: var(--brand-primary-400); } .background-inverse-lighter { - background-color: $color-inverse-lighter !important; + background-color: var(--brand--primary-300); } .background-info { - background-color: $brand-info !important; + background-color: var(--brand-primary-300); } .background-info-darker { - background-color: $color-info-darker !important; + background-color: var(--brand-primary-500); } .background-info-dark { - background-color: $color-info-dark !important; + background-color: var(--brand-primary-400); } .background-info-light { - background-color: $color-info-light !important; + background-color: var(--brand-primary-100); } .background-info-lighter { - background-color: $color-info-lighter !important; + background-color: var(--brand-primary-50); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_badge-button.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_badge-button.scss index f08728dd6..687619dd9 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_badge-button.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_badge-button.scss @@ -16,26 +16,26 @@ .btn-secondary, .btn-default { .badge { - color: $btn-default-bg; - background-color: $btn-primary-bg; + color: var(--btn-default-bg); + background-color: var(--btn-primary-bg); } } .btn-success { .badge { - color: $btn-success-bg; + color: var(--btn-success-bg); } } .btn-warning { .badge { - color: $btn-warning-bg; + color: var(--btn-warning-bg); } } .btn-danger { .badge { - color: $btn-danger-bg; + color: var(--btn-danger-bg); } } @@ -43,60 +43,60 @@ .btn-bordered.btn-primary { .badge { - background: $btn-primary-bg; - color: $btn-primary-color; + background: var(--btn-primary-bg); + color: var(--btn-primary-color); } &:hover, &:focus { .badge { - background-color: $btn-primary-color; - color: $btn-primary-bg; + background-color: var(--btn-primary-color); + color: var(--btn-primary-bg); } } } .btn-bordered.btn-success { .badge { - background: $btn-success-bg; - color: $btn-success-color; + background: var(--btn-success-bg); + color: var(--btn-success-color); } &:hover, &:focus { .badge { - background-color: $btn-success-color; - color: $btn-success-bg; + background-color: var(--btn-success-color); + color: var(--btn-success-bg); } } } .btn-bordered.btn-warning { .badge { - background: $btn-warning-bg; - color: $btn-warning-color; + background: var(--btn-warning-bg); + color: var(--btn-warning-color); } &:hover, &:focus { .badge { - background-color: $btn-warning-color; - color: $btn-warning-bg; + background-color: var(--btn-warning-color); + color: var(--btn-warning-bg); } } } .btn-bordered.btn-danger { .badge { - background: $btn-danger-bg; - color: $btn-danger-color; + background: var(--btn-danger-bg); + color: var(--btn-danger-color); } &:hover, &:focus { .badge { - background-color: $btn-danger-color; - color: $btn-danger-bg; + background-color: var(--btn-danger-color); + color: var(--btn-danger-bg); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_button.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_button.scss index f8a6f3103..41277a4ba 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_button.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_button.scss @@ -15,47 +15,47 @@ // Color variations .btn, .btn-default { - @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-bg-hover); + @include button-variant(var(--btn-default-color), var(--btn-default-bg), var(--btn-default-border-color), var(--btn-default-bg-hover), var(--btn-default-bg-active), var(--brand-default)); } .btn-primary { - @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover); + @include button-variant(var(--btn-primary-color), var(--btn-primary-bg), var(--btn-primary-border-color), var(--btn-primary-bg-hover), var(--btn-primary-bg-active), var(--brand-primary)); } .btn-inverse { - @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color, $btn-inverse-bg-hover); + @include button-variant(var(--btn-inverse-color), var(--btn-inverse-bg), var(--btn-inverse-border-color), var(--btn-inverse-bg-hover), var(--btn-inverse-bg-active), var(--brand-inverse)); } .btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color, $btn-success-bg-hover); + @include button-variant(var(--btn-success-color), var(--btn-success-bg), var(--btn-success-border-color), var(--btn-success-bg-hover), var(--btn-success-bg-active), var(--brand-success)); } .btn-info { - @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover); + @include button-variant(var(--btn-info-color), var(--btn-info-bg), var(--btn-info-border-color), var(--btn-info-bg-hover), var(--btn-info-bg-active), var(--brand-info)); } .btn-warning { - @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color, $btn-warning-bg-hover); + @include button-variant(var(--btn-warning-color), var(--btn-warning-bg), var(--btn-warning-border-color), var(--btn-warning-bg-hover), var(--btn-warning-bg-active), var(--brand-warning)); } .btn-danger { - @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover); + @include button-variant(var(--btn-danger-color), var(--btn-danger-bg), var(--btn-danger-border-color), var(--btn-danger-bg-hover), var(--btn-danger-bg-active), var(--brand-danger)); } // Button Sizes .btn-lg { - font-size: $font-size-large; + font-size: var(--font-size-large); img { - height: calc(#{$font-size-small} + 4px); + height: calc(var(--font-size-small) + 4px); } } .btn-sm { - font-size: $font-size-small; + font-size: var(--font-size-small); img { - height: calc(#{$font-size-small} + 4px); + height: calc(var(--font-size-small) + 4px); } } @@ -117,10 +117,19 @@ .btn-icon-only { @extend .btn-icon; padding: 0; - color: $btn-default-icon-color; + color: var(--btn-default-icon-color); border: none; } + .btn-style-icon { + @extend .btn-icon; + font-size: x-large; + border-radius: 100%; + border: none; + padding: 12px; + display: flex; + } + .btn-block { display: block; width: 100%; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_data-grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_data-grid.scss index f81e31659..38e30656b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_data-grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_data-grid.scss @@ -25,7 +25,7 @@ } &:nth-child(odd) td { - background-color: $grid-bg-striped; + background-color: var(--grid-bg-striped); } } } @@ -37,12 +37,12 @@ border: 1px solid; th { - border: 1px solid $grid-border-color; + border: 1px solid var(--grid-border-color); } tbody tr { td { - border: 1px solid $grid-border-color; + border: 1px solid var(--grid-border-color); } } } @@ -50,7 +50,7 @@ tfoot { > tr > th { border-width: 0; - background-color: $grid-footer-bg; + background-color: var(--grid-footer-bg); } > tr > td { @@ -81,11 +81,11 @@ table { tbody tr { &:hover td { - background-color: $grid-bg-hover !important; + background-color: var(--grid-bg-hover) !important; } &.selected:hover td { - background-color: $grid-bg-selected-hover !important; + background-color: var(--grid-bg-selected-hover) !important; } } } @@ -95,14 +95,14 @@ .datagrid-lg.mx-datagrid { table { th { - padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) - ($grid-padding-left * 2); + padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2) + calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2); } tbody tr { td { - padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) - ($grid-padding-left * 2); + padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2) + calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2); } } } @@ -111,14 +111,14 @@ .datagrid-sm.mx-datagrid { table { th { - padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) - ($grid-padding-left / 2); + padding: calc(var(--grid-padding-top) / 2) calc(var(--grid-padding-right) / 2) + calc(var(--grid-padding-bottom) / 2) calc(var(--grid-padding-left) / 2); } tbody tr { td { - padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) - ($grid-padding-left/ 2); + padding: calc(var(--grid-padding-top) / 2) calc(var(--grid-padding-right) / 2) + calc(var(--grid-padding-bottom) / 2) calc(var(--grid-padding-left) / 2); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_group-box.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_group-box.scss index 889d28c46..6667172c1 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_group-box.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_group-box.scss @@ -15,47 +15,47 @@ // Color variations .groupbox-secondary, .groupbox-default { - @include groupbox-variant($groupbox-default-color, $groupbox-default-bg); + @include groupbox-variant(var(--groupbox-default-color), var(--groupbox-default-bg)); } .groupbox-primary { - @include groupbox-variant($groupbox-primary-color, $groupbox-primary-bg); + @include groupbox-variant(var(--groupbox-primary-color), var(--groupbox-primary-bg)); } // Success appears as green .groupbox-success { - @include groupbox-variant($groupbox-success-color, $groupbox-success-bg); + @include groupbox-variant(var(--groupbox-success-color), var(--groupbox-success-bg)); } // Warning appears as orange .groupbox-warning { - @include groupbox-variant($groupbox-warning-color, $groupbox-warning-bg); + @include groupbox-variant(var(--groupbox-warning-color), var(--groupbox-warning-bg)); } // Danger and error appear as red .groupbox-danger { - @include groupbox-variant($groupbox-danger-color, $groupbox-danger-bg); + @include groupbox-variant(var(--groupbox-danger-color), var(--groupbox-danger-bg)); } .groupbox-transparent { > .mx-groupbox-header { - padding: $spacing-small * 1.5 0; - color: $gray-darker; + padding: calc(var(--spacing-small) * 1.5) 0; + color: var(--gray-900); border-style: none; background: transparent; - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); } .mx-groupbox-body { - padding: $spacing-small 0; + padding: var(--spacing-small) 0; border-radius: 0; border: 0; - border-bottom: 1px solid $groupbox-default-bg; + border-bottom: 1px solid var(--groupbox-default-bg); background-color: transparent; } .mx-groupbox-collapse-icon { - color: $brand-primary; + color: var(--brand-primary); } } @@ -64,11 +64,11 @@ > .mx-groupbox-header, > .mx-groupbox-body { border: 0; - background-color: $callout-primary-bg; + background-color: var(--callout-primary-bg); } > .mx-groupbox-header { - color: $callout-primary-color; + color: var(--callout-primary-color); } .mx-groupbox-header + .mx-groupbox-body { @@ -79,58 +79,58 @@ .groupbox-success.groupbox-callout { > .mx-groupbox-header, > .mx-groupbox-body { - background-color: $callout-success-bg; + background-color: var(--callout-success-bg); } > .mx-groupbox-header { - color: $callout-success-color; + color: var(--callout-success-color); } } .groupbox-warning.groupbox-callout { > .mx-groupbox-header, > .mx-groupbox-body { - background-color: $callout-warning-bg; + background-color: var(--callout-warning-bg); } > .mx-groupbox-header { - color: $callout-warning-color; + color: var(--callout-warning-color); } } .groupbox-danger.groupbox-callout { > .mx-groupbox-header, > .mx-groupbox-body { - background-color: $callout-danger-bg; + background-color: var(--callout-danger-bg); } > .mx-groupbox-header { - color: $callout-danger-color; + color: var(--callout-danger-color); } } //Bootstrap variations .groupbox-info { - @include groupbox-variant($groupbox-info-color, $groupbox-info-bg); + @include groupbox-variant(var(--groupbox-info-color), var(--groupbox-info-bg)); } .groupbox-inverse { - @include groupbox-variant($groupbox-inverse-color, $groupbox-inverse-bg); + @include groupbox-variant(var(--groupbox-inverse-color), var(--groupbox-inverse-bg)); } .groupbox-white { - @include groupbox-variant($groupbox-white-color, $groupbox-white-bg); + @include groupbox-variant(var(--groupbox-white-color), var(--groupbox-white-bg)); } .groupbox-info.groupbox-callout { > .mx-groupbox-header, > .mx-groupbox-body { - background-color: $callout-info-bg; + background-color: var(--callout-info-bg); } > .mx-groupbox-header { - color: $callout-info-color; + color: var(--callout-info-color); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_helper-classes.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_helper-classes.scss index 8d2503424..0936c18f9 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_helper-classes.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_helper-classes.scss @@ -166,27 +166,32 @@ justify-content: center #{$important-helpers-value}; } + .shadow-none { + box-shadow: none; + } + .shadow-small { - box-shadow: $shadow-small $shadow-color; + box-shadow: var(--shadow-small) var(--shadow-color); margin-bottom: 5px; border-width: 1px #{$important-helpers-value}; border-style: solid; - border-color: $shadow-color-border; + border-color: var(--shadow-color-border); } + .shadow-medium { - box-shadow: $shadow-medium $shadow-color; + box-shadow: var(--shadow-medium) var(--shadow-color); margin-bottom: 15px; border-width: 1px #{$important-helpers-value}; border-style: solid; - border-color: $shadow-color-border; + border-color: var(--shadow-color-border); } .shadow-large { - box-shadow: $shadow-large $shadow-color; + box-shadow: var(--shadow-large) var(--shadow-color); margin-bottom: 25px; border-width: 1px #{$important-helpers-value}; border-style: solid; - border-color: $shadow-color-border; + border-color: var(--shadow-color-border); } // Media @@ -204,12 +209,16 @@ display: none #{$important-helpers-value}; } } + + // force hide everything that should be hidden only on mid-size screen + // to be also hidden on tablet with big screen width. .profile-tablet .hide-tablet { display: none #{$important-helpers-value}; } @media (min-width: $screen-lg) { - .hide-desktop { + // due to force hidden, this is needed to only be hidden on desktop with profile-desktop. + .profile-desktop .hide-desktop { display: none #{$important-helpers-value}; } } @@ -342,6 +351,38 @@ } } + @media (min-width: $screen-xl) and (max-width: $screen-xxl) { + .hide-xl, + .hidden-xl, + .d-xl-none { + display: none #{$important-helpers-value}; + } + .d-xl-flex { + display: flex #{$important-helpers-value}; + } + .d-xl-inline-flex { + display: inline-flex #{$important-helpers-value}; + } + .d-xl-inline { + display: inline #{$important-helpers-value}; + } + .d-xl-inline-block { + display: inline-block #{$important-helpers-value}; + } + .d-xl-block { + display: block #{$important-helpers-value}; + } + .d-xl-table { + display: table #{$important-helpers-value}; + } + .d-xl-table-row { + display: table-row #{$important-helpers-value}; + } + .d-xl-table-cell { + display: table-cell #{$important-helpers-value}; + } + } + @media (min-width: $screen-xl) { .hide-xl, .hidden-xl, @@ -418,26 +459,26 @@ //Border helpers .border { - border: 1px solid $border-color-default #{$important-helpers-value}; + border: var(--border-default) #{$important-helpers-value}; } .border-top { - border-top: 1px solid $border-color-default #{$important-helpers-value}; + border-top: var(--border-default) #{$important-helpers-value}; } .border-bottom { - border-bottom: 1px solid $border-color-default #{$important-helpers-value}; + border-bottom: var(--border-default) #{$important-helpers-value}; } .border-left { - border-left: 1px solid $border-color-default #{$important-helpers-value}; + border-left: var(--border-default) #{$important-helpers-value}; } .border-right { - border-right: 1px solid $border-color-default #{$important-helpers-value}; + border-right: var(--border-default) #{$important-helpers-value}; } .border-rounded { - border-radius: $border-radius-default #{$important-helpers-value}; + border-radius: var(--border-radius-default) #{$important-helpers-value}; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_image.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_image.scss index 701ec99e6..125afed55 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_image.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_image.scss @@ -24,10 +24,10 @@ height: auto; padding: 4px; transition: all 0.2s ease-in-out; - border: 1px solid $brand-default; + border: var(--border-default); border-radius: 4px; - background-color: #ffffff; - line-height: $line-height-base; + background-color: var(--bg-color-secondary); + line-height: var(--line-height-base); } img.img-circle, diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_label.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_label.scss index 02663f058..fdbd6fd27 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_label.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_label.scss @@ -16,37 +16,37 @@ // Color variations .label-secondary, .label-default { - color: $label-default-color; - background-color: $label-default-bg; + color: var(--label-default-color); + background-color: var(--label-default-bg); } .label-primary { - color: $label-primary-color; - background-color: $label-primary-bg; + color: var(--label-primary-color); + background-color: var(--label-primary-bg); } .label-success { - color: $label-success-color; - background-color: $label-success-bg; + color: var(--label-success-color); + background-color: var(--label-success-bg); } .label-inverse { - color: $label-inverse-color; - background-color: $label-inverse-bg; + color: var(--label-inverse-color); + background-color: var(--label-inverse-bg); } .label-info { - color: $label-info-color; - background-color: $label-info-bg; + color: var(--label-info-color); + background-color: var(--label-info-bg); } .label-warning { - color: $label-warning-color; - background-color: $label-warning-bg; + color: var(--label-warning-color); + background-color: var(--label-warning-bg); } .label-danger { - color: $label-danger-color; - background-color: $label-danger-bg; + color: var(--label-danger-color); + background-color: var(--label-danger-bg); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_list-view.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_list-view.scss index 1fc5d5ff3..89c18e833 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_list-view.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_list-view.scss @@ -16,14 +16,14 @@ // List items lined .listview-lined.mx-listview { & > ul > li { - border-top: 1px solid $grid-border-color; + border-top: 1px solid var(--grid-border-color); &:first-child { - border-top: 1px solid $grid-border-color; + border-top: 1px solid var(--grid-border-color); } &:last-child { - border-bottom: 1px solid $grid-border-color; + border-bottom: 1px solid var(--grid-border-color); } } } @@ -31,11 +31,11 @@ //List items Bordered .listview-bordered.mx-listview { & > ul > li { - border: 1px solid $grid-border-color; + border: 1px solid var(--grid-border-color); border-top: 0; &:first-child { - border-top: 1px solid $grid-border-color; + border-top: 1px solid var(--grid-border-color); } &:last-child { @@ -46,16 +46,16 @@ // List items striped .listview-striped.mx-listview { & > ul > li:nth-child(2n + 1) { - background-color: $grid-bg-striped; + background-color: var(--grid-bg-striped); } } // Items as seperated blocks .listview-seperated.mx-listview { & > ul > li { - margin-bottom: $spacing-medium; - border: 1px solid $grid-border-color; - border-radius: $border-radius-default; + margin-bottom: var(--spacing-medium); + border: 1px solid var(--grid-border-color); + border-radius: var(--border-radius-default); } } @@ -93,14 +93,14 @@ &:hover, &:focus, &:active { - background-color: $grid-bg-hover; + background-color: var(--grid-bg-hover); } &.selected { &:hover, &:focus, &:active { - background-color: $grid-bg-selected-hover; + background-color: var(--grid-bg-selected-hover); } } } @@ -110,13 +110,13 @@ .listview-sm.mx-listview { & > ul > li { - padding: $spacing-small; + padding: var(--spacing-small); } } .listview-lg.mx-listview { & > ul > li { - padding: $spacing-large; + padding: var(--spacing-large); } } @@ -126,8 +126,8 @@ & > ul { display: flex; // normal a table flex-wrap: wrap; - margin-right: -1 * $gutter-size; - margin-left: -1 * $gutter-size; + margin-right: calc(-1 * var(--gutter-size)); + margin-left: calc(-1 * var(--gutter-size)); &::before, &::after { @@ -141,8 +141,8 @@ // bootstrap col position: relative; min-height: 1px; - padding-right: $gutter-size; - padding-left: $gutter-size; + padding-right: var(--gutter-size); + padding-left: var(--gutter-size); border: 0; @media (max-width: $screen-md-max) { width: 100% !important; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-bar.scss index 533bc872e..c241a1b79 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-bar.scss @@ -15,47 +15,52 @@ // When used in topbar .region-topbar { .mx-navbar { - background-color: $navtopbar-bg; + background: var(--navtopbar-bg); min-height: auto; ul.nav { + display: flex; + flex-flow: wrap; + align-items: center; + justify-content: center; + > .mx-navbar-item { - margin-left: $spacing-small; + margin-left: var(--spacing-small); } /* Navigation item */ & > li.mx-navbar-item > a { - color: $navtopbar-color; - font-size: $navtopbar-font-size; + color: var(--navtopbar-color); + font-size: var(--navtopbar-font-size); line-height: 1.2; /* Dropdown arrow */ .caret { - border-top-color: $navtopbar-color; - border-bottom-color: $navtopbar-color; + border-top-color: var(--navtopbar-color); + border-bottom-color: var(--navtopbar-color); } &:hover, &:focus, &.active { - color: $navtopbar-color-hover; - background-color: $navtopbar-bg-hover; + color: var(--navtopbar-color-hover); + background: var(--navtopbar-bg-hover); .caret { - border-top-color: $navtopbar-color-active; - border-bottom-color: $navtopbar-color-active; + border-top-color: var(--navtopbar-color-active); + border-bottom-color: var(--navtopbar-color-active); } } &.active { - color: $navtopbar-color-active; - background-color: $navtopbar-bg-active; + color: var(--navtopbar-color-active); + background: var(--navtopbar-bg-active); } /* Dropdown */ .mx-navbar-submenu::before { - border-color: transparent transparent $navtopbar-border-color transparent; + border-color: transparent transparent var(--navtopbar-border-color) transparent; } // Image .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $navtopbar-glyph-size; + font-size: var(--navtopbar-glyph-size); } } @@ -66,41 +71,39 @@ & > .mx-navbar-item.open > a, & > .mx-navbar-item.open > a:hover, & > .mx-navbar-item.open > a:focus { - color: $navtopbar-color-hover; - background-color: $navtopbar-bg-hover; + color: var(--navtopbar-color-hover); + background: var(--navtopbar-bg-active); .caret { - border-top-color: $navtopbar-color-hover; - border-bottom-color: $navtopbar-color-hover; + border-top-color: var(--navtopbar-color-hover); + border-bottom-color: var(--navtopbar-color-hover); } } & > .mx-navbar-item.open .dropdown-menu { - border-radius: $border-radius-default; - background-color: $navtopbar-sub-bg; - padding: $spacing-small $spacing-small 0; + border-radius: var(--navtopbar-border-radius); + background: var(--navtopbar-sub-bg); + padding: 0; margin: 0; border: 0; box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354); & > li.mx-navbar-subitem a { - border-radius: $border-radius-default; - color: $navtopbar-color; - font-size: $navtopbar-sub-font-size; + padding: var(--spacing-medium); + color: var(--navtopbar-color); + border-radius: var(--navtopbar-border-radius); line-height: 1.2; - margin: 0 0 $spacing-small; - padding: $spacing-small; &:hover, &:focus { - color: $navtopbar-color-hover; - background-color: $navtopbar-sub-bg-hover; + color: var(--navtopbar-color-hover); + background: var(--navtopbar-sub-bg-hover); } } } & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { - color: $navtopbar-sub-color-active; - background-color: $navtopbar-sub-bg-active; + color: var(--navtopbar-sub-color-active); + background: var(--navtopbar-sub-bg-active); .caret { - border-top-color: $navtopbar-sub-color-active; - border-bottom-color: $navtopbar-sub-color-active; + border-top-color: var(--navtopbar-sub-color-active); + border-bottom-color: var(--navtopbar-sub-color-active); } } } @@ -108,18 +111,18 @@ ul.nav > li.mx-navbar-item > a { } .mx-navbar-item.open .dropdown-menu { - background-color: $navtopbar-sub-bg; + background: var(--navtopbar-sub-bg); & > li.mx-navbar-subitem > a { - color: $navtopbar-sub-color; - font-size: $navtopbar-sub-font-size; + color: var(--navtopbar-sub-color); + font-size: var(--navtopbar-sub-font-size); &:hover, &:focus { - color: $navtopbar-sub-color-hover; - background-color: $navtopbar-sub-bg-hover; + color: var(--navtopbar-sub-color-hover); + background: var(--navtopbar-sub-bg-hover); } &.active { - color: $navtopbar-sub-color-active; - background-color: $navtopbar-sub-bg-active; + color: var(--navtopbar-sub-color-active); + background: var(--navtopbar-sub-bg-active); } } } @@ -130,43 +133,43 @@ // When used in sidebar .region-sidebar { .mx-navbar { - background-color: $navsidebar-bg; + background: var(--navsidebar-bg); ul.nav { /* Navigation item */ & > li.mx-navbar-item > a { - color: $navsidebar-color; - font-size: $navsidebar-font-size; + color: var(--navsidebar-color); + font-size: var(--navsidebar-font-size); /* Dropdown arrow */ .caret { - border-top-color: $navsidebar-color; - border-bottom-color: $navsidebar-color; + border-top-color: var(--navsidebar-color); + border-bottom-color: var(--navsidebar-color); } &:hover, &:focus, &.active { - color: $navsidebar-color-hover; - background-color: $navsidebar-bg-hover; + color: var(--navsidebar-color-hover); + background: var(--navsidebar-bg-hover); .caret { - border-top-color: $navsidebar-color-active; - border-bottom-color: $navsidebar-color-active; + border-top-color: var(--navsidebar-color-active); + border-bottom-color: var(--navsidebar-color-active); } } &.active { - color: $navsidebar-color-active; - background-color: $navsidebar-bg-active; + color: var(--navsidebar-color-active); + background: var(--navsidebar-bg-active); } /* Dropdown */ .mx-navbar-submenu::before { - border-color: transparent transparent $navsidebar-border-color transparent; + border-color: transparent transparent var(--navsidebar-border-color) transparent; } // Image .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $navsidebar-glyph-size; + font-size: var(--navsidebar-glyph-size); } } @@ -177,19 +180,19 @@ & > .mx-navbar-item.open > a, & > .mx-navbar-item.open > a:hover, & > .mx-navbar-item.open > a:focus { - color: $navsidebar-color-hover; - background-color: $navsidebar-bg-hover; + color: var(--navsidebar-color-hover); + background: var(--navsidebar-bg-hover); .caret { - border-top-color: $navsidebar-color-hover; - border-bottom-color: $navsidebar-color-hover; + border-top-color: var(--navsidebar-color-hover); + border-bottom-color: var(--navsidebar-color-hover); } } & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { - color: $navsidebar-sub-color-active; - background-color: $navsidebar-sub-bg-active; + color: var(--navsidebar-sub-color-active); + background: var(--navsidebar-sub-bg-active); .caret { - border-top-color: $navsidebar-sub-color-active; - border-bottom-color: $navsidebar-sub-color-active; + border-top-color: var(--navsidebar-sub-color-active); + border-bottom-color: var(--navsidebar-sub-color-active); } } } @@ -197,18 +200,18 @@ ul.nav > li.mx-navbar-item > a { } .mx-navbar-item.open .dropdown-menu { - background-color: $navtopbar-sub-bg; + background: var(--navtopbar-sub-bg); & > li.mx-navbar-subitem > a { - color: $navsidebar-sub-color; - font-size: $navsidebar-sub-font-size; + color: var(--navsidebar-sub-color); + font-size: var(--navsidebar-sub-font-size); &:hover, &:focus { - color: $navsidebar-sub-color-hover; - background-color: $navsidebar-sub-bg-hover; + color: var(--navsidebar-sub-color-hover); + background: var(--navsidebar-sub-bg-hover); } &.active { - color: $navsidebar-sub-color-active; - background-color: $navsidebar-sub-bg-active; + color: var(--navsidebar-sub-color-active); + background: var(--navsidebar-sub-bg-active); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-tree.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-tree.scss index 9c01ff256..a8dba2d58 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-tree.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_navigation-tree.scss @@ -15,39 +15,41 @@ // When used in topbar .region-topbar { .mx-navigationtree { - background-color: $navtopbar-bg; + background: var(--navtopbar-bg); .navbar-inner > ul { & > li { & > a { - color: $navtopbar-color; - border-color: $navtopbar-border-color; - background-color: $navtopbar-bg; - font-size: $navtopbar-font-size; + color: var(--navtopbar-color); + border-color: var(--navtopbar-border-color); + background: var(--navtopbar-bg); + font-size: var(--navtopbar-font-size); .caret { - border-top-color: $navtopbar-color; - border-bottom-color: $navtopbar-color; + border-top-color: var(--navtopbar-color); + border-bottom-color: var(--navtopbar-color); } .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $navtopbar-glyph-size; + font-size: var(--navtopbar-glyph-size); } - } - a:hover, - a:focus, - a.active { - color: $navtopbar-color-hover; - background-color: $navtopbar-bg-hover; - .caret { - border-top-color: $navtopbar-color-active; - border-bottom-color: $navtopbar-color-active; + + li:focus-within > &, + li:hover > &, + &:hover { + color: var(--navtopbar-color-hover); + background: var(--navtopbar-bg-hover); + .caret { + border-top-color: var(--navtopbar-color-hover); + border-bottom-color: var(--navtopbar-color-hover); + } + } + a:active, + a.active { + color: var(--navtopbar-color-active); + border-left-color: var(--navtopbar-color-active); + background: var(--navtopbar-bg-active); } - } - a.active { - color: $navtopbar-color-active; - border-left-color: $navtopbar-color-active; - background-color: $navtopbar-bg-active; } } } @@ -55,21 +57,22 @@ /* Sub navigation item specific */ li.mx-navigationtree-has-items { & > ul { - background-color: $navtopbar-sub-bg; + background: var(--navtopbar-sub-bg); li { a { - color: $navtopbar-sub-color; - background-color: $navtopbar-sub-bg; - font-size: $navtopbar-sub-font-size; + color: var(--navtopbar-sub-color); + background: var(--navtopbar-sub-bg); + font-size: var(--navtopbar-sub-font-size); &:hover, - &:focus, - &.active { - color: $navtopbar-sub-color-hover; - background-color: $navtopbar-sub-bg-hover; + li:hover > &, + li:focus-within > & { + color: var(--navtopbar-sub-color-hover); + background: var(--navtopbar-sub-bg-hover); } + &:active, &.active { - color: $navtopbar-sub-color-active; - background-color: $navtopbar-sub-bg-active; + color: var(--navtopbar-sub-color-active); + background: var(--navtopbar-sub-bg-active); } } } @@ -81,39 +84,39 @@ // When used in sidebar .region-sidebar { .mx-navigationtree { - background-color: $navsidebar-bg; .navbar-inner > ul { - & > li { - & > a { - color: $navsidebar-color; - border-color: $navsidebar-border-color; - background-color: $navsidebar-bg; - font-size: $navsidebar-font-size; - .caret { - border-top-color: $navsidebar-color; - border-bottom-color: $navsidebar-color; - } + background: transparent; + & > li > a { + color: var(--navsidebar-color); + border-color: var(--navsidebar-border-color); + font-size: var(--navsidebar-font-size); + .caret { + border-top-color: var(--navsidebar-color); + border-bottom-color: var(--navsidebar-color); + margin-left: var(--spacing-small); + transition: transform 0.2s ease-in-out; + } - .glyphicon, - .mx-icon-lined, - .mx-icon-filled { - font-size: $navsidebar-glyph-size; - } + .glyphicon, + .mx-icon-lined, + .mx-icon-filled { + font-size: var(--navsidebar-glyph-size); } a:hover, - a:focus, - a.active { - color: $navsidebar-color-hover; - background-color: $navsidebar-bg-hover; + li:hover > &, + li:focus-within > & { + color: var(--navsidebar-color-hover); + background: var(--navsidebar-bg-hover); .caret { - border-top-color: $navsidebar-color-active; - border-bottom-color: $navsidebar-color-active; + border-top-color: var(--navsidebar-color-hover); + border-bottom-color: var(--navsidebar-color-hover); } } - a.active { - color: $navsidebar-color-active; - border-left-color: $navsidebar-color-active; - background-color: $navsidebar-bg-active; + &:active, + &.active { + color: var(--navsidebar-color-active); + border-left-color: var(--navsidebar-color-active); + background: var(--navsidebar-bg-active); } } } @@ -121,25 +124,44 @@ /* Sub navigation item specific */ li.mx-navigationtree-has-items { & > ul { - background-color: $navsidebar-sub-bg; - li { - a { - color: $navsidebar-sub-color; - background-color: $navsidebar-sub-bg; - font-size: $navsidebar-sub-font-size; - &:hover, - &:focus, - &.active { - color: $navsidebar-sub-color-hover; - background-color: $navsidebar-sub-bg-hover; - } - &.active { - color: $navsidebar-sub-color-active; - background-color: $navsidebar-sub-bg-active; - } + position: relative; + border-radius: var(--navsidebar-border-radius); + li > a { + border-radius: var(--navsidebar-border-radius); + color: var(--navsidebar-sub-color); + font-size: var(--navsidebar-sub-font-size); + &:hover, + li:hover > &, + li:focus-within > & { + color: var(--navsidebar-sub-color-hover); + background: var(--navsidebar-sub-bg-hover); + } + &:active, + &.active { + color: var(--navsidebar-sub-color-active); + background: var(--navsidebar-sub-bg-active); } } } + &:not(.mx-navigationtree-collapsed) { + .caret { + transform: rotate(180deg); + transition: transform 0.2s ease-in-out; + } + } + } + } + } + .mx-scrollcontainer:not(.mx-scrollcontainer-open) { + .region-sidebar { + .mx-navigationtree { + .navbar-inner > ul > li > a { + border-radius: 0; + } + li.mx-navigationtree-has-items > ul { + // sub-menu when sidebar is collapsed needs a non-transparent bg + background: var(--navsidebar-sub-bg-collapsed); + } } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-bar.scss index b461b41b8..9daa402a4 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-bar.scss @@ -17,8 +17,8 @@ width: 100%; .progress { - border-radius: $border-radius-default; - background-color: $bg-color; + border-radius: var(--border-radius-default); + background-color: var(--bg-color); } } @@ -26,7 +26,7 @@ .progress-bar-medium .progress-bar { height: 16px; line-height: 16px; - font-size: $font-size-small; + font-size: var(--font-size-small); } .progress-bar-small .progress, @@ -45,7 +45,7 @@ .progress-bar-large .progress-bar { height: 24px; line-height: 24px; - font-size: $font-size-default; + font-size: var(--font-size-default); } .widget-progress-bar-clickable:hover { @@ -53,27 +53,27 @@ } .widget-progress-bar.progress-bar-primary .progress-bar { - background-color: $brand-primary; + background-color: var(--brand-primary); } .widget-progress-bar.progress-bar-success .progress-bar { - background-color: $brand-success; + background-color: var(--brand-success); } .widget-progress-bar.progress-bar-warning .progress-bar { - background-color: $brand-warning; + background-color: var(--brand-warning); } .widget-progress-bar.progress-bar-danger .progress-bar { - background-color: $brand-danger; + background-color: var(--brand-danger); } .widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar { - color: $color-danger-darker; + color: var(--brand-danger-700); } .widget-progress-bar-text-contrast .progress-bar { - color: $font-color-default; + color: var(--font-color-default); } .widget-progress-bar-negative { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-circle.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-circle.scss index 860bad2a5..a4b6f8b85 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-circle.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_progress-circle.scss @@ -16,41 +16,41 @@ //== Progress circle and label colors .widget-progress-circle-primary { .widget-progress-circle-path { - stroke: $brand-primary; + stroke: var(--brand-primary); } .progressbar-text { - color: $brand-primary !important; + color: var(--brand-primary) !important; } } .widget-progress-circle-success { .widget-progress-circle-path { - stroke: $brand-success; + stroke: var(--brand-success); } .progressbar-text { - color: $brand-success !important; + color: var(--brand-success) !important; } } .widget-progress-circle-warning { .widget-progress-circle-path { - stroke: $brand-warning; + stroke: var(--brand-warning); } .progressbar-text { - color: $brand-warning !important; + color: var(--brand-warning) !important; } } .widget-progress-circle-danger { .widget-progress-circle-path { - stroke: $brand-danger; + stroke: var(--brand-danger); } .progressbar-text { - color: $brand-danger !important; + color: var(--brand-danger) !important; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_range-slider.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_range-slider.scss index 63bd758ce..1ce636c01 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_range-slider.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_range-slider.scss @@ -16,18 +16,18 @@ ========================================================================== */ .widget-range-slider-primary { - @include slider-color-variant($brand-primary); + @include slider-color-variant(var(--brand-primary)); } .widget-range-slider-success { - @include slider-color-variant($brand-success); + @include slider-color-variant(var(--brand-success)); } .widget-range-slider-warning { - @include slider-color-variant($brand-warning); + @include slider-color-variant(var(--brand-warning)); } .widget-range-slider-danger { - @include slider-color-variant($brand-danger); + @include slider-color-variant(var(--brand-danger)); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_rating.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_rating.scss index f15d2d8ef..27207cb7a 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_rating.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_rating.scss @@ -14,27 +14,27 @@ ========================================================================== */ .widget-star-rating-full-primary { - color: $brand-primary; + color: var(--brand-primary); } .widget-star-rating-full-success { - color: $brand-success; + color: var(--brand-success); } .widget-star-rating-full-info { - color: $brand-info; + color: var(--brand-primary-300); } .widget-star-rating-full-warning { - color: $brand-warning; + color: var(--brand-warning); } .widget-star-rating-full-danger { - color: $brand-danger; + color: var(--brand-danger); } .widget-star-rating-full-inverse { - color: $brand-inverse; + color: var(--brand-primary-600); } .widget-rating { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss index ab46cbfd4..20f66cd9a 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss @@ -14,25 +14,29 @@ ========================================================================== */ // Center text and icons .bottom-nav-text-icons.mx-menubar { + position: fixed; + bottom: 0; + left: 0; + width: 100%; ul.mx-menubar-list { li.mx-menubar-item { flex: 1; a { flex-direction: column; - padding: $spacing-small $spacing-small $spacing-small/2; + padding: var(--spacing-small) var(--spacing-small) calc(var(--spacing-small) / 2); line-height: normal; - font-size: $font-size-small; + font-size: var(--font-size-small); .glyphicon, .mx-icon-lined, .mx-icon-filled { display: block; - margin: 0 0 $spacing-small/2 0; - font-size: $font-size-large; + margin: 0 0 calc(var(--spacing-small) / 2) 0; + font-size: var(--font-size-large); } img { display: block; - height: $font-size-large; - margin: 0 0 $spacing-small/2 0; + height: var(--font-size-large); + margin: 0 0 calc(var(--spacing-small) / 2) 0; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss index ded601648..f3ee28794 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss @@ -6,12 +6,12 @@ .rc-slider-handle:focus { border-color: $color; - box-shadow: 0 0 0 5px lighten($color, 25%); + box-shadow: 0 0 0 5px color-mix(in srgb, $color, white 25%); outline: none; } .rc-slider-handle-click-focused:focus { - border-color: lighten($color, 25%); + border-color: color-mix(in srgb, $color, white 25%); box-shadow: unset; } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider.scss index cc259d2aa..721a4898c 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_slider.scss @@ -15,18 +15,18 @@ ========================================================================== */ .widget-slider-primary { - @include slider-color-variant($brand-primary); + @include slider-color-variant(var(--brand-primary)); } .widget-slider-success { - @include slider-color-variant($brand-success); + @include slider-color-variant(var(--brand-success)); } .widget-slider-warning { - @include slider-color-variant($brand-warning); + @include slider-color-variant(var(--brand-warning)); } .widget-slider-danger { - @include slider-color-variant($brand-danger); + @include slider-color-variant(var(--brand-danger)); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_tab-container.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_tab-container.scss index e4719d883..39cb52063 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_tab-container.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_tab-container.scss @@ -18,18 +18,18 @@ border: 0; & > li { - margin-bottom: $spacing-small; + margin-bottom: var(--spacing-small); } & > li > a { - margin-right: $spacing-small; - color: $tabs-color; - border-radius: $border-radius-default; - background-color: $tabs-bg-pills; + margin-right: var(--spacing-small); + color: var(--tabs-color); + border-radius: var(--border-radius-default); + background-color: var(--tabs-bg-pills); &:hover, &:focus { - background-color: $tabs-bg-hover; + background-color: var(--tabs-bg-hover); } } @@ -37,8 +37,8 @@ & > li.active > a:hover, & > li.active > a:focus { color: #ffffff; - border-color: $tabs-bg-active; - background-color: $tabs-bg-active; + border-color: var(--tabs-bg-active); + background-color: var(--tabs-bg-active); } } } @@ -49,18 +49,18 @@ border-width: 1px; li { - margin-right: $spacing-large; + margin-right: var(--spacing-large); & > a { - padding: $spacing-medium 0 ($spacing-medium - $tabs-lined-border-width) 0; // border is 3px - color: $tabs-color; + padding: var(--spacing-medium) 0 calc(var(--spacing-medium) - var(--tabs-lined-border-width)) 0; // border is 3px + color: var(--tabs-color); border: 0; - border-bottom: $tabs-lined-border-width solid transparent; + border-bottom: var(--tabs-lined-border-width) solid transparent; border-radius: 0; &:hover, &:focus { - color: $tabs-color; + color: var(--tabs-color); border: 0; border-color: transparent; background: transparent; @@ -70,9 +70,9 @@ &.active > a, &.active > a:hover, &.active > a:focus { - color: $tabs-lined-color-active; + color: var(--tabs-lined-color-active); border: 0; - border-bottom: $tabs-lined-border-width solid $tabs-lined-border-color; + border-bottom: var(--tabs-lined-border-width) solid var(--tabs-lined-border-color); background-color: transparent; } } @@ -109,10 +109,10 @@ } & > .mx-tabcontainer-content { - padding: $spacing-small; + padding: var(--spacing-small); border-width: 0 1px 1px 1px; border-style: solid; - border-color: $tabs-border-color; + border-color: var(--tabs-border-color); background-color: transparent; } } @@ -127,12 +127,12 @@ &::before { position: absolute; - top: $spacing-medium; + top: var(--spacing-medium); display: block; width: 100%; height: 1px; content: ""; - background-color: $tabs-border-color; + background-color: var(--tabs-border-color); } & > li { @@ -142,16 +142,16 @@ text-align: center; & > a { - width: calc((#{$spacing-medium} * 2) + 1px); - height: calc((#{$spacing-medium} * 2) + 1px); + width: calc((var(--spacing-medium) * 2) + 1px); + height: calc((var(--spacing-medium) * 2) + 1px); margin: auto; padding: 0; text-align: center; - color: $brand-primary; - border: 1px solid $tabs-border-color; + color: var(--brand-primary); + border: 1px solid var(--tabs-border-color); border-radius: 100%; - background-color: $bg-color; - font-size: $font-size-large; + background-color: var(--bg-color); + font-size: var(--font-size-large); font-weight: bold; display: flex; justify-content: center; @@ -163,8 +163,8 @@ & > a:hover, & > a:focus { color: #ffffff; - border-color: $tabs-bg-active; - background-color: $tabs-bg-active; + border-color: var(--tabs-bg-active); + background-color: var(--tabs-bg-active); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_table.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_table.scss index ce575a450..fba7db692 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_table.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_table.scss @@ -22,7 +22,7 @@ > td { border-width: 1px 0; border-style: solid; - border-color: $grid-border-color; + border-color: var(--grid-border-color); } } } @@ -39,7 +39,7 @@ > td { border-width: 1px; border-style: solid; - border-color: $grid-border-color; + border-color: var(--grid-border-color); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_template-grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_template-grid.scss index 71db23ecb..b61012ec8 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_template-grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_template-grid.scss @@ -24,13 +24,13 @@ .mx-grid-content { border-top-width: 2px; border-top-style: solid; - border-top-color: $grid-border-color; + border-top-color: var(--grid-border-color); } .mx-templategrid-item { - border-top: 1px solid $grid-border-color; + border-top: 1px solid var(--grid-border-color); border-right: none; - border-bottom: 1px solid $grid-border-color; + border-bottom: 1px solid var(--grid-border-color); border-left: none; } } @@ -76,14 +76,14 @@ .templategrid-hover.mx-templategrid { .mx-templategrid-item { &:hover { - background-color: $grid-bg-hover !important; + background-color: var(--grid-bg-hover) !important; } &.selected { - background-color: $grid-bg-selected !important; + background-color: var(--grid-bg-selected) !important; &:hover { - background-color: $grid-bg-selected-hover !important; + background-color: var(--grid-bg-selected-hover) !important; } } } @@ -92,15 +92,15 @@ // Templategrid Row Sizes .templategrid-lg.mx-templategrid { .mx-templategrid-item { - padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) - ($grid-padding-left * 2); + padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2) + calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2); } } .templategrid-sm.mx-templategrid { .mx-templategrid-item { - padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) - ($grid-padding-left / 2); + padding: (var(--grid-padding-top) / 2) (var(--grid-padding-right) / 2) (var(--grid-padding-bottom) / 2) + (var(--grid-padding-left) / 2); } } @@ -113,8 +113,8 @@ .mx-templategrid-row { display: block; - margin-right: -1 * $gutter-size; - margin-left: -1 * $gutter-size; + margin-right: calc(-1 * var(--gutter-size)); + margin-left: calc(-1 * var(--gutter-size)); &::before, &::after { @@ -131,8 +131,8 @@ display: block; float: left; min-height: 1px; - padding-right: $gutter-size; - padding-left: $gutter-size; + padding-right: var(--gutter-size); + padding-left: var(--gutter-size); border: 0; @media (max-width: 992px) { width: 100% !important; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_typography.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_typography.scss index f8c9f20c6..f108c9d4f 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_typography.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_typography.scss @@ -14,36 +14,36 @@ ========================================================================== */ // Text size .text-small { - font-size: $font-size-small !important; + font-size: var(--font-size-small); } .text-large { - font-size: $font-size-large !important; + font-size: var(--font-size-large); } // Text Weights .text-light, .text-light > *, .text-light label { - font-weight: $font-weight-light !important; + font-weight: var(--font-weight-light); } .text-normal, .text-normal > *, .text-normal label { - font-weight: $font-weight-normal !important; + font-weight: var(--font-weight-normal); } .text-semibold, .text-semibold > *, .text-semibold label { - font-weight: $font-weight-semibold !important; + font-weight: var(--font-weight-semibold); } .text-bold, .text-bold > *, .text-bold label { - font-weight: $font-weight-bold !important; + font-weight: var(--font-weight-bold); } // Color variations @@ -51,87 +51,87 @@ .text-secondary:hover, .text-default, .text-default:hover { - color: $font-color-default !important; + color: var(--font-color-default); } .text-primary, .text-primary:hover { - color: $brand-primary !important; + color: var(--brand-primary); } .text-info, .text-info:hover { - color: $brand-info !important; + color: var(--brand-primary-300); } .text-success, .text-success:hover { - color: $brand-success !important; + color: var(--brand-success); } .text-warning, .text-warning:hover { - color: $brand-warning !important; + color: var(--brand-warning); } .text-danger, .text-danger:hover { - color: $brand-danger !important; + color: var(--brand-danger); } .text-header { - color: $font-color-header !important; + color: var(--font-color-header); } .text-detail { - color: $font-color-detail !important; + color: var(--font-color-detail); } .text-white { - color: #ffffff; + color: var(--font-color-contrast); } // Alignment options .text-left { - text-align: left !important; + text-align: left; } .text-center { - text-align: center !important; + text-align: center; } .text-right { - text-align: right !important; + text-align: right; } .text-justify { - text-align: justify !important; + text-align: justify; } // Transform options .text-lowercase { - text-transform: lowercase !important; + text-transform: lowercase; } .text-uppercase { - text-transform: uppercase !important; + text-transform: uppercase; } .text-capitalize { - text-transform: capitalize !important; + text-transform: capitalize; } // Wrap options .text-break { - word-break: break-all !important; - word-break: break-word !important; - -webkit-hyphens: auto !important; - hyphens: auto !important; + word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; } .text-nowrap { - white-space: nowrap !important; + white-space: nowrap; } .text-nowrap { - overflow: hidden !important; - max-width: 100% !important; - white-space: nowrap !important; - text-overflow: ellipsis !important; + overflow: hidden; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_accordion.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_accordion.scss index 79415592f..7504ada30 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_accordion.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_accordion.scss @@ -15,17 +15,17 @@ .widget-accordion { .widget-accordion-group { @include get-accordion-group-styles( - $accordion-header-default-bg, - $accordion-header-default-bg-hover, - $accordion-header-default-color, - $brand-primary, - $accordion-default-border-color + var(--accordion-header-default-bg), + var(--accordion-header-default-bg-hover), + var(--accordion-header-default-color), + var(--brand-primary), + var(--accordion-default-border-color) ); } &.widget-accordion-preview { .widget-accordion-group { - @include get-accordion-preview-group-styles($accordion-header-default-color); + @include get-accordion-preview-group-styles(var(--accordion-header-default-color)); } } } @@ -33,28 +33,28 @@ @mixin get-accordion-group-styles($background-color, $background-color-hover, $color, $color-hover, $border-color) { border-color: $border-color; - background-color: $bg-color-secondary; + background-color: var(--bg-color-secondary); &:first-child { - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); > .widget-accordion-group-header > .widget-accordion-group-header-button { - border-top-left-radius: calc(#{$border-radius-default} - 1px); - border-top-right-radius: calc(#{$border-radius-default} - 1px); + border-top-left-radius: calc(var(--border-radius-default) - 1px); + border-top-right-radius: calc(var(--border-radius-default) - 1px); } } &:last-child { - border-bottom-left-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; + border-bottom-left-radius: var(--border-radius-default); + border-bottom-right-radius: var(--border-radius-default); } &.widget-accordion-group-collapsed:last-child, &.widget-accordion-group-collapsing:last-child { > .widget-accordion-group-header > .widget-accordion-group-header-button { - border-bottom-left-radius: calc(#{$border-radius-default} - 1px); - border-bottom-right-radius: calc(#{$border-radius-default} - 1px); + border-bottom-left-radius: calc(var(--border-radius-default) - 1px); + border-bottom-right-radius: calc(var(--border-radius-default) - 1px); } } @@ -73,11 +73,11 @@ > .widget-accordion-group-header > .widget-accordion-group-header-button { cursor: auto; background-color: $background-color; - padding: $spacing-medium; + padding: var(--spacing-medium); > :is(h1, h2, h3, h4, h5, h6) { - font-size: $font-size-h5; - font-weight: $font-weight-header; + font-size: var(--font-size-h5); + font-weight: var(--font-weight-header); } > :is(h1, h2, h3, h4, h5, h6, p, span) { @@ -107,15 +107,15 @@ > .widget-accordion-group-content-wrapper > .widget-accordion-group-content { border-color: $border-color; - padding: $spacing-small $spacing-medium $spacing-large $spacing-medium; + padding: var(--spacing-small) var(--spacing-medium) var(--spacing-large) var(--spacing-medium); } } @mixin get-accordion-preview-group-styles($color) { .widget-accordion-group-header-button { > div > :is(h1, h2, h3, h4, h5, h6) { - font-size: $font-size-h5; - font-weight: $font-weight-header; + font-size: var(--font-size-h5); + font-weight: var(--font-weight-header); } > div > :is(h1, h2, h3, h4, h5, h6, p, span) { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge-button.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge-button.scss index 803394873..267fb233b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge-button.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge-button.scss @@ -23,12 +23,12 @@ top: unset; display: inline-block; margin: 0; - padding: $spacing-smaller $spacing-small; + padding: var(--spacing-smaller) var(--spacing-small); text-align: center; vertical-align: baseline; white-space: nowrap; - background-color: $btn-primary-color; - color: $btn-primary-bg; + background-color: var(--btn-primary-color); + color: var(--btn-primary-bg); font-size: 100%; line-height: 1; } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge.scss index 0e1c997aa..9611d5069 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_badge.scss @@ -15,7 +15,7 @@ .badge { display: inline-block; margin: 0; - padding: $spacing-smaller $spacing-small; + padding: var(--spacing-smaller) var(--spacing-small); text-align: center; vertical-align: baseline; white-space: nowrap; @@ -24,7 +24,7 @@ line-height: 1; .form-control-static { - font-weight: $font-weight-normal; + font-weight: var(--font-weight-normal); all: unset; } } @@ -36,8 +36,8 @@ ========================================================================== */ .widget-badge { - color: $label-primary-color; - background-color: $label-primary-bg; + color: var(--label-primary-color); + background-color: var(--label-primary-bg); } .widget-badge-clickable { @@ -47,12 +47,12 @@ .widget-badge.badge:empty { display: initial; /* Fix padding to stay round */ - padding: $spacing-smaller calc(#{$spacing-small} + 2px); + padding: var(--spacing-smaller) calc(var(--spacing-small) + 2px); } .widget-badge.label:empty { display: initial; /* Fix padding to stay square */ - padding: $spacing-smaller calc(#{$spacing-small} + 2px); + padding: var(--spacing-smaller) calc(var(--spacing-small) + 2px); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_button.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_button.scss index b1a642f38..5aca467cb 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_button.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_button.scss @@ -24,23 +24,28 @@ text-align: center; vertical-align: middle; white-space: nowrap; - color: $btn-default-color; - border: 1px solid $btn-default-border-color; - border-radius: $btn-border-radius; - background-color: $btn-default-bg; + color: var(--btn-default-color); + border: var(--border-width-default) solid var(--btn-default-border-color); + border-radius: var(--btn-border-radius); + background-color: var(--btn-default-bg); background-image: none; box-shadow: none; text-shadow: none; - font-size: $btn-font-size; - line-height: $line-height-base; + font-size: var(--btn-font-size); + line-height: var(--line-height-base); - &:hover, - &:focus, - &:active, - &:active:focus { + &:hover { + // border-color: var(--form-input-border-hover-color); outline: none; box-shadow: none; } + &:active { + outline: none; + box-shadow: none; + } + &:focus-visible { + @extend .focus-ring !optional; + } &[aria-disabled] { cursor: not-allowed; @@ -56,17 +61,20 @@ // Mendix button link .mx-link { padding: 0; - color: $link-color; + color: var(--link-color); &[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; opacity: 0.65; } + &:focus-visible { + @extend .focus-ring !optional; + } } .link-back { - color: $font-color-detail; + color: var(--font-color-detail); .glyphicon, .mx-icon-lined, @@ -81,7 +89,7 @@ .mx-link { img { //height: auto; // MXUI override who set the height on 16px default - height: calc(#{$font-size-default} + 4px); + height: calc(var(--font-size-default) + 4px); margin-right: 4px; vertical-align: text-top; } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_check-box.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_check-box.scss index 3a67fda98..f2d17b0d8 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_check-box.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_check-box.scss @@ -47,8 +47,8 @@ width: 100%; height: 100%; content: ""; - border: 1px solid $form-input-border-color; - border-radius: $form-input-border-radius; + border: var(--border-width-default) solid var(--form-input-border-color); + border-radius: var(--form-input-border-radius); background-color: transparent; } @@ -66,12 +66,12 @@ &:not(:disabled):not(:checked):hover:after { content: ""; - border-color: $form-input-bg-hover; // color of checkmark on hover + border-color: var(--form-input-border-hover-color); // color of checkmark on hover } &:checked:before { - border-color: $form-input-border-focus-color; - background-color: $form-input-border-focus-color; + border-color: var(--form-input-border-focus-color); + background-color: var(--form-input-border-focus-color); } &:checked:after { @@ -79,21 +79,26 @@ } &:disabled:before { - background-color: $form-input-bg-disabled; + background-color: var(--form-input-bg-disabled); } &:checked:disabled:before { border-color: transparent; - background-color: rgba($form-input-border-focus-color, 0.4); + background-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent); } &:disabled:after, &:checked:disabled:after { - border-color: $form-input-bg-disabled; + border-color: var(--form-input-bg-disabled); } & + .control-label { - margin-left: $form-label-gutter; + margin-left: var(--form-label-gutter); + } + + &:focus-visible { + border-radius: var(--form-input-border-radius); + @extend .focus-ring !optional; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss new file mode 100644 index 000000000..b1fcdb2b0 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss @@ -0,0 +1,23 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin checkboxradiobutton() { + /* ========================================================================== + Checkbox Radio Button selection + ========================================================================== */ + + .list-horizontal { + .widget-checkbox-radio-selection-list { + flex-direction: row; + gap: var(--checkboxradio-gap, var(--spacing-small)); + } + } + + .widget-checkbox-radio-selection-list { + gap: var(--checkboxradio-gap, var(--spacing-none)); + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss new file mode 100644 index 000000000..f48073277 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_combobox.scss @@ -0,0 +1,39 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin combobox() { + /* ========================================================================== + Combobox + + Combobox input field inside form-group with hide-bg class + ========================================================================== */ + .hide-bg.form-group .widget-combobox { + .widget-combobox { + &-input-container { + background-color: transparent; + border: unset; + outline: transparent; + input { + background-color: transparent; + } + } + } + + .form-control{ + &:hover:not(:focus):not([disabled]) { + border-color: transparent; + background-color: transparent; + } + } + + .widget-combobox-icon-container{ + svg{ + fill: var(--cb-text-color); + } + } + } +} \ No newline at end of file diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-grid.scss index b6b08e668..2ec85209b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-grid.scss @@ -19,13 +19,14 @@ /* Table header */ th { border-style: solid; - border-color: $grid-border-color; + border-color: var(--grid-border-color); border-top-width: 0; border-right: 0; border-bottom-width: 1px; border-left: 0; - background-color: $grid-bg-header; - padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + background-color: var(--grid-bg-header); + padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom) + var(--grid-padding-left); vertical-align: middle; .mx-datagrid-head-caption { @@ -37,13 +38,14 @@ tbody tr { td { @include transition(); - padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom) + var(--grid-padding-left); vertical-align: middle; border-width: 0; - border-color: $grid-border-color; + border-color: var(--grid-border-color); border-bottom-width: 1px; border-bottom-style: solid; - background-color: $grid-bg; + background-color: var(--grid-bg); &:focus { outline: none; @@ -57,24 +59,26 @@ &.selected td, &.selected:hover td { - color: $grid-selected-color; - background-color: $grid-bg-selected !important; + color: var(--grid-selected-color); + background-color: var(--grid-bg-selected) !important; } } /* Table Footer */ tfoot { > tr > th { - padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom) + var(--grid-padding-left); border-width: 0; - background-color: $grid-footer-bg; + background-color: var(--grid-footer-bg); } > tr > td { - padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom) + var(--grid-padding-left); border-width: 0; - background-color: $grid-bg; - font-weight: $font-weight-bold; + background-color: var(--grid-bg); + font-weight: var(--font-weight-bold); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-view.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-view.scss index 413ad5ba7..7e51cdb08 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-view.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_data-view.scss @@ -18,6 +18,11 @@ /* Dataview-content gives problems for nested layout grid containers */ > .mx-dataview-content { flex-grow: 1; + + .mx-placeholder > &{ + overflow-y: auto; + } + > .mx-container-nested { > .row { margin-right: 0; @@ -28,33 +33,19 @@ /* Dataview empty message */ .mx-dataview-message { - color: $dataview-emptymessage-color; - background: $dataview-emptymessage-bg; + color: var(--dataview-emptymessage-color); + background: var(--dataview-emptymessage-bg); } } .mx-dataview-controls { - padding: $spacing-medium 0 0; - border-top: 1px solid $dataview-controls-border-color; + padding: var(--spacing-medium) 0 0; + border-top: 1px solid var(--dataview-controls-border-color); border-radius: 0; - background-color: $dataview-controls-bg; - /* Buttons */ - .mx-button { - margin-right: $spacing-small; - margin-bottom: 0; - - &:last-child { - margin-right: 0; - } - } - - /* Fix for Dojo rendering in react client */ - [id^="mxui_widget_Wrapper"]:has(> .mx-button) { - .mx-button { - margin-right: $spacing-small; - } - } - - background-color: inherit; + background-color: var(--dataview-controls-bg); + display: flex; + gap: var(--gutter-size); + margin-bottom: 0; + text-align: var(--dataview-controls-alignment); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_date-picker.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_date-picker.scss index 8af596450..9e4ac3efa 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_date-picker.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_date-picker.scss @@ -17,9 +17,9 @@ z-index: 10010 !important; padding: 8px; font-size: 12px; - background: $bg-color; - border-radius: $border-radius-default; - border: 1px solid $border-color-default; + background: var(--bg-color); + border-radius: var(--border-radius-default); + border: var(--border-default); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); .mx-calendar-month-header { @@ -40,7 +40,7 @@ .mx-calendar-month-next, .mx-calendar-month-previous { &:hover { - color: $brand-primary; + color: var(--brand-primary); } } @@ -56,7 +56,7 @@ } th { - color: $brand-primary; + color: var(--brand-primary); } th, @@ -67,26 +67,26 @@ } td { - color: $font-color-default; + color: var(--font-color-default); &:hover { cursor: pointer; border-radius: 50%; - color: $brand-primary; - background-color: $brand-default; + color: var(--brand-primary); + background-color: var(--brand-default); } } .mx-calendar-day-month-next, .mx-calendar-day-month-previous { - color: lighten($font-color-default, 45%); + color: var(--brand-primary-300); } .mx-calendar-day-selected, .mx-calendar-day-selected:hover { color: #fff; border-radius: 50%; - background: $brand-primary; + background: var(--brand-primary); } // @@ -94,10 +94,10 @@ .mx-calendar-year-switcher { text-align: center; margin-top: 10px; - color: lighten($brand-primary, 30%); + color: var(--brand-primary-300); span.mx-calendar-year-selected { - color: $brand-primary; + color: var(--brand-primary); margin-left: 10px; margin-right: 10px; } @@ -116,8 +116,8 @@ position: absolute; top: 25px; padding: 2px 10px; - border-radius: $border-radius-default; - background-color: $bg-color; + border-radius: var(--border-radius-default); + background-color: var(--bg-color); div { cursor: pointer; @@ -126,7 +126,7 @@ &:hover, &:focus { - color: $brand-primary; + color: var(--brand-primary); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss new file mode 100644 index 000000000..16fb4d9bb --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss @@ -0,0 +1,95 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin demo-user-switcher() { + /* ========================================================================== + Demo user switcher widget + ========================================================================== */ + + .mx-demouserswitcher { + position: fixed; + top: 0; + right: 0; + width: 360px; + height: 100%; + z-index: 20000; + box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2); + } + + .mx-demouserswitcher-content { + padding: 48px 0 48px; + height: 100%; + color: var(--font-color-contrast); + font-size: var(--font-size-default); + overflow: auto; + background: var(--sidebar-bg); + } + + .mx-demouserswitcher ul { + padding: 0; + margin: 48px 1px; + list-style-type: none; + } + + .mx-demouserswitcher a { + display: block; + padding: 10px 0; + color: var(--font-color-contrast); + &:hover { + background: var(--navsidebar-bg-hover); + text-decoration: none; + } + } + + .mx-demouserswitcher h2 { + margin: 0px 24px 5px; + color: var(--font-color-contrast); + font-size: var(--font-size-h2); + } + + .mx-demouserswitcher h3 { + margin: 0 24px 2px; + color: var(--font-color-contrast); + font-size: var(--font-size-default); + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .mx-demouserswitcher .active { + border-left: 4px solid rgba(255, 255, 255, 0.8); + background: var(--navsidebar-bg-active); + } + + .mx-demouserswitcher p { + margin-left: 24px; + margin-bottom: 0; + font-size: var(--font-size-small); + .active { + background: var(--navsidebar-bg-active); + } + } + + .mx-demouserswitcher-toggle { + position: absolute; + top: 25%; + left: -35px; + width: 35px; + height: 38px; + margin-top: -40px; + cursor: pointer; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2); + background: url(resources/switcher-toggle.png) center center no-repeat var(--brand-primary); + + &:hover { + background-color: var(--brand-primary-600); + } + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_div-container.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_div-container.scss new file mode 100644 index 000000000..4d5662401 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_div-container.scss @@ -0,0 +1,62 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin div-container() { + /* ========================================================================== + Container + + Widget styles + ========================================================================== */ + :root { + --border-style-solid: solid; + --border-style-dashed: dashed; + --border-style-dotted: dotted; + --border-style-none: none; + --div-border-width: var(--border-width-default); + --div-border-color: var(--border-color-default); + --div-border-style: solid; + --overflow-auto: auto; + --overflow-hidden: hidden; + --overflow-visible: visible; + --none: none; + --column-gap: 0px; + } + + .div-overflow-auto { + overflow: auto; + } + .div-overflow-hidden { + overflow: hidden; + } + .div-overflow-visible { + overflow: visible; + } + + .div-border-toggle-all { + border: var(--div-border-width) var(--div-border-style) var(--div-border-color); + } + .div-border-toggle-top { + border-top: var(--div-border-width) var(--div-border-style) var(--div-border-color); + } + .div-border-toggle-left { + border-left: var(--div-border-width) var(--div-border-style) var(--div-border-color); + } + .div-border-toggle-right { + border-right: var(--div-border-width) var(--div-border-style) var(--div-border-color); + } + .div-border-toggle-bottom { + border-bottom: var(--div-border-width) var(--div-border-style) var(--div-border-color); + } + .div-border-toggle-none { + border: none; + } + + .div-stretch { + height: 100%; + flex: 1; + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_glyphicon.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_glyphicon.scss index 37ec80771..6e4b14fe7 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_glyphicon.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_glyphicon.scss @@ -19,7 +19,7 @@ margin-right: 0.4555555em; vertical-align: middle; font-family: "Glyphicons Halflings"; - font-weight: $font-weight-normal; + font-weight: var(--font-weight-normal); font-style: normal; line-height: inherit; -webkit-font-smoothing: antialiased; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_grid.scss index 047b4e206..9d2f5703e 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_grid.scss @@ -24,14 +24,14 @@ /* Buttons */ .mx-button { padding: 8px; - color: $grid-paging-color; - border-color: $grid-paging-border-color; - background-color: $grid-paging-bg; + color: var(--grid-paging-color); + border-color: var(--grid-paging-border-color); + background-color: var(--grid-paging-bg); &:hover { - color: $grid-paging-color-hover; - border-color: $grid-paging-border-color-hover; - background-color: $grid-paging-bg-hover; + color: var(--grid-paging-color-hover); + border-color: var(--grid-paging-border-color-hover); + background-color: var(--grid-paging-bg-hover); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_group-box.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_group-box.scss index a80e4e08b..0c0474fc5 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_group-box.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_group-box.scss @@ -17,52 +17,55 @@ > .mx-groupbox-header { margin: 0; - color: $groupbox-default-color; + color: var(--groupbox-default-color); border-width: 1px 1px 0 1px; border-style: solid; - border-color: $groupbox-default-bg; - background: $groupbox-default-bg; - font-size: $font-size-h5; - border-radius: $border-radius-default $border-radius-default 0 0; - padding: $spacing-small * 1.5 $spacing-medium; + border-color: var(--groupbox-default-bg); + background: var(--groupbox-default-bg); + font-size: var(--font-size-h5); + border-radius: var(--border-radius-default) var(--border-radius-default) 0 0; + padding: calc(var(--spacing-small) * 1.5) var(--spacing-medium); .mx-groupbox-collapse-icon { margin-top: 0.1em; } + &:focus-visible { + @extend .focus-ring !optional; + } } // Header options > h1.mx-groupbox-header { - font-size: $font-size-h1; + font-size: var(--font-size-h1); } > h2.mx-groupbox-header { - font-size: $font-size-h2; + font-size: var(--font-size-h2); } > h3.mx-groupbox-header { - font-size: $font-size-h3; + font-size: var(--font-size-h3); } > h4.mx-groupbox-header { - font-size: $font-size-h4; + font-size: var(--font-size-h4); } > h5.mx-groupbox-header { - font-size: $font-size-h5; + font-size: var(--font-size-h5); } > h6.mx-groupbox-header { - font-size: $font-size-h6; + font-size: var(--font-size-h6); } > .mx-groupbox-body { - padding: $spacing-small * 1.5 $spacing-medium; + padding: calc(var(--spacing-small) * 1.5) var(--spacing-medium); border-width: 1px; border-style: solid; - border-color: $groupbox-default-bg; + border-color: var(--groupbox-default-bg); background-color: #ffffff; - border-radius: $border-radius-default; + border-radius: var(--border-radius-default); } .mx-groupbox-header + .mx-groupbox-body { @@ -75,6 +78,6 @@ //With header .mx-groupbox-header ~ .mx-groupbox-body { - border-radius: 0 0 $border-radius-default $border-radius-default; + border-radius: 0 0 var(--border-radius-default) var(--border-radius-default); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_header.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_header.scss index 4ebcdfb11..da6b555e7 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_header.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_header.scss @@ -16,11 +16,11 @@ z-index: 100; display: flex; width: 100%; - height: $m-header-height; + height: var(--m-header-height); padding: 0; text-align: initial; - color: $m-header-color; - background-color: $m-header-bg; + color: var(--m-header-color); + background: var(--m-header-bg); box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354); // Reset mxui @@ -61,9 +61,9 @@ width: 100%; margin: 0; text-overflow: ellipsis; - color: $m-header-color; - font-size: $m-header-title-size; - line-height: $m-header-height; + color: var(--m-header-color); + font-size: var(--m-header-title-size); + line-height: var(--m-header-height); } } @@ -92,19 +92,19 @@ &:active { transform: translateY(1px); - color: $link-hover-color; + color: var(--link-hover-color); } } .mx-link, .btn, img { - padding: 0 $spacing-medium; + padding: 0 var(--spacing-medium); } .mx-sidebartoggle { font-size: 24px; - line-height: $m-header-height; + line-height: var(--m-header-height); img { height: 20px; diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_input.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_input.scss index 77b8223cb..984669043 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_input.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_input.scss @@ -15,17 +15,17 @@ display: flex; flex: 1; min-width: 50px; - height: $form-input-height; - padding: $form-input-padding-y $form-input-padding-x; + height: var(--form-input-height); + padding: var(--form-input-padding-y) var(--form-input-padding-x); transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - color: $form-input-color; - border: 1px solid $form-input-border-color; - border-radius: $form-input-border-radius; - background-color: $form-input-bg; + color: var(--form-input-color); + border: var(--border-width-default) solid var(--form-input-border-color); + border-radius: var(--form-input-border-radius); + background-color: var(--form-input-bg); background-image: none; box-shadow: none; - font-size: $form-input-font-size; - line-height: $form-input-line-height; + font-size: var(--form-input-font-size); + line-height: var(--form-input-line-height); appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -34,17 +34,20 @@ } &::placeholder { - color: $form-input-placeholder-color; + color: var(--form-input-placeholder-color); } } .form-control:not([readonly]) { &:focus, &:focus-within { - border-color: $form-input-border-focus-color; - outline: 0; - background-color: $form-input-bg-focus; + background-color: var(--form-input-bg-focus); box-shadow: none; + @extend .focus-ring !optional; + } + &:hover:not(:focus):not([disabled]) { + border-color: var(--form-input-border-hover-color); + background-color: var(--form-input-bg-hover); } } @@ -52,7 +55,7 @@ .form-control[readonly], fieldset[disabled] .form-control { opacity: 1; - background-color: $form-input-bg-disabled; + background-color: var(--form-input-bg-disabled); } .form-control[disabled], @@ -63,7 +66,7 @@ // Lined .form-control-lined { border: 0; - border-bottom: 1px solid $form-input-border-color; + border-bottom: var(--border-width-default) solid var(--form-input-border-color); border-radius: 0; background-color: transparent; @@ -77,13 +80,12 @@ overflow: hidden; flex: 1; min-height: auto; - padding: $form-input-static-padding-y $form-input-static-padding-x; - //border-bottom: 1px solid $form-input-static-border-color; - font-size: $form-input-font-size; - line-height: $form-input-line-height; + padding: var(--form-input-static-padding-y) var(--form-input-static-padding-x); + font-size: var(--form-input-font-size); + line-height: var(--form-input-line-height); & + .control-label { - margin-left: $form-label-gutter; + margin-left: var(--form-label-gutter); } } @@ -93,7 +95,7 @@ padding-right: 30px; background-image: url($arrow); background-repeat: no-repeat; - background-position: calc(100% - #{$form-input-padding-x}) center; + background-position: calc(100% - var(--form-input-padding-x)) center; appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -114,7 +116,7 @@ display: block; width: 100%; text-align: right; - margin-top: $spacing-small; + margin-top: var(--spacing-small); } textarea.form-control { @@ -126,9 +128,10 @@ flex: 1; flex-wrap: wrap; max-width: 100%; + align-items: center; .btn { - margin-left: $spacing-small; + margin-left: var(--spacing-small); } .mx-validation-message { @@ -138,31 +141,25 @@ } .has-error .mx-validation-message { - margin-top: $spacing-small; + margin-top: var(--spacing-small); margin-bottom: 0; - padding: $spacing-small; - color: $alert-danger-color; - border-color: $alert-danger-border-color; - background-color: $alert-danger-bg; + padding: var(--spacing-small); + color: var(--alert-danger-color); + border-color: var(--alert-danger-border-color); + background-color: var(--alert-danger-bg); } // Form Group .form-group { display: flex; flex-direction: row; - margin-bottom: $form-group-margin-bottom; + margin-bottom: var(--form-group-margin-bottom); & > div[class*="col-"] { display: flex; - align-items: center; flex-wrap: wrap; } - & > [class*="col-"] { - padding-right: $form-group-gutter; - padding-left: $form-group-gutter; - } - // Alignment content div[class*="textBox"] > .control-label, div[class*="textArea"] > .control-label, @@ -174,10 +171,11 @@ .control-label { overflow: hidden; margin-bottom: 4px; + text-align: left; text-overflow: ellipsis; - color: $form-label-color; - font-size: $form-label-size; - font-weight: $form-label-weight; + color: var(--form-label-color); + font-size: var(--form-label-size); + font-weight: var(--form-label-weight); } .mx-validation-message { @@ -189,6 +187,41 @@ } } + .page-form-vertical { + @extend .form-vertical; + .form-group:not(.label-after) { + flex-direction: column; + } + } + + .page-form-horizontal { + @extend .form-horizontal; + @media not screen and (max-width: $screen-sm-max) { + .form-group.no-columns:not(.label-after){ + // overwrite default no-columns behavior when + // page form orientation is set to horizontal + flex-direction: row; + } + } + + $label-breakpoints: sm, md, lg, xl, xxl; + @each $bp in $label-breakpoints { + &:not([class*="form-label-width-"]){ + // default label width 3 if none specified + .form-group > label { + @extend .col-#{$bp}-3; + } + } + @for $i from 1 through 11 { + &.form-label-width-#{$i} { + .form-group > label { + @extend .col-#{$bp}-#{$i}; + } + } + } + } + } + .form-group.label-after { .form-control-static { flex: unset; @@ -207,16 +240,23 @@ // Targets only webkit iOS devices .dj_webkit.dj_ios .form-control { - transform: translateZ(0); + transform: translate3d(0,0,0); + -webkit-transform: translate3d(0,0,0); + + &.widget-dropdown-filter{ + transform: inherit; + -webkit-transform: inherit; + } } @media only screen and (min-width: $screen-md) { .form-horizontal { .control-label { margin-bottom: 0; - padding-top: $form-input-padding-y; - padding-bottom: $form-input-padding-y; - line-height: $form-input-line-height; + padding-top: var(--form-input-padding-y); + padding-bottom: var(--form-input-padding-y); + padding-right: var(--form-label-gutter); + line-height: var(--form-input-line-height); } } } @@ -264,11 +304,11 @@ select.form-control { padding-right: 30px; padding-left: 0; - background-position: #{$form-input-padding-x} center; + background-position: var(--form-input-padding-x) center; } .mx-compound-control .btn { - margin-right: $spacing-small; + margin-right: var(--spacing-small); margin-left: 0; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_label.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_label.scss index af9469ddf..62bb48151 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_label.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_label.scss @@ -15,7 +15,7 @@ .label { display: inline-block; margin: 0; - padding: $spacing-smaller $spacing-small; + padding: var(--spacing-smaller) var(--spacing-small); text-align: center; vertical-align: baseline; white-space: nowrap; @@ -25,7 +25,7 @@ line-height: 1; .form-control-static { - font-weight: $font-weight-normal; + font-weight: var(--font-weight-normal); all: unset; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_layout-grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_layout-grid.scss index 3aa38195f..187c8b1c2 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_layout-grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_layout-grid.scss @@ -4,8 +4,11 @@ // Customizing core files will make updating Atlas much more difficult in the future. // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. // - @mixin layout-grid() { + :root { + --max-screen-width: var(--screen-xxl); + } + /* ========================================================================== Layout grid @@ -15,16 +18,105 @@ width: 100%; margin-right: auto; margin-left: auto; - padding-right: $gutter-size; - padding-left: $gutter-size; + display: flex; + flex-direction: column; + row-gap: var(--layoutgrid-row-gap); + --layoutgrid-column-bg: transparent; + --layoutgrid-column-gap: var(--gutter-size); + --layoutgrid-row-gap: var(--gutter-size); + --layoutgrid-column-border-radius: var(--border-radius-l); + + &.cards { + // default column & row gap for card style + --layoutgrid-row-gap: var(--gutter-size); + --layoutgrid-column-gap: var(--gutter-size); + --layoutgrid-column-bg: var(--bg-color-secondary); + --card-bg-color: var(--layoutgrid-column-bg); + --card-border-radius: var(--layoutgrid-column-border-radius); + + > .row { + > .col, + > [class*="col-"] { + @extend .card; + } + } + } + + &.card-grid { + @extend .card; + --layoutgrid-row-gap: 0px; + --layoutgrid-column-gap: 0px; + --card-bg-color: var(--layoutgrid-column-bg); + --card-border-radius: var(--layoutgrid-column-border-radius); + padding: 0; + + > .row{ + margin-left: 0; + margin-right: 0; + > [class*="col-"]{ + border: 0.5px solid var(--border-color-default); + padding: var(--card-padding); + } + &:not(:last-child){ + border-bottom: 0.5px solid var(--border-color-default); + } + } + } + + &.layoutgrid-align-stretch { + height: 100%; + > .row { + height: 100%; + } + } + + &.layoutgrid-align-top { + height: 100%; + justify-content: flex-start; + } + + &.layoutgrid-align-center { + height: 100%; + justify-content: center; + } + + &.layoutgrid-align-bottom { + height: 100%; + justify-content: flex-end; + } + + > .row { + display: flex; + column-gap: var(--layoutgrid-column-gap); + row-gap: var(--layoutgrid-row-gap); // wrapped items + > .col, + > [class*="col-"] { + --column-gap: var(--layoutgrid-column-gap); + background-color: var(--layoutgrid-column-bg); + &.card { + --layoutgrid-column-bg: var(--card-bg); + } + + >* { + // ensure column gap is scoped to layout grid columns + --column-gap: 0px; + } + } + + &.cards { + >.col, + >[class*="col-"] { + @extend .card; + background-color: var(--layoutgrid-column-bg); + } + } + } } // Row .row { display: flex; flex-wrap: wrap; - margin-right: -$gutter-size; - margin-left: -$gutter-size; &::before, &::after { @@ -35,6 +127,7 @@ .no-gutters { margin-right: 0; margin-left: 0; + --layoutgrid-column-gap: 0px; } .no-gutters > .col, @@ -44,907 +137,70 @@ } // Columns - .col-1, - .col-2, - .col-3, - .col-4, - .col-5, - .col-6, - .col-7, - .col-8, - .col-9, - .col-10, - .col-11, - .col-12, .col, - .col-auto, - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12, - .col-sm, - .col-sm-auto, - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12, - .col-md, - .col-md-auto, - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12, - .col-lg, - .col-lg-auto, - .col-xl-1, - .col-xl-2, - .col-xl-3, - .col-xl-4, - .col-xl-5, - .col-xl-6, - .col-xl-7, - .col-xl-8, - .col-xl-9, - .col-xl-10, - .col-xl-11, - .col-xl-12, - .col-xl, - .col-xl-auto { + [class^="col-"] { position: relative; width: 100%; - padding-right: $gutter-size; - padding-left: $gutter-size; - } - - .col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - - .col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - - .col-1 { - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .col-2 { - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .col-3 { - flex: 0 0 25%; - max-width: 25%; - } - - .col-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .col-5 { - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .col-6 { - flex: 0 0 50%; - max-width: 50%; - } - - .col-7 { - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .col-8 { - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .col-9 { - flex: 0 0 75%; - max-width: 75%; - } - - .col-10 { - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .col-11 { - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .col-12 { - flex: 0 0 100%; - max-width: 100%; - } - - .order-first { - order: -1; - } - - .order-last { - order: 13; - } - - .order-0 { - order: 0; - } - - .order-1 { - order: 1; - } - - .order-2 { - order: 2; - } - - .order-3 { - order: 3; - } - - .order-4 { - order: 4; - } - - .order-5 { - order: 5; - } - - .order-6 { - order: 6; - } - - .order-7 { - order: 7; - } - - .order-8 { - order: 8; - } - - .order-9 { - order: 9; - } - - .order-10 { - order: 10; - } - - .order-11 { - order: 11; - } - - .order-12 { - order: 12; - } - - .offset-1, - .col-offset-1 { - margin-left: 8.333333%; - } - - .offset-2, - .col-offset-2 { - margin-left: 16.666667%; - } - - .offset-3, - .col-offset-3 { - margin-left: 25%; - } - - .offset-4, - .col-offset-4 { - margin-left: 33.333333%; - } - - .offset-5, - .col-offset-5 { - margin-left: 41.666667%; - } - - .offset-6, - .col-offset-6 { - margin-left: 50%; - } - - .offset-7, - .col-offset-7 { - margin-left: 58.333333%; - } - - .offset-8, - .col-offset-8 { - margin-left: 66.666667%; - } - - .offset-9, - .col-offset-9 { - margin-left: 75%; - } - - .offset-10, - .col-offset-10 { - margin-left: 83.333333%; - } - - .offset-11, - .col-offset-11 { - margin-left: 91.666667%; } // Responsiveness - @media (min-width: $screen-sm) { - .mx-layoutgrid-fixed { - max-width: 540px; - } - } - - @media (min-width: $screen-md) { - .mx-layoutgrid-fixed { - max-width: 720px; - } - } - - @media (min-width: $screen-lg) { - .mx-layoutgrid-fixed { - max-width: 960px; - } - } - - @media (min-width: $screen-xl) { - .mx-layoutgrid-fixed { - max-width: 1140px; - } - } - - @media (min-width: $screen-sm) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-sm-2 { - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-sm-5 { - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-sm-8 { - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-sm-11 { - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0, - .col-sm-offset-0 { - margin-left: 0; - } - .offset-sm-1, - .col-sm-offset-1 { - margin-left: 8.333333%; - } - .offset-sm-2, - .col-sm-offset-2 { - margin-left: 16.666667%; - } - .offset-sm-3, - .col-sm-offset-3 { - margin-left: 25%; - } - .offset-sm-4, - .col-sm-offset-4 { - margin-left: 33.333333%; - } - .offset-sm-5, - .col-sm-offset-5 { - margin-left: 41.666667%; - } - .offset-sm-6, - .col-sm-offset-6 { - margin-left: 50%; - } - .offset-sm-7, - .col-sm-offset-7 { - margin-left: 58.333333%; - } - .offset-sm-8, - .col-sm-offset-8 { - margin-left: 66.666667%; - } - .offset-sm-9, - .col-sm-offset-9 { - margin-left: 75%; - } - .offset-sm-10, - .col-sm-offset-10 { - margin-left: 83.333333%; - } - .offset-sm-11, - .col-sm-offset-11 { - margin-left: 91.666667%; - } - } - - @media (min-width: $screen-md) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-md-2 { - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-md-5 { - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-md-8 { - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-md-11 { - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0, - .col-md-offset-0 { - margin-left: 0; - } - .offset-md-1, - .col-md-offset-1 { - margin-left: 8.333333%; - } - .offset-md-2, - .col-md-offset-2 { - margin-left: 16.666667%; - } - .offset-md-3, - .col-md-offset-3 { - margin-left: 25%; - } - .offset-md-4, - .col-md-offset-4 { - margin-left: 33.333333%; - } - .offset-md-5, - .col-md-offset-5 { - margin-left: 41.666667%; - } - .offset-md-6, - .col-md-offset-6 { - margin-left: 50%; - } - .offset-md-7, - .col-md-offset-7 { - margin-left: 58.333333%; - } - .offset-md-8, - .col-md-offset-8 { - margin-left: 66.666667%; - } - .offset-md-9, - .col-md-offset-9 { - margin-left: 75%; - } - .offset-md-10, - .col-md-offset-10 { - margin-left: 83.333333%; - } - .offset-md-11, - .col-md-offset-11 { - margin-left: 91.666667%; - } - } - - @media (min-width: $screen-lg) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-lg-2 { - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-lg-5 { - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-lg-8 { - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-lg-11 { - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0, - .col-lg-offset-0 { - margin-left: 0; - } - .offset-lg-1, - .col-lg-offset-1 { - margin-left: 8.333333%; - } - .offset-lg-2, - .col-lg-offset-2 { - margin-left: 16.666667%; - } - .offset-lg-3, - .col-lg-offset-3 { - margin-left: 25%; - } - .offset-lg-4, - .col-lg-offset-4 { - margin-left: 33.333333%; - } - .offset-lg-5, - .col-lg-offset-5 { - margin-left: 41.666667%; - } - .offset-lg-6, - .col-lg-offset-6 { - margin-left: 50%; - } - .offset-lg-7, - .col-lg-offset-7 { - margin-left: 58.333333%; - } - .offset-lg-8, - .col-lg-offset-8 { - margin-left: 66.666667%; - } - .offset-lg-9, - .col-lg-offset-9 { - margin-left: 75%; - } - .offset-lg-10, - .col-lg-offset-10 { - margin-left: 83.333333%; - } - .offset-lg-11, - .col-lg-offset-11 { - margin-left: 91.666667%; - } - } - - @media (min-width: $screen-xl) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - .col-xl-2 { - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-xl-5 { - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - .col-xl-8 { - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - .col-xl-11 { - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0, - .col-xl-offset-0 { - margin-left: 0; - } - .offset-xl-1, - .col-xl-offset-1 { - margin-left: 8.333333%; - } - .offset-xl-2, - .col-xl-offset-2 { - margin-left: 16.666667%; - } - .offset-xl-3, - .col-xl-offset-3 { - margin-left: 25%; - } - .offset-xl-4, - .col-xl-offset-4 { - margin-left: 33.333333%; - } - .offset-xl-5, - .col-xl-offset-5 { - margin-left: 41.666667%; - } - .offset-xl-6, - .col-xl-offset-6 { - margin-left: 50%; - } - .offset-xl-7, - .col-xl-offset-7 { - margin-left: 58.333333%; - } - .offset-xl-8, - .col-xl-offset-8 { - margin-left: 66.666667%; - } - .offset-xl-9, - .col-xl-offset-9 { - margin-left: 75%; - } - .offset-xl-10, - .col-xl-offset-10 { - margin-left: 83.333333%; - } - .offset-xl-11, - .col-xl-offset-11 { - margin-left: 91.666667%; + $breakpoints: ( + "" "" 0 0, + "sm" "-sm" $screen-sm, + "md" "-md" $screen-md, + "lg" "-lg" $screen-lg, + "xl" "-xl" $screen-xl, + "xxl" "-xxl" $screen-xxl + ); + + @each $size, $suffix, $max-width in $breakpoints { + @media (min-width: #{$max-width}) { + @if $size != "" { + .mx-layoutgrid-fixed { + max-width: calc(min(var(--max-screen-width), #{$max-width}) - 40px); + } + } + + .col#{$suffix} { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col#{$suffix}-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + + @for $i from 1 through 12 { + .col#{$suffix}-#{$i} { + $col: calc(12 / #{$i}); + $width: calc(100% / $col - var(--column-gap) / $col * ($col - 1)); + flex: 0 0 $width; + max-width: $width; + } + } + + .order#{$suffix}-first { + order: -1; + } + .order#{$suffix}-last { + order: 13; + } + + @for $i from 0 through 12 { + .order#{$suffix}-#{$i} { + order: #{$i}; + } + } + + @for $i from 0 through 11 { + .offset#{$suffix}-#{$i}, + .col#{$suffix}-offset-#{$i} { + margin-left: calc(100% * #{$i} / 12); + } + } } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_list-view.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_list-view.scss index efef33824..23255d7ff 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_list-view.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_list-view.scss @@ -16,7 +16,7 @@ padding: 0; /* Clear search button (overrides load more button stying) */ & > ul { - margin: 0 0 $spacing-medium; + margin: 0 0 var(--gutter-size); .mx-listview-empty { border-style: none; @@ -25,12 +25,12 @@ & > li { @include transition(); - background-color: #fff; - padding: $spacing-medium; - border-top: 1px solid $grid-border-color; + background-color: var(--bg-color-secondary); + padding: var(--spacing-medium); + border-top: 1px solid var(--grid-border-color); &:last-child { - border-bottom: 1px solid $grid-border-color; + border-bottom: 1px solid var(--grid-border-color); } &:focus, @@ -41,7 +41,7 @@ } .selected { - background: $color-primary-light; + background: var(--brand-primary-100); } .mx-layoutgrid { @@ -51,7 +51,7 @@ // Search bar .mx-listview-searchbar { - margin-bottom: $spacing-medium; + margin-bottom: var(--spacing-medium); .btn { width: auto; @@ -61,7 +61,7 @@ /* Load more button */ .btn.mx-listview-loadMore { width: 100%; - margin: 0 0 $spacing-medium; + margin: 0 0 var(--spacing-medium); } //== Phone specific @@ -69,7 +69,7 @@ .profile-phone .mx-listview { .mx-listview-searchbar { margin-bottom: 3px; - background: #ffffff; + background: var(--bg-color-secondary); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); input { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss index c7fa98658..e9fefbd1f 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss @@ -13,37 +13,39 @@ ========================================================================== */ .modal-dialog { .modal-content { - border: 1px solid $modal-header-border-color; + border: var(--border-width-default) solid var(--modal-header-border-color); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); .modal-header { padding: 15px 20px; - border-bottom-color: $modal-header-border-color; + border-bottom-color: var(--modal-header-border-color); border-radius: 0; // Because of the class .mx-window-active in mxui.css - background-color: $modal-header-bg; + background-color: var(--modal-header-bg); - h4 { + h2, h4 { margin: 0; - color: $modal-header-color; + color: var(--modal-header-color); font-size: 16px; - font-weight: $font-weight-bold; + font-weight: var(--font-weight-header); } .close { margin-top: -3px; opacity: 1; + font-weight: var(--font-weight-normal); /* For IE8 and earlier */ - color: $modal-header-color; + color: var(--modal-header-color); text-shadow: none; - &:focus-visible { + &:focus { border-radius: 4px; - outline: 2px solid $brand-primary; + outline: 2px solid var(--brand-primary); } } } .modal-body { + background-color: var(--modal-body-bg); } .modal-footer { @@ -52,6 +54,7 @@ margin-top: 0; padding: 20px; border-style: none; + background-color: var(--modal-footer-bg); } } } @@ -74,8 +77,8 @@ justify-content: flex-end; margin: 0; padding: 20px; - text-align: left; - border-top: 1px solid $modal-header-border-color; + text-align: var(--dataview-controls-alignment); + border-top: 1px solid var(--modal-header-border-color); } } @@ -103,13 +106,13 @@ input { height: 56px; padding: 12px 12px; - border: 1px solid #eeeeee; - background: #eeeeee; + border: 1px solid var(--bg-color-secondary); + background: var(--bg-color-secondary); box-shadow: none; font-size: 16px; &:focus { - border-color: #66afe9; + border-color: var(--brand-primary-200); } } } @@ -123,10 +126,10 @@ font-size: 16px; } - h4 { + h2, h4 { color: #aaaaaa; font-size: 20px; - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-bar.scss index ea9656e0e..79faeff0e 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-bar.scss @@ -15,44 +15,46 @@ margin: 0; border-style: none; border-radius: 0; - background-color: $navigation-bg; + background: var(--navigation-bg); ul.nav { margin: 0; // weird -margin if screen gets small (bootstrap) /* Navigation item */ & > li.mx-navbar-item > a { display: flex; + column-gap: var(--spacing-small); align-items: center; - padding: $navigation-item-padding; + padding: var(--navigation-item-padding); + margin: var(--spacing-smaller); vertical-align: middle; - color: $navigation-color; + color: var(--navigation-color); border-radius: 0; - font-size: $navigation-font-size; - font-weight: $font-weight-normal; - border-radius: $border-radius-default; + font-size: var(--navigation-font-size); + font-weight: var(--font-weight-normal); + border-radius: var(--navigation-border-radius); /* Dropdown arrow */ .caret { - border-top-color: $navigation-color; - border-bottom-color: $navigation-color; + border-top-color: var(--navigation-color); + border-bottom-color: var(--navigation-color); } &:hover, &:focus, &.active { text-decoration: none; - color: $navigation-color-hover; - background-color: $navigation-bg-hover; + color: var(--navigation-color-hover); + background: var(--navigation-bg-hover); .caret { - border-top-color: $navigation-color-active; - border-bottom-color: $navigation-color-active; + border-top-color: var(--navigation-color-active); + border-bottom-color: var(--navigation-color-active); } } &.active { - color: $navigation-color-active; - background-color: $navigation-bg-active; + color: var(--navigation-color-active); + background: var(--navigation-bg-active); opacity: 1; } @@ -67,28 +69,27 @@ transform: rotate(360deg); border-width: 0 9px 9px 9px; border-style: solid; - border-color: transparent transparent $navigation-border-color transparent; + border-color: transparent transparent var(--navigation-border-color) transparent; } // Image img { width: 20px; // Default size (so it looks good) height: auto; - margin-right: 0.5em; } .glyphicon, .mx-icon-lined, .mx-icon-filled { top: 0; - margin-right: 0.5em; vertical-align: middle; - font-size: $navigation-glyph-size; + font-size: var(--navigation-glyph-size); } } & > .mx-navbar-item.active a { - color: $navigation-color-active; + color: var(--navigation-color-active); + background-color: var(--navigation-bg-active); } /* When hovering or the dropdown is open */ @@ -98,22 +99,22 @@ & > .mx-navbar-item.open > a:hover, & > .mx-navbar-item.open > a:focus { text-decoration: none; - color: $navigation-color-hover; - background-color: $navigation-bg-hover; + color: var(--navigation-color-hover); + background: var(--navigation-bg-hover); .caret { - border-top-color: $navigation-color-hover; - border-bottom-color: $navigation-color-hover; + border-top-color: var(--navigation-color-hover); + border-bottom-color: var(--navigation-color-hover); } } & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { - color: $navigation-sub-color-active; - background-color: $navigation-sub-bg-active; + color: var(--navigation-sub-color-active); + background: var(--navigation-sub-bg-active); .caret { - border-top-color: $navigation-sub-color-active; - border-bottom-color: $navigation-sub-color-active; + border-top-color: var(--navigation-sub-color-active); + border-bottom-color: var(--navigation-sub-color-active); } } } @@ -124,24 +125,24 @@ .mx-navbar-item.open .dropdown-menu { padding: 0; border-radius: 0; - background-color: $navigation-sub-bg; + background: var(--navigation-sub-bg); & > li.mx-navbar-subitem > a { padding: 10px 24px; - color: $navigation-sub-color; + color: var(--navigation-sub-color); border-radius: 0; - font-size: $navigation-sub-font-size; - font-weight: $font-weight-normal; + font-size: var(--navigation-sub-font-size); + font-weight: var(--font-weight-normal); &:hover, &:focus { - color: $navigation-sub-color-hover; - background-color: $navigation-sub-bg-hover; + color: var(--navigation-sub-color-hover); + background: var(--navigation-sub-bg-hover); } &.active { - color: $navigation-sub-color-active; - background-color: $navigation-sub-bg-active; + color: var(--navigation-sub-color-active); + background: var(--navigation-sub-bg-active); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-list.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-list.scss index 9dd978881..03d939419 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-list.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-list.scss @@ -18,22 +18,25 @@ li.mx-navigationlist-item { @include transition(); - padding: $spacing-medium; + padding: var(--spacing-medium); border-width: 1px; border-style: none none solid none; - border-color: $grid-border-color; + border-color: var(--grid-border-color); border-radius: 0; - background-color: $grid-bg; + background-color: var(--grid-bg); &:hover, &:focus { color: inherit; - background-color: $grid-bg-hover; + background-color: var(--grid-bg-hover); + } + &:focus-visible { + @extend .focus-ring !optional; } &.active { color: inherit; - background-color: $grid-bg-selected; + background-color: var(--grid-bg-selected); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-tree.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-tree.scss index e48fe1c04..9a4e243e9 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-tree.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_navigation-tree.scss @@ -12,12 +12,11 @@ Default Mendix navigation tree ========================================================================== */ .mx-navigationtree { - background-color: $navigation-bg; - /* Every navigation item */ .navbar-inner > ul { margin: 0; padding-left: 0; + background: var(--navigation-bg); & > li { padding: 0; @@ -26,19 +25,16 @@ & > a { display: flex; align-items: center; - height: $navigation-item-height; - padding: $navigation-item-padding; - color: $navigation-color; - //border-bottom: 1px solid $navigation-border-color; - //border-radius: 0; - background-color: $navigation-bg; + height: var(--navigation-item-height); + padding: var(--navigation-item-padding); + color: var(--navigation-color); text-shadow: none; - font-size: $navigation-font-size; - font-weight: $font-weight-normal; + font-size: var(--navigation-font-size); + font-weight: var(--font-weight-normal); .caret { - border-top-color: $navigation-color; - border-bottom-color: $navigation-color; + border-top-color: var(--navigation-color); + border-bottom-color: var(--navigation-color); } img { @@ -53,27 +49,26 @@ top: 0; margin-right: 0.5em; vertical-align: middle; - font-size: $navigation-glyph-size; + font-size: var(--navigation-glyph-size); } } a:hover, - a:focus, a.active { text-decoration: none; - color: $navigation-color-hover; - background-color: $navigation-bg-hover; + color: var(--navigation-color-hover); + background: var(--navigation-bg-hover); .caret { - border-top-color: $navigation-color-active; - border-bottom-color: $navigation-color-active; + border-top-color: var(--navigation-color-active); + border-bottom-color: var(--navigation-color-active); } } a.active { - color: $navigation-color-active; - border-left-color: $navigation-color-active; - background-color: $navigation-bg-active; + color: var(--navigation-color-active); + border-left-color: var(--navigation-color-active); + background: var(--navigation-bg-active); } } } @@ -83,7 +78,6 @@ & > ul { margin: 0; padding-left: 0; - background-color: $navigation-sub-bg; li { margin: 0; @@ -91,41 +85,43 @@ border: 0; a { - padding: $spacing-medium; + padding: var(--navigation-item-padding); text-decoration: none; - color: $navigation-sub-color; + color: var(--navigation-sub-color); border: 0; - background-color: $navigation-sub-bg; text-shadow: none; - font-size: $navigation-sub-font-size; - font-weight: $font-weight-normal; + font-size: var(--navigation-sub-font-size); + font-weight: var(--font-weight-normal); .glyphicon, .mx-icon-lined, .mx-icon-filled { - margin-right: $spacing-small; + margin-right: var(--spacing-small); } &:hover, - &:focus, &.active { - color: $navigation-sub-color-hover; - outline: 0; - background-color: $navigation-sub-bg-hover; + color: var(--navigation-sub-color-hover); + } + &:focus-visible { + @extend .focus-ring !optional; } &.active { - color: $navigation-sub-color-active; + color: var(--navigation-sub-color-active); border: 0; - background-color: $navigation-sub-bg-active; } } } } + + &:not(.mx-navigationtree-collapsed) { + border-radius: var(--navigation-border-radius); + background-color: var(--navigation-sub-bg); + } } - /* remove focus */ - &:focus { - outline: 0; + &:focus-visible { + @extend .focus-ring !optional; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pagination.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pagination.scss index 1a60d75d2..46641db9c 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pagination.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pagination.scss @@ -20,14 +20,14 @@ .btn { &:hover { - color: $btn-default-color; - background-color: $btn-default-bg-hover; + color: var(--btn-default-color); + background-color: var(--btn-default-bg-hover); } &:focus { outline: unset; outline-offset: unset; - box-shadow: 0 0 0 0.3rem $color-primary-light; + box-shadow: 0 0 0 0.3rem var(--brand-primary-200); } } @@ -44,8 +44,8 @@ margin-right: 16px; padding: 4px 8px; transition: all 0.2s ease-in-out; - color: $font-color-default; - border-radius: $border-radius-default; + color: var(--font-color-default); + border-radius: var(--border-radius-default); &:last-child { margin-right: 0; @@ -53,24 +53,24 @@ &:not(.break-view) { &:hover { - color: $btn-default-color; - background-color: $btn-default-bg-hover; + color: var(--btn-default-color); + background-color: var(--btn-default-bg-hover); } &:focus { outline: unset; outline-offset: unset; - box-shadow: 0 0 0 0.3rem $color-primary-light; + box-shadow: 0 0 0 0.3rem var(--brand-primary-200); } &.active { - color: $btn-primary-color; - background-color: $btn-primary-bg; + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg); } &.active:hover { - color: $btn-primary-color; - background-color: $btn-primary-bg-hover; + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg-hover); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss index 30f2111c5..791e4e8b5 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss @@ -29,7 +29,7 @@ flex-direction: column; width: max-content; border-radius: 8px; - background-color: $bg-color; + background-color: var(--bg-color); box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08); &.popupmenu-position-left:not(.popup-portal) { @@ -81,44 +81,44 @@ .popupmenu-basic-divider { width: 100%; height: 1px; - background-color: $brand-default; + background-color: var(--brand-default); } .popupmenu-basic-item { padding: 12px 16px; - color: $font-color-default; + color: var(--font-color-default); font-size: 14px; &:hover, &:focus, &:active { cursor: pointer; - border-color: $bg-color-secondary; - background-color: $bg-color-secondary; + border-color: var(--bg-color-secondary); + background-color: var(--bg-color-secondary); } &-inverse { - color: $brand-inverse; + color: var(--brand-primary-600); } &-primary { - color: $brand-primary; + color: var(--brand-primary); } &-info { - color: $brand-info; + color: var(--brand-primary-300); } &-success { - color: $brand-success; + color: var(--brand-success); } &-warning { - color: $brand-warning; + color: var(--brand-warning); } &-danger { - color: $brand-danger; + color: var(--brand-danger); } } @@ -127,8 +127,8 @@ &:focus, &:active { cursor: pointer; - border-color: $bg-color-secondary; - background-color: $bg-color-secondary; + border-color: var(--bg-color-secondary); + background-color: var(--bg-color-secondary); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-bar.scss index 474fb70d0..801e4e7ad 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-bar.scss @@ -25,8 +25,8 @@ transition: width 0.6s ease; text-align: center; color: #ffffff; - border-radius: $border-radius-default; - font-weight: $font-weight-semibold; + border-radius: var(--border-radius-default); + font-weight: var(--font-weight-semibold); } .progress-striped .progress-bar, diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-circle.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-circle.scss index 86b28b511..658528f43 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-circle.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress-circle.scss @@ -17,6 +17,6 @@ } .widget-progress-circle-trail-path { - stroke: $bg-color; + stroke: var(--bg-color); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress.scss index fc87d33f1..9fa732c25 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_progress.scss @@ -13,11 +13,11 @@ ========================================================================== */ .mx-progress { - color: $font-color-default; - background: $bg-color-secondary; + color: var(--font-color-default); + background: var(--bg-color-secondary); .mx-progress-message { - color: $font-color-default; + color: var(--font-color-default); } .mx-progress-indicator { @@ -29,7 +29,7 @@ margin: auto; padding: 0; border-radius: 0; - background: $gray-lighter; + background: var(--gray-50); &:before, &:after { @@ -41,7 +41,7 @@ height: 2px; content: ""; transform: translate3d(-100%, 0, 0); - background: $brand-primary; + background: var(--brand-primary); } &::before { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_radio-button.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_radio-button.scss index ad2771a35..23613026b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_radio-button.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_radio-button.scss @@ -25,14 +25,15 @@ } .radio { - display: flex !important; // Remove after mxui merge + display: flex; align-items: center; margin-top: 0; } input[type="radio"] { - position: relative !important; // Remove after mxui merge + position: relative !important; width: 16px; + flex: 0 0 16px; height: 16px; margin: 0; cursor: pointer; @@ -54,7 +55,7 @@ width: 100%; height: 100%; content: ""; - border: 1px solid $form-input-border-color; + border: var(--border-width-default) solid var(--form-input-border-color); background-color: transparent; } @@ -65,7 +66,12 @@ height: 50%; transform: translate(-50%, -50%); pointer-events: none; - background-color: $form-input-border-focus-color; + background-color: var(--form-input-border-focus-color); + } + + &:focus-visible { + border-radius: 100%; + @extend .focus-ring !optional; } &:not(:checked):after { @@ -74,7 +80,7 @@ } &:not(:disabled):not(:checked):hover:after { - background-color: $form-input-bg-hover; + background-color: var(--form-input-bg-hover); } &:checked:after, @@ -85,24 +91,24 @@ } &:checked:before { - border-color: $form-input-border-focus-color; - background-color: $form-input-bg; + border-color: var(--form-input-border-focus-color); + background-color: var(--form-input-bg); } &:disabled:before { - background-color: $form-input-bg-disabled; + background-color: var(--form-input-bg-disabled); } &:checked:disabled:before { - border-color: rgba($form-input-border-focus-color, 0.4); + border-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent); } &:checked:disabled:after { - background-color: rgba($form-input-border-focus-color, 0.4); + background-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent); } & + label { - margin-left: $form-label-gutter; + margin-left: var(--form-label-gutter); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_range-slider.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_range-slider.scss index 4cb59d456..7f84a95a0 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_range-slider.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_range-slider.scss @@ -18,13 +18,13 @@ padding: 5px 10px; .rc-slider-handle { - border-color: $brand-default; + border-color: var(--brand-default); } .rc-slider.rc-slider-with-marks { padding-bottom: 25px; } - @include slider-color-variant($brand-primary); + @include slider-color-variant(var(--brand-primary)); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_rating.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_rating.scss index 14c65bef8..047873d29 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_rating.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_rating.scss @@ -42,17 +42,10 @@ } .rating-item { - &:focus:not(:focus-visible) { - .rating-image, - .rating-icon { - outline: none; - } - } - &:focus-visible { .rating-image, .rating-icon { - outline: 1px solid $brand-primary; + @extend .focus-ring !optional; } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss index 398ceafb4..97b24d34d 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss @@ -37,8 +37,6 @@ // This is a duplication because we need to be able to use that value in calculation on // other levels of scroll container while --sidebar-size is available on the region level and not higher - $sidebar-animation-duration: 250ms; - .mx-page { display: flex; flex-direction: column; @@ -80,7 +78,7 @@ .mx-scrollcontainer-left, .mx-scrollcontainer-right, .mx-scrollcontainer-center, - .mx-scrollcontainer-middle { + d .mx-scrollcontainer-middle { overflow: auto; } } @@ -97,6 +95,8 @@ .mx-scrollcontainer-middle, .mx-scrollcontainer-center { flex-grow: 1; + display: flex; + flex-direction: column; } // if there is a nested scroll container we always want @@ -122,8 +122,8 @@ // Animate transitions for toggleable sidebars .mx-scrollcontainer-left.mx-scrollcontainer-toggleable, .mx-scrollcontainer-right.mx-scrollcontainer-toggleable { - transition: flex-basis $sidebar-animation-duration ease-in, margin-right $sidebar-animation-duration ease-in, - margin-left $sidebar-animation-duration ease-in; + transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function), margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function), + margin-left var(--navsidebar-animation-duration) var(--navsidebar-animation-function); z-index: 1; } @@ -168,7 +168,7 @@ // Push content aside animation .mx-scrollcontainer-push > :not(.mx-scrollcontainer-toggleable) { - transition: transform $sidebar-animation-duration ease-in; + transition: transform var(--navsidebar-animation-duration) var(--navsidebar-animation-function); } .mx-scrollcontainer-push.mx-scrollcontainer-open > :not(.mx-scrollcontainer-toggleable) { @@ -192,6 +192,7 @@ &:not(.mx-scrollcontainer-nested) { -webkit-overflow-scrolling: touch; } + isolation: isolate; } // for push aside and slide over the main part should be non-interactive if sidebar is open @@ -204,7 +205,8 @@ pointer-events: auto; } - .mx-scrollcontainer-center { + .mx-scrollcontainer-center, + .mx-scrollcontainer-middle { .mx-layoutgrid, .mx-layoutgrid-fluid { @include layout-spacing($type: padding, $direction: all, $device: responsive); @@ -223,19 +225,22 @@ flex-direction: column; & > .mx-scrollcontainer-wrapper{ - flex-grow: 1; + height: 100%; + flex: 1; display: flex; flex-direction: column; & > .mx-placeholder{ + height: 100%; flex-grow: 1; display: flex; flex-direction: column; & > *:only-child{ + height: 100%; flex-grow: 1; } } } } -} +} \ No newline at end of file diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container.scss new file mode 100644 index 000000000..2a3d03087 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container.scss @@ -0,0 +1,83 @@ +// +// DISCLAIMER: +// Do not change this file because it is core styling. +// Customizing core files will make updating Atlas much more difficult in the future. +// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. +// + +@mixin scroll-container() { + /* ========================================================================== + Scroll Container + + Default Mendix Scroll Container Widget. + ========================================================================== */ + .mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) { + -webkit-overflow-scrolling: touch; + } + + .mx-scrollcontainer-horizontal { + width: 100%; + display: table; + table-layout: fixed; + } + .mx-scrollcontainer-horizontal > div { + display: table-cell; + vertical-align: top; + } + + .mx-scrollcontainer-nested { + padding: 0; + } + .mx-scrollcontainer-fixed > .mx-scrollcontainer-middle > .mx-scrollcontainer-wrapper, + .mx-scrollcontainer-fixed > .mx-scrollcontainer-left > .mx-scrollcontainer-wrapper, + .mx-scrollcontainer-fixed > .mx-scrollcontainer-center > .mx-scrollcontainer-wrapper, + .mx-scrollcontainer-fixed > .mx-scrollcontainer-right > .mx-scrollcontainer-wrapper { + overflow: auto; + } + + .mx-scrollcontainer-move-in { + transition: left 250ms ease-out; + } + .mx-scrollcontainer-move-out { + transition: left 250ms ease-in; + } + .mx-scrollcontainer-shrink .mx-scrollcontainer-toggleable { + transition-property: width; + } + + .mx-scrollcontainer-toggleable { + background-color: #fff; + } + + .mx-scrollcontainer-push { + position: relative; + } + .mx-scrollcontainer-shrink > .mx-scrollcontainer-toggleable { + overflow: hidden; + } + .mx-scrollcontainer-push.mx-scrollcontainer-open > div, + .mx-scrollcontainer-slide.mx-scrollcontainer-open > div { + pointer-events: none; + } + .mx-scrollcontainer-push.mx-scrollcontainer-open > .mx-scrollcontainer-toggleable, + .mx-scrollcontainer-slide.mx-scrollcontainer-open > .mx-scrollcontainer-toggleable { + pointer-events: auto; + } + + // Scroll container spacing + // NOTE: .mx-placeholder is removed in modern client for the good, this rule is going to be ignored. + .mx-scrollcontainer .mx-placeholder { + width: 100%; + height: 100%; + + .mx-layoutgrid, + .mx-layoutgrid-fluid { + @include layout-spacing($type: padding, $direction: all, $device: responsive); + + .mx-layoutgrid, + .mx-layoutgrid-fluid { + padding: 0; + } + } + } +} diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss index f252fe198..1e45c2622 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss @@ -12,7 +12,7 @@ ========================================================================== */ .mx-menubar { padding: 0; - background-color: $navigation-bg; + background: var(--navigation-bg); ul.mx-menubar-list { display: flex; @@ -28,12 +28,12 @@ align-items: center; justify-content: center; height: 100%; - padding: $navigation-item-padding; + padding: var(--navigation-item-padding); white-space: nowrap; - color: $navigation-color; + color: var(--navigation-color); border-radius: 0; - font-size: $navigation-font-size; - font-weight: $font-weight-normal; + font-size: var(--navigation-font-size); + font-weight: var(--font-weight-normal); img { margin-right: 0.5em; @@ -45,7 +45,7 @@ top: -1px; margin-right: 0.5em; vertical-align: middle; - font-size: $navigation-glyph-size; + font-size: var(--navigation-glyph-size); } } @@ -55,13 +55,13 @@ &:focus a, &.active a { text-decoration: none; - color: $navigation-color-hover; - background-color: $navigation-bg-hover; + color: var(--navigation-color-hover); + background: var(--navigation-bg-hover); } &.active a { - color: $navigation-color-active; - background-color: $navigation-bg-active; + color: var(--navigation-color-active); + background: var(--navigation-bg-active); } } } @@ -74,7 +74,7 @@ // Vertical variation specifics .mx-menubar-vertical { - background-color: $navigation-bg; + background: var(--navigation-bg); ul.mx-menubar-list { display: flex; @@ -84,7 +84,7 @@ display: block; a { - border-bottom: 1px solid $navigation-border-color; + border-bottom: 1px solid var(--navigation-border-color); } } } @@ -131,18 +131,18 @@ // When used in topbar .region-topbar { .mx-menubar { - background-color: $navtopbar-bg; + background: var(--navtopbar-bg); ul.mx-menubar-list { li.mx-menubar-item { a { - color: $navtopbar-color; - font-size: $navtopbar-font-size; + color: var(--navtopbar-color); + font-size: var(--navtopbar-font-size); .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $navtopbar-glyph-size; + font-size: var(--navtopbar-glyph-size); } } @@ -151,13 +151,13 @@ &:hover a, &:focus a, &.active a { - color: $navtopbar-color-hover; - background-color: $navtopbar-bg-hover; + color: var(--navtopbar-color-hover); + background: var(--navtopbar-bg-hover); } &.active a { - color: $navtopbar-color-active; - background-color: $navtopbar-bg-active; + color: var(--navtopbar-color-active); + background: var(--navtopbar-bg-active); } } } @@ -165,13 +165,13 @@ // Vertical variation specifics .mx-menubar-vertical { - background-color: $navtopbar-bg; + background: var(--navtopbar-bg); ul.mx-menubar-list { li.mx-menubar-item { a { - height: $navigation-item-height; - border-color: $navtopbar-border-color; + height: var(--navigation-item-height); + border-color: var(--navtopbar-border-color); } } } @@ -181,18 +181,18 @@ // When used in sidebar .region-sidebar { .mx-menubar { - background-color: $navsidebar-bg; + background: var(--navsidebar-bg); ul.mx-menubar-list { li.mx-menubar-item { a { - color: $navsidebar-color; - font-size: $navsidebar-font-size; + color: var(--navsidebar-color); + font-size: var(--navsidebar-font-size); .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $navsidebar-glyph-size; + font-size: var(--navsidebar-glyph-size); } } @@ -201,13 +201,13 @@ &:hover a, &:focus a, &.active a { - color: $navsidebar-color-hover; - background-color: $navsidebar-bg-hover; + color: var(--navsidebar-color-hover); + background: var(--navsidebar-bg-hover); } &.active a { - color: $navsidebar-color-active; - background-color: $navsidebar-bg-active; + color: var(--navsidebar-color-active); + background: var(--navsidebar-bg-active); } } } @@ -215,12 +215,12 @@ // Vertical variation specifics .mx-menubar-vertical { - background-color: $navsidebar-bg; + background: var(--navsidebar-bg); ul.mx-menubar-list { li.mx-menubar-item { a { - border-color: $navsidebar-border-color; + border-color: var(--navsidebar-border-color); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_slider.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_slider.scss index e4f1fce41..3c80e10a1 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_slider.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_slider.scss @@ -15,17 +15,18 @@ ========================================================================== */ .widget-slider { + flex: auto; margin-bottom: 16px; padding: 5px 10px; .rc-slider-handle { - border-color: $brand-default; + border-color: var(--brand-default); } .rc-slider.rc-slider-with-marks { padding-bottom: 25px; } - @include slider-color-variant($brand-primary); + @include slider-color-variant(var(--brand-primary)); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss index 01b89c4ab..9b6b8463b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss @@ -15,7 +15,7 @@ $default-ios-color: rgb(100, 189, 99); } @mixin bootstrap-style-android($brand-style) { - background-color: lighten($brand-style, 10%); + background-color: color-mix(in srgb, $brand-style, white 10%); } @mixin style($brand-key, $brand-variable) { @@ -52,27 +52,27 @@ $default-ios-color: rgb(100, 189, 99); } &.widget-switch-btn-wrapper-success { - @include bootstrap-style-ios($brand-success); + @include bootstrap-style-ios(var(--brand-success)); } &.widget-switch-btn-wrapper-info { - @include bootstrap-style-ios($brand-info); + @include bootstrap-style-ios(var(--brand-primary-300)); } &.widget-switch-btn-wrapper-primary { - @include bootstrap-style-ios($brand-primary); + @include bootstrap-style-ios(var(--brand-primary)); } &.widget-switch-btn-wrapper-warning { - @include bootstrap-style-ios($brand-warning); + @include bootstrap-style-ios(var(--brand-warning)); } &.widget-switch-btn-wrapper-danger { - @include bootstrap-style-ios($brand-danger); + @include bootstrap-style-ios(var(--brand-danger)); } &.widget-switch-btn-wrapper-inverse { - @include bootstrap-style-ios($brand-inverse); + @include bootstrap-style-ios(var(--brand-primary-600)); } } } @@ -91,50 +91,50 @@ $default-ios-color: rgb(100, 189, 99); } &.widget-switch-btn-wrapper-success { - @include bootstrap-style-android($brand-success); + @include bootstrap-style-android(var(--brand-success)); .widget-switch-btn { - background: $brand-success; + background: var(--brand-success); } } &.widget-switch-btn-wrapper-info { - @include bootstrap-style-android($brand-info); + @include bootstrap-style-android(var(--brand-primary-300)); .widget-switch-btn { - background: $brand-info; + background: var(--brand-primary-300); } } &.widget-switch-btn-wrapper-primary { - @include bootstrap-style-android($brand-primary); + @include bootstrap-style-android(var(--brand-primary)); .widget-switch-btn { - background: $brand-primary; + background: var(--brand-primary); } } &.widget-switch-btn-wrapper-warning { - @include bootstrap-style-android($brand-warning); + @include bootstrap-style-android(var(--brand-warning)); .widget-switch-btn { - background: $brand-warning; + background: var(--brand-warning); } } &.widget-switch-btn-wrapper-danger { - @include bootstrap-style-android($brand-danger); + @include bootstrap-style-android(var(--brand-danger)); .widget-switch-btn { - background: $brand-danger; + background: var(--brand-danger); } } &.widget-switch-btn-wrapper-inverse { - @include bootstrap-style-android($brand-inverse); + @include bootstrap-style-android(var(--brand-primary-600)); .widget-switch-btn { - background: $brand-inverse; + background: var(--brand-primary-600); } } } @@ -143,16 +143,25 @@ $default-ios-color: rgb(100, 189, 99); @mixin switch() { .widget-switch-btn-wrapper { - &:focus { - outline: 1px solid $brand-primary; + &:focus-visible { + @extend .focus-ring !optional; } } - @include style("primary", $brand-primary); - @include style("secondary", $brand-default); - @include style("success", $brand-success); - @include style("warning", $brand-warning); - @include style("danger", $brand-danger); + .widget-switch input[type="checkbox"].sr-only { + position: absolute!important; + width: 1px; + height: 1px; + padding: 0; + margin: -1px!important; + overflow: hidden; + } + + @include style("primary", var(--brand-primary)); + @include style("secondary", var(--brand-default)); + @include style("success", var(--brand-success)); + @include style("warning", var(--brand-warning)); + @include style("danger", var(--brand-danger)); // below is maintained for backwards compatibility prior to Switch 3.0.0. div { diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_tab-container.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_tab-container.scss index 6720d8d30..b2907446a 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_tab-container.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_tab-container.scss @@ -15,8 +15,8 @@ .mx-tabcontainer { .mx-tabcontainer-tabs { - margin-bottom: $spacing-medium; - border-color: $tabs-border-color; + margin-bottom: var(--spacing-medium); + border-color: var(--tabs-border-color); display: flex; > li { @@ -26,23 +26,25 @@ & > li > a { margin-right: 0; transition: all 0.2s ease-in-out; - color: $tabs-color; - font-weight: $font-weight-normal; - border-radius: $border-radius-default $border-radius-default 0 0; + color: var(--tabs-color); + font-weight: var(--font-weight-normal); + border-radius: var(--border-radius-default) var(--border-radius-default) 0 0; - &:hover, - &:focus { - background-color: $tabs-bg-hover; + &:hover { + background-color: var(--tabs-bg-hover); + } + &:focus-visible { + @extend .focus-ring !optional; } } & > li.active > a, & > li.active > a:hover, & > li.active > a:focus { - color: $tabs-color-active; - border: 1px solid $tabs-border-color; - border-bottom-color: #fff; - background-color: $tabs-bg; + color: var(--tabs-color-active); + border: 1px solid var(--tabs-border-color); + border-bottom-color: var(--bg-color-secondary); + background-color: var(--tabs-bg); } } } @@ -53,7 +55,7 @@ margin: 0; text-align: center; border-style: none; - background-color: $brand-primary; + background-color: var(--brand-primary); li { display: table-cell; @@ -67,13 +69,13 @@ a { padding: 16px; text-transform: uppercase; - color: #ffffff; + color: var(--font-color-contrast); border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 255, 0.3); border-radius: 0; font-size: 12px; - font-weight: $font-weight-normal; + font-weight: var(--font-weight-normal); &:hover, &:focus { @@ -91,20 +93,20 @@ color: #ffffff; border-style: none; border-radius: 0; - background-color: mix($brand-primary, #000000, 80%); + background-color: var(--brand-primary-900); } } } } .mx-tabcontainer-badge { - margin-left: $spacing-small; - border-radius: $font-size-small; - background-color: $label-primary-bg; - color: $label-primary-color; - font-size: $font-size-small; - font-weight: $font-weight-bold; + margin-left: var(--spacing-small); + border-radius: var(--font-size-small); + background-color: var(--label-primary-bg); + color: var(--label-primary-color); + font-size: var(--font-size-small); + font-weight: var(--font-weight-bold); line-height: 1; - padding: $spacing-small/2 $spacing-small; + padding: calc(var(--spacing-small) / 2) var(--spacing-small); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_table.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_table.scss index 0e8aa2c3d..54d4727b7 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_table.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_table.scss @@ -13,7 +13,7 @@ ========================================================================== */ th { - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); } html body .mx-page table.mx-table { @@ -31,13 +31,13 @@ > tr { /* Table header */ > th { - padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom - $padding-table-cell-left; + padding: var(--padding-table-cell-top) var(--padding-table-cell-right) + var(--padding-table-cell-bottom) var(--padding-table-cell-left); s * { - color: $form-label-color; - font-weight: $font-weight-bold; - font-weight: $form-label-weight; + color: var(--form-label-color); + font-weight: var(--font-weight-bold); + font-weight: var(--form-label-weight); } > label { @@ -48,8 +48,8 @@ /* Table cells */ > td { - padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom - $padding-table-cell-left; + padding: var(--padding-table-cell-top) var(--padding-table-cell-right) + var(--padding-table-cell-bottom) var(--padding-table-cell-left); > div > label, .mx-referenceselector-input-wrapper label { @@ -67,8 +67,8 @@ > tr { > th, > td { - padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom - $padding-table-cell-left; + padding: var(--padding-table-cell-top) var(--padding-table-cell-right) + var(--padding-table-cell-bottom) var(--padding-table-cell-left); } } } @@ -80,8 +80,8 @@ > tr { > th, > td { - padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom - $padding-table-cell-left; + padding: var(--padding-table-cell-top) var(--padding-table-cell-right) + var(--padding-table-cell-bottom) var(--padding-table-cell-left); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_template-grid.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_template-grid.scss index 7c9ecdb99..db9f9b030 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_template-grid.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_template-grid.scss @@ -18,16 +18,17 @@ } .mx-templategrid-item { - padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom) + var(--grid-padding-left); cursor: default; - background-color: $grid-bg; + background-color: var(--grid-bg); &:hover { background-color: transparent; } &.selected { - background-color: $grid-bg-selected !important; + background-color: var(--grid-bg-selected) !important; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_timeline.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_timeline.scss index f18157058..f18213bd0 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_timeline.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_timeline.scss @@ -16,20 +16,20 @@ .widget-timeline-date-header { display: flex; justify-content: center; - width: $timeline-grouping-size; + width: var(--timeline-grouping-size); overflow-wrap: break-word; - padding: $spacing-small; - border: 1px solid $timeline-grouping-border-color; - border-radius: $timeline-grouping-border-radius; + padding: var(--spacing-small); + border: 1px solid var(--timeline-grouping-border-color); + border-radius: var(--timeline-grouping-border-radius); } //Timeline entries .widget-timeline-events-wrapper { display: flex; flex: 1; - margin-left: $timeline-grouping-size/2; - padding: $spacing-large 0 0 0; - border-left: 1px solid $timeline-border-color; + margin-left: calc(var(--timeline-grouping-size) / 2); + padding: var(--spacing-large) 0 0 0; + border-left: 1px solid var(--timeline-border-color); ul { flex: 1; @@ -44,8 +44,8 @@ flex: 1; position: relative; margin-left: -1px; - padding: 0 $spacing-large $spacing-large $spacing-large; - margin-bottom: $spacing-medium; + padding: 0 var(--spacing-large) var(--spacing-large) var(--spacing-large); + margin-bottom: var(--spacing-medium); &.clickable { cursor: pointer; @@ -71,7 +71,7 @@ .glyphicon, .mx-icon-lined, .mx-icon-filled { - font-size: $timeline-icon-size; + font-size: var(--timeline-icon-size); } img { @@ -91,7 +91,7 @@ .widget-timeline-info-wrapper { flex: 1; order: 1; - margin-right: $spacing-medium; + margin-right: var(--spacing-medium); } } @@ -100,7 +100,7 @@ .widget-timeline-date-time-wrapper { order: 1; - margin-right: $spacing-medium; + margin-right: var(--spacing-medium); } .widget-timeline-info-wrapper { @@ -111,10 +111,10 @@ //Timeline entry components .widget-timeline-icon-circle { - width: $timeline-icon-size; - height: $timeline-icon-size; + width: var(--timeline-icon-size); + height: var(--timeline-icon-size); border-radius: 50%; - background-color: $timeline-icon-color; + background-color: var(--timeline-icon-color); } .widget-timeline-title { @@ -129,15 +129,15 @@ .widget-eventTime { @extend h5; - color: $timeline-event-time-color; + color: var(--timeline-event-time-color); } .timeline-entry-image { display: flex; justify-content: center; align-content: center; - border-radius: $border-radius-default; - height: $timeline-image-size; - width: $timeline-image-size; + border-radius: var(--border-radius-default); + height: var(--timeline-image-size); + width: var(--timeline-image-size); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_typography.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_typography.scss index 2b001f304..4ae6d5956 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_typography.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_typography.scss @@ -11,51 +11,51 @@ ========================================================================== */ p { - line-height: $line-height-base * 1.25; - margin: 0 0 $spacing-small; + line-height: calc(var(--line-height-base) * 1.25); + margin: 0 0 var(--spacing-small); } .mx-title { - margin: $font-header-margin; - color: $font-color-header; - font-size: $font-size-h1; - font-weight: $font-weight-header; + margin: var(--font-header-margin); + color: var(--font-color-header); + font-size: var(--font-size-h1); + font-weight: var(--font-weight-header); } h1, .h1, .h1 > * { - font-size: $font-size-h1; + font-size: var(--font-size-h1); } h2, .h2, .h2 > * { - font-size: $font-size-h2; + font-size: var(--font-size-h2); } h3, .h3, .h3 > * { - font-size: $font-size-h3; + font-size: var(--font-size-h3); } h4, .h4, .h4 > * { - font-size: $font-size-h4; + font-size: var(--font-size-h4); } h5, .h5, .h5 > * { - font-size: $font-size-h5; + font-size: var(--font-size-h5); } h6, .h6, .h6 > * { - font-size: $font-size-h6; + font-size: var(--font-size-h6); } h1, @@ -70,9 +70,9 @@ .h4, .h5, .h6 { - margin: $font-header-margin; - color: $font-color-header; - font-weight: $font-weight-header; + margin: var(--font-header-margin); + color: var(--font-color-header); + font-weight: var(--font-weight-header); line-height: 1.3; } } diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss index 8e338f7ed..abe78e421 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss @@ -26,7 +26,7 @@ .mx-tooltip { .dijitTooltipContainer { border-width: 1px; - border-color: $gray-light; + border-color: var(--gray-300); border-radius: 4px; background: #ffffff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); @@ -47,7 +47,7 @@ border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent; - border-right-color: $gray-light; + border-right-color: var(--gray-300); } } @@ -141,7 +141,7 @@ margin-top: 0; // No top margin because there is no parent with margin bottom padding: 12px 8px; border-radius: 3px; - background: $brand-inverse; + background: var(--brand-primary-600); &:after { position: absolute; @@ -154,7 +154,7 @@ pointer-events: none; border: medium solid transparent; border-width: 8px; - border-bottom-color: $brand-inverse; + border-bottom-color: var(--brand-primary-600); } // Menu item @@ -176,7 +176,7 @@ background: none; .dijitMenuItemLabel { - background: $brand-primary; + background: var(--brand-primary); } } } @@ -184,7 +184,7 @@ // New label .tg_newlabelmenuitem { .dijitMenuItemLabel { - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); } } diff --git a/packages/atlas/src/themesource/atlas_core/web/design-properties.json b/packages/atlas/src/themesource/atlas_core/web/design-properties.json index 91cf67249..b064628bc 100644 --- a/packages/atlas/src/themesource/atlas_core/web/design-properties.json +++ b/packages/atlas/src/themesource/atlas_core/web/design-properties.json @@ -1,6 +1,123 @@ { + "FormBase": [ + { + "name": "Screen width", + "type": "ToggleButtonGroup", + "property": "--max-screen-width", + "options": [ + { + "name": "XXL", + "variable": "--screen-xxl" + }, + { + "name": "XL", + "variable": "--screen-xl" + }, + { + "name": "L", + "variable": "--screen-lg" + }, + { + "name": "M", + "variable": "--screen-md" + }, + { + "name": "S", + "variable": "--screen-sm" + } + ] + }, + { + "name": "Default item gap", + "type": "ToggleButtonGroup", + "property": "--gutter-size", + "options": [ + { + "name": "S", + "variable": "--spacing-small" + }, + { + "name": "M", + "variable": "--spacing-medium" + }, + { + "name": "L", + "variable": "--spacing-large" + } + ] + }, + { + "category": "Form", + "name": "Form orientation", + "description": "Determines the form orientation of input fields on the page.", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Vertical", + "class": "page-form-vertical" + }, + { + "name": "Horizontal", + "class": "page-form-horizontal" + } + ] + }, + { + "category": "Form", + "name": "Label width", + "description": "Determines the width of the input fields on the page.", + "type": "Dropdown", + "options": [ + { + "name": "1", + "class": "form-label-width-1" + }, + { + "name": "2", + "class": "form-label-width-2" + }, + { + "name": "3", + "class": "form-label-width-3" + }, + { + "name": "4", + "class": "form-label-width-4" + }, + { + "name": "5", + "class": "form-label-width-5" + }, + { + "name": "6", + "class": "form-label-width-6" + }, + { + "name": "7", + "class": "form-label-width-7" + }, + { + "name": "8", + "class": "form-label-width-8" + }, + { + "name": "9", + "class": "form-label-width-9" + }, + { + "name": "10", + "class": "form-label-width-10" + }, + { + "name": "11", + "class": "form-label-width-11" + } + ] + } + ], "Widget": [ { + "category": "Appearance", "name": "Spacing", "type": "Spacing", "description": "The spacing around a widget", @@ -192,62 +309,1662 @@ "oldNames": ["Hide on phone", "Hide On Phone"] }, { - "name": "Tablet", - "icon": "Atlas_Core.Atlas.tablet", - "class": "hide-tablet", - "oldNames": ["Hide on tablet", "Hide On Tablet"] + "name": "Tablet", + "icon": "Atlas_Core.Atlas.tablet", + "class": "hide-tablet", + "oldNames": ["Hide on tablet", "Hide On Tablet"] + }, + { + "name": "Desktop", + "icon": "Atlas_Core.Atlas.desktop", + "class": "hide-desktop", + "oldNames": ["Hide on desktop", "Hide On Desktop"] + } + ] + } + ], + "DivContainer": [ + { + "category": "Flex", + "name": "Flex container", + "type": "ToggleButtonGroup", + "description": "Sets the display type of the container to flex to align and distributes child elements within a flexible container.", + "options": [ + { + "name": "Horizontal (row)", + "class": "flex-row", + "icon": "Atlas_Core.Atlas_Styling.direction-horizontal" + }, + { + "name": "Vertical (column)", + "class": "flex-column", + "icon": "Atlas_Core.Atlas_Styling.direction-vertical" + } + ] + }, + { + "category": "Flex", + "name": "Item gap", + "property": "--flex-gap", + "type": "ToggleButtonGroup", + "description": "Adjust the space between items inside the flex container.", + "options": [ + { + "name": "None", + "variable": "--none" + }, + { + "name": "Small", + "variable": "--spacing-small" + }, + { + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-large" + } + ] + }, + { + "category": "Flex", + "name": "Align items X", + "type": "ToggleButtonGroup", + "description": "Distributes space between and around content items along the X axis.", + "options": [ + { + "name": "Left", + "class": "align-x-left", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-left" + }, + { + "name": "Center", + "class": "align-x-center", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-center" + }, + { + "name": "Right", + "class": "align-x-right", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-right" + }, + { + "name": "Space between (only for horizontal containers)", + "class": "align-x-between", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-between" + }, + { + "name": "Space around (only for horizontal containers)", + "class": "align-x-around", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-around" + }, + { + "name": "Space evenly (only for horizontal containers)", + "class": "align-x-evenly", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-even" + } + ] + }, + { + "category": "Flex", + "name": "Align items Y", + "type": "ToggleButtonGroup", + "description": "Distributes space between and around content items along the Y axis.", + "options": [ + { + "name": "Top", + "class": "align-y-top", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-top" + }, + { + "name": "Center", + "class": "align-y-center", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-center" + }, + { + "name": "Bottom", + "class": "align-y-bottom", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-bottom" + }, + { + "name": "Space between (only for vertical containers)", + "class": "align-y-between", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-between" + }, + { + "name": "Space around (only for vertical containers)", + "class": "align-y-around", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-around" + }, + { + "name": "Space evenly (only for vertical containers)", + "class": "align-y-evenly", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-even" + } + ] + }, + { + "category": "Flex", + "name": "Grow / shrink items", + "type": "ToggleButtonGroup", + "description": "Sets a responsive minimum width for its flex items.", + "options": [ + { + "name": "Fill container (only grow)", + "class": "flex-items-grow", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill" + }, + { + "name": "Hug content (only shrink)", + "class": "flex-items-shrink", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit" + }, + { + "name": "Auto (grow or shrink)", + "class": "flex-items-auto", + "icon": "Atlas_Core.Atlas.text-font" + }, + { + "name": "Fixed (neither shrink nor grow)", + "class": "flex-items-fixed", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed" + } + ] + }, + { + "category": "Flex", + "name": "Grow / shrink (self)", + "type": "Dropdown", + "property": "flex", + "description": "Defines whether it grows / shrinks relative to its parent based on available space. Use numbers to set a width relative to its siblings.", + "options": [ + { + "name": "Fill container (only grow)", + "variable": "--flex-grow", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill" + }, + { + "name": "Hug content (only shrink)", + "variable": "--flex-shrink", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit" + }, + { + "name": "Fixed (neither shrink nor grow)", + "variable": "--none", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed" + }, + { + "name": "1 (auto)", + "variable": "--flex-1" + }, + { + "name": "2", + "variable": "--flex-2" + }, + { + "name": "3", + "variable": "--flex-3" + }, + { + "name": "4", + "variable": "--flex-4" + }, + { + "name": "5", + "variable": "--flex-5" + }, + { + "name": "6", + "variable": "--flex-6" + }, + { + "name": "7", + "variable": "--flex-7" + }, + { + "name": "8", + "variable": "--flex-8" + }, + { + "name": "9", + "variable": "--flex-9" + }, + { + "name": "10", + "variable": "--flex-10" + }, + { + "name": "11", + "variable": "--flex-11" + }, + { + "name": "12", + "variable": "--flex-12" + } + ] + }, + { + "category": "Flex", + "name": "Default item size", + "type": "ToggleButtonGroup", + "description": "Sets a preferred responsive size (flex-basis and minimum width) for its flex items.", + "options": [ + { + "name": "Small", + "class": "flex-width flex-items-small" + }, + { + "name": "Medium", + "class": "flex-width flex-items-medium" + }, + { + "name": "Large", + "class": "flex-width flex-items-large" + } + ] + }, + { + "category": "Flex", + "name": "Preferred size (self)", + "type": "ToggleButtonGroup", + "description": "Sets a preferred responsive size (flex-basis and minimum width) for itself.", + "options": [ + { + "name": "Small", + "class": "flex-width flex-small" + }, + { + "name": "Medium", + "class": "flex-width flex-medium" + }, + { + "name": "Large", + "class": "flex-width flex-large" + } + ] + }, + { + "category": "Flex", + "name": "Disable row wrap", + "type": "Toggle", + "class": "flex-nowrap" + }, + { + "category": "Appearance", + "name": "Card style", + "type": "Toggle", + "description": "Render container as card", + "class": "card" + }, + { + "category": "Appearance", + "name": "Background color", + "type": "ColorPicker", + "description": "Change the background color of the container.", + "options": [ + { + "name": "Background Primary", + "oldNames": ["Background Default"], + "preview": "--bg-color", + "class": "background-main" + }, + { + "name": "Background Secondary", + "oldNames": ["Background Dashboard"], + "preview": "--bg-color-secondary", + "class": "background-secondary" + }, + { + "name": "Brand Primary", + "oldNames": ["Primary"], + "preview": "--brand-primary", + "class": "background-primary" + }, + { + "name": "Brand Secondary", + "oldNames": ["Default", "Brand Default"], + "class": "background-default", + "preview": "--brand-default" + }, + { + "name": "Brand Success", + "oldNames": ["Success"], + "preview": "--brand-success", + "class": "background-success" + }, + { + "name": "Brand Warning", + "oldNames": ["Warning"], + "preview": "--brand-warning", + "class": "background-warning" + }, + { + "name": "Brand Danger", + "oldNames": ["Danger"], + "preview": "--brand-danger", + "class": "background-danger" + } + ] + }, + { + "category": "Appearance", + "name": "Shade", + "type": "ColorPicker", + "options": [ + { + "name": "50 (lightest)", + "class": "shade-50", + "preview": "--gray-50" + }, + { + "name": "100", + "class": "shade-100", + "preview": "--gray-100" + }, + { + "name": "200", + "class": "shade-200", + "oldNames": ["Light"], + "preview": "--gray-200" + }, + { + "name": "300", + "class": "shade-300", + "preview": "--gray-300" + }, + { + "name": "400", + "class": "shade-400", + "preview": "--gray-400" + }, + { + "name": "500 (medium)", + "class": "shade-500", + "preview": "--gray-500" + }, + { + "name": "600", + "class": "shade-600", + "oldNames": ["Dark"], + "preview": "--gray-600" + }, + { + "name": "700", + "class": "shade-700", + "preview": "--gray-700" + }, + { + "name": "800", + "class": "shade-800", + "preview": "--gray-800" + }, + { + "name": "900 (darkest)", + "class": "shade-900", + "preview": "--gray-900" + } + ] + }, + { + "category": "Borders", + "name": "Borders", + "type": "ToggleButtonGroup", + "multiSelect": true, + "description": "Show a border on specific sides only", + "options": [ + { + "name": "None", + "class": "div-border-toggle-none", + "icon": "Atlas_Core.Atlas_Styling.none" + }, + { + "name": "All", + "class": "div-border-toggle-all", + "icon": "Atlas_Core.Atlas_Styling.borders-all" + }, + { + "name": "Top", + "class": "div-border-toggle-top", + "icon": "Atlas_Core.Atlas_Styling.borders-top" + }, + { + "name": "Right", + "class": "div-border-toggle-right", + "icon": "Atlas_Core.Atlas_Styling.borders-right" + }, + { + "name": "Left", + "class": "div-border-toggle-left", + "icon": "Atlas_Core.Atlas_Styling.borders-left" + }, + { + "name": "Bottom", + "class": "div-border-toggle-bottom", + "icon": "Atlas_Core.Atlas_Styling.borders-bottom" + } + ] + }, + { + "category": "Borders", + "name": "Border style", + "property": "--div-border-style", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Solid", + "variable": "--border-style-solid", + "icon": "Atlas_Core.Atlas_Styling.border-style-solid" + }, + { + "name": "Dashed", + "variable": "--border-style-dashed", + "icon": "Atlas_Core.Atlas_Styling.border-style-dashed" + }, + { + "name": "Dotted", + "variable": "--border-style-dotted", + "icon": "Atlas_Core.Atlas_Styling.border-style-dotted" + } + ] + }, + { + "category": "Borders", + "name": "Border width", + "type": "ToggleButtonGroup", + "property": "border-width", + "options": [ + { + "name": "Thin", + "variable": "--border-width-thin", + "icon": "Atlas_Core.Atlas_Styling.border-width-thin" + }, + { + "name": "Medium", + "variable": "--border-width-medium", + "icon": "Atlas_Core.Atlas_Styling.border-width-medium" + }, + { + "name": "Thick", + "variable": "--border-width-thick", + "icon": "Atlas_Core.Atlas_Styling.border-width-thick" + } + ] + }, + { + "category": "Borders", + "name": "Border color", + "type": "ColorPicker", + "property": "border-color", + "options": [ + { + "name": "Default", + "variable": "--border-color-default" + }, + { + "name": "Primary", + "variable": "--brand-primary" + }, + { + "name": "Success", + "variable": "--brand-success" + }, + { + "name": "Warning", + "variable": "--brand-warning" + }, + { + "name": "Danger", + "variable": "--brand-danger" + } + ] + }, + { + "category": "Borders", + "name": "Border radius", + "type": "ToggleButtonGroup", + "description": "Set a border radius for rounded borders", + "property": "border-radius", + "options": [ + { + "name": "None", + "variable": "--none", + "icon": "Atlas_Core.Atlas_Styling.none" + }, + { + "name": "Small", + "variable": "--border-radius-s", + "icon": "Atlas_Core.Atlas_Styling.border-radius-small" + }, + { + "name": "Medium", + "variable": "--border-radius-m", + "icon": "Atlas_Core.Atlas_Styling.border-radius-medium" + }, + { + "name": "Large", + "variable": "--border-radius-l", + "icon": "Atlas_Core.Atlas_Styling.border-radius-large" + } + ] + }, + { + "category": "Appearance", + "name": "Shadow", + "oldNames": ["Add shadow"], + "type": "ToggleButtonGroup", + "description": "Add a shadow to this element", + "options": [ + { + "name": "None", + "class": "shadow-none" + }, + { + "name": "Small", + "class": "shadow-small" + }, + { + "name": "Medium", + "class": "shadow-medium" + }, + { + "name": "Large", + "class": "shadow-large" + } + ] + }, + { + "name": "Overflow", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Visible", + "class": "div-overflow-visible" + }, + { + "name": "Hidden", + "class": "div-overflow-hidden" + }, + { + "name": "Auto", + "class": "div-overflow-auto" + } + ] + }, + { + "name": "Align content (deprecated)", + "type": "Dropdown", + "oldNames": ["Align content"], + "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.", + "options": [ + { + "name": "Left align as a row", + "oldNames": ["Left align as row"], + "class": "row-left" + }, + { + "name": "Center align as a row", + "oldNames": ["Center align as row"], + "class": "row-center" + }, + { + "name": "Right align as a row", + "oldNames": ["Right align as row"], + "class": "row-right" + }, + { + "name": "Left align as a column", + "oldNames": ["Left align as column"], + "class": "col-left" + }, + { + "name": "Center align as a column", + "oldNames": ["Center align as column"], + "class": "col-center" + }, + { + "name": "Right align as a column", + "oldNames": ["Right align as column"], + "class": "col-right" + } + ] + } + ], + "Button": [ + { + "category": "Appearance", + "name": "Size", + "type": "ToggleButtonGroup", + "description": "Size of the buttons", + "options": [ + { + "name": "Small", + "icon": "Atlas_Core.Atlas.resize-small", + "class": "btn-sm" + }, + { + "name": "Large", + "icon": "Atlas_Core.Atlas.resize-full", + "class": "btn-lg" + } + ] + }, + { + "category": "Appearance", + "name": "Weight", + "oldNames": ["Font Weight"], + "type": "ToggleButtonGroup", + "description": "Emphasize the text with a heavier or lighter font weight", + "options": [ + { + "name": "Light", + "class": "text-light" + }, + { + "name": "Normal", + "class": "text-normal" + }, + { + "name": "Semibold", + "class": "text-semibold" + }, + { + "name": "Bold", + "class": "text-bold" + } + ] + }, + { + "category": "Appearance", + "name": "Align icon", + "type": "ToggleButtonGroup", + "description": "Place the icon to the right or on top of the button.", + "options": [ + { + "name": "Right", + "icon": "Atlas_Core.Atlas.align-right", + "class": "btn-icon-right" + }, + { + "name": "Top", + "icon": "Atlas_Core.Atlas.align-top", + "class": "btn-icon-top" + } + ] + }, + { + "category": "Appearance", + "name": "Style", + "type": "ToggleButtonGroup", + "description": "Set button style", + "options": [ + { + "name": "Icon button", + "class": "btn-style-icon" + } + ] + }, + { + "category": "Appearance", + "name": "Full width", + "type": "Toggle", + "description": "Extend the button to the full width of the container it is placed in.", + "class": "btn-block" + }, + { + "category": "Appearance", + "name": "Border", + "oldNames": ["Bordered"], + "type": "Toggle", + "description": "Style the button with a transparent background, a colored border, and colored text.", + "class": "btn-bordered" + } + ], + "ListView": [ + { + "name": "Style", + "type": "ToggleButtonGroup", + "description": "Change the appearance of rows in the list view.", + "options": [ + { + "name": "Lined", + "class": "listview-lined" + }, + { + "name": "Striped", + "class": "listview-striped" + }, + { + "name": "Bordered", + "class": "listview-bordered" + }, + { + "name": "No styling", + "oldNames": ["No Styling"], + "class": "listview-stylingless" + } + ] + }, + { + "name": "Hover style", + "type": "Toggle", + "description": "Highlight a row when hovering over it. Only useful when the row is clickable.", + "class": "listview-hover" + }, + { + "name": "Row size", + "oldNames": ["Row Size"], + "type": "ToggleButtonGroup", + "description": "Change the row spacing of the list view.", + "options": [ + { + "name": "Small", + "icon": "Atlas_Core.Atlas.resize-small", + "class": "listview-sm" + }, + { + "name": "Large", + "icon": "Atlas_Core.Atlas.resize-full", + "class": "listview-lg" + } + ] + } + ], + "LayoutGrid": [ + { + "category": "Column style", + "name": "Card style", + "type": "ToggleButtonGroup", + "description": "Makes the columns appear as cards.", + "multiSelect": true, + "options": [ + { + "name": "Single", + "class": "card-grid" + }, + { + "name": "Multi", + "oldNames": ["Cards style"], + "class": "cards" + } + ] + }, + { + "category": "Column style", + "name": "Background color", + "oldNames": [ + "Column background" + ], + "type": "ColorPicker", + "property": "--layoutgrid-column-bg", + "description": "Change the background color of the columns.", + "options": [ + { + "name": "Background Primary", + "variable": "--bg-color" + }, + { + "name": "Background Secondary", + "variable": "--bg-color-secondary" + }, + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Brand Secondary", + "variable": "--brand-default" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + } + ] + }, + { + "category": "Gap", + "name": "Column gap", + "property": "--layoutgrid-column-gap", + "type": "ToggleButtonGroup", + "description": "Sets a gap between the layout grid columns.", + "options": [ + { + "name": "None", + "variable": "--spacing-none" + }, + { + "name": "Small", + "variable": "--spacing-small" + }, + { + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-large" + } + ] + }, + { + "category": "Gap", + "name": "Row gap", + "property": "--layoutgrid-row-gap", + "type": "ToggleButtonGroup", + "description": "Sets a gap between the layout grid rows.", + "options": [ + { + "name": "None", + "variable": "--none" + }, + { + "name": "Small", + "variable": "--spacing-small" + }, + { + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-large" + } + ] + } + ], + "LayoutGridRow": [ + { + "category": "Appearance", + "name": "Spacing", + "type": "Spacing", + "description": "The spacing around a widget", + "margin": [ + { + "name": "None", + "top": { + "class": "spacing-outer-top-none" + }, + "right": { + "class": "spacing-outer-right-none" + }, + "bottom": { + "class": "spacing-outer-bottom-none" + }, + "left": { + "class": "spacing-outer-left-none" + } + }, + { + "name": "S", + "top": { + "class": "spacing-outer-top" + }, + "right": { + "class": "spacing-outer-right" + }, + "bottom": { + "class": "spacing-outer-bottom" + }, + "left": { + "class": "spacing-outer-left" + } + }, + { + "name": "M", + "top": { + "class": "spacing-outer-top-medium" + }, + "right": { + "class": "spacing-outer-right-medium" + }, + "bottom": { + "class": "spacing-outer-bottom-medium" + }, + "left": { + "class": "spacing-outer-left-medium" + } + }, + { + "name": "L", + "top": { + "class": "spacing-outer-top-large" + }, + "right": { + "class": "spacing-outer-right-large" + }, + "bottom": { + "class": "spacing-outer-bottom-large" + }, + "left": { + "class": "spacing-outer-left-large" + } + } + ], + "padding": [ + { + "name": "None", + "top": { + "class": "spacing-inner-top-none" + }, + "right": { + "class": "spacing-inner-right-none" + }, + "bottom": { + "class": "spacing-inner-bottom-none" + }, + "left": { + "class": "spacing-inner-left-none" + } + }, + { + "name": "S", + "top": { + "class": "spacing-inner-top" + }, + "right": { + "class": "spacing-inner-right" + }, + "bottom": { + "class": "spacing-inner-bottom" + }, + "left": { + "class": "spacing-inner-left" + } + }, + { + "name": "M", + "top": { + "class": "spacing-inner-top-medium" + }, + "right": { + "class": "spacing-inner-right-medium" + }, + "bottom": { + "class": "spacing-inner-bottom-medium" + }, + "left": { + "class": "spacing-inner-left-medium" + } + }, + { + "name": "L", + "top": { + "class": "spacing-inner-top-large" + }, + "right": { + "class": "spacing-inner-right-large" + }, + "bottom": { + "class": "spacing-inner-bottom-large" + }, + "left": { + "class": "spacing-inner-left-large" + } + } + ] + }, + { + "name": "Hide on", + "description": "Hide on device type", + "multiSelect": true, + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Phone", + "icon": "Atlas_Core.Atlas.mobile-phone", + "class": "hide-phone" + }, + { + "name": "Tablet", + "icon": "Atlas_Core.Atlas.tablet", + "class": "hide-tablet" + }, + { + "name": "Desktop", + "icon": "Atlas_Core.Atlas.desktop", + "class": "hide-desktop" + } + ] + }, + { + "category": "Column style", + "name": "Cards style", + "type": "Toggle", + "description": "Makes the columns appear as cards.", + "class": "cards" + }, + { + "category": "Column style", + "name": "Background color", + "type": "ColorPicker", + "property": "--layoutgrid-column-bg", + "description": "Change the background color of the columns.", + "options": [ + { + "name": "Background Primary", + "variable": "--bg-color" + }, + { + "name": "Background Secondary", + "variable": "--bg-color-secondary" + }, + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Brand Secondary", + "variable": "--brand-default" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + } + ] + }, + { + "category": "Gap", + "name": "Column gap", + "property": "--layoutgrid-column-gap", + "type": "ToggleButtonGroup", + "description": "Sets a gap between the layout grid columns.", + "options": [ + { + "name": "None", + "variable": "--spacing-none" + }, + { + "name": "Small", + "variable": "--spacing-small" + }, + { + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-large" + } + ] + } + ], + "LayoutGridColumn": [ + { + "category": "Appearance", + "name": "Spacing", + "type": "Spacing", + "description": "The spacing around a widget", + "margin": [ + { + "name": "None", + "top": { + "class": "spacing-outer-top-none" + }, + "right": { + "class": "spacing-outer-right-none" + }, + "bottom": { + "class": "spacing-outer-bottom-none" + }, + "left": { + "class": "spacing-outer-left-none" + } + }, + { + "name": "S", + "top": { + "class": "spacing-outer-top" + }, + "right": { + "class": "spacing-outer-right" + }, + "bottom": { + "class": "spacing-outer-bottom" + }, + "left": { + "class": "spacing-outer-left" + } + }, + { + "name": "M", + "top": { + "class": "spacing-outer-top-medium" + }, + "right": { + "class": "spacing-outer-right-medium" + }, + "bottom": { + "class": "spacing-outer-bottom-medium" + }, + "left": { + "class": "spacing-outer-left-medium" + } + }, + { + "name": "L", + "top": { + "class": "spacing-outer-top-large" + }, + "right": { + "class": "spacing-outer-right-large" + }, + "bottom": { + "class": "spacing-outer-bottom-large" + }, + "left": { + "class": "spacing-outer-left-large" + } + } + ], + "padding": [ + { + "name": "None", + "top": { + "class": "spacing-inner-top-none" + }, + "right": { + "class": "spacing-inner-right-none" + }, + "bottom": { + "class": "spacing-inner-bottom-none" + }, + "left": { + "class": "spacing-inner-left-none" + } + }, + { + "name": "S", + "top": { + "class": "spacing-inner-top" + }, + "right": { + "class": "spacing-inner-right" + }, + "bottom": { + "class": "spacing-inner-bottom" + }, + "left": { + "class": "spacing-inner-left" + } + }, + { + "name": "M", + "top": { + "class": "spacing-inner-top-medium" + }, + "right": { + "class": "spacing-inner-right-medium" + }, + "bottom": { + "class": "spacing-inner-bottom-medium" + }, + "left": { + "class": "spacing-inner-left-medium" + } + }, + { + "name": "L", + "top": { + "class": "spacing-inner-top-large" + }, + "right": { + "class": "spacing-inner-right-large" + }, + "bottom": { + "class": "spacing-inner-bottom-large" + }, + "left": { + "class": "spacing-inner-left-large" + } + } + ] + }, + { + "name": "Hide on", + "description": "Hide on device type", + "multiSelect": true, + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Phone", + "icon": "Atlas_Core.Atlas.mobile-phone", + "class": "hide-phone" + }, + { + "name": "Tablet", + "icon": "Atlas_Core.Atlas.tablet", + "class": "hide-tablet" + }, + { + "name": "Desktop", + "icon": "Atlas_Core.Atlas.desktop", + "class": "hide-desktop" + } + ] + }, + { + "category": "Flex", + "name": "Flex container", + "type": "ToggleButtonGroup", + "description": "Sets the display type of the container to flex to align and distributes child elements within a flexible container.", + "options": [ + { + "name": "Horizontal (row)", + "class": "flex-row", + "icon": "Atlas_Core.Atlas_Styling.direction-horizontal" + }, + { + "name": "Vertical (column)", + "class": "flex-column", + "icon": "Atlas_Core.Atlas_Styling.direction-vertical" + } + ] + }, + { + "category": "Flex", + "name": "Item gap", + "property": "--flex-gap", + "type": "ToggleButtonGroup", + "description": "Adjust the space between items inside the flex container.", + "options": [ + { + "name": "None", + "variable": "--none" + }, + { + "name": "Small", + "variable": "--spacing-small" + }, + { + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-large" + } + ] + }, + { + "category": "Flex", + "name": "Align items X", + "type": "ToggleButtonGroup", + "description": "Distributes space between and around content items along the X axis.", + "options": [ + { + "name": "Left", + "class": "align-x-left", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-left" + }, + { + "name": "Center", + "class": "align-x-center", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-center" + }, + { + "name": "Right", + "class": "align-x-right", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-right" + }, + { + "name": "Space between (only for horizontal containers)", + "class": "align-x-between", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-between" + }, + { + "name": "Space around (only for horizontal containers)", + "class": "align-x-around", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-around" + }, + { + "name": "Space evenly (only for horizontal containers)", + "class": "align-x-evenly", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-even" + } + ] + }, + { + "category": "Flex", + "name": "Align items Y", + "type": "ToggleButtonGroup", + "description": "Distributes space between and around content items along the Y axis.", + "options": [ + { + "name": "Top", + "class": "align-y-top", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-top" + }, + { + "name": "Center", + "class": "align-y-center", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-center" + }, + { + "name": "Bottom", + "class": "align-y-bottom", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-bottom" + }, + { + "name": "Space between (only for vertical containers)", + "class": "align-y-between", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-between" + }, + { + "name": "Space around (only for vertical containers)", + "class": "align-y-around", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-around" + }, + { + "name": "Space evenly (only for vertical containers)", + "class": "align-y-evenly", + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-even" + } + ] + }, + { + "category": "Flex", + "name": "Grow / shrink", + "type": "ToggleButtonGroup", + "description": "Sets a responsive minimum width for its flex items.", + "options": [ + { + "name": "Fill container (only grow)", + "class": "flex-items-grow", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill" + }, + { + "name": "Hug content (only shrink)", + "class": "flex-items-shrink", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit" + }, + { + "name": "Auto (grow or shrink)", + "class": "flex-items-auto", + "icon": "Atlas_Core.Atlas.text-font" + }, + { + "name": "Fixed (neither shrink nor grow)", + "class": "flex-items-fixed", + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed" + } + ] + }, + { + "category": "Flex", + "name": "Default item size", + "type": "ToggleButtonGroup", + "description": "Sets a preferred responsive size (flex-basis and minimum width) for its flex items.", + "options": [ + { + "name": "Small", + "class": "flex-width flex-items-small" + }, + { + "name": "Medium", + "class": "flex-width flex-items-medium" + }, + { + "name": "Large", + "class": "flex-width flex-items-large" + } + ] + }, + { + "category": "Flex", + "name": "Disable row wrap", + "type": "Toggle", + "class": "flex-nowrap" + }, + { + "category": "Appearance", + "name": "Card style", + "type": "Toggle", + "description": "Render container as card", + "class": "card" + }, + { + "category": "Appearance", + "name": "Background color", + "type": "ColorPicker", + "property": "--layoutgrid-column-bg", + "description": "Change the background color of the columns.", + "options": [ + { + "name": "Background Primary", + "variable": "--bg-color" + }, + { + "name": "Background Secondary", + "variable": "--bg-color-secondary" + }, + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Brand Secondary", + "variable": "--brand-default" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + } + ] + }, + { + "category": "Borders", + "name": "Borders", + "type": "ToggleButtonGroup", + "multiSelect": true, + "description": "Show a border on specific sides only", + "options": [ + { + "name": "None", + "class": "div-border-toggle-none", + "icon": "Atlas_Core.Atlas_Styling.none" + }, + { + "name": "All", + "class": "div-border-toggle-all", + "icon": "Atlas_Core.Atlas_Styling.borders-all" + }, + { + "name": "Top", + "class": "div-border-toggle-top", + "icon": "Atlas_Core.Atlas_Styling.borders-top" + }, + { + "name": "Right", + "class": "div-border-toggle-right", + "icon": "Atlas_Core.Atlas_Styling.borders-right" + }, + { + "name": "Left", + "class": "div-border-toggle-left", + "icon": "Atlas_Core.Atlas_Styling.borders-left" + }, + { + "name": "Bottom", + "class": "div-border-toggle-bottom", + "icon": "Atlas_Core.Atlas_Styling.borders-bottom" + } + ] + }, + { + "category": "Borders", + "name": "Border style", + "property": "--div-border-style", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Solid", + "variable": "--border-style-solid", + "icon": "Atlas_Core.Atlas_Styling.border-style-solid" + }, + { + "name": "Dashed", + "variable": "--border-style-dashed", + "icon": "Atlas_Core.Atlas_Styling.border-style-dashed" + }, + { + "name": "Dotted", + "variable": "--border-style-dotted", + "icon": "Atlas_Core.Atlas_Styling.border-style-dotted" + } + ] + }, + { + "category": "Borders", + "name": "Border width", + "type": "ToggleButtonGroup", + "property": "border-width", + "options": [ + { + "name": "Thin", + "variable": "--border-width-thin", + "icon": "Atlas_Core.Atlas_Styling.border-width-thin" + }, + { + "name": "Medium", + "variable": "--border-width-medium", + "icon": "Atlas_Core.Atlas_Styling.border-width-medium" + }, + { + "name": "Thick", + "variable": "--border-width-thick", + "icon": "Atlas_Core.Atlas_Styling.border-width-thick" + } + ] + }, + { + "category": "Borders", + "name": "Border color", + "type": "ColorPicker", + "property": "border-color", + "options": [ + { + "name": "Default", + "variable": "--border-color-default" + }, + { + "name": "Primary", + "variable": "--brand-primary" + }, + { + "name": "Success", + "variable": "--brand-success" + }, + { + "name": "Warning", + "variable": "--brand-warning" + }, + { + "name": "Danger", + "variable": "--brand-danger" + } + ] + }, + { + "category": "Borders", + "name": "Border radius", + "type": "ToggleButtonGroup", + "description": "Set a border radius for rounded borders", + "property": "border-radius", + "options": [ + { + "name": "None", + "variable": "--none", + "icon": "Atlas_Core.Atlas_Styling.none" + }, + { + "name": "Small", + "variable": "--border-radius-s", + "icon": "Atlas_Core.Atlas_Styling.border-radius-small" + }, + { + "name": "Medium", + "variable": "--border-radius-m", + "icon": "Atlas_Core.Atlas_Styling.border-radius-medium" }, { - "name": "Desktop", - "icon": "Atlas_Core.Atlas.desktop", - "class": "hide-desktop", - "oldNames": ["Hide on desktop", "Hide On Desktop"] + "name": "Large", + "variable": "--border-radius-l", + "icon": "Atlas_Core.Atlas_Styling.border-radius-large" } ] - } - ], - "DivContainer": [ + }, { - "name": "Align content", - "type": "Dropdown", - "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.", + "category": "Appearance", + "name": "Shadow", + "type": "ToggleButtonGroup", + "description": "Add a shadow to this element", "options": [ { - "name": "Left align as a row", - "oldNames": ["Left align as row"], - "class": "row-left" + "name": "None", + "class": "shadow-none" }, { - "name": "Center align as a row", - "oldNames": ["Center align as row"], - "class": "row-center" + "name": "Small", + "class": "shadow-small" }, { - "name": "Right align as a row", - "oldNames": ["Right align as row"], - "class": "row-right" + "name": "Medium", + "class": "shadow-medium" }, { - "name": "Left align as a column", - "oldNames": ["Left align as column"], - "class": "col-left" + "name": "Large", + "class": "shadow-large" + } + ] + }, + { + "name": "Overflow", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Visible", + "class": "div-overflow-visible" }, { - "name": "Center align as a column", - "oldNames": ["Center align as column"], - "class": "col-center" + "name": "Hidden", + "class": "div-overflow-hidden" }, { - "name": "Right align as a column", - "oldNames": ["Right align as column"], - "class": "col-right" + "name": "Auto", + "class": "div-overflow-auto" } ] - }, + } + ], + "DataView": [ { + "category": "Appearance", "name": "Background color", "type": "ColorPicker", - "description": "Change the background color of the container.", + "description": "Change the background color of the main container.", "options": [ { "name": "Background Primary", @@ -290,151 +2007,117 @@ "oldNames": ["Danger"], "preview": "--brand-danger", "class": "background-danger" - }, - { - "name": "Brand Gradient", - "preview": "--brand-gradient", - "class": "background-brand-gradient" } ] }, { + "category": "Appearance", "name": "Shade", - "type": "ToggleButtonGroup", - "description": "Apply a shade to your background color", + "type": "ColorPicker", "options": [ { - "name": "Light", - "class": "background-light" + "name": "50 (lightest)", + "class": "shade-50", + "preview": "--gray-50" }, { - "name": "Dark", - "class": "background-dark" - } - ] - }, - { - "name": "Shadow", - "oldNames": ["Add shadow"], - "type": "ToggleButtonGroup", - "description": "Add a shadow to this element", - "options": [ + "name": "100", + "class": "shade-100", + "preview": "--gray-100" + }, { - "name": "Small", - "class": "shadow-small" + "name": "200", + "class": "shade-200", + "oldNames": ["Light"], + "preview": "--gray-200" }, { - "name": "Medium", - "class": "shadow-medium" + "name": "300", + "class": "shade-300", + "preview": "--gray-300" }, { - "name": "Large", - "class": "shadow-large" - } - ] - } - ], - "Button": [ - { - "name": "Size", - "type": "ToggleButtonGroup", - "description": "Size of the buttons", - "options": [ + "name": "400", + "class": "shade-400", + "preview": "--gray-400" + }, { - "name": "Small", - "icon": "Atlas_Core.Atlas.resize-small", - "class": "btn-sm" + "name": "500 (medium)", + "class": "shade-500", + "preview": "--gray-500" }, { - "name": "Large", - "icon": "Atlas_Core.Atlas.resize-full", - "class": "btn-lg" - } - ] - }, - { - "name": "Align icon", - "type": "ToggleButtonGroup", - "description": "Place the icon to the right or on top of the button.", - "options": [ + "name": "600", + "class": "shade-600", + "oldNames": ["Dark"], + "preview": "--gray-600" + }, { - "name": "Right", - "icon": "Atlas_Core.Atlas.align-right", - "class": "btn-icon-right" + "name": "700", + "class": "shade-700", + "preview": "--gray-700" }, { - "name": "Top", - "icon": "Atlas_Core.Atlas.align-top", - "class": "btn-icon-top" + "name": "800", + "class": "shade-800", + "preview": "--gray-800" + }, + { + "name": "900 (darkest)", + "class": "shade-900", + "preview": "--gray-900" } ] }, { - "name": "Full width", - "type": "Toggle", - "description": "Extend the button to the full width of the container it is placed in.", - "class": "btn-block" - }, - { - "name": "Border", - "oldNames": ["Bordered"], - "type": "Toggle", - "description": "Style the button with a transparent background, a colored border, and colored text.", - "class": "btn-bordered" - } - ], - "ListView": [ - { - "name": "Style", - "type": "ToggleButtonGroup", - "description": "Change the appearance of rows in the list view.", + "category": "Appearance", + "name": "Background footer", + "type": "ColorPicker", + "oldNames": ["Background color footer"], + "property": "--dataview-controls-bg", + "description": "Change the background color of the footer.", "options": [ { - "name": "Lined", - "class": "listview-lined" + "name": "Background Primary", + "oldNames": ["Background Default"], + "variable": "--bg-color" }, { - "name": "Striped", - "class": "listview-striped" + "name": "Background Secondary", + "oldNames": ["Background Dashboard"], + "variable": "--bg-color-secondary" }, { - "name": "Bordered", - "class": "listview-bordered" + "name": "Brand Primary", + "oldNames": ["Primary"], + "variable": "--brand-primary" }, { - "name": "No styling", - "oldNames": ["No Styling"], - "class": "listview-stylingless" - } - ] - }, - { - "name": "Hover style", - "type": "Toggle", - "description": "Highlight a row when hovering over it. Only useful when the row is clickable.", - "class": "listview-hover" - }, - { - "name": "Row size", - "oldNames": ["Row Size"], - "type": "ToggleButtonGroup", - "description": "Change the row spacing of the list view.", - "options": [ + "name": "Brand Secondary", + "oldNames": ["Default", "Brand Default"], + "variable": "--background-default" + }, { - "name": "Small", - "icon": "Atlas_Core.Atlas.resize-small", - "class": "listview-sm" + "name": "Brand Success", + "oldNames": ["Success"], + "variable": "--brand-success" }, { - "name": "Large", - "icon": "Atlas_Core.Atlas.resize-full", - "class": "listview-lg" + "name": "Brand Warning", + "oldNames": ["Warning"], + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "oldNames": ["Danger"], + "variable": "--bg-danger" } ] } ], "DataGrid": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Choose one of the following styles to change the appearance of the data grid.", @@ -454,12 +2137,14 @@ ] }, { + "category": "Appearance", "name": "Hover style", "type": "Toggle", "description": "Enable data grid hover to make the rows hoverable.", "class": "datagrid-hover" }, { + "category": "Appearance", "name": "Row size", "type": "ToggleButtonGroup", "description": "Increase or decrease the row spacing of the data grid row.", @@ -479,6 +2164,7 @@ ], "TemplateGrid": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Choose one of the following styles to change the appearance of the template grid.", @@ -502,6 +2188,7 @@ ] }, { + "category": "Appearance", "name": "Hover style", "type": "Toggle", "description": "Enable template grid hover to make the rows hoverable.", @@ -510,6 +2197,7 @@ ], "GroupBox": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "Choose one of the following styles to change the appearance of the groupbox.", @@ -552,6 +2240,7 @@ ] }, { + "category": "Appearance", "name": "Callout style", "type": "Toggle", "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.", @@ -560,6 +2249,7 @@ ], "StaticImageViewer": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Choose the style of your image.", @@ -579,12 +2269,14 @@ ] }, { + "category": "Appearance", "name": "Center", "type": "Toggle", "description": "Align the image in the center of an element.", "class": "img-center" }, { + "category": "Appearance", "name": "Fit", "type": "Dropdown", "description": "Choose the image fit.", @@ -610,6 +2302,7 @@ ], "DynamicImageViewer": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Choose the style of your image.", @@ -629,12 +2322,14 @@ ] }, { + "category": "Appearance", "name": "Center", "type": "Toggle", "description": "Align the image in the center of an element.", "class": "img-center" }, { + "category": "Appearance", "name": "Fit", "type": "Dropdown", "description": "Choose the image fit.", @@ -660,6 +2355,7 @@ ], "Label": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "Change the appearance of a label.", @@ -699,6 +2395,7 @@ ], "TabContainer": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Change the appearance of the tab container", @@ -722,6 +2419,7 @@ ] }, { + "category": "Appearance", "name": "Tab position", "oldNames": ["Tab Position"], "type": "ToggleButtonGroup", @@ -745,6 +2443,7 @@ ] }, { + "category": "Appearance", "name": "Justify", "type": "Toggle", "description": "Justify the tabs to 100%", @@ -753,6 +2452,7 @@ ], "DynamicText": [ { + "category": "Typography", "name": "Size", "type": "ToggleButtonGroup", "description": "Make the text smaller or larger.", @@ -770,6 +2470,7 @@ ] }, { + "category": "Typography", "name": "Weight", "oldNames": ["Font Weight"], "type": "ToggleButtonGroup", @@ -794,6 +2495,7 @@ ] }, { + "category": "Typography", "name": "Color", "type": "ColorPicker", "description": "Change the color of text.", @@ -815,9 +2517,9 @@ "preview": "--brand-primary" }, { - "name": "Brand Secondary", - "oldNames": ["Default", "Brand Default"], - "class": "text-secondary", + "name": "Default", + "oldNames": ["Default", "Brand Default", "Brand Secondary"], + "class": "text-default", "preview": "--font-color-default" }, { @@ -839,13 +2541,68 @@ "preview": "--brand-danger" }, { - "name": "White", + "name": "Contrast", "class": "text-white", - "preview": "white" + "preview": "--font-color-contrast", + "oldNames": ["White"] + } + ] + }, + { + "category": "Typography", + "name": "Color shade", + "type": "ColorPicker", + "description": "Set the shade of the brand color.", + "options": [ + { + "name": "100", + "class": "shade-100", + "preview": "--gray-100" + }, + { + "name": "200", + "class": "shade-200", + "preview": "--gray-200" + }, + { + "name": "300", + "class": "shade-300", + "preview": "--gray-300" + }, + { + "name": "400", + "class": "shade-400", + "preview": "--gray-400" + }, + { + "name": "500", + "class": "shade-500", + "preview": "--gray-500" + }, + { + "name": "600", + "class": "shade-600", + "preview": "--gray-600" + }, + { + "name": "700", + "class": "shade-700", + "preview": "--gray-700" + }, + { + "name": "800", + "class": "shade-800", + "preview": "--gray-800" + }, + { + "name": "900", + "class": "shade-900", + "preview": "--gray-900" } ] }, { + "category": "Typography", "name": "Alignment", "type": "ToggleButtonGroup", "description": "Align the text.", @@ -868,6 +2625,7 @@ ] }, { + "category": "Typography", "name": "Letter case", "oldNames": ["Transform"], "type": "ToggleButtonGroup", @@ -890,6 +2648,7 @@ ] }, { + "category": "Typography", "name": "Wrap options", "type": "ToggleButtonGroup", "description": "Break long words and sentences into multiple lines.", @@ -908,6 +2667,7 @@ ], "Table": [ { + "category": "Appearance", "name": "Style", "type": "ToggleButtonGroup", "description": "Change the appearance of cells in the table.", @@ -923,6 +2683,7 @@ ] }, { + "category": "Appearance", "name": "Compact", "type": "Toggle", "description": "Change the spacing between cells to be compact.", @@ -931,6 +2692,7 @@ ], "com.mendix.widget.custom.badge.Badge": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "The brand style affecting this element's appearance.", @@ -965,12 +2727,14 @@ ], "com.mendix.widget.custom.progressbar.ProgressBar": [ { + "category": "Appearance", "name": "Striped bar", "type": "Toggle", "description": "Striped progress bar", "class": "progress-striped" }, { + "category": "Appearance", "name": "Bar color", "type": "ColorPicker", "description": "Color of the progress bar", @@ -998,6 +2762,7 @@ ] }, { + "category": "Appearance", "name": "Size", "type": "ToggleButtonGroup", "description": "Size of the progress bar", @@ -1019,6 +2784,7 @@ ], "com.mendix.widget.custom.badgebutton.BadgeButton": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "The brand style affecting this element's appearance.", @@ -1051,6 +2817,7 @@ ] }, { + "category": "Appearance", "name": "Size", "type": "ToggleButtonGroup", "description": "Size of the buttons", @@ -1068,12 +2835,14 @@ ] }, { + "category": "Appearance", "name": "Full width", "type": "Toggle", "description": "Extend the button to the full width of the container it is placed in.", "class": "btn-block" }, { + "category": "Appearance", "name": "Border", "oldNames": ["Bordered"], "type": "Toggle", @@ -1083,6 +2852,7 @@ ], "com.mendix.widget.custom.progresscircle.ProgressCircle": [ { + "category": "Appearance", "name": "Bar color", "type": "ColorPicker", "description": "Color of the progress bar", @@ -1110,6 +2880,7 @@ ] }, { + "category": "Appearance", "name": "Size", "type": "ToggleButtonGroup", "description": "Thickness of the progress circle", @@ -1131,6 +2902,7 @@ ], "com.mendix.widget.custom.switch.Switch": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "The brand style affecting this element's appearance.", @@ -1163,6 +2935,7 @@ ] }, { + "category": "Appearance", "name": "Device style", "type": "ToggleButtonGroup", "description": "The general appearance of the switch. When no option selected iOS styles are applied", @@ -1204,6 +2977,7 @@ ], "com.mendix.widget.custom.starrating.StarRating": [ { + "category": "Appearance", "name": "Size", "type": "ToggleButtonGroup", "description": "Change size of the rating icon/image. Default is medium.", @@ -1223,6 +2997,7 @@ ], "com.mendix.widget.web.accordion.Accordion": [ { + "category": "Appearance", "name": "Borders", "type": "ToggleButtonGroup", "description": "Change the border appearance. By default, only horizontal borders between groups are applied.", @@ -1242,12 +3017,14 @@ ] }, { + "category": "Appearance", "name": "Striped", "type": "Toggle", "description": "Add alternating background colors to groups in the accordion.", "class": "widget-accordion-striped" }, { + "category": "Appearance", "name": "Compact", "type": "Toggle", "description": "Make groups in the accordion more compact.", @@ -1256,6 +3033,7 @@ ], "com.mendix.widget.web.image.Image": [ { + "category": "Appearance", "name": "Align content", "type": "Dropdown", "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.", @@ -1287,6 +3065,7 @@ ] }, { + "category": "Appearance", "name": "Image style", "type": "ToggleButtonGroup", "description": "Change the image style.", @@ -1306,12 +3085,14 @@ ] }, { + "category": "Appearance", "name": "Center image", "type": "Toggle", "description": "Center the image.", "class": "img-center" }, { + "category": "Appearance", "name": "Image fit", "type": "Dropdown", "description": "Change the fit of the image.", @@ -1339,6 +3120,7 @@ ] }, { + "category": "Appearance", "name": "Opacity", "type": "ToggleButtonGroup", "description": "Change the opacity of the image.", @@ -1356,10 +3138,40 @@ "class": "img-opacity-high" } ] + }, + { + "category": "Icon", + "name": "Icon color", + "type": "ColorPicker", + "property": "color", + "description": "Sets the color of icons.", + "options": [ + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + }, + { + "name": "Link color", + "variable": "--link-color" + } + ] } ], "com.mendix.widget.custom.slider.Slider": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "The brand style affecting this element's appearance.", @@ -1397,6 +3209,7 @@ ], "com.mendix.widget.custom.RangeSlider.RangeSlider": [ { + "category": "Appearance", "name": "Style", "type": "ColorPicker", "description": "The brand style affecting this element's appearance.", @@ -1423,5 +3236,51 @@ } ] } + ], + "com.mendix.widget.web.combobox.Combobox": [ + { + "name": "Hide background", + "type": "Toggle", + "class": "hide-bg" + }, + { + "name": "Color", + "type": "ColorPicker", + "property": "--cb-text-color", + "options": [ + { + "name": "Header color", + "variable": "--font-color-header" + }, + { + "name": "Detail color", + "variable": "--font-color-detail" + }, + { + "name": "Brand Primary", + "variable": "--brand-primary" + }, + { + "name": "Default", + "variable": "--font-color-default" + }, + { + "name": "Brand Success", + "variable": "--brand-success" + }, + { + "name": "Brand Warning", + "variable": "--brand-warning" + }, + { + "name": "Brand Danger", + "variable": "--brand-danger" + }, + { + "name": "Contrast", + "variable": "--font-color-contrast" + } + ] + } ] } diff --git a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss index a9957e3e0..f2c7c2898 100644 --- a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss +++ b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss @@ -6,9 +6,9 @@ @mixin layout-atlas-phone() { .layout-atlas-phone { .region-topbar { - min-height: $m-header-height; + min-height: var(--m-header-height); border-style: none; - background-color: $m-header-bg; + background: var(--m-header-bg); &::before { display: none; @@ -20,7 +20,7 @@ .glyphicon, .mx-icon-lined, .mx-icon-filled { - margin-right: $spacing-medium; + margin-right: var(--spacing-medium); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss index ad6945e2d..2b2dd9442 100644 --- a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss +++ b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss @@ -4,18 +4,47 @@ Extra styling for responsive layouts ========================================================================== */ @mixin layout-atlas-responsive() { - $sidebar-icon-height: 52px; - $sidebar-icon-width: 52px; + :root { + --closed-sidebar-width: 0px; + } + + .layout-atlas { + .mx-scrollcontainer { + &:not(.mx-scrollcontainer-open) { + .region-sidebar { + .mx-scrollcontainer-wrapper { + transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + --navsidebar-sub-bg-header: transparent; + --navigation-sub-bg: transparent; + } + } + } + &.mx-scrollcontainer-open { + .region-sidebar { + .mx-scrollcontainer-wrapper { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); + transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + } + } + } + } + } .layout-atlas-responsive, - .layout-atlas-responsive-default { + .layout-atlas-responsive-default, + .layout-atlas-responsive-sidebar, + .layout-atlas-responsive-topbar { + &:not(.layout-atlas-responsive-topbar) { + // hidden when closed for topbar layout + --closed-sidebar-width: var(--navsidebar-width-closed); + } @media (min-width: $screen-md) { - --closed-sidebar-width: #{$navsidebar-width-closed}; .mx-scrollcontainer-shrink:not(.mx-scrollcontainer-open) > .region-sidebar, .mx-scrollcontainer-push:not(.mx-scrollcontainer-open) > .region-sidebar, .mx-scrollcontainer-slide:not(.mx-scrollcontainer-open) > .region-sidebar { @if (not $use-modern-client) { - width: $navsidebar-width-closed !important; + width: var(--closed-sidebar-width) !important; } .mx-scrollcontainer-wrapper .mx-navigationtree ul li { @@ -23,49 +52,60 @@ white-space: nowrap; } + &.mx-navigationtree-has-items:focus-within > ul, &.mx-navigationtree-has-items:hover > ul { position: absolute; z-index: 100; - top: $topbar-minimalheight; + top: var(--topbar-minimalheight); bottom: 0; - left: $sidebar-icon-width; + left: var(--closed-sidebar-width); display: block; min-width: auto; - padding: $spacing-small 0; + padding: var(--spacing-small) 0; + & > li.mx-navigationtree-has-items:focus-within > ul, & > li.mx-navigationtree-has-items:hover > ul { top: 0; left: 100%; } } - &.mx-navigationtree-collapsed, - &.mx-navigationtree-has-items { + &.mx-navigationtree-has-items, + &.mx-navigationtree-collapsed { ul { display: none; } } + + & > a { + .glyphicon, + .mx-icon-lined, + .mx-icon-filled { + flex-basis: var(--closed-sidebar-width); + } + } } } .widget-sidebar:not(.widget-sidebar-expanded) { .mx-navigationtree ul li { + &.mx-navigationtree-has-items:focus-within, &.mx-navigationtree-has-items:hover { ul { position: absolute; z-index: 100; top: 0; bottom: 0; - left: $sidebar-icon-width; + left: var(--navsidebar-icon-width); display: block; overflow-y: auto; min-width: auto; - padding: $spacing-small 0; + padding: var(--spacing-small) 0; } } - &.mx-navigationtree-collapsed, - &.mx-navigationtree-has-items { + &.mx-navigationtree-has-items, + .mx-navigationtree-collapsed { ul { display: none; } @@ -81,7 +121,7 @@ } &.mx-scrollcontainer-open > .region-sidebar { - width: $navsidebar-width-closed !important; + width: var(--closed-sidebar-width) !important; & > .mx-scrollcontainer-wrapper { position: relative; @@ -90,7 +130,7 @@ .region-sidebar > .mx-scrollcontainer-wrapper { z-index: 2; - left: -$navsidebar-width-closed; + left: calc(-1 * var(--closed-sidebar-width)); background-color: inherit; } } @@ -109,8 +149,13 @@ // Sidebar .region-sidebar { + scrollbar-color: transparent transparent; + &:hover { + scrollbar-color: var(--navigation-scrollbar-color); + } + .toggle-btn { - width: $sidebar-icon-width; + width: var(--navsidebar-icon-width); border-color: transparent; border-radius: 0; background: transparent; @@ -119,14 +164,14 @@ .mx-scrollcontainer-wrapper { .toggle-btn-wrapper { display: flex; - padding: $spacing-small; + padding: var(--spacing-small); align-items: center; - min-height: calc(#{$topbar-minimalheight} + 4px); - background: $navsidebar-sub-bg; + min-height: calc(var(--topbar-minimalheight) + 4px); + background: var(--navsidebar-sub-bg); } .toggle-btn { - padding: $spacing-medium; + padding: var(--spacing-medium); img { width: 24px; @@ -141,30 +186,46 @@ .mx-navigationtree .navbar-inner > ul > li { & > a { - height: $sidebar-icon-height; - padding: $spacing-small 0; + height: var(--navsidebar-icon-height); + padding: var(--spacing-small) 0; + margin: var(--spacing-smaller) 0 0 0; white-space: nowrap; overflow: hidden; + border-radius: var(--navsidebar-border-radius); // Glyph icon .glyphicon, .mx-icon-lined, .mx-icon-filled { display: flex; align-items: center; + flex-shrink: 0; justify-content: center; - width: $sidebar-icon-width; - height: $sidebar-icon-height; - padding: $spacing-small $spacing-medium; - border-radius: $border-radius-default; + flex-basis: var(--navsidebar-icon-width); + height: var(--navsidebar-icon-height); + padding: var(--spacing-small) var(--spacing-medium); + border-radius: var(--navsidebar-border-radius); + transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + } + img { + width: var(--navsidebar-icon-width); + padding: var(--spacing-small) var(--spacing-medium); } } + &.mx-navigationtree-has-items:not(.mx-navigationtree-collapsed) > a { + border-radius: var(--navsidebar-border-radius) var(--navigation-border-radius) 0 0; + background-color: var(--navsidebar-sub-bg-header); + } } } } + } + .layout-atlas-responsive, + .layout-atlas-responsive-default, + .layout-atlas-responsive-sidebar { // Topbar .region-topbar { - padding: 0 $spacing-small; + padding: 0 var(--spacing-small); .toggle-btn { padding: 0; @@ -176,7 +237,7 @@ .mx-icon-filled, .mx-icon-lined { - font-size: 20px; + font-size: 18px; } } } @@ -184,21 +245,138 @@ // Topbar variant .layout-atlas-responsive-topbar { .region-topbar { - padding: 0 $spacing-medium; + padding: 0 var(--spacing-medium); @media (max-width: $screen-sm-max) { - padding: 0 $spacing-small; + padding: 0 var(--spacing-small); } + .topbar-wrapper { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + } + } - .mx-scrollcontainer-wrapper { - .mx-layoutgrid, - .mx-layoutgrid-fluid { - padding: 0 $gutter-size; + .mx-scrollcontainer-slide { + &:not(.mx-scrollcontainer-open) > .region-sidebar { + overflow: hidden; + } + + .region-sidebar { + z-index: 100; + } + } + + @if (not $use-modern-client) { + .mx-scrollcontainer-slide { + &:not(.mx-scrollcontainer-open) > .region-sidebar { + overflow: hidden; + } + + &.mx-scrollcontainer-open > .region-sidebar { + & > .mx-scrollcontainer-wrapper { + position: relative; + background: var(--sidebar-bg); + width: var(--navsidebar-width-open); + z-index: 100; + } } } - .mx-icon-filled, - .mx-icon-lined { - font-size: 20px; + // Push aside for mobile + @media (max-width: $screen-sm-max) { + .mx-scrollcontainer-open:not(.mx-scrollcontainer-slide) { + width: 1100px; + } + + .mx-scrollcontainer-slide .toggle-btn { + display: inline-block !important; + } + } + } + } + + .layout-atlas-responsive-sidebar { + .sidebar-wrapper { + padding: var(--spacing-medium) 0 var(--spacing-medium) 0; + transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + } + + .mx-scrollcontainer-shrink, + .mx-scrollcontainer-slide, + .mx-scrollcontainer-push { + .toggle-btn-sidebar { + width: var(--navsidebar-toggle-size); + height: var(--navsidebar-toggle-size); + border: 1px solid var(--border-color-default); + opacity: 0; + padding: 0; + overflow: hidden; + position: absolute; + background: var(--color-base); + border-radius: 100%; + transition: all var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + color: var(--font-color-header); + top: 26px; + left: calc(var(--closed-sidebar-width) - var(--navsidebar-toggle-size) / 2); + .mx-icon-filled, + .mx-icon-lined { + line-height: var(--line-height-base); + } + &:focus-visible { + opacity: 1; + } + } + + .region-sidebar:hover { + .toggle-btn-sidebar { + opacity: 1; + &:hover { + background-color: var(--brand-primary); + color: var(--font-color-contrast); + transform: scale(1.1); + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); + } + } + } + + &.mx-scrollcontainer-open { + .toggle-btn-sidebar { + left: calc(var(--sidebar-size, var(--navsidebar-width-open)) - var(--navsidebar-toggle-size) / 2); + rotate: 180deg; + } + .sidebar-brand-logo { + padding: 0 var(--spacing-small); + transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + } + } + &:not(.mx-scrollcontainer-open) { + .sidebar-brand-logo { + padding: 0 calc((var(--closed-sidebar-width) - var(--brand-logo-width)) / 2); + transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function); + } + } + + @media (max-width: $screen-sm-max) { + :not(&.mx-scrollcontainer-open) { + .toggle-btn-sidebar-mobile { + // shown only for mobile + color: var(--brand-primary-800); + background: transparent; + border: 0; + } + } + } + } + + .widget-language-selector { + .current-language-text { + color: var(--font-color-header); + } + .language-arrow { + color: var(--font-color-header); + .arrow-image { + filter: none; + } } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss index 7937f0e6b..a3193e375 100644 --- a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss +++ b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss @@ -6,9 +6,9 @@ @mixin layout-atlas-tablet() { .layout-atlas-tablet { .region-topbar { - min-height: $m-header-height; + min-height: var(--m-header-height); border-style: none; - background-color: $m-header-bg; + background: var(--m-header-bg); &::before { display: none; @@ -20,7 +20,7 @@ .glyphicon, .mx-icon-lined, .mx-icon-filled { - margin-right: $spacing-medium; + margin-right: var(--spacing-medium); } } } diff --git a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas.scss b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas.scss index 17e1022a6..a1a2b8096 100644 --- a/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas.scss +++ b/packages/atlas/src/themesource/atlas_core/web/layouts/_layout-atlas.scss @@ -30,59 +30,62 @@ // Sidebar .region-sidebar { - background-color: $navsidebar-bg; + background: var(--navsidebar-bg); @if not $use-modern-client { z-index: 101; } - box-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%); + box-shadow: var(--navsidebar-shadow); + border-right: var(--navsidebar-border-right); .mx-scrollcontainer-wrapper { display: flex; flex-direction: column; - padding: $spacing-small 0; + padding: var(--spacing-small) 0; } .mx-navigationtree .navbar-inner > ul > li > a { - padding: $spacing-medium; + padding: var(--spacing-medium); .glyphicon, .mx-icon-lined, .mx-icon-filled { - margin-right: $spacing-small; + margin-right: var(--spacing-small); } } - .sidebar-heading { - background: $navsidebar-sub-bg; - } - .toggle-btn { - margin-right: $spacing-small; + margin-right: var(--spacing-small); border-color: transparent; border-radius: 0; background: transparent; - padding: $spacing-medium; + padding: var(--spacing-medium); } } // Topbar .region-topbar { position: relative; + align-content: center; z-index: 60; // Show dropshadow - min-height: $topbar-minimalheight; - background-color: $navtopbar-bg; + min-height: var(--topbar-minimalheight); + background: var(--navtopbar-bg); + border-bottom: var(--navtopbar-border-bottom); + + // allow secondary color for different type of navbar + &.topbar-secondary{ + background: var(--navtopbar-bg-secondary, --navtopbar-bg); + } // Topbar Content .topbar-content { display: flex; align-items: center; - min-height: $topbar-minimalheight; + min-height: var(--topbar-minimalheight); } // Toggle btn .toggle-btn { padding: 0; - margin-right: $spacing-medium; border-color: transparent; border-radius: 0; background: transparent; @@ -96,29 +99,28 @@ padding: 0; line-height: inherit; font-size: 16px; - margin-right: $spacing-small; + margin-right: var(--spacing-small); img { display: inline-block; - margin-right: $spacing-small; + margin-right: var(--spacing-small); @if $brand-logo !=false { width: 0; height: 0; - padding: ($brand-logo-height / 2) ($brand-logo-width / 2); - background-image: url($brand-logo); + padding: calc(var(--brand-logo-height, 32px) / 2) calc(var(--brand-logo-width, 32px) / 2); + background-image: url(#{$brand-logo}); background-repeat: no-repeat; background-position: left center; - background-size: $brand-logo-width; + background-size: var(--brand-logo-width); } @else { width: auto; - height: $brand-logo-height; + height: var(--brand-logo-height); } } a { - margin-left: $spacing-small; - color: $navbar-brand-name; - font-size: 20px; + color: var(--navbar-brand-name); + font-size: var(--navtopbar-font-size); &:hover, &:focus { @@ -128,7 +130,6 @@ } .mx-navbar { - display: inline-flex; vertical-align: middle; background: transparent; justify-content: center; diff --git a/packages/atlas/src/themesource/atlas_core/web/main.scss b/packages/atlas/src/themesource/atlas_core/web/main.scss index 563c96bee..04fcaaf32 100644 --- a/packages/atlas/src/themesource/atlas_core/web/main.scss +++ b/packages/atlas/src/themesource/atlas_core/web/main.scss @@ -2,14 +2,22 @@ @import "exclusion-variables-defaults"; @import "../../../theme/web/exclusion-variables"; @import "generated-exclusion-variables"; +@import "themes/theme-default"; +@import "color-variants"; @import "../../../theme/web/custom-variables"; -@import "variables"; -@import "variables-css-mappings"; +@import "variables"; // support for legacy modules using sass variables + +// support for legacy themes using sass variables +@import "css-variables-mappings"; +@if not $use-css-variables { + @include legacy-variables(); +} // Font Family Import @if $font-family-import != false { @import url($font-family-import); } +@import "./poppins"; //=============================== Bootstrap ================================\\ @@ -54,6 +62,14 @@ @if not $exclude-login { @include login(); } +@import "core/base/card"; +@if not $exclude-card { + @include card(); +} +@import "core/base/focus-ring"; +@if not $exclude-focus-ring { + @include focus-ring(); +} // Widgets @import "core/widgets/input"; @@ -106,6 +122,11 @@ @include check-box(); } +@import "core/widgets/checkboxradiobutton"; +@if not $exclude-check-box-radio-button { + @include checkboxradiobutton(); +} + @import "core/widgets/grid"; @if not $exclude-grid { @include grid(); @@ -131,6 +152,16 @@ @include date-picker(); } +@import "core/widgets/demo-user-switcher"; +@if not $exclude-demo-user-switcher { + @include demo-user-switcher(); +} + +@import "core/widgets/div-container"; +@if not $exclude-div-container { + @include div-container(); +} + @import "core/widgets/header"; @if not $exclude-header { @include header(); @@ -281,6 +312,11 @@ @include progress(); } +@import "core/widgets/combobox"; +@if not $exclude-combobox { + @include combobox(); +} + @import "core/widgets/progress-bar"; @if not $exclude-progress-bar { @include progress-bar(); diff --git a/packages/atlas/src/themesource/atlas_core/web/poppins.scss b/packages/atlas/src/themesource/atlas_core/web/poppins.scss new file mode 100644 index 000000000..42a73c0cb --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/poppins.scss @@ -0,0 +1,125 @@ +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype'); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype'); + font-weight: 800; + font-style: italic; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Poppins'; + src: url('/resources/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype'); + font-weight: 900; + font-style: italic; +} diff --git a/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss b/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss new file mode 100644 index 000000000..a5d0a4994 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss @@ -0,0 +1,605 @@ +@import "../breakpoints"; + +:root { + /* Brand Colors */ + --brand-primary: #264ae5; + --brand-success: #16aa16; + --brand-warning: #cd8501; + --brand-danger: #EA3337; + --brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9); + --gray: #B8BABF; + + /* Base and contrast colors (default white and black for light theme) */ + --color-base: #fff; + --color-contrast: #000; + + /* Hover Color Variants */ + --brand-default-hover: var(--brand-default-100); + --brand-primary-hover: var(--brand-primary-700); + --brand-success-hover: var(--brand-success-700); + --brand-warning-hover: var(--brand-warning-700); + --brand-danger-hover: var(--brand-danger-700); + + /* Brand Logo */ + --brand-logo-height: 36px; + --brand-logo-width: 36px; + --brand-gradient: linear-gradient(to bottom, var(--brand-primary-900), var(--brand-primary-700)); + + /* Default Font Size & Color */ + --font-size-default: 14px; + --font-color-default: var(--gray-900); + --font-color-contrast: var(--color-base); + + /* Global Border */ + --border-color-default: var(--brand-default-300); + --border-radius-s: 4px; + --border-radius-m: 8px; + --border-radius-l: 12px; + --border-radius-default: var(--border-radius-s); + --border-width-thin: 1px; + --border-width-medium: 2px; + --border-width-thick: 3px; + --border-width-default: var(--border-width-thin); + --border-default: var(--border-width-default) solid var(--border-color-default); + + /* Focus indicators for accessibility */ + --focus-outline: 2px solid var(--form-input-border-focus-color); + --focus-outline-offset: 2px; + + /* Topbar */ + --topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600)); + --topbar-minimalheight: 48px; + --topbar-border-color: var(--border-color-default); + + /* Sidebar */ + --sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700)); + + /* Topbar mobile */ + --m-header-height: 45px; + --m-header-bg: var(--topbar-bg); + --m-header-color: var(--font-color-contrast); + --m-header-title-size: 16px; + + /* Navbar Brand Name */ + --navbar-brand-name: var(--font-color-default); + + /* Background Colors */ + --bg-color: var(--brand-default-100); + --bg-color-secondary: var(--color-base); + + /* Default Link Color */ + --link-color: var(--brand-primary); + --link-hover-color: var(--brand-primary-400); + + /* Font Family */ + --font-family-base: "Poppins", sans-serif; + + /* Font Sizes */ + --font-size-large: 18px; + --font-size-small: 12px; + + /* Font Weights */ + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Header Font Sizes */ + --font-size-h1: 34px; + --font-size-h2: 26px; + --font-size-h3: 24px; + --font-size-h4: 16px; + --font-size-h5: var(--font-size-default); + --font-size-h6: 12px; + + /* Header Font Weight */ + --font-weight-header: var(--font-weight-semibold); + + /* Line Height */ + --line-height-base: 1.428571429; + + /* Header Margin */ + --font-header-margin: 0 0 8px 0; + + /* Font Colors */ + --font-color-detail: var(--brand-primary-700); + --font-color-header: var(--brand-primary-800); + + /* Navigation */ + --navigation-item-height: unset; + --navigation-item-padding: 12px; + --navigation-border-radius: var(--border-radius-m); + --navigation-scrollbar-color: rgba(255, 255, 255, 0.5) transparent; + + --navigation-font-size: var(--font-size-default); + --navigation-sub-font-size: var(--font-size-small); + --navigation-glyph-size: 20px; + + --navigation-color: var(--font-color-contrast); + --navigation-color-hover: var(--font-color-contrast); + --navigation-color-active: var(--font-color-contrast); + + --navigation-sub-color: var(--navigation-color); + --navigation-sub-color-hover: var(--navigation-color-hover); + --navigation-sub-color-active: var(--navigation-color-active); + + /* Sidebar Navigation */ + --navigation-bg: var(--topbar-bg); + --navigation-bg-hover: rgba(0, 0, 0, 0.2); + --navigation-bg-active: rgba(0, 0, 0, 0.3); + + --navigation-sub-bg: rgba(0, 0, 0, 0.2); + --navigation-sub-bg-hover: var(--navigation-bg-hover); + --navigation-sub-bg-active: var(--navigation-bg-active); + + --navigation-border-color: var(--navigation-bg-hover); + + --navsidebar-bg: var(--sidebar-bg); + --navsidebar-bg-hover: var(--navigation-bg-hover); + --navsidebar-bg-active: var(--navigation-bg-active); + + --navsidebar-sub-bg: rgba(0, 0, 0, 0.2); + --navsidebar-sub-bg-hover: var(--navigation-bg-hover); + --navsidebar-sub-bg-active: var(--navigation-bg-active); + --navsidebar-sub-bg-header: rgba(0, 0, 0, 0.2); + --navsidebar-sub-bg-collapsed: var(--brand-primary-700); + + --navsidebar-border-color: var(--border-color-default); + --navsidebar-border-radius: var(--navigation-border-radius); + --navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%); + --navsidebar-border-right: none; + + --navsidebar-font-size: var(--font-size-default); + --navsidebar-sub-font-size: var(--font-size-small); + --navsidebar-glyph-size: 20px; + + --navsidebar-color: var(--navigation-color); + --navsidebar-color-hover: var(--navigation-color-hover); + --navsidebar-color-active: var(--navigation-color-active); + + --navsidebar-sub-color: var(--navigation-color); + --navsidebar-sub-color-hover: var(--navigation-color-hover); + --navsidebar-sub-color-active: var(--navigation-color-active); + + --navsidebar-width-closed: 52px; + --navsidebar-width-open: 232px; + --navsidebar-toggle-size: 32px; + + --navsidebar-icon-height: 44px; + --navsidebar-icon-width: 52px; + --navsidebar-animation-duration: 250ms; + --navsidebar-animation-function: ease-in; + + /* Topbar Navigation */ + --navtopbar-font-size: var(--font-size-default); + --navtopbar-sub-font-size: var(--font-size-small); + --navtopbar-glyph-size: 1.2em; + + --navtopbar-bg: var(--topbar-bg); + --navtopbar-bg-secondary: transparent; + --navtopbar-bg-hover: var(--navigation-bg-hover); + --navtopbar-bg-active: var(--navigation-bg-active); + --navtopbar-color: var(--navigation-color); + --navtopbar-color-hover: var(--navigation-color-hover); + --navtopbar-color-active: var(--navigation-color-active); + + --navtopbar-sub-bg: var(--navtopbar-bg); + --navtopbar-sub-bg-hover: var(--navtopbar-bg-hover); + --navtopbar-sub-bg-active: var(--navtopbar-bg-active); + --navtopbar-sub-color: var(--navigation-color); + --navtopbar-sub-color-hover: var(--navigation-color-hover); + --navtopbar-sub-color-active: var(--navigation-color-active); + + --navtopbar-border-color: var(--topbar-border-color); + --navtopbar-border-radius: var(--navigation-border-radius); + --navtopbar-border-bottom: none; + + /* Shadows */ + --shadow-color-border: var(--border-color-default); + --shadow-color: var(--brand-default-300); + --shadow-small: 0 2px 4px 0; + --shadow-medium: 0 4px 6px 0; + --shadow-large: 0 8px 10px 0; + + /* Form Inputs */ + --form-label-color: var(--font-color-default); + --form-label-size: var(--font-size-default); + --form-label-weight: var(--font-weight-normal); + --form-label-gutter: 8px; + + --form-input-height: auto; + --form-input-padding-y: 8px; + --form-input-padding-x: 8px; + --form-input-static-padding-y: 8px; + --form-input-static-padding-x: 0; + --form-input-font-size: var(--form-label-size); + --form-input-line-height: var(--line-height-base); + --form-input-border-radius: 6px; + + --form-input-bg: var(--color-base); + --form-input-bg-focus: var(--color-base); + --form-input-bg-hover: var(--color-base); + --form-input-bg-disabled: var(--bg-color); + --form-input-color: var(--font-color-default); + --form-input-focus-color: var(--form-input-color); + --form-input-disabled-color: var(--gray-700); + --form-input-placeholder-color: var(--gray-600); + --form-input-border-color: var(--brand-default); + --form-input-border-focus-color: var(--brand-primary); + --form-input-border-hover-color: color-mix(in srgb, var(--form-input-border-color), var(--form-input-border-focus-color) 50%); + + --form-input-static-border-color: var(--gray-200); + + --form-group-margin-bottom: 16px; + --form-group-gutter: 16px; + + /* Buttons */ + --btn-font-size: var(--font-size-default); + --btn-border-radius: var(--border-radius-default); + + --btn-default-bg: var(--color-base); + --btn-primary-bg: var(--brand-primary-600); + --btn-success-bg: var(--brand-success-600); + --btn-warning-bg: var(--brand-warning-600); + --btn-danger-bg: var(--brand-danger-600); + + --btn-default-border-color: var(--brand-default); + --btn-primary-border-color: var(--brand-primary-600); + --btn-success-border-color: var(--brand-success-600); + --btn-warning-border-color: var(--brand-warning-600); + --btn-danger-border-color: var(--brand-danger-600); + + --btn-default-color: var(--brand-primary); + --btn-primary-color: var(--font-color-contrast); + --btn-success-color: var(--font-color-contrast); + --btn-warning-color: var(--font-color-contrast); + --btn-danger-color: var(--font-color-contrast); + + --btn-default-icon-color: var(--gray); + + --btn-default-bg-hover: var(--brand-default-hover); + --btn-primary-bg-hover: var(--brand-primary-hover); + --btn-success-bg-hover: var(--brand-success-hover); + --btn-warning-bg-hover: var(--brand-warning-hover); + --btn-danger-bg-hover: var(--brand-danger-hover); + --btn-link-bg-hover: var(--brand-default-hover); + + --btn-default-bg-active: var(--brand-default-300); + --btn-primary-bg-active: var(--brand-primary-500); + --btn-success-bg-active: var(--brand-success-500); + --btn-warning-bg-active: var(--brand-warning-500); + --btn-danger-bg-active: var(--brand-danger-500); + --btn-link-bg-active: var(--brand-default-500); + + /* Header */ + --header-min-height: 240px; + --header-bg-color: var(--brand-primary); + --header-bgimage-filter: brightness(60%); + --header-text-color: var(--color-base); + --header-text-color-detail: rgba(0, 0, 0, 0.2); + + /* Grid */ + --grid-border-color: var(--border-color-default); + + --grid-bg: transparent; + --grid-bg-header: transparent; + --grid-bg-hover: var(--brand-default-hover); + --grid-bg-selected: var(--brand-default); + --grid-bg-selected-hover: var(--brand-default-600); + --grid-bg-striped: var(--brand-default-50); + --grid-footer-bg: var(--brand-default); + + --grid-selected-color: var(--font-color-default); + + --grid-paging-bg: transparent; + --grid-paging-bg-hover: transparent; + --grid-paging-border-color: transparent; + --grid-paging-border-color-hover: transparent; + --grid-paging-color: var(--gray-300); + --grid-paging-color-hover: var(--brand-primary); + + /* Tabs */ + --tabs-color: var(--font-color-default); + --tabs-color-active: var(--font-color-detail); + --tabs-lined-color-active: var(--font-color-detail); + + --tabs-lined-border-width: 3px; + --tabs-border-color: var(--border-color-default); + --tabs-lined-border-color: var(--brand-primary); + --tabs-bg: transparent; + --tabs-bg-pills: var(--brand-default-200); + --tabs-bg-hover: var(--brand-default-300); + --tabs-bg-active: var(--brand-primary-600); + + /* Modal */ + --modal-header-bg: transparent; + --modal-header-border-color: var(--border-color-default); + --modal-header-color: var(--font-color-header); + --modal-body-bg: var(--bg-color-secondary); + --modal-footer-bg: var(--bg-color-secondary); + + /* Data View */ + --dataview-controls-bg: inherit; + --dataview-controls-border-color: var(--border-color-default); + --dataview-controls-alignment: left; + + --dataview-emptymessage-bg: var(--bg-color); + --dataview-emptymessage-color: var(--font-color-default); + + /* Cards */ + --card-shadow: var(--shadow-small) var(--shadow-color); + --card-border: var(--border-default); + --card-border-radius: var(--border-radius-m); + --card-padding: var(--spacing-large); + --card-margin-bottom: var(--spacing-smaller); + --card-bg: var(--bg-color-secondary); + + /* Alerts */ + --alert-primary-bg: var(--brand-primary-50); + --alert-success-bg: var(--brand-success-50); + --alert-warning-bg: var(--brand-warning-50); + --alert-danger-bg: var(--brand-danger-50); + + --alert-primary-color: var(--brand-primary-700); + --alert-success-color: var(--brand-success-700); + --alert-warning-color: var(--brand-warning-700); + --alert-danger-color: var(--brand-danger-700); + + --alert-primary-border-color: var(--brand-primary-600); + --alert-success-border-color: var(--brand-success-600); + --alert-warning-border-color: var(--brand-warning-600); + --alert-danger-border-color: var(--brand-danger-600); + + /* Wizard */ + --wizard-step-height: 48px; + --wizard-step-number-size: 64px; + --wizard-step-number-font-size: var(--font-size-h3); + + --wizard-default-bg: var(--color-base); + --wizard-default-color: var(--color-base); + --wizard-default-step-color: var(--font-color-default); + --wizard-default-border-color: var(--border-color-default); + + --wizard-active-bg: var(--brand-primary-200); + --wizard-active-color: var(--brand-primary-700); + --wizard-active-step-color: var(--brand-primary-700); + --wizard-active-border-color: var(--brand-primary-700); + + --wizard-visited-bg: var(--brand-success-200); + --wizard-visited-color: var(--brand-success-700); + --wizard-visited-step-color: var(--brand-success-700); + --wizard-visited-border-color: var(--brand-success-700); + + /* Labels */ + --label-default-bg: var(--brand-default); + --label-primary-bg: var(--brand-primary-600); + --label-success-bg: var(--brand-success-600); + --label-warning-bg: var(--brand-warning-600); + --label-danger-bg: var(--brand-danger-600); + + --label-default-border-color: var(--brand-default-600); + --label-primary-border-color: var(--brand-primary-600); + --label-success-border-color: var(--brand-success-600); + --label-warning-border-color: var(--brand-warning-600); + --label-danger-border-color: var(--brand-danger-600); + + --label-default-color: var(--font-color-default); + --label-primary-color: var(--color-base); + --label-success-color: var(--color-base); + --label-warning-color: var(--color-base); + --label-danger-color: var(--color-base); + + /* Groupbox */ + --groupbox-default-bg: var(--brand-default); + --groupbox-primary-bg: var(--brand-primary-600); + --groupbox-success-bg: var(--brand-success-600); + --groupbox-warning-bg: var(--brand-warning-600); + --groupbox-danger-bg: var(--brand-danger-600); + --groupbox-white-bg: var(--color-base-600); + + --groupbox-default-color: var(--font-color-default); + --groupbox-primary-color: var(--font-color-contrast); + --groupbox-success-color: var(--font-color-contrast); + --groupbox-warning-color: var(--font-color-contrast); + --groupbox-danger-color: var(--font-color-contrast); + --groupbox-white-color: var(--font-color-default); + + /* Callouts */ + --callout-primary-color: var(--brand-primary-600); + --callout-default-color: var(--font-color-default); + --callout-success-color: var(--brand-success-700); + --callout-warning-color: var(--brand-warning-700); + --callout-danger-color: var(--brand-danger-600); + + --callout-primary-bg: var(--brand-primary-100); + --callout-default-bg: var(--gray-50); + --callout-success-bg: var(--brand-success-100); + --callout-warning-bg: var(--brand-warning-100); + --callout-danger-bg: var(--brand-danger-100); + + /* Timeline */ + --timeline-icon-color: var(--brand-primary); + --timeline-border-color: var(--border-color-default); + --timeline-event-time-color: var(--brand-primary); + --timeline-icon-size: 18px; + --timeline-image-size: 36px; + --timeline-grouping-size: 120px; + --timeline-grouping-border-radius: 30px; + --timeline-grouping-border-color: var(--timeline-border-color); + + /* Accordion */ + --accordion-header-default-bg: var(--bg-color-secondary); + --accordion-header-default-bg-hover: var(--brand-default-hover); + --accordion-header-default-color: var(--font-color-header); + --accordion-default-border-color: var(--border-color-default); + --accordion-bg-striped: var(--brand-default-200); + --accordion-bg-striped-hover: var(--brand-default-hover); + + --accordion-header-primary-bg: var(--brand-primary-600); + --accordion-header-secondary-bg: var(--bg-color-secondary); + --accordion-header-success-bg: var(--brand-success-600); + --accordion-header-warning-bg: var(--brand-warning-600); + --accordion-header-danger-bg: var(--brand-danger-600); + + --accordion-header-primary-bg-hover: var(--brand-primary-hover); + --accordion-header-secondary-bg-hover: var(---brand-default-hover); + --accordion-header-success-bg-hover: var(--brand-success-hover); + --accordion-header-warning-bg-hover: var(--brand-warning-hover); + --accordion-header-danger-bg-hover: var(--brand-danger-hover); + + --accordion-header-primary-color: var(--font-color-contrast); + --accordion-header-secondary-color: var(--brand-primary); + --accordion-header-success-color: var(--font-color-contrast); + --accordion-header-warning-color: var(--font-color-contrast); + --accordion-header-danger-color: var(--font-color-contrast); + + --accordion-primary-border-color: var(--brand-primary); + --accordion-secondary-border-color: var(--gray-200); + --accordion-success-border-color: var(--brand-success); + --accordion-warning-border-color: var(--brand-warning); + --accordion-danger-border-color: var(--brand-danger); + + /* Spacing */ + --spacing-none: 0px; + --spacing-smallest: 2px; + --spacing-smaller: 4px; + --spacing-small: 8px; + --spacing-medium: 16px; + + --t-spacing-medium: 16px; + --m-spacing-medium: 16px; + + --spacing-large: 24px; + --t-spacing-large: 24px; + --m-spacing-large: 16px; + + --spacing-larger: 32px; + --spacing-largest: 48px; + + --layout-spacing-top: 24px; + --layout-spacing-right: 24px; + --layout-spacing-bottom: 24px; + --layout-spacing-left: 24px; + + --t-layout-spacing-top: 24px; + --t-layout-spacing-right: 24px; + --t-layout-spacing-bottom: 24px; + --t-layout-spacing-left: 24px; + + --m-layout-spacing-top: 16px; + --m-layout-spacing-right: 16px; + --m-layout-spacing-bottom: 16px; + --m-layout-spacing-left: 16px; + + --layout-spacing: var(--layout-spacing-top) var(--layout-spacing-right) var(--layout-spacing-bottom) var(--layout-spacing-left); + --m-layout-spacing: var(--m-layout-spacing-top) var(--m-layout-spacing-right) var(--m-layout-spacing-bottom) var(--m-layout-spacing-left); + --t-layout-spacing: var(--t-layout-spacing-top) var(--t-layout-spacing-right) var(--t-layout-spacing-bottom) var(--t-layout-spacing-left); + + --gutter-size: var(--spacing-medium); + + --padding-table-cell-top: 8px; + --padding-table-cell-bottom: 8px; + --padding-table-cell-left: 8px; + --padding-table-cell-right: 8px; + + /* Brand Variants */ + --btn-inverse-bg: var(--brand-primary-400); + --btn-info-bg: var(--brand-primary-300); + --btn-inverse-border-color: var(--brand-primary-400); + --btn-info-border-color: var(--brand-primary-300); + + --btn-inverse-color: var(--color-base); + --btn-info-color: var(--color-base); + + --btn-inverse-bg-hover: var(--brand-primary-300); + --btn-info-bg-hover: var(--brand-primary-300); + + /* Alerts */ + --alert-info-bg: var(--brand-primary-50); + --alert-info-color: var(--brand-primary-600); + --alert-info-border-color: var(--brand-primary); + + /* Labels */ + --label-info-bg: var(--brand-primary-300); + --label-inverse-bg: var(--brand-primary-600); + + --label-info-border-color: var(--brand-primary-300); + --label-inverse-border-color: var(--brand-primary-600); + + --label-info-color: var(--color-base); + --label-inverse-color: var(--color-base); + + /* Groupbox */ + --groupbox-inverse-bg: var(--brand-primary-600); + --groupbox-info-bg: var(--brand-primary-300); + + --groupbox-inverse-color: var(--color-base); + --groupbox-info-color: var(--color-base); + + /* Callouts */ + --callout-info-color: var(--brand-primary-300); + --callout-info-bg: var(--brand-primary-50); + + --screen-xs: #{$screen-xs}; + --screen-sm: #{$screen-sm}; + --screen-md: #{$screen-md}; + --screen-lg: #{$screen-lg}; + --screen-xl: #{$screen-xl}; + --screen-xxl: #{$screen-xxl}; + + /* Legacy variables */ + --gray-lighter: var(--gray-50); + --gray-light: var(--gray-300); + --gray-primary: var(--gray-200); + --gray-dark: var(--gray-700); + --gray-darker: var(--gray-800); + + /* Color variations */ + --color-default-darker: var(--gray-700); + --color-default-dark: var(--gray-600); + --color-default-light: var(--gray-100); + --color-default-lighter: var(--gray-50); + + --color-primary-darker: var(--brand-primary-700); + --color-primary-dark: var(--brand-primary-600); + --color-primary-light: var(--brand-primary-100); + --color-primary-lighter: var(--brand-primary-50); + + --color-success-darker: var(--brand-success-700); + --color-success-dark: var(--brand-success-600); + --color-success-light: var(--brand-success-100); + --color-success-lighter: var(--brand-success-50); + + --color-warning-darker: var(--brand-warning-700); + --color-warning-dark: var(--brand-warning-600); + --color-warning-light: var(--brand-warning-100); + --color-warning-lighter: var(--brand-warning-50); + + --color-danger-darker: var(--brand-danger-700); + --color-danger-dark: var(--brand-danger-600); + --color-danger-light: var(--brand-danger-100); + --color-danger-lighter: var(--brand-danger-50); + + --grid-padding-top: 16px; + --grid-padding-right: 16px; + --grid-padding-bottom: 16px; + --grid-padding-left: 16px; + + --listview-padding-top: 16px; + --listview-padding-right: 16px; + --listview-padding-bottom: 16px; + --listview-padding-left: 16px; +} + +// SASS theme options +$brand-logo: false !default; +$font-family-import: false !default; // "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap" !default; +$form-input-style: default !default; +$btn-bordered: false !default; // Default value false, set to true if you want this effect + +//== Settings +//## Enable or disable your desired framework features +// Use of !important +$important-flex: false !default; // ./base/flex.scss +$important-spacing: true !default; // ./base/spacing.scss +$important-helpers: true !default; // ./helpers/helperclasses.scss diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_alert.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_alert.scss index a07c84f37..839e143ad 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_alert.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_alert.scss @@ -13,14 +13,14 @@ .alert { margin-top: 0; - padding: $spacing-medium; - border: 1px solid; - border-radius: $border-radius-default; - padding: $spacing-medium; + padding: var(--spacing-medium); + border: var(--border-width-default) solid; + border-radius: var(--border-radius-default); + padding: var(--spacing-medium); } .alert-icon { - font-size: $font-size-h3; + font-size: var(--font-size-h3); } .alert-title { @@ -35,40 +35,34 @@ .alert-primary, .alert { - color: $alert-primary-color; - border-color: $alert-primary-border-color; - background-color: $alert-primary-bg; -} - -.alert-secondary { - color: $alert-secondary-color; - border-color: $alert-secondary-border-color; - background-color: $alert-secondary-bg; + color: var(--alert-primary-color); + border-color: var(--alert-primary-border-color); + background-color: var(--alert-primary-bg); } // Semantic variations .alert-success { - color: $alert-success-color; - border-color: $alert-success-border-color; - background-color: $alert-success-bg; + color: var(--alert-success-color); + border-color: var(--alert-success-border-color); + background-color: var(--alert-success-bg); } .alert-warning { - color: $alert-warning-color; - border-color: $alert-warning-border-color; - background-color: $alert-warning-bg; + color: var(--alert-warning-color); + border-color: var(--alert-warning-border-color); + background-color: var(--alert-warning-bg); } .alert-danger { - color: $alert-danger-color; - border-color: $alert-danger-border-color; - background-color: $alert-danger-bg; + color: var(--alert-danger-color); + border-color: var(--alert-danger-border-color); + background-color: var(--alert-danger-bg); } //== State //## Styling when component is in certain state //-------------------------------------------------------------------------------------------------------------------// .has-error .alert { - margin-top: $spacing-small; + margin-top: var(--spacing-small); margin-bottom: 0; } diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss index d6a4bbf37..76aa11e08 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss @@ -8,8 +8,8 @@ padding: 0; border-radius: 0; background-color: transparent; - font-size: $font-size-default; - margin-bottom: $spacing-large; + font-size: var(--font-size-default); + margin-bottom: var(--spacing-large); } //== Elements @@ -18,7 +18,7 @@ display: inline-block; margin: 0; &:last-child { - color: $font-color-default; + color: var(--font-color-default); a { text-decoration: none; } @@ -27,19 +27,19 @@ .breadcrumb-item + .breadcrumb-item { &::before { display: inline-block; - padding-right: $spacing-small; - padding-left: $spacing-small; + padding-right: var(--spacing-small); + padding-left: var(--spacing-small); content: "/"; - color: $gray-light; + color: var(--gray-300); } } //== Variations //-------------------------------------------------------------------------------------------------------------------// .breadcrumb-large { - font-size: $font-size-h3; + font-size: var(--font-size-h3); } .breadcrumb-underline { - padding-bottom: $spacing-medium; - border-bottom: 1px solid $border-color-default; + padding-bottom: var(--spacing-medium); + border-bottom: var(--border-default); } diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_card.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_card.scss index 7f71a8fac..87e483c5b 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_card.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_card.scss @@ -1,29 +1,10 @@ -/* ========================================================================== - Cards - -========================================================================== */ -.card { - border: 0; - border-radius: $border-radius-default; - background-color: #ffffff; - overflow: hidden; - position: relative; - padding: $spacing-large; - margin-bottom: $spacing-large; -} - //== Card components //-------------------------------------------------------------------------------------------------------------------// .card-body { - padding: $spacing-large; + padding: var(--spacing-large); } .card-overlay { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background: rgba(0, 0, 0, 0.6); background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, @@ -31,7 +12,6 @@ rgba(0, 0, 0, 0.99) 121%, #000 100% ); - padding: $spacing-large; } .card-title { @@ -41,6 +21,10 @@ width: 100%; height: auto; } +.card-image > img { + width: 100%; + height: auto; +} .card-supportingtext { } @@ -49,7 +33,7 @@ } .card-icon { - font-size: $font-size-h1; + font-size: var(--font-size-h1); } //== Variations diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_chat.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_chat.scss index 2fe5ce920..8572711dd 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_chat.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_chat.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: column; height: 100%; - background-color: $bg-color-secondary; + background-color: var(--bg-color-secondary); } //== Elements @@ -25,7 +25,7 @@ ul { display: flex; flex-direction: column-reverse; - margin-bottom: $m-spacing-large; + margin-bottom: var(--m-spacing-large); } li { @@ -49,7 +49,7 @@ width: 50%; margin: 15px auto; color: #ffffff; - background-color: $brand-primary; + background-color: var(--brand-primary); box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05); } } @@ -75,7 +75,7 @@ flex-direction: column; padding: 10px 15px; border-radius: 5px; - background-color: $bg-color; + background-color: var(--bg-color); &::after { position: absolute; @@ -86,7 +86,7 @@ content: ""; border: 10px solid transparent; border-top: 0; - border-right-color: $bg-color; + border-right-color: var(--bg-color); border-left: 0; } } @@ -101,8 +101,8 @@ .chat-footer { z-index: 1; - padding: $m-spacing-large; - background-color: $bg-color; + padding: var(--m-spacing-large); + background-color: var(--bg-color); box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05); } @@ -111,7 +111,7 @@ .chat-textbox { flex: 1; - margin-right: $spacing-large; + margin-right: var(--spacing-large); margin-bottom: 0; .form-control { @@ -130,14 +130,14 @@ } .chat-message-balloon { - background-color: $color-primary-lighter; + background-color: var(--brand-primary-100); &::after { left: 100%; border: 10px solid transparent; border-top: 0; border-right: 0; - border-left-color: $color-primary-lighter; + border-left-color: var(--brand-primary-100); } } diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss index 9ce1f840e..a9d3e3000 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss @@ -6,8 +6,8 @@ .controlgroup { .btn, .btn-group { - margin-right: $spacing-small; - margin-bottom: $spacing-small; + margin-right: var(--spacing-small); + margin-bottom: var(--spacing-small); &:last-child { margin-right: 0; diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_formblock.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_formblock.scss index c6a226457..fb1b1c6b5 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_formblock.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_formblock.scss @@ -5,7 +5,7 @@ ========================================================================== */ .formblock { width: 100%; - margin-bottom: $spacing-large; + margin-bottom: var(--spacing-large); } //== Elements diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss index e5e8fd454..8dc3cf7b8 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss @@ -5,22 +5,22 @@ .headerhero { width: 100%; - min-height: $header-min-height; - background-color: $header-bg-color; + min-height: var(--header-min-height); + background-color: var(--header-bg-color); position: relative; overflow: hidden; - padding: $spacing-large; - margin-bottom: $spacing-large; + padding: var(--spacing-large); + margin-bottom: var(--spacing-large); } //== Elements //-------------------------------------------------------------------------------------------------------------------// .headerhero-title { - color: $header-text-color; + color: var(--header-text-color); } .headerhero-subtitle { - color: $header-text-color; + color: var(--header-text-color); } .headerhero-backgroundimage { @@ -29,11 +29,11 @@ top: 0; height: 100%; width: 100%; - filter: $header-bgimage-filter; + filter: var(--header-bgimage-filter); } .btn.headerhero-action { - color: $header-text-color; + color: var(--header-text-color); } .heroheader-overlay { diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss index 4cb80dd97..55ca5a468 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss @@ -6,10 +6,10 @@ .masterdetail { background: #fff; .masterdetail-master { - border-right: 1px solid $border-color-default; + border-right: var(--border-default); } .masterdetail-detail { - padding: $spacing-large; + padding: var(--spacing-large); } } @@ -18,9 +18,9 @@ .masterdetail-vertical { background: #fff; .masterdetail-master { - border-bottom: 1px solid $border-color-default; + border-bottom: var(--border-default); } .masterdetail-detail { - padding: $spacing-large; + padding: var(--spacing-large); } } diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss deleted file mode 100644 index f649e9aa3..000000000 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* ========================================================================== - Pageheader -========================================================================== */ - -//== Default -//-------------------------------------------------------------------------------------------------------------------// -.pageheader { - width: 100%; - margin-bottom: $spacing-large; -} - -//== Elements -//-------------------------------------------------------------------------------------------------------------------// -.pageheader-title { -} - -.pageheader-subtitle { -} - -.pageheader-image { -} diff --git a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_wizard.scss b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_wizard.scss index 91cd9d851..e837395d0 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_wizard.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/buildingblocks/_wizard.scss @@ -3,7 +3,7 @@ display: flex; justify-content: space-between; width: 100%; - margin-bottom: $spacing-large; + margin-bottom: var(--spacing-large); } //Wizard step @@ -21,13 +21,13 @@ display: flex; justify-content: center; align-items: center; - width: $wizard-step-number-size; - height: $wizard-step-number-size; - color: $wizard-default-step-color; - font-size: $wizard-step-number-font-size; + width: var(--wizard-step-number-size); + height: var(--wizard-step-number-size); + color: var(--wizard-default-step-color); + font-size: var(--wizard-step-number-font-size); border-radius: 50%; - background-color: $wizard-default-bg; - border-color: $wizard-default-border-color; + background-color: var(--wizard-default-bg); + border-color: var(--wizard-default-border-color); } //Wizard step text @@ -36,7 +36,7 @@ white-space: nowrap; text-decoration: none; text-overflow: ellipsis; - color: $wizard-default-step-color; + color: var(--wizard-default-step-color); } //Wizard circle @@ -45,54 +45,54 @@ &::before { position: absolute; z-index: 0; - top: $wizard-step-number-size / 2; + top: calc(var(--wizard-step-number-size) / 2); display: block; width: 100%; height: 2px; content: ""; - background-color: $wizard-default-border-color; + background-color: var(--wizard-default-border-color); } } //Wizard arrow .wizard-arrow .wizard-step { - height: $wizard-step-height; - margin-left: calc(0px - (#{$wizard-step-height} / 2)); - padding-left: ($wizard-step-height / 2); - background-color: $wizard-default-bg; + height: var(--wizard-step-height); + margin-left: calc(0px - (var(--wizard-step-height) / 2)); + padding-left: calc(var(--wizard-step-height) / 2); + background-color: var(--wizard-default-bg); justify-content: flex-start; - border: 1px solid $wizard-default-border-color; + border: 1px solid var(--wizard-default-border-color); &::before, &::after { position: absolute; z-index: 1; left: 100%; - margin-left: calc(0px - ((#{$wizard-step-height} / 2) - 1px)); + margin-left: calc(0px - ((var(--wizard-step-height) / 2) - 1px)); content: " "; border-style: solid; border-color: transparent; } &::after { top: 0; - border-width: calc((#{$wizard-step-height} / 2) - 1px); - border-left-color: $wizard-default-bg; + border-width: calc((var(--wizard-step-height) / 2) - 1px); + border-left-color: var(--wizard-default-bg); } &::before { top: -1px; - border-width: $wizard-step-height / 2; - border-left-color: $wizard-default-border-color; + border-width: calc(var(--wizard-step-height) / 2); + border-left-color: var(--wizard-default-border-color); } &:first-child { margin-left: 0; padding-left: 0; - border-top-left-radius: $border-radius-default; - border-bottom-left-radius: $border-radius-default; + border-top-left-radius: var(--border-radius-default); + border-bottom-left-radius: var(--border-radius-default); } &:last-child { - border-top-right-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; + border-top-right-radius: var(--border-radius-default); + border-bottom-right-radius: var(--border-radius-default); &::before, &::after { display: none; @@ -103,37 +103,37 @@ //Wizard states .wizard-circle .wizard-step-active { .wizard-step-number { - color: $wizard-active-color; - border-color: $wizard-active-border-color; - background-color: $wizard-active-bg; + color: var(--wizard-active-color); + border-color: var(--wizard-active-border-color); + background-color: var(--wizard-active-bg); } .wizard-step-text { - color: $wizard-active-step-color; + color: var(--wizard-active-step-color); } } .wizard-circle .wizard-step-visited { .wizard-step-number { - color: $wizard-visited-color; - border-color: $wizard-visited-border-color; - background-color: $wizard-visited-bg; + color: var(--wizard-visited-color); + border-color: var(--wizard-visited-border-color); + background-color: var(--wizard-visited-bg); } .wizard-step-text { - color: $wizard-visited-step-color; + color: var(--wizard-visited-step-color); } } .wizard-arrow .wizard-step-active { - background-color: $wizard-active-bg; + background-color: var(--wizard-active-bg); .wizard-step-text { - color: $wizard-active-color; + color: var(--wizard-active-color); } &::after { - border-left-color: $wizard-active-bg; + border-left-color: var(--wizard-active-bg); } } .wizard-arrow .wizard-step-visited { .wizard-step-text { - color: $link-color; + color: var(--link-color); } } diff --git a/packages/atlas/src/themesource/atlas_web_content/web/main.scss b/packages/atlas/src/themesource/atlas_web_content/web/main.scss index df04c6f5c..86ffb8a6d 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/main.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/main.scss @@ -1,7 +1,3 @@ -// Default variables -@import "../../atlas_core/web/variables"; -@import "../../../theme/web/custom-variables"; - // Building blocks @import "buildingblocks/alert"; @import "buildingblocks/breadcrumb"; @@ -9,7 +5,6 @@ @import "buildingblocks/chat"; @import "buildingblocks/controlgroup"; @import "buildingblocks/pageblocks"; -@import "buildingblocks/pageheader"; @import "buildingblocks/heroheader"; @import "buildingblocks/formblock"; @import "buildingblocks/master-detail"; diff --git a/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss b/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss new file mode 100644 index 000000000..760b3e0bd --- /dev/null +++ b/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss @@ -0,0 +1,4 @@ +.gallery-selector { + z-index: 1; + position: relative; +} diff --git a/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss b/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss index ff29615d8..93f4b3192 100644 --- a/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss +++ b/packages/atlas/src/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss @@ -1,26 +1,26 @@ .listtab-tabs.mx-tabcontainer { - background: $bg-color-secondary; + background: var(--bg-color-secondary); .mx-tabcontainer-tabs { - background: $brand-primary; + background: var(--brand-primary); margin-bottom: 0; li { > a { - color: #fff; + color: var(--font-color-contrast); opacity: 0.6; &:hover, &:focus { - color: #fff; + color: var(--font-color-contrast); } } &.active { > a { opacity: 1; - color: #fff; - border-color: #fff; + color: var(--font-color-contrast); + border-color: var(--color-base); &:hover, &:focus { - color: #fff; - border-color: #fff; + color: var(--font-color-contrast); + border-color: var(--color-base); } } } diff --git a/packages/atlas/tsconfig.json b/packages/atlas/tsconfig.json index 4d870fe57..f1896830f 100644 --- a/packages/atlas/tsconfig.json +++ b/packages/atlas/tsconfig.json @@ -1,10 +1,30 @@ { - "extends": "../../tsconfig.base", - "include": ["./src/theme/native/**/*.ts", "./src/themesource/atlas_core/native/**/*.ts", "./src/themesource/atlas_nativemobile_content/native/**/*.ts"], + "include": [ + "./src/theme/native/**/*.ts", + "./src/themesource/atlas_core/native/**/*.ts", + "./src/themesource/atlas_nativemobile_content/native/**/*.ts" + ], "compilerOptions": { + "noEmitOnError": true, + "sourceMap": false, + "outDir": "./dist", "target": "ES2019", "lib": ["ES2017"], - "sourceMap": false, - "outDir": "./dist" + "moduleResolution": "node", + "declaration": false, + "noLib": false, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "strict": true, + "strictFunctionTypes": false, + "skipLibCheck": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "jsx": "react", + "jsxFactory": "createElement", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "useUnknownInCatchVariables": false, + "exactOptionalPropertyTypes": false } }