From 18c64e7f01cf845272a6567c5b5b6cde698bab54 Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 23 Apr 2025 12:42:17 +0200 Subject: [PATCH 1/5] feat: atlas 4 --- packages/atlas/src/theme/web/_theme-dark.scss | 60 + .../atlas/src/theme/web/_theme-neutral.scss | 57 + .../atlas/src/theme/web/custom-variables.scss | 716 +--------- .../src/theme/web/exclusion-variables.scss | 4 +- packages/atlas/src/theme/web/main.scss | 7 + .../atlas_core/web/_color-variants.scss | 59 + .../web/_css-variables-mappings.scss | 726 ++++++++++ .../web/_exclusion-variables-defaults.scss | 3 + .../web/_generated-exclusion-variables.scss | 2 +- .../web/_variables-css-mappings.scss | 769 ----------- .../atlas_core/web/_variables.scss | 847 +++++------- .../atlas_core/web/core/_legacy/_mxui.scss | 92 -- .../_legacy/bootstrap/_bootstrap-rtl.scss | 5 - .../core/_legacy/bootstrap/_bootstrap.scss | 805 +---------- .../atlas_core/web/core/base/_base.scss | 16 +- .../atlas_core/web/core/base/_card.scss | 21 + .../atlas_core/web/core/base/_flex.scss | 281 +++- .../atlas_core/web/core/base/_login.scss | 16 +- .../atlas_core/web/core/base/_spacing.scss | 36 +- .../web/core/base/mixins/_buttons.scss | 24 +- .../web/core/base/mixins/_layout-spacing.scss | 50 +- .../web/core/base/mixins/_spacing.scss | 24 +- .../web/core/helpers/_accordion.scss | 70 +- .../web/core/helpers/_background.scss | 80 +- .../web/core/helpers/_badge-button.scss | 42 +- .../atlas_core/web/core/helpers/_button.scss | 68 +- .../web/core/helpers/_data-grid.scss | 28 +- .../web/core/helpers/_group-box.scss | 48 +- .../web/core/helpers/_helper-classes.scss | 61 +- .../atlas_core/web/core/helpers/_image.scss | 6 +- .../atlas_core/web/core/helpers/_label.scss | 28 +- .../web/core/helpers/_list-view.scss | 34 +- .../web/core/helpers/_navigation-bar.scss | 133 +- .../web/core/helpers/_navigation-tree.scss | 126 +- .../web/core/helpers/_progress-bar.scss | 20 +- .../web/core/helpers/_progress-circle.scss | 16 +- .../web/core/helpers/_range-slider.scss | 8 +- .../atlas_core/web/core/helpers/_rating.scss | 12 +- .../web/core/helpers/_simple-menu-bar.scss | 12 +- .../core/helpers/_slider-color-variant.scss | 4 +- .../atlas_core/web/core/helpers/_slider.scss | 8 +- .../web/core/helpers/_tab-container.scss | 54 +- .../atlas_core/web/core/helpers/_table.scss | 4 +- .../web/core/helpers/_template-grid.scss | 28 +- .../web/core/helpers/_typography.scss | 62 +- .../web/core/widgets/_accordion.scss | 42 +- .../web/core/widgets/_badge-button.scss | 6 +- .../atlas_core/web/core/widgets/_badge.scss | 12 +- .../atlas_core/web/core/widgets/_button.scss | 18 +- .../web/core/widgets/_check-box.scss | 18 +- .../web/core/widgets/_data-grid.scss | 30 +- .../web/core/widgets/_data-view.scss | 32 +- .../web/core/widgets/_date-picker.scss | 30 +- .../web/core/widgets/_demo-user-switcher.scss | 95 ++ .../web/core/widgets/_div-container.scss | 61 + .../web/core/widgets/_glyphicon.scss | 2 +- .../atlas_core/web/core/widgets/_grid.scss | 12 +- .../web/core/widgets/_group-box.scss | 32 +- .../atlas_core/web/core/widgets/_header.scss | 18 +- .../atlas_core/web/core/widgets/_input.scss | 74 +- .../atlas_core/web/core/widgets/_label.scss | 4 +- .../web/core/widgets/_layout-grid.scss | 1022 ++------------ .../web/core/widgets/_list-view.scss | 18 +- .../atlas_core/web/core/widgets/_modal.scss | 31 +- .../web/core/widgets/_navigation-bar.scss | 66 +- .../web/core/widgets/_navigation-list.scss | 10 +- .../web/core/widgets/_navigation-tree.scss | 59 +- .../web/core/widgets/_pagination.scss | 24 +- .../web/core/widgets/_pop-up-menu.scss | 26 +- .../web/core/widgets/_progress-bar.scss | 4 +- .../web/core/widgets/_progress-circle.scss | 2 +- .../web/core/widgets/_progress.scss | 10 +- .../web/core/widgets/_radio-button.scss | 18 +- .../web/core/widgets/_range-slider.scss | 4 +- .../atlas_core/web/core/widgets/_rating.scss | 2 +- .../core/widgets/_scroll-container-react.scss | 22 +- .../web/core/widgets/_scroll-container.scss | 83 ++ .../web/core/widgets/_simple-menu-bar.scss | 66 +- .../atlas_core/web/core/widgets/_slider.scss | 4 +- .../atlas_core/web/core/widgets/_switch.scss | 50 +- .../web/core/widgets/_tab-container.scss | 42 +- .../atlas_core/web/core/widgets/_table.scss | 24 +- .../web/core/widgets/_template-grid.scss | 7 +- .../web/core/widgets/_timeline.scss | 38 +- .../web/core/widgets/_typography.scss | 30 +- .../web/core/widgetscustom/_dijit-widget.scss | 12 +- .../atlas_core/web/design-properties.json | 1197 ++++++++++++++--- .../web/layouts/_layout-atlas-phone.scss | 6 +- .../web/layouts/_layout-atlas-responsive.scss | 213 ++- .../web/layouts/_layout-atlas-tablet.scss | 6 +- .../atlas_core/web/layouts/_layout-atlas.scss | 42 +- .../src/themesource/atlas_core/web/main.scss | 25 +- .../atlas_core/web/themes/_breakpoints.scss | 15 + .../atlas_core/web/themes/_theme-default.scss | 576 ++++++++ 94 files changed, 4819 insertions(+), 4993 deletions(-) create mode 100644 packages/atlas/src/theme/web/_theme-dark.scss create mode 100644 packages/atlas/src/theme/web/_theme-neutral.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/_color-variants.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss delete mode 100644 packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/core/widgets/_div-container.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/themes/_breakpoints.scss create mode 100644 packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss 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..b347653ec 100644 --- a/packages/atlas/src/theme/web/custom-variables.scss +++ b/packages/atlas/src/theme/web/custom-variables.scss @@ -1,616 +1,8 @@ -// -// ██████╗ █████╗ ███████╗██╗ ██████╗ -// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ -// ██████╔╝███████║███████╗██║██║ -// ██╔══██╗██╔══██║╚════██║██║██║ -// ██████╔╝██║ ██║███████║██║╚██████╗ -// ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ -// - -//== 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; - -$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 +// Theme options +$brand-logo: false !default; +$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"; $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. @@ -620,104 +12,20 @@ $screen-sm: 576px; $screen-md: 768px; $screen-lg: 992px; $screen-xl: 1200px; +$screen-xxl: 1400px; // 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); +$screen-xs-max: ($screen-sm - 1); +$screen-sm-max: ($screen-md - 1); +$screen-md-max: ($screen-lg - 1); +$screen-lg-max: ($screen-xl - 1); +$screen-xl-max: ($screen-xxl - 1); //== Settings //## Enable or disable your desired framework features // Use of !important -$important-flex: true; // ./base/flex.scss +$important-flex: false; // ./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; - -// 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; +$important-helpers: false; // ./helpers/helperclasses.scss -// Background Color -$callout-info-bg: $color-info-lighter; +$use-css-variables: true; diff --git a/packages/atlas/src/theme/web/exclusion-variables.scss b/packages/atlas/src/theme/web/exclusion-variables.scss index fdffb43bd..c19ea3e96 100644 --- a/packages/atlas/src/theme/web/exclusion-variables.scss +++ b/packages/atlas/src/theme/web/exclusion-variables.scss @@ -6,6 +6,7 @@ $exclude-flex: false; $exclude-spacing: false; $exclude-base: false; $exclude-login: false; +$exclude-card: false; //== Widget style exclusion $exclude-accordion: false; @@ -24,6 +25,8 @@ $exclude-data-grid: false; $exclude-data-grid-helpers: false; $exclude-data-view: false; $exclude-data-picker: false; +$exclude-demo-use-switcher: false; +$exclude-div-container: false; $exclude-gallery: false; $exclude-gallery-helpers: false; $exclude-glyphicon: false; @@ -57,7 +60,6 @@ $exclude-range-slider: false; $exclude-range-slider-helpers: false; $exclude-rating: false; $exclude-rating-helpers: false; -$exclude-scroll-container: false; $exclude-simple-menu-bar: false; $exclude-simple-menu-bar-helpers: false; $exclude-slider: false; diff --git a/packages/atlas/src/theme/web/main.scss b/packages/atlas/src/theme/web/main.scss index fffc41283..3001fb4c0 100644 --- a/packages/atlas/src/theme/web/main.scss +++ b/packages/atlas/src/theme/web/main.scss @@ -1 +1,8 @@ @import "custom-variables"; +@import "theme-dark"; +@import "theme-neutral"; + +.mx-image-viewer:not(.mx-image-background) { + display: inline; + width: auto !important; +} 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/_css-variables-mappings.scss b/packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss new file mode 100644 index 000000000..9c83eeea4 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/_css-variables-mappings.scss @@ -0,0 +1,726 @@ +/* +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 { + /* + ██████╗ █████╗ ███████╗██╗ ██████╗ + ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ + ██████╔╝███████║███████╗██║██║ + ██╔══██╗██╔══██║╚════██║██║██║ + ██████╔╝██║ ██║███████║██║╚██████╗ + ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ + */ + /*== Gray Shades*/ + /*## Different gray shades to be used for our variables and components */ + --gray: #{$gray}; + --color-base: #{$color-base}; + --color-contrast: #{$color-contrast}; + + /*== Step 1: Brand Colors */ + --brand-default: #{$brand-default}; + --brand-primary: #{$brand-primary}; + --brand-success: #{$brand-success}; + --brand-warning: #{$brand-warning}; + --brand-danger: #{$brand-danger}; + + --brand-logo-height: #{$brand-logo-height}; + --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 */ + --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}; + --topbar-minimalheight: #{$topbar-minimalheight}; + --topbar-border-color: #{$topbar-border-color}; + + /* Topbar mobile */ + --m-header-height: #{$m-header-height}; + --m-header-bg: #{$m-header-bg}; + --m-header-color: #{$m-header-color}; + --m-header-title-size: #{$m-header-title-size}; + + /* Navbar Brand Name / For your company, product, or project name (used in layouts/base/) */ + --navbar-brand-name: #{$navbar-brand-name}; + + /* Background Colors */ + /* Backgrounds */ + --bg-color: #{$bg-color}; + --bg-color-secondary: #{$bg-color-secondary}; + + /* Default Link Color */ + --link-color: #{$link-color}; + --link-hover-color: #{$link-hover-color}; + + /* + █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ + ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ + ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ + ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ + ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ + ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ + */ + + /*== Typography */ + /*## Change your font family, weight, line-height, headings and more (used in components/typography) */ + + /* Font Family / False = fallback from Bootstrap (Helvetica Neue) */ + --font-family-base: #{$font-family-base}; + + /* Font Sizes */ + --font-size-large: #{$font-size-large}; + --font-size-small: #{$font-size-small}; + + /* Font Weights */ + --font-weight-light: #{$font-weight-light}; + --font-weight-normal: #{$font-weight-normal}; + --font-weight-semibold: #{$font-weight-semibold}; + --font-weight-bold: #{$font-weight-bold}; + + /* Font Size Headers */ + --font-size-h1: #{$font-size-h1}; + --font-size-h2: #{$font-size-h2}; + --font-size-h3: #{$font-size-h3}; + --font-size-h4: #{$font-size-h4}; + --font-size-h5: #{$font-size-h5}; + --font-size-h6: #{$font-size-h6}; + + /* Font Weight Headers */ + --font-weight-header: #{$font-weight-header}; + + /* Line Height */ + --line-height-base: #{$line-height-base}; + + /* Spacing */ + --font-header-margin: #{$font-header-margin}; + + /* Text Colors */ + --font-color-detail: #{$font-color-detail}; + --font-color-header: #{$font-color-header}; + + /*== Navigation */ + /*## Used in components/navigation + + /* 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-color: #{$navigation-color}; + --navigation-color-hover: #{$navigation-color-hover}; + --navigation-color-active: #{$navigation-color-active}; + + --navigation-sub-color: #{$navigation-sub-color}; + --navigation-sub-color-hover: #{$navigation-sub-color-hover}; + --navigation-sub-color-active: #{$navigation-sub-color-active}; + + /* 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-color: #{$navsidebar-color}; + --navsidebar-color-hover: #{$navsidebar-color-hover}; + --navsidebar-color-active: #{$navsidebar-color-active}; + + --navsidebar-sub-color: #{$navsidebar-sub-color}; + --navsidebar-sub-color-hover: #{$navsidebar-sub-color-hover}; + --navsidebar-sub-color-active: #{$navsidebar-sub-color-active}; + + --navsidebar-width-closed: #{$navsidebar-width-closed}; + --navsidebar-width-open: #{$navsidebar-width-open}; + + /* Navigation topbar */ + --navtopbar-font-size: #{$navtopbar-font-size}; + --navtopbar-sub-font-size: #{$navtopbar-sub-font-size}; + --navtopbar-glyph-size: #{$navtopbar-glyph-size}; + + --navtopbar-bg: #{$navtopbar-bg}; + --navtopbar-bg-hover: #{$navtopbar-bg-hover}; + --navtopbar-bg-active: #{$navtopbar-bg-active}; + --navtopbar-color: #{$navtopbar-color}; + --navtopbar-color-hover: #{$navtopbar-color-hover}; + --navtopbar-color-active: #{$navtopbar-color-active}; + + --navtopbar-sub-bg: #{$navtopbar-sub-bg}; + --navtopbar-sub-bg-hover: #{$navtopbar-sub-bg-hover}; + --navtopbar-sub-bg-active: #{$navtopbar-sub-bg-active}; + --navtopbar-sub-color: #{$navtopbar-sub-color}; + --navtopbar-sub-color-hover: #{$navtopbar-sub-color-hover}; + --navtopbar-sub-color-active: #{$navtopbar-sub-color-active}; + + /*== Cards */ + /* Shadow color */ + --shadow-color-border: #{$shadow-color-border}; + --shadow-color: #{$shadow-color}; + + /*Shadow size */ + --shadow-small: #{$shadow-small}; + --shadow-medium: #{$shadow-medium}; + --shadow-large: #{$shadow-large}; + + /*## Used in layouts/base */ + --navtopbar-border-color: #{$navtopbar-border-color}; + + /*== Form */ + /*## Used in components/inputs */ + + /* Form Label */ + --form-label-size: #{$form-label-size}; + --form-label-weight: #{$form-label-weight}; + --form-label-gutter: #{$form-label-gutter}; + + /* Form Input dimensions */ + --form-input-height: #{$form-input-height}; + --form-input-padding-y: #{$form-input-padding-y}; + --form-input-padding-x: #{$form-input-padding-x}; + --form-input-static-padding-y: #{$form-input-static-padding-y}; + --form-input-static-padding-x: #{$form-input-static-padding-x}; + --form-input-font-size: #{$form-input-font-size}; + --form-input-line-height: #{$form-input-line-height}; + --form-input-border-radius: #{$form-input-border-radius}; + + /* Form Input styling */ + --form-input-bg: #{$form-input-bg}; + --form-input-bg-focus: #{$form-input-bg-focus}; + --form-input-bg-hover: #{$form-input-bg-hover}; + --form-input-bg-disabled: #{$form-input-bg-disabled}; + --form-input-color: #{$form-input-color}; + --form-input-focus-color: #{$form-input-focus-color}; + --form-input-disabled-color: #{$form-input-disabled-color}; + --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}; + + /* Form Group */ + --form-group-margin-bottom: #{$form-group-margin-bottom}; + --form-group-gutter: #{$form-group-gutter}; + + /*== Buttons */ + /*## Define background-color, border-color and text. Used in components/buttons */ + + /* Default button style */ + --btn-font-size: #{$btn-font-size}; + /* Default value false, set to true if you want this effect */ + --btn-border-radius: #{$btn-border-radius}; + + /* Button Background Color */ + --btn-default-bg: #{$btn-default-bg}; + --btn-primary-bg: #{$btn-primary-bg}; + --btn-success-bg: #{$btn-success-bg}; + --btn-warning-bg: #{$btn-warning-bg}; + --btn-danger-bg: #{$btn-danger-bg}; + + /* Button Border Color */ + --btn-default-border-color: #{$btn-default-border-color}; + --btn-primary-border-color: #{$btn-primary-border-color}; + --btn-success-border-color: #{$btn-success-border-color}; + --btn-warning-border-color: #{$btn-warning-border-color}; + --btn-danger-border-color: #{$btn-danger-border-color}; + + /* Button Text Color */ + --btn-default-color: #{$btn-default-color}; + --btn-primary-color: #{$btn-primary-color}; + --btn-success-color: #{$btn-success-color}; + --btn-warning-color: #{$btn-warning-color}; + --btn-danger-color: #{$btn-danger-color}; + + /* Button Icon Color */ + --btn-default-icon-color: #{$btn-default-icon-color}; + + /* Button Background Color */ + --btn-default-bg-hover: #{$btn-default-bg-hover}; + --btn-primary-bg-hover: #{$btn-primary-bg-hover}; + --btn-success-bg-hover: #{$btn-success-bg-hover}; + --btn-warning-bg-hover: #{$btn-warning-bg-hover}; + --btn-danger-bg-hover: #{$btn-danger-bg-hover}; + --btn-link-bg-hover: #{$btn-link-bg-hover}; + + /*== Header blocks */ + /*## Define look and feel over multible building blocks that serve as header */ + + --header-min-height: #{$header-min-height}; + --header-bg-color: #{$header-bg-color}; + --header-bgimage-filter: #{$header-bgimage-filter}; + --header-text-color: #{$header-text-color}; + --header-text-color-detail: #{$header-text-color-detail}; + + /* + ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ + ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ + █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ + ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ + ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ + ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ + */ + + /*== Color variations */ + /*## These variations are used to support several other variables and components */ + + /* Color variations */ + --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}; + + /*== Grids */ + /*## Used for Datagrid, Templategrid, Listview & Tables (see components folder) */ + + /* Default Border Colors */ + --grid-border-color: #{$grid-border-color}; + + /* Spacing */ + /* Default */ + --grid-padding-top: #{$grid-padding-top}; + --grid-padding-right: #{$grid-padding-right}; + --grid-padding-bottom: #{$grid-padding-bottom}; + --grid-padding-left: #{$grid-padding-left}; + + /* Listview */ + --listview-padding-top: #{$listview-padding-top}; + --listview-padding-right: #{$listview-padding-right}; + --listview-padding-bottom: #{$listview-padding-bottom}; + --listview-padding-left: #{$listview-padding-left}; + + /* Background Colors */ + --grid-bg: #{$grid-bg}; + --grid-bg-header: #{$grid-bg-header}; //Grid Headers + --grid-bg-hover: #{$grid-bg-hover}; + --grid-bg-selected: #{$grid-bg-selected}; + --grid-bg-selected-hover: #{$grid-bg-selected-hover}; + + /* Striped Background Color */ + --grid-bg-striped: #{$grid-bg-striped}; + + /* Background Footer Color */ + --grid-footer-bg: #{$grid-footer-bg}; + + /* Text Color */ + --grid-selected-color: #{$grid-selected-color}; + + /* Paging Colors */ + --grid-paging-bg: #{$grid-paging-bg}; + --grid-paging-bg-hover: #{$grid-paging-bg-hover}; + --grid-paging-border-color: #{$grid-paging-border-color}; + --grid-paging-border-color-hover: #{$grid-paging-border-color-hover}; + --grid-paging-color: #{$grid-paging-color}; + --grid-paging-color-hover: #{$grid-paging-color-hover}; + + /*== Tabs */ + /*## Default variables for Tab Container Widget (used in components/tabcontainer) */ + + /* Text Color */ + --tabs-color: #{$tabs-color}; + --tabs-color-active: #{$tabs-color-active}; + --tabs-lined-color-active: #{$tabs-lined-color-active}; + + --tabs-lined-border-width: #{$tabs-lined-border-width}; + + /* Border Color */ + --tabs-border-color: #{$tabs-border-color}; + --tabs-lined-border-color: #{$tabs-lined-border-color}; + + /* Background Color */ + --tabs-bg: #{$tabs-bg}; + --tabs-bg-pills: #{$tabs-bg-pills}; + --tabs-bg-hover: #{$tabs-bg-hover}; + --tabs-bg-active: #{$tabs-bg-active}; + + /*== Modals */ + /*## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) */ + --modal-header-bg: #{$modal-header-bg}; + --modal-header-border-color: #{$modal-header-border-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) */ + + /* 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}; + --dataview-emptymessage-color: #{$dataview-emptymessage-color}; + + /*== Alerts */ + /*## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) */ + + /* Background Color */ + --alert-primary-bg: #{$alert-primary-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-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-success-border-color: #{$alert-success-border-color}; + --alert-warning-border-color: #{$alert-warning-border-color}; + --alert-danger-border-color: #{$alert-danger-border-color}; + + /*== Wizard */ + + --wizard-step-height: #{$wizard-step-height}; + --wizard-step-number-size: #{$wizard-step-number-size}; + --wizard-step-number-font-size: #{$wizard-step-number-font-size}; + + /*Wizard step states */ + --wizard-default-bg: #{$wizard-default-bg}; + --wizard-default-color: #{$wizard-default-color}; + --wizard-default-step-color: #{$wizard-default-step-color}; + --wizard-default-border-color: #{$wizard-default-border-color}; + + --wizard-active-bg: #{$wizard-active-bg}; + --wizard-active-color: #{$wizard-active-color}; + --wizard-active-step-color: #{$wizard-active-step-color}; + --wizard-active-border-color: #{$wizard-active-border-color}; + + --wizard-visited-bg: #{$wizard-visited-bg}; + --wizard-visited-color: #{$wizard-visited-color}; + --wizard-visited-step-color: #{$wizard-visited-step-color}; + --wizard-visited-border-color: #{$wizard-visited-border-color}; + + /*== Labels */ + /*## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) */ + + /* Background Color */ + --label-default-bg: #{$label-default-bg}; + --label-primary-bg: #{$label-primary-bg}; + --label-success-bg: #{$label-success-bg}; + --label-warning-bg: #{$label-warning-bg}; + --label-danger-bg: #{$label-danger-bg}; + + /* Border Color */ + --label-default-border-color: #{$label-default-border-color}; + --label-primary-border-color: #{$label-primary-border-color}; + --label-success-border-color: #{$label-success-border-color}; + --label-warning-border-color: #{$label-warning-border-color}; + --label-danger-border-color: #{$label-danger-border-color}; + + /* Text Color */ + --label-default-color: #{$label-default-color}; + --label-primary-color: #{$label-primary-color}; + --label-success-color: #{$label-success-color}; + --label-warning-color: #{$label-warning-color}; + --label-danger-color: #{$label-danger-color}; + + /*== Groupbox */ + /*## Default variables for Groupbox Widget (used in components/groupbox) */ + + /* Background Color */ + --groupbox-default-bg: #{$groupbox-default-bg}; + --groupbox-primary-bg: #{$groupbox-primary-bg}; + --groupbox-success-bg: #{$groupbox-success-bg}; + --groupbox-warning-bg: #{$groupbox-warning-bg}; + --groupbox-danger-bg: #{$groupbox-danger-bg}; + --groupbox-white-bg: #{$groupbox-white-bg}; + + /* Text Color */ + --groupbox-default-color: #{$groupbox-default-color}; + --groupbox-primary-color: #{$groupbox-primary-color}; + --groupbox-success-color: #{$groupbox-success-color}; + --groupbox-warning-color: #{$groupbox-warning-color}; + --groupbox-danger-color: #{$groupbox-danger-color}; + --groupbox-white-color: #{$groupbox-white-color}; + + /*== Callout (groupbox) Colors */ + /*## Extended variables for Groupbox Widget (used in components/groupbox) */ + + /* Text and Border Color */ + --callout-default-color: #{$callout-default-color}; + --callout-primary-color: #{$callout-primary-color}; + --callout-success-color: #{$callout-success-color}; + --callout-warning-color: #{$callout-warning-color}; + --callout-danger-color: #{$callout-danger-color}; + + /* Background Color */ + --callout-default-bg: #{$callout-default-bg}; + --callout-primary-bg: #{$callout-primary-bg}; + --callout-success-bg: #{$callout-success-bg}; + --callout-warning-bg: #{$callout-warning-bg}; + --callout-danger-bg: #{$callout-danger-bg}; + + /*== Timeline */ + /*## Extended variables for Timeline Widget */ + /* Colors */ + --timeline-icon-color: #{$timeline-icon-color}; + --timeline-border-color: #{$timeline-border-color}; + --timeline-event-time-color: #{$timeline-event-time-color}; + + /* Sizes */ + --timeline-icon-size: #{$timeline-icon-size}; + --timeline-image-size: #{$timeline-image-size}; + + /*Timeline grouping */ + --timeline-grouping-size: #{$timeline-grouping-size}; + --timeline-grouping-border-radius: #{$timeline-grouping-border-radius}; + --timeline-grouping-border-color: #{$timeline-grouping-border-color}; + + /*== Accordions */ + /*## Extended variables for Accordion Widget */ + + /* Default */ + --accordion-header-default-bg: #{$accordion-header-default-bg}; + --accordion-header-default-bg-hover: #{$accordion-header-default-bg-hover}; + --accordion-header-default-color: #{$accordion-header-default-color}; + --accordion-default-border-color: #{$accordion-default-border-color}; + + --accordion-bg-striped: #{$accordion-bg-striped}; + --accordion-bg-striped-hover: #{$accordion-bg-striped-hover}; + + /* Semantic background colors */ + --accordion-header-primary-bg: #{$accordion-header-primary-bg}; + --accordion-header-secondary-bg: #{$accordion-header-secondary-bg}; + --accordion-header-success-bg: #{$accordion-header-success-bg}; + --accordion-header-warning-bg: #{$accordion-header-warning-bg}; + --accordion-header-danger-bg: #{$accordion-header-danger-bg}; + + --accordion-header-primary-bg-hover: #{$accordion-header-primary-bg-hover}; + --accordion-header-secondary-bg-hover: #{$accordion-header-secondary-bg-hover}; + --accordion-header-success-bg-hover: #{$accordion-header-success-bg-hover}; + --accordion-header-warning-bg-hover: #{$accordion-header-warning-bg-hover}; + --accordion-header-danger-bg-hover: #{$accordion-header-danger-bg-hover}; + + /* Semantic text colors */ + --accordion-header-primary-color: #{$accordion-header-primary-color}; + --accordion-header-secondary-color: #{$accordion-header-secondary-color}; + --accordion-header-success-color: #{$accordion-header-success-color}; + --accordion-header-warning-color: #{$accordion-header-warning-color}; + --accordion-header-danger-color: #{$accordion-header-danger-color}; + + /* Semantic border colors */ + --accordion-primary-border-color: #{$accordion-primary-border-color}; + --accordion-secondary-border-color: #{$accordion-secondary-border-color}; + --accordion-success-border-color: #{$accordion-success-border-color}; + --accordion-warning-border-color: #{$accordion-warning-border-color}; + --accordion-danger-border-color: #{$accordion-danger-border-color}; + + /*== Spacing */ + /*## Advanced layout options (used in base/mixins/default-spacing) */ + + /* No spacing */ + --spacing-none: #{$spacing-none}; + + /* Smallest spacing */ + --spacing-smallest: #{$spacing-smallest}; + + /* Smaller spacing */ + --spacing-smaller: #{$spacing-smaller}; + + /* Small spacing */ + --spacing-small: #{$spacing-small}; + + /* Medium spacing */ + --spacing-medium: #{$spacing-medium}; + --t-spacing-medium: #{$t-spacing-medium}; + --m-spacing-medium: #{$m-spacing-medium}; + + /* Large spacing */ + --spacing-large: #{$spacing-large}; + --t-spacing-large: #{$t-spacing-large}; + --m-spacing-large: #{$m-spacing-large}; + + /* Larger spacing */ + --spacing-larger: #{$spacing-larger}; + + /* Largest spacing */ + --spacing-largest: #{$spacing-largest}; + + /* Layout spacing */ + --layout-spacing-top: #{$layout-spacing-top}; + --layout-spacing-right: #{$layout-spacing-right}; + --layout-spacing-bottom: #{$layout-spacing-bottom}; + --layout-spacing-left: #{$layout-spacing-left}; + + --t-layout-spacing-top: #{$t-layout-spacing-top}; + --t-layout-spacing-right: #{$t-layout-spacing-right}; + --t-layout-spacing-bottom: #{$t-layout-spacing-bottom}; + --t-layout-spacing-left: #{$t-layout-spacing-left}; + + --m-layout-spacing-top: #{$m-layout-spacing-top}; + --m-layout-spacing-right: #{$m-layout-spacing-right}; + --m-layout-spacing-bottom: #{$m-layout-spacing-bottom}; + --m-layout-spacing-left: #{$m-layout-spacing-left}; + + /* Combined layout spacing */ + --layout-spacing: #{$layout-spacing}; + --m-layout-spacing: #{$m-layout-spacing}; + --t-layout-spacing: #{$t-layout-spacing}; + + /* Gutter size */ + --gutter-size: #{$gutter-size}; + + /*== Tables */ + /*## Table spacing options (used in components/tables) */ + + --padding-table-cell-top: #{$padding-table-cell-top}; + --padding-table-cell-bottom: #{$padding-table-cell-bottom}; + --padding-table-cell-left: #{$padding-table-cell-left}; + --padding-table-cell-right: #{$padding-table-cell-right}; + + /*===== Legacy variables ===== */ + /*== Step 2: UI Customization */ + /* Sidebar */ + --sidebar-bg: #{$sidebar-bg}; + + /*== Navigation */ + /*## Used in components/navigation */ + + /* Default Navigation styling */ + --navigation-bg: #{$navigation-bg}; + --navigation-bg-hover: #{$navigation-bg-hover}; + --navigation-bg-active: #{$navigation-bg-active}; + + --navigation-sub-bg: #{$navigation-sub-bg}; + --navigation-sub-bg-hover: #{$navigation-sub-bg-hover}; + --navigation-sub-bg-active: #{$navigation-sub-bg-active}; + + --navigation-border-color: #{$navigation-border-color}; + + /* Navigation Sidebar */ + --navsidebar-bg: #{$navsidebar-bg}; + --navsidebar-bg-hover: #{$navsidebar-bg-hover}; + --navsidebar-bg-active: #{$navsidebar-bg-active}; + + --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 */ + + /* Form Label */ + --form-label-color: #{$form-label-color}; + + /*== Buttons */ + /*## Define background-color, border-color and text. Used in components/buttons */ + + /* Button Background Color */ + --btn-inverse-bg: #{$btn-inverse-bg}; + --btn-info-bg: #{$btn-info-bg}; + + /* Button Border Color */ + --btn-inverse-border-color: #{$btn-inverse-border-color}; + --btn-info-border-color: #{$btn-info-border-color}; + + /* Button Text Color */ + --btn-inverse-color: #{$btn-inverse-color}; + --btn-info-color: #{$btn-info-color}; + + /* Button Background Color */ + --btn-inverse-bg-hover: #{$btn-inverse-bg-hover}; + --btn-info-bg-hover: #{$btn-info-bg-hover}; + + /*== Alerts */ + /*## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) */ + + /* Background Color */ + --alert-info-bg: #{$alert-info-bg}; + + /* Text Color */ + --alert-info-color: #{$alert-info-color}; + + /* Border Color */ + --alert-info-border-color: #{$alert-info-border-color}; + /*== Labels */ + /*## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) */ + + /* Background Color */ + --label-info-bg: #{$label-info-bg}; + --label-inverse-bg: #{$label-inverse-bg}; + + /* Border Color */ + --label-info-border-color: #{$label-info-border-color}; + --label-inverse-border-color: #{$label-inverse-border-color}; + + /* Text Color */ + --label-info-color: #{$label-info-color}; + --label-inverse-color: #{$label-inverse-color}; + + /*== Groupbox */ + /*## Default variables for Groupbox Widget (used in components/groupbox) */ + + /* Background Color */ + --groupbox-inverse-bg: #{$groupbox-inverse-bg}; + --groupbox-info-bg: #{$groupbox-info-bg}; + + /* Text Color */ + --groupbox-inverse-color: #{$groupbox-inverse-color}; + --groupbox-info-color: #{$groupbox-info-color}; + /*== Callout (groupbox) Colors */ + /*## Extended variables for Groupbox Widget (used in components/groupbox) */ + + /* Text and Border Color */ + --callout-info-color: #{$callout-info-color}; + + /* 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..d9aa2d758 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,7 @@ $exclude-flex: false; $exclude-spacing: false; $exclude-base: false; $exclude-login: false; +$exclude-card: false; //== Widget style exclusion $exclude-accordion: false; @@ -32,6 +33,8 @@ $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..22e165daa 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; diff --git a/packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss b/packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss deleted file mode 100644 index 1f4e3de59..000000000 --- a/packages/atlas/src/themesource/atlas_core/web/_variables-css-mappings.scss +++ /dev/null @@ -1,769 +0,0 @@ -: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}; - - /*== Step 1: Brand Colors */ - --brand-default: #{$brand-default}; - --brand-primary: #{$brand-primary}; - --brand-success: #{$brand-success}; - --brand-warning: #{$brand-warning}; - --brand-danger: #{$brand-danger}; - - --brand-logo: #{$brand-logo}; - --brand-logo-height: #{$brand-logo-height}; - --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}; - - /* Global Border Color */ - --border-color-default: #{$border-color-default}; - --border-radius-default: #{$border-radius-default}; - - /* Topbar */ - --topbar-bg: #{$topbar-bg}; - --topbar-minimalheight: #{$topbar-minimalheight}; - --topbar-border-color: #{$topbar-border-color}; - - /* Topbar mobile */ - --m-header-height: #{$m-header-height}; - --m-header-bg: #{$m-header-bg}; - --m-header-color: #{$m-header-color}; - --m-header-title-size: #{$m-header-title-size}; - - /* Navbar Brand Name / For your company, product, or project name (used in layouts/base/) */ - --navbar-brand-name: #{$navbar-brand-name}; - - /* Background Colors */ - /* Backgrounds */ - --bg-color: #{$bg-color}; - --bg-color: #f8f8f8; - --bg-color-secondary: #{$bg-color-secondary}; - - /* Default Link Color */ - --link-color: #{$link-color}; - --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}; - - /* Font Sizes */ - --font-size-large: #{$font-size-large}; - --font-size-small: #{$font-size-small}; - - /* Font Weights */ - --font-weight-light: #{$font-weight-light}; - --font-weight-normal: #{$font-weight-normal}; - --font-weight-semibold: #{$font-weight-semibold}; - --font-weight-bold: #{$font-weight-bold}; - - /* Font Size Headers */ - --font-size-h1: #{$font-size-h1}; - --font-size-h2: #{$font-size-h2}; - --font-size-h3: #{$font-size-h3}; - --font-size-h4: #{$font-size-h4}; - --font-size-h5: #{$font-size-h5}; - --font-size-h6: #{$font-size-h6}; - - /* Font Weight Headers */ - --font-weight-header: #{$font-weight-header}; - - /* Line Height */ - --line-height-base: #{$line-height-base}; - - /* Spacing */ - --font-header-margin: #{$font-header-margin}; - - /* Text Colors */ - --font-color-detail: #{$font-color-detail}; - --font-color-header: #{$font-color-header}; - - /*== Navigation */ - /*## Used in components/navigation - - /* 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-color: #{$navigation-color}; - --navigation-color-hover: #{$navigation-color-hover}; - --navigation-color-active: #{$navigation-color-active}; - - --navigation-sub-color: #{$navigation-sub-color}; - --navigation-sub-color-hover: #{$navigation-sub-color-hover}; - --navigation-sub-color-active: #{$navigation-sub-color-active}; - - /* 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-color: #{$navsidebar-color}; - --navsidebar-color-hover: #{$navsidebar-color-hover}; - --navsidebar-color-active: #{$navsidebar-color-active}; - - --navsidebar-sub-color: #{$navsidebar-sub-color}; - --navsidebar-sub-color-hover: #{$navsidebar-sub-color-hover}; - --navsidebar-sub-color-active: #{$navsidebar-sub-color-active}; - - --navsidebar-width-closed: #{$navsidebar-width-closed}; - --navsidebar-width-open: #{$navsidebar-width-open}; - - /* Navigation topbar */ - --navtopbar-font-size: #{$navtopbar-font-size}; - --navtopbar-sub-font-size: #{$navtopbar-sub-font-size}; - --navtopbar-glyph-size: #{$navtopbar-glyph-size}; - - --navtopbar-bg: #{$navtopbar-bg}; - --navtopbar-bg-hover: #{$navtopbar-bg-hover}; - --navtopbar-bg-active: #{$navtopbar-bg-active}; - --navtopbar-color: #{$navtopbar-color}; - --navtopbar-color-hover: #{$navtopbar-color-hover}; - --navtopbar-color-active: #{$navtopbar-color-active}; - - --navtopbar-sub-bg: #{$navtopbar-sub-bg}; - --navtopbar-sub-bg-hover: #{$navtopbar-sub-bg-hover}; - --navtopbar-sub-bg-active: #{$navtopbar-sub-bg-active}; - --navtopbar-sub-color: #{$navtopbar-sub-color}; - --navtopbar-sub-color-hover: #{$navtopbar-sub-color-hover}; - --navtopbar-sub-color-active: #{$navtopbar-sub-color-active}; - - /*== Cards */ - /* Shadow color */ - --shadow-color-border: #{$shadow-color-border}; - --shadow-color: #{$shadow-color}; - - /*Shadow size */ - --shadow-small: #{$shadow-small}; - --shadow-medium: #{$shadow-medium}; - --shadow-large: #{$shadow-large}; - - /*## Used in layouts/base */ - --navtopbar-border-color: #{$navtopbar-border-color}; - - /*== 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}; - --form-label-gutter: #{$form-label-gutter}; - - /* Form Input dimensions */ - --form-input-height: #{$form-input-height}; - --form-input-padding-y: #{$form-input-padding-y}; - --form-input-padding-x: #{$form-input-padding-x}; - --form-input-static-padding-y: #{$form-input-static-padding-y}; - --form-input-static-padding-x: #{$form-input-static-padding-x}; - --form-input-font-size: #{$form-input-font-size}; - --form-input-line-height: #{$form-input-line-height}; - --form-input-border-radius: #{$form-input-border-radius}; - - /* Form Input styling */ - --form-input-bg: #{$form-input-bg}; - --form-input-bg-focus: #{$form-input-bg-focus}; - --form-input-bg-hover: #{$form-input-bg-hover}; - --form-input-bg-disabled: #{$form-input-bg-disabled}; - --form-input-color: #{$form-input-color}; - --form-input-focus-color: #{$form-input-focus-color}; - --form-input-disabled-color: #{$form-input-disabled-color}; - --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 Static styling */ - --form-input-static-border-color: #{$form-input-static-border-color}; - - /* Form Group */ - --form-group-margin-bottom: #{$form-group-margin-bottom}; - --form-group-gutter: #{$form-group-gutter}; - - /*== Buttons */ - /*## Define background-color, border-color and text. Used in components/buttons */ - - /* Default button style */ - --btn-font-size: #{$btn-font-size}; - --btn-bordered: #{$btn-bordered}; /* Default value false, set to true if you want this effect */ - --btn-border-radius: #{$btn-border-radius}; - - /* Button Background Color */ - --btn-default-bg: #{$btn-default-bg}; - --btn-primary-bg: #{$btn-primary-bg}; - --btn-success-bg: #{$btn-success-bg}; - --btn-warning-bg: #{$btn-warning-bg}; - --btn-danger-bg: #{$btn-danger-bg}; - - /* Button Border Color */ - --btn-default-border-color: #{$btn-default-border-color}; - --btn-primary-border-color: #{$btn-primary-border-color}; - --btn-success-border-color: #{$btn-success-border-color}; - --btn-warning-border-color: #{$btn-warning-border-color}; - --btn-danger-border-color: #{$btn-danger-border-color}; - - /* Button Text Color */ - --btn-default-color: #{$btn-default-color}; - --btn-primary-color: #{$btn-primary-color}; - --btn-success-color: #{$btn-success-color}; - --btn-warning-color: #{$btn-warning-color}; - --btn-danger-color: #{$btn-danger-color}; - - /* Button Icon Color */ - --btn-default-icon-color: #{$btn-default-icon-color}; - - /* Button Background Color */ - --btn-default-bg-hover: #{$btn-default-bg-hover}; - --btn-primary-bg-hover: #{$btn-primary-bg-hover}; - --btn-success-bg-hover: #{$btn-success-bg-hover}; - --btn-warning-bg-hover: #{$btn-warning-bg-hover}; - --btn-danger-bg-hover: #{$btn-danger-bg-hover}; - --btn-link-bg-hover: #{$btn-link-bg-hover}; - - /*== Header blocks */ - /*## Define look and feel over multible building blocks that serve as header */ - - --header-min-height: #{$header-min-height}; - --header-bg-color: #{$header-bg-color}; - --header-bgimage-filter: #{$header-bgimage-filter}; - --header-text-color: #{$header-text-color}; - --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-gradient: #{$brand-gradient}; - - /*== Grids */ - /*## Used for Datagrid, Templategrid, Listview & Tables (see components folder) */ - - /* Default Border Colors */ - --grid-border-color: #{$grid-border-color}; - - /* Spacing */ - /* Default */ - --grid-padding-top: #{$grid-padding-top}; - --grid-padding-right: #{$grid-padding-right}; - --grid-padding-bottom: #{$grid-padding-bottom}; - --grid-padding-left: #{$grid-padding-left}; - - /* Listview */ - --listview-padding-top: #{$listview-padding-top}; - --listview-padding-right: #{$listview-padding-right}; - --listview-padding-bottom: #{$listview-padding-bottom}; - --listview-padding-left: #{$listview-padding-left}; - - /* Background Colors */ - --grid-bg: #{$grid-bg}; - --grid-bg-header: #{$grid-bg-header}; //Grid Headers - --grid-bg-hover: #{$grid-bg-hover}; - --grid-bg-selected: #{$grid-bg-selected}; - --grid-bg-selected-hover: #{$grid-bg-selected-hover}; - - /* Striped Background Color */ - --grid-bg-striped: #{$grid-bg-striped}; - - /* Background Footer Color */ - --grid-footer-bg: #{$grid-footer-bg}; - - /* Text Color */ - --grid-selected-color: #{$grid-selected-color}; - - /* Paging Colors */ - --grid-paging-bg: #{$grid-paging-bg}; - --grid-paging-bg-hover: #{$grid-paging-bg-hover}; - --grid-paging-border-color: #{$grid-paging-border-color}; - --grid-paging-border-color-hover: #{$grid-paging-border-color-hover}; - --grid-paging-color: #{$grid-paging-color}; - --grid-paging-color-hover: #{$grid-paging-color-hover}; - - /*== Tabs */ - /*## Default variables for Tab Container Widget (used in components/tabcontainer) */ - - /* Text Color */ - --tabs-color: #{$tabs-color}; - --tabs-color-active: #{$tabs-color-active}; - --tabs-lined-color-active: #{$tabs-lined-color-active}; - - --tabs-lined-border-width: #{$tabs-lined-border-width}; - - /* Border Color */ - --tabs-border-color: #{$tabs-border-color}; - --tabs-lined-border-color: #{$tabs-lined-border-color}; - - /* Background Color */ - --tabs-bg: #{$tabs-bg}; - --tabs-bg-pills: #{$tabs-bg-pills}; - --tabs-bg-hover: #{$tabs-bg-hover}; - --tabs-bg-active: #{$tabs-bg-active}; - - /*== 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}; - - /*== Dataview */ - /*## Default variables for Dataview Widget (used in components/dataview) */ - - /* Controls */ - --dataview-controls-bg: #{$dataview-controls-bg}; - --dataview-controls-border-color: #{$dataview-controls-border-color}; - - /* Empty Message */ - --dataview-emptymessage-bg: #{$dataview-emptymessage-bg}; - --dataview-emptymessage-color: #{$dataview-emptymessage-color}; - - /*== Alerts */ - /*## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) */ - - /* 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}; - - /*== Wizard */ - - --wizard-step-height: #{$wizard-step-height}; - --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}; - --wizard-default-step-color: #{$wizard-default-step-color}; - --wizard-default-border-color: #{$wizard-default-border-color}; - - --wizard-active-bg: #{$wizard-active-bg}; - --wizard-active-color: #{$wizard-active-color}; - --wizard-active-step-color: #{$wizard-active-step-color}; - --wizard-active-border-color: #{$wizard-active-border-color}; - - --wizard-visited-bg: #{$wizard-visited-bg}; - --wizard-visited-color: #{$wizard-visited-color}; - --wizard-visited-step-color: #{$wizard-visited-step-color}; - --wizard-visited-border-color: #{$wizard-visited-border-color}; - - /*== Labels */ - /*## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) */ - - /* Background Color */ - --label-default-bg: #{$label-default-bg}; - --label-primary-bg: #{$label-primary-bg}; - --label-success-bg: #{$label-success-bg}; - --label-warning-bg: #{$label-warning-bg}; - --label-danger-bg: #{$label-danger-bg}; - - /* Border Color */ - --label-default-border-color: #{$label-default-border-color}; - --label-primary-border-color: #{$label-primary-border-color}; - --label-success-border-color: #{$label-success-border-color}; - --label-warning-border-color: #{$label-warning-border-color}; - --label-danger-border-color: #{$label-danger-border-color}; - - /* Text Color */ - --label-default-color: #{$label-default-color}; - --label-primary-color: #{$label-primary-color}; - --label-success-color: #{$label-success-color}; - --label-warning-color: #{$label-warning-color}; - --label-danger-color: #{$label-danger-color}; - - /*== Groupbox */ - /*## Default variables for Groupbox Widget (used in components/groupbox) */ - - /* Background Color */ - --groupbox-default-bg: #{$groupbox-default-bg}; - --groupbox-primary-bg: #{$groupbox-primary-bg}; - --groupbox-success-bg: #{$groupbox-success-bg}; - --groupbox-warning-bg: #{$groupbox-warning-bg}; - --groupbox-danger-bg: #{$groupbox-danger-bg}; - --groupbox-white-bg: #{$groupbox-white-bg}; - - /* Text Color */ - --groupbox-default-color: #{$groupbox-default-color}; - --groupbox-primary-color: #{$groupbox-primary-color}; - --groupbox-success-color: #{$groupbox-success-color}; - --groupbox-warning-color: #{$groupbox-warning-color}; - --groupbox-danger-color: #{$groupbox-danger-color}; - --groupbox-white-color: #{$groupbox-white-color}; - - /*== Callout (groupbox) Colors */ - /*## Extended variables for Groupbox Widget (used in components/groupbox) */ - - /* Text and Border Color */ - --callout-default-color: #{$callout-default-color}; - --callout-primary-color: #{$callout-primary-color}; - --callout-success-color: #{$callout-success-color}; - --callout-warning-color: #{$callout-warning-color}; - --callout-danger-color: #{$callout-danger-color}; - - /* Background Color */ - --callout-default-bg: #{$callout-default-bg}; - --callout-primary-bg: #{$callout-primary-bg}; - --callout-success-bg: #{$callout-success-bg}; - --callout-warning-bg: #{$callout-warning-bg}; - --callout-danger-bg: #{$callout-danger-bg}; - - /*== Timeline */ - /*## Extended variables for Timeline Widget */ - /* Colors */ - --timeline-icon-color: #{$timeline-icon-color}; - --timeline-border-color: #{$timeline-border-color}; - --timeline-event-time-color: #{$timeline-event-time-color}; - - /* Sizes */ - --timeline-icon-size: #{$timeline-icon-size}; - --timeline-image-size: #{$timeline-image-size}; - - /*Timeline grouping */ - --timeline-grouping-size: #{$timeline-grouping-size}; - --timeline-grouping-border-radius: #{$timeline-grouping-border-radius}; - --timeline-grouping-border-color: #{$timeline-grouping-border-color}; - - /*== Accordions */ - /*## Extended variables for Accordion Widget */ - - /* Default */ - --accordion-header-default-bg: #{$accordion-header-default-bg}; - --accordion-header-default-bg-hover: #{$accordion-header-default-bg-hover}; - --accordion-header-default-color: #{$accordion-header-default-color}; - --accordion-default-border-color: #{$accordion-default-border-color}; - - --accordion-bg-striped: #{$accordion-bg-striped}; - --accordion-bg-striped-hover: #{$accordion-bg-striped-hover}; - - /* Semantic background colors */ - --accordion-header-primary-bg: #{$accordion-header-primary-bg}; - --accordion-header-secondary-bg: #{$accordion-header-secondary-bg}; - --accordion-header-success-bg: #{$accordion-header-success-bg}; - --accordion-header-warning-bg: #{$accordion-header-warning-bg}; - --accordion-header-danger-bg: #{$accordion-header-danger-bg}; - - --accordion-header-primary-bg-hover: #{$accordion-header-primary-bg-hover}; - --accordion-header-secondary-bg-hover: #{$accordion-header-secondary-bg-hover}; - --accordion-header-success-bg-hover: #{$accordion-header-success-bg-hover}; - --accordion-header-warning-bg-hover: #{$accordion-header-warning-bg-hover}; - --accordion-header-danger-bg-hover: #{$accordion-header-danger-bg-hover}; - - /* Semantic text colors */ - --accordion-header-primary-color: #{$accordion-header-primary-color}; - --accordion-header-secondary-color: #{$accordion-header-secondary-color}; - --accordion-header-success-color: #{$accordion-header-success-color}; - --accordion-header-warning-color: #{$accordion-header-warning-color}; - --accordion-header-danger-color: #{$accordion-header-danger-color}; - - /* Semantic border colors */ - --accordion-primary-border-color: #{$accordion-primary-border-color}; - --accordion-secondary-border-color: #{$accordion-secondary-border-color}; - --accordion-success-border-color: #{$accordion-success-border-color}; - --accordion-warning-border-color: #{$accordion-warning-border-color}; - --accordion-danger-border-color: #{$accordion-danger-border-color}; - - /*== Spacing */ - /*## Advanced layout options (used in base/mixins/default-spacing) */ - - /* Smallest spacing */ - --spacing-smallest: #{$spacing-smallest}; - - /* Smaller spacing */ - --spacing-smaller: #{$spacing-smaller}; - - /* Small spacing */ - --spacing-small: #{$spacing-small}; - - /* Medium spacing */ - --spacing-medium: #{$spacing-medium}; - --t-spacing-medium: #{$t-spacing-medium}; - --m-spacing-medium: #{$m-spacing-medium}; - - /* Large spacing */ - --spacing-large: #{$spacing-large}; - --t-spacing-large: #{$t-spacing-large}; - --m-spacing-large: #{$m-spacing-large}; - - /* Larger spacing */ - --spacing-larger: #{$spacing-larger}; - - /* Largest spacing */ - --spacing-largest: #{$spacing-largest}; - - /* Layout spacing */ - --layout-spacing-top: #{$layout-spacing-top}; - --layout-spacing-right: #{$layout-spacing-right}; - --layout-spacing-bottom: #{$layout-spacing-bottom}; - --layout-spacing-left: #{$layout-spacing-left}; - - --t-layout-spacing-top: #{$t-layout-spacing-top}; - --t-layout-spacing-right: #{$t-layout-spacing-right}; - --t-layout-spacing-bottom: #{$t-layout-spacing-bottom}; - --t-layout-spacing-left: #{$t-layout-spacing-left}; - - --m-layout-spacing-top: #{$m-layout-spacing-top}; - --m-layout-spacing-right: #{$m-layout-spacing-right}; - --m-layout-spacing-bottom: #{$m-layout-spacing-bottom}; - --m-layout-spacing-left: #{$m-layout-spacing-left}; - - /* Combined layout spacing */ - --layout-spacing: #{$layout-spacing}; - --m-layout-spacing: #{$m-layout-spacing}; - --t-layout-spacing: #{$t-layout-spacing}; - - /* Gutter size */ - --gutter-size: #{$gutter-size}; - - /*== Tables */ - /*## Table spacing options (used in components/tables) */ - - --padding-table-cell-top: #{$padding-table-cell-top}; - --padding-table-cell-bottom: #{$padding-table-cell-bottom}; - --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}; - - /*== Navigation */ - /*## Used in components/navigation */ - - /* Default Navigation styling */ - --navigation-bg: #{$navigation-bg}; - --navigation-bg-hover: #{$navigation-bg-hover}; - --navigation-bg-active: #{$navigation-bg-active}; - - --navigation-sub-bg: #{$navigation-sub-bg}; - --navigation-sub-bg-hover: #{$navigation-sub-bg-hover}; - --navigation-sub-bg-active: #{$navigation-sub-bg-active}; - - --navigation-border-color: #{$navigation-border-color}; - - /* Navigation Sidebar */ - --navsidebar-bg: #{$navsidebar-bg}; - --navsidebar-bg-hover: #{$navsidebar-bg-hover}; - --navsidebar-bg-active: #{$navsidebar-bg-active}; - - --navsidebar-sub-bg: #{$navsidebar-sub-bg}; - --navsidebar-sub-bg-hover: #{$navsidebar-sub-bg-hover}; - --navsidebar-sub-bg-active: #{$navsidebar-sub-bg-active}; - - --navsidebar-border-color: #{$navsidebar-border-color}; - - /*== Form */ - /*## Used in components/inputs */ - - /* Form Label */ - --form-label-color: #{$form-label-color}; - - /*== Buttons */ - /*## Define background-color, border-color and text. Used in components/buttons */ - - /* Button Background Color */ - --btn-inverse-bg: #{$btn-inverse-bg}; - --btn-info-bg: #{$btn-info-bg}; - - /* Button Border Color */ - --btn-inverse-border-color: #{$btn-inverse-border-color}; - --btn-info-border-color: #{$btn-info-border-color}; - - /* Button Text Color */ - --btn-inverse-color: #{$btn-inverse-color}; - --btn-info-color: #{$btn-info-color}; - - /* Button Background Color */ - --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) */ - - /* Background Color */ - --alert-info-bg: #{$alert-info-bg}; - - /* Text Color */ - --alert-info-color: #{$alert-info-color}; - - /* Border Color */ - --alert-info-border-color: #{$alert-info-border-color}; - /*== Labels */ - /*## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) */ - - /* Background Color */ - --label-info-bg: #{$label-info-bg}; - --label-inverse-bg: #{$label-inverse-bg}; - - /* Border Color */ - --label-info-border-color: #{$label-info-border-color}; - --label-inverse-border-color: #{$label-inverse-border-color}; - - /* Text Color */ - --label-info-color: #{$label-info-color}; - --label-inverse-color: #{$label-inverse-color}; - - /*== Groupbox */ - /*## Default variables for Groupbox Widget (used in components/groupbox) */ - - /* Background Color */ - --groupbox-inverse-bg: #{$groupbox-inverse-bg}; - --groupbox-info-bg: #{$groupbox-info-bg}; - - /* Text Color */ - --groupbox-inverse-color: #{$groupbox-inverse-color}; - --groupbox-info-color: #{$groupbox-info-color}; - /*== Callout (groupbox) Colors */ - /*## Extended variables for Groupbox Widget (used in components/groupbox) */ - - /* Text and Border Color */ - --callout-info-color: #{$callout-info-color}; - - /* Background Color */ - --callout-info-bg: #{$callout-info-bg}; -} diff --git a/packages/atlas/src/themesource/atlas_core/web/_variables.scss b/packages/atlas/src/themesource/atlas_core/web/_variables.scss index ed029cd1e..9725209c4 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_variables.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_variables.scss @@ -1,199 +1,194 @@ -// -// 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. +*/ -$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 +196,258 @@ $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; +$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; -// Striped Background Color -$grid-bg-striped: mix($grid-border-color, #fff, 10%) !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) +/* Alerts */ +$alert-primary-bg: var(--brand-primary-200) !default; +$alert-success-bg: var(--brand-success-200) !default; +$alert-warning-bg: var(--brand-warning-200) !default; +$alert-danger-bg: var(--brand-danger-200) !default; -// 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; +$alert-primary-color: var(--brand-primary-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; -// 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 +$alert-primary-border-color: var(--brand-primary-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; +$label-primary-color: $color-base !default; +$label-success-color: $color-base !default; +$label-warning-color: $color-base !default; +$label-danger-color: $color-base !default; -//== Groupbox -//## Default variables for Groupbox Widget (used in components/groupbox) - -// 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 +463,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; - -//== Navigation -//## Used in components/navigation +/* 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; -// 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-color: $color-base !default; +$btn-info-color: $color-base !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; +$btn-inverse-bg-hover: var(--brand-primary-300) !default; +$btn-info-bg-hover: var(--brand-primary-300) !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; +/* Alerts */ +$alert-info-bg: var(--brand-primary-50) !default; +$alert-info-color: var(--brand-primary-600) !default; +$alert-info-border-color: $brand-primary !default; -$navsidebar-border-color: $navsidebar-bg-hover !default; +/* Labels */ +$label-info-bg: var(--brand-primary-300) !default; +$label-inverse-bg: var(--brand-primary-600) !default; -//== Form -//## Used in components/inputs +$label-info-border-color: var(--brand-primary-300) !default; +$label-inverse-border-color: var(--brand-primary-600) !default; -// Form Label -$form-label-color: $brand-inverse !default; +$label-info-color: $color-base !default; +$label-inverse-color: $color-base !default; -//== Buttons -//## Define background-color, border-color and text. Used in components/buttons +/* Groupbox */ +$groupbox-inverse-bg: var(--brand-primary-600) !default; +$groupbox-info-bg: var(--brand-primary-300) !default; -// Button Background Color -$btn-inverse-bg: $brand-inverse !default; -$btn-info-bg: $brand-info !default; +$groupbox-inverse-color: $color-base !default; +$groupbox-info-color: $color-base !default; -// Button Border Color -$btn-inverse-border-color: $brand-inverse !default; -$btn-info-border-color: $brand-info !default; +/* Callouts */ +$callout-info-color: var(--brand-primary-300) !default; +$callout-info-bg: var(--brand-primary-50) !default; -// Button Text Color -$btn-inverse-color: #fff !default; -$btn-info-color: #fff !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; - -//== 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; - -// Border Color -$label-info-border-color: $brand-info !default; -$label-inverse-border-color: $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; -// 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..7a3e4f884 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 @@ -2724,7 +2724,6 @@ Main class hierarchy: .mx-navigationtree a.active { color: #fff; text-shadow: none; - background: #3498db; border-radius: 3px; } .mx-navigationtree .mx-navigationtree-collapsed ul { @@ -2805,23 +2804,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; @@ -3071,7 +3053,6 @@ Main class hierarchy: .mx-navigationlist li:focus, .mx-navigationlist li.active { color: #fff; - background-color: #3498db; } .mx-navigationlist * { cursor: pointer; @@ -3266,79 +3247,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..48116e4fc 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; @@ -1138,7 +1138,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; @@ -1596,743 +1596,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; } @@ -4217,22 +3480,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 +3541,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 +4226,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 +5801,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..c37658e51 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,23 +16,23 @@ 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); -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. 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..45e52c9e8 --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss @@ -0,0 +1,21 @@ +// +// 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(--border-default); + border-radius: var(--border-card-default, var(--border-radius-default)); + background-color: var(--bg-color-secondary); + overflow: hidden; + position: relative; + padding: var(--spacing-large); + box-shadow: var(--shadow-medium) var(--shadow-color); + margin-bottom: var(--spacing-small); + } +} 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..0934bf50e 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,157 @@ 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}; + overflow: hidden #{$important-flex-value}; + flex: var(--flex-shrink) #{$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 +171,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 +234,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 +275,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/_login.scss b/packages/atlas/src/themesource/atlas_core/web/core/base/_login.scss index 70c68b970..66aac080d 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, rgba(var(--brand-primary), 0.9) 0%, rgba(var(--brand-primary), 0.6) 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..bbcf68f16 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 @@ -38,10 +38,26 @@ background-color: $background; } } + &.btn-style-icon { + @if $color != var(--btn-default-color) { + color: $border; + background: color-mix(in srgb, white, $border 15%); + } + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + border-color: $border; + background-color: $border; + } + } // Button bordered &.btn-bordered { background-color: transparent; - @if $color != $btn-default-color { + @if $color != var(--btn-default-color) { color: $border; } @@ -60,13 +76,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..551748387 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,82 @@ // 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) + ); } .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) + ); } .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) + ); } .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) + ); } .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) + ); } .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) + ); } .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) + ); } // 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 +152,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..663bcca4c 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 @@ -342,6 +347,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 +455,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..4a12905fe 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,47 @@ // When used in topbar .region-topbar { .mx-navbar { - background-color: $navtopbar-bg; + background: var(--navtopbar-bg); min-height: auto; ul.nav { > .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 +66,40 @@ & > .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(--border-radius-default); + background: var(--navtopbar-sub-bg); + padding: var(--spacing-small) var(--spacing-small) 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-small); + color: var(--navtopbar-color); + border-radius: var(--border-radius-default); + margin-bottom: var(--spacing-small); 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-activ); + 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 +107,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 +129,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 +176,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 +196,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..62d50c116 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,39 @@ // 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; + a:focus { + 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-hover); + border-bottom-color: var(--navtopbar-color-hover); } } + a:active, a.active { - color: $navtopbar-color-active; - border-left-color: $navtopbar-color-active; - background-color: $navtopbar-bg-active; + color: var(--navtopbar-color-active); + border-left-color: var(--navtopbar-color-active); + background: var(--navtopbar-bg-active); } } } @@ -55,21 +55,21 @@ /* 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; + &:focus { + 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 +81,40 @@ // When used in sidebar .region-sidebar { .mx-navigationtree { - background-color: $navsidebar-bg; .navbar-inner > ul { + background: transparent; & > li { & > a { - color: $navsidebar-color; - border-color: $navsidebar-border-color; - background-color: $navsidebar-bg; - font-size: $navsidebar-font-size; + color: var(--navsidebar-color); + border-color: var(--navsidebar-border-color); + font-size: var(--navsidebar-font-size); .caret { - border-top-color: $navsidebar-color; - border-bottom-color: $navsidebar-color; + 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; + font-size: var(--navsidebar-glyph-size); } } a:hover, - a:focus, - a.active { - color: $navsidebar-color-hover; - background-color: $navsidebar-bg-hover; + a:focus { + 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, a.active { - color: $navsidebar-color-active; - border-left-color: $navsidebar-color-active; - background-color: $navsidebar-bg-active; + color: var(--navsidebar-color-active); + border-left-color: var(--navsidebar-color-active); + background: var(--navsidebar-bg-active); } } } @@ -121,25 +122,42 @@ /* Sub navigation item specific */ li.mx-navigationtree-has-items { & > ul { - background-color: $navsidebar-sub-bg; + position: relative; + border-radius: var(--border-radius-default); li { a { - color: $navsidebar-sub-color; - background-color: $navsidebar-sub-bg; - font-size: $navsidebar-sub-font-size; + border-radius: var(--border-radius-default); + color: var(--navsidebar-sub-color); + font-size: var(--navsidebar-sub-font-size); &:hover, - &:focus, - &.active { - color: $navsidebar-sub-color-hover; - background-color: $navsidebar-sub-bg-hover; + &:focus { + color: var(--navsidebar-sub-color-hover); + background: var(--navsidebar-sub-bg-hover); } + &:active, &.active { - color: $navsidebar-sub-color-active; - background-color: $navsidebar-sub-bg-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 { + 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..f171e9156 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 @@ -19,20 +19,20 @@ 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..d1944ede5 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,15 +24,15 @@ 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, @@ -56,7 +56,7 @@ // Mendix button link .mx-link { padding: 0; - color: $link-color; + color: var(--link-color); &[aria-disabled="true"] { cursor: not-allowed; @@ -66,7 +66,7 @@ } .link-back { - color: $font-color-detail; + color: var(--font-color-detail); .glyphicon, .mx-icon-lined, @@ -81,7 +81,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..37d142cc2 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,21 @@ } &: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: rgba(var(--form-input-border-focus-color), 0.4); } &: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); } } } 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..a9032bdd5 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 @@ -28,33 +28,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..00ba1a50e --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_div-container.scss @@ -0,0 +1,61 @@ +// +// 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; + } + + .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..4173f2496 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,14 +17,14 @@ > .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; @@ -33,36 +33,36 @@ // 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 +75,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 ee1cf7d39..54f9fce5d 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,16 +34,16 @@ } &::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; + border-color: var(--form-input-border-focus-color); outline: 0; - background-color: $form-input-bg-focus; + background-color: var(--form-input-bg-focus); box-shadow: none; } } @@ -52,7 +52,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 +63,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 +77,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 +92,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 +113,7 @@ display: block; width: 100%; text-align: right; - margin-top: $spacing-small; + margin-top: var(--spacing-small); } textarea.form-control { @@ -128,7 +127,7 @@ max-width: 100%; .btn { - margin-left: $spacing-small; + margin-left: var(--spacing-small); } .mx-validation-message { @@ -138,29 +137,28 @@ } .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; + padding-right: var(--form-group-gutter); + padding-left: var(--form-group-gutter); } // Alignment content @@ -176,9 +174,9 @@ 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 { @@ -215,9 +213,9 @@ .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); + line-height: var(--form-input-line-height); } } } @@ -265,11 +263,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..b61dd2367 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,67 @@ 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); //var(--spacing-medium); + --layoutgrid-column-gap: var(--gutter-size); //var(--spacing-medium); + --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; + } + } + } + + &.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-"] { + 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 +89,7 @@ .no-gutters { margin-right: 0; margin-left: 0; + --layoutgrid-column-gap: 0px; } .no-gutters > .col, @@ -44,907 +99,74 @@ } // 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%; + display: flex; + flex-direction: column; + } + .col#{$suffix}-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + display: flex; + flex-direction: column; + } + @for $i from 1 through 12 { + .col#{$suffix}-#{$i} { + $col: calc(12 / #{$i}); + $width: calc(100% / $col - var(--layoutgrid-column-gap) / $col * ($col - 1)); + flex: 0 0 $width; + max-width: $width; + display: flex; + flex-direction: column; + } + } + + .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..8f4147c88 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-200); } .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..1732b6379 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 { 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); } } } @@ -126,7 +129,7 @@ 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..05fb8c1fe 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,7 +15,7 @@ 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) @@ -23,36 +23,36 @@ & > li.mx-navbar-item > a { display: flex; align-items: center; - padding: $navigation-item-padding; + padding: var(--navigation-item-padding); 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(--border-radius-default); /* 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,7 +67,7 @@ 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 @@ -83,12 +83,12 @@ 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); } /* When hovering or the dropdown is open */ @@ -98,22 +98,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 +124,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..dd37ddeeb 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,22 @@ 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(--navigation-bg-hover); } &.active { color: inherit; - background-color: $grid-bg-selected; + background-color: var(--navigation-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..b331dbd66 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,7 +49,7 @@ top: 0; margin-right: 0.5em; vertical-align: middle; - font-size: $navigation-glyph-size; + font-size: var(--navigation-glyph-size); } } @@ -61,19 +57,19 @@ 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 +79,6 @@ & > ul { margin: 0; padding-left: 0; - background-color: $navigation-sub-bg; li { margin: 0; @@ -91,36 +86,38 @@ border: 0; a { - padding: $spacing-medium; + padding: var(--spacing-medium); 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; + color: var(--navigation-sub-color-hover); outline: 0; - background-color: $navigation-sub-bg-hover; } &.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(--border-radius-default); + background-color: var(--navigation-sub-bg); + } } /* remove focus */ 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..e566d5f9d 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 @@ -54,7 +54,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 +65,7 @@ height: 50%; transform: translate(-50%, -50%); pointer-events: none; - background-color: $form-input-border-focus-color; + background-color: var(--form-input-border-focus-color); } &:not(:checked):after { @@ -74,7 +74,7 @@ } &:not(:disabled):not(:checked):hover:after { - background-color: $form-input-bg-hover; + background-color: var(--form-input-bg-hover); } &:checked:after, @@ -85,24 +85,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: rgba(var(--form-input-border-focus-color), 0.4); } &:checked:disabled:after { - background-color: rgba($form-input-border-focus-color, 0.4); + background-color: rgba(var(--form-input-border-focus-color), 0.4); } & + 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..13dbfd5af 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 @@ -52,7 +52,7 @@ &:focus-visible { .rating-image, .rating-icon { - outline: 1px solid $brand-primary; + outline: 1px solid var(--brand-primary); } } } 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 451a43eb5..b77c1d97b 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,9 @@ // 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(--sidebar-animation-duration) var(--sidebar-animation-function), + margin-right var(--sidebar-animation-duration) var(--sidebar-animation-function), + margin-left var(--sidebar-animation-duration) var(--sidebar-animation-function); z-index: 1; } @@ -168,7 +169,7 @@ // Push content aside animation .mx-scrollcontainer-push > :not(.mx-scrollcontainer-toggleable) { - transition: transform $sidebar-animation-duration ease-in; + transition: transform var(--sidebar-animation-duration) var(--sidebar-animation-function); } .mx-scrollcontainer-push.mx-scrollcontainer-open > :not(.mx-scrollcontainer-toggleable) { @@ -189,14 +190,16 @@ } .mx-scrollcontainer-wrapper { - height: 100%; + display: flex; + flex-direction: column; + flex: 1; &:not(.mx-scrollcontainer-nested) { -webkit-overflow-scrolling: touch; } & > .mx-placeholder { - height: 100%; + flex: 1; } } @@ -210,7 +213,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); 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..6ebfa7be3 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 @@ -19,13 +19,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/_switch.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss index 01b89c4ab..84cc09e94 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); } } } @@ -144,15 +144,15 @@ $default-ios-color: rgb(100, 189, 99); @mixin switch() { .widget-switch-btn-wrapper { &:focus { - outline: 1px solid $brand-primary; + outline: 1px solid var(--brand-primary); } } - @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); + @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..0969b4665 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,23 @@ & > 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; + background-color: var(--tabs-bg-hover); } } & > 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 +53,7 @@ margin: 0; text-align: center; border-style: none; - background-color: $brand-primary; + background-color: var(--brand-primary); li { display: table-cell; @@ -67,13 +67,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 +91,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..0443fcd8b 100644 --- a/packages/atlas/src/themesource/atlas_core/web/design-properties.json +++ b/packages/atlas/src/themesource/atlas_core/web/design-properties.json @@ -1,4 +1,52 @@ { + "Page": [ + { + "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" + } + ] + } + ], "Widget": [ { "name": "Spacing", @@ -162,92 +210,869 @@ ] }, { - "name": "Align self", - "oldNames": ["Align Self"], - "type": "ToggleButtonGroup", - "description": "Float the element to the left or to the right.", + "name": "Align self", + "oldNames": ["Align Self"], + "type": "ToggleButtonGroup", + "description": "Float the element to the left or to the right.", + "options": [ + { + "name": "Left", + "icon": "Atlas_Core.Atlas.align-left", + "class": "pull-left" + }, + { + "name": "Right", + "icon": "Atlas_Core.Atlas.align-right", + "class": "pull-right" + } + ] + }, + { + "name": "Hide on", + "description": "Hide on device type", + "multiSelect": true, + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Phone", + "icon": "Atlas_Core.Atlas.mobile-phone", + "class": "hide-phone", + "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": "Desktop", + "icon": "Atlas_Core.Atlas.desktop", + "class": "hide-desktop", + "oldNames": ["Hide on desktop", "Hide On Desktop"] + } + ] + } + ], + "DivContainer": [ + { + "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_Controls.direction-horizontal" + }, + { + "name": "Vertical (column)", + "class": "flex-column", + "icon": "Atlas_Core.Atlas_Controls.direction-vertical" + } + ] + }, + { + "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" + } + ] + }, + { + "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_Controls.aligncontent-horizontal-left" + }, + { + "name": "Center", + "class": "align-x-center", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-center" + }, + { + "name": "Right", + "class": "align-x-right", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-right" + }, + { + "name": "Space between (only for horizontal containers)", + "class": "align-x-between", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-space-between" + }, + { + "name": "Space around (only for horizontal containers)", + "class": "align-x-around", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-space-around" + }, + { + "name": "Space evenly (only for horizontal containers)", + "class": "align-x-evenly", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-space-even" + } + ] + }, + { + "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_Controls.aligncontent-vertical-top" + }, + { + "name": "Center", + "class": "align-y-center", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-center" + }, + { + "name": "Bottom", + "class": "align-y-bottom", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-bottom" + }, + { + "name": "Space between (only for vertical containers)", + "class": "align-y-between", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-space-between" + }, + { + "name": "Space around (only for vertical containers)", + "class": "align-y-around", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-space-around" + }, + { + "name": "Space evenly (only for vertical containers)", + "class": "align-y-evenly", + "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-space-even" + } + ] + }, + { + "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_Controls.grow-shrink-auto-fill" + }, + { + "name": "Hug content (only shrink)", + "class": "flex-items-shrink", + "icon": "Atlas_Core.Atlas_Controls.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_Controls.grow-shrink-none-fixed" + } + ] + }, + { + "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_Controls.grow-shrink-auto-fill" + }, + { + "name": "Hug content (only shrink)", + "variable": "--flex-fit-content", + "icon": "Atlas_Core.Atlas_Controls.grow-shrink-auto-fit" + }, + { + "name": "Fixed (neither shrink nor grow)", + "variable": "--none", + "icon": "Atlas_Core.Atlas_Controls.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" + } + ] + }, + { + "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" + } + ] + }, + { + "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" + } + ] + }, + { + "name": "Disable row wrap", + "type": "Toggle", + "class": "flex-nowrap" + }, + { + "name": "Card style", + "type": "Toggle", + "description": "Render container as card", + "class": "card" + }, + { + "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" + } + ] + }, + { + "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" + } + ] + }, + { + "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_Controls.none" + }, + { + "name": "All", + "class": "div-border-toggle-all", + "icon": "Atlas_Core.Atlas_Controls.borders-all" + }, + { + "name": "Top", + "class": "div-border-toggle-top", + "icon": "Atlas_Core.Atlas_Controls.borders-top" + }, + { + "name": "Right", + "class": "div-border-toggle-right", + "icon": "Atlas_Core.Atlas_Controls.borders-right" + }, + { + "name": "Left", + "class": "div-border-toggle-left", + "icon": "Atlas_Core.Atlas_Controls.borders-left" + }, + { + "name": "Bottom", + "class": "div-border-toggle-bottom", + "icon": "Atlas_Core.Atlas_Controls.borders-bottom" + } + ] + }, + { + "name": "Border style", + "property": "--div-border-style", + "type": "ToggleButtonGroup", + "options": [ + { + "name": "Solid", + "variable": "--border-style-solid", + "icon": "Atlas_Core.Atlas_Controls.border-style-solid" + }, + { + "name": "Dashed", + "variable": "--border-style-dashed", + "icon": "Atlas_Core.Atlas_Controls.border-style-dashed" + }, + { + "name": "Dotted", + "variable": "--border-style-dotted", + "icon": "Atlas_Core.Atlas_Controls.border-style-dotted" + } + ] + }, + { + "name": "Border width", + "type": "ToggleButtonGroup", + "property": "border-width", + "options": [ + { + "name": "Thin", + "variable": "--border-width-thin", + "icon": "Atlas_Core.Atlas_Controls.border-width-thin" + }, + { + "name": "Medium", + "variable": "--border-width-medium", + "icon": "Atlas_Core.Atlas_Controls.border-width-medium" + }, + { + "name": "Thick", + "variable": "--border-width-thick", + "icon": "Atlas_Core.Atlas_Controls.border-width-thick" + } + ] + }, + { + "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" + } + ] + }, + { + "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_Controls.none" + }, + { + "name": "Small", + "variable": "--border-radius-s", + "icon": "Atlas_Core.Atlas_Controls.border-radius-small" + }, + { + "name": "Medium", + "variable": "--border-radius-m", + "icon": "Atlas_Core.Atlas_Controls.border-radius-medium" + }, + { + "name": "Large", + "variable": "--border-radius-l", + "icon": "Atlas_Core.Atlas_Controls.border-radius-large" + } + ] + }, + { + "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": [ + { + "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" + } + ] + }, + { + "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" + } + ] + }, + { + "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" + } + ] + }, + { + "name": "Style", + "type": "ToggleButtonGroup", + "description": "Set button style", + "options": [ + { + "name": "Icon button", + "class": "btn-style-icon" + } + ] + }, + { + "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.", + "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": [ + { + "name": "Cards style", + "type": "Toggle", + "description": "Makes the columns appear as cards.", + "class": "cards" + }, + { + "name": "Column background", + "type": "ColorPicker", + "property": "--layoutgrid-column-bg", + "description": "Change the background color of the columns.", "options": [ { - "name": "Left", - "icon": "Atlas_Core.Atlas.align-left", - "class": "pull-left" + "name": "Background Primary", + "variable": "--bg-color" }, { - "name": "Right", - "icon": "Atlas_Core.Atlas.align-right", - "class": "pull-right" + "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" } ] }, { - "name": "Hide on", - "description": "Hide on device type", - "multiSelect": true, + "name": "Column gap", + "property": "--layoutgrid-column-gap", "type": "ToggleButtonGroup", + "description": "Sets a gap between the layout grid columns.", "options": [ { - "name": "Phone", - "icon": "Atlas_Core.Atlas.mobile-phone", - "class": "hide-phone", - "oldNames": ["Hide on phone", "Hide On Phone"] + "name": "None", + "variable": "--spacing-none" }, { - "name": "Tablet", - "icon": "Atlas_Core.Atlas.tablet", - "class": "hide-tablet", - "oldNames": ["Hide on tablet", "Hide On Tablet"] + "name": "Small", + "variable": "--spacing-small" }, { - "name": "Desktop", - "icon": "Atlas_Core.Atlas.desktop", - "class": "hide-desktop", - "oldNames": ["Hide on desktop", "Hide On Desktop"] + "name": "Medium", + "variable": "--spacing-medium" + }, + { + "name": "Large", + "variable": "--spacing-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.", + "name": "Row gap", + "property": "--layoutgrid-row-gap", + "type": "ToggleButtonGroup", + "description": "Sets a gap between the layout grid rows.", "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": "None", + "variable": "--none" }, { - "name": "Left align as a column", - "oldNames": ["Left align as column"], - "class": "col-left" + "name": "Small", + "variable": "--spacing-small" }, { - "name": "Center align as a column", - "oldNames": ["Center align as column"], - "class": "col-center" + "name": "Medium", + "variable": "--spacing-medium" }, { - "name": "Right align as a column", - "oldNames": ["Right align as column"], - "class": "col-right" + "name": "Large", + "variable": "--spacing-large" } ] - }, + } + ], + "DataView": [ { "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,145 +1115,108 @@ "oldNames": ["Danger"], "preview": "--brand-danger", "class": "background-danger" - }, - { - "name": "Brand Gradient", - "preview": "--brand-gradient", - "class": "background-brand-gradient" } ] }, { "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.", + "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" } ] } @@ -815,9 +1603,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,9 +1627,62 @@ "preview": "--brand-danger" }, { - "name": "White", + "name": "Contrast", "class": "text-white", - "preview": "white" + "preview": "--font-color-contrast", + "oldNames": ["White"] + } + ] + }, + { + "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" } ] }, @@ -1356,6 +2197,34 @@ "class": "img-opacity-high" } ] + }, + { + "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": [ 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..94685c2b2 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,44 @@ Extra styling for responsive layouts ========================================================================== */ @mixin layout-atlas-responsive() { - $sidebar-icon-height: 52px; - $sidebar-icon-width: 52px; + :root { + --sidebar-icon-height: 52px; + --sidebar-icon-width: 52px; + --sidebar-animation-duration: 250ms; + --sidebar-animation-function: ease-in; + } + + .layout-atlas { + .mx-scrollcontainer { + &:not(.mx-scrollcontainer-open) { + .region-sidebar { + .mx-scrollcontainer-wrapper { + transition: padding var(--sidebar-animation-duration) var(--sidebar-animation-function); + } + } + } + &.mx-scrollcontainer-open { + .region-sidebar { + .mx-scrollcontainer-wrapper { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); + transition: padding var(--sidebar-animation-duration) var(--sidebar-animation-function); + } + } + } + } + } .layout-atlas-responsive, - .layout-atlas-responsive-default { + .layout-atlas-responsive-default, + .layout-atlas-responsive-sidebar { @media (min-width: $screen-md) { - --closed-sidebar-width: #{$navsidebar-width-closed}; + --closed-sidebar-width: var(--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(--navsidebar-width-closed) !important; } .mx-scrollcontainer-wrapper .mx-navigationtree ul li { @@ -26,12 +52,12 @@ &.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(--sidebar-icon-width); display: block; min-width: auto; - padding: $spacing-small 0; + padding: var(--spacing-small) 0; & > li.mx-navigationtree-has-items:hover > ul { top: 0; @@ -39,8 +65,8 @@ } } - &.mx-navigationtree-collapsed, - &.mx-navigationtree-has-items { + &.mx-navigationtree-has-items, + &.mx-navigationtree-collapsed { ul { display: none; } @@ -56,16 +82,16 @@ z-index: 100; top: 0; bottom: 0; - left: $sidebar-icon-width; + left: var(--sidebar-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 +107,7 @@ } &.mx-scrollcontainer-open > .region-sidebar { - width: $navsidebar-width-closed !important; + width: var(--navsidebar-width-closed) !important; & > .mx-scrollcontainer-wrapper { position: relative; @@ -90,7 +116,7 @@ .region-sidebar > .mx-scrollcontainer-wrapper { z-index: 2; - left: -$navsidebar-width-closed; + left: calc(-1 * var(--navsidebar-width-closed)); background-color: inherit; } } @@ -109,8 +135,13 @@ // Sidebar .region-sidebar { + scrollbar-color: transparent transparent; + &:hover { + scrollbar-color: var(--navigation-scrollbar-color); + } + .toggle-btn { - width: $sidebar-icon-width; + width: var(--sidebar-icon-width); border-color: transparent; border-radius: 0; background: transparent; @@ -119,14 +150,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,10 +172,12 @@ .mx-navigationtree .navbar-inner > ul > li { & > a { - height: $sidebar-icon-height; - padding: $spacing-small 0; + height: var(--sidebar-icon-height); + padding: var(--spacing-small) 0; + margin: var(--spacing-small) 0 0 0; white-space: nowrap; overflow: hidden; + border-radius: var(--navigation-border-radius); // Glyph icon .glyphicon, .mx-icon-lined, @@ -152,19 +185,27 @@ display: flex; align-items: center; justify-content: center; - width: $sidebar-icon-width; - height: $sidebar-icon-height; - padding: $spacing-small $spacing-medium; - border-radius: $border-radius-default; + width: var(--sidebar-icon-width); + height: var(--sidebar-icon-height); + padding: var(--spacing-small) var(--spacing-medium); + border-radius: var(--border-radius-default); + } + img { + width: var(--sidebar-icon-width); + padding: var(--spacing-small) var(--spacing-medium); } } + &.mx-navigationtree-has-items:not(.mx-navigationtree-collapsed) > a { + border-radius: var(--border-radius-default) var(--border-radius-default) 0 0; + background-color: var(--navsidebar-sub-bg-header); + } } } } // Topbar .region-topbar { - padding: 0 $spacing-small; + padding: 0 var(--spacing-small); .toggle-btn { padding: 0; @@ -176,7 +217,7 @@ .mx-icon-filled, .mx-icon-lined { - font-size: 20px; + font-size: 18px; } } } @@ -184,21 +225,117 @@ // 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); } + } - .mx-scrollcontainer-wrapper { - .mx-layoutgrid, - .mx-layoutgrid-fluid { - padding: 0 $gutter-size; + .mx-scrollcontainer-slide { + &:not(.mx-scrollcontainer-open) > .region-sidebar { + overflow: hidden; + } + + &.mx-scrollcontainer-open > .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(--sidebar-animation-duration) var(--sidebar-animation-function); + } + + .mx-scrollcontainer-shrink { + .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(--sidebar-animation-duration) var(--sidebar-animation-function); + color: var(--font-color-header); + left: calc(var(--navsidebar-width-closed) - var(--navsidebar-toggle-size) / 2); + .mx-icon-filled, + .mx-icon-lined { + line-height: var(--line-height-base); + } + } + + .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; + } + } + + @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..335be9e5c 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,38 +30,34 @@ // 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); .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); } } @@ -69,20 +65,20 @@ .region-topbar { position: relative; z-index: 60; // Show dropshadow - min-height: $topbar-minimalheight; - background-color: $navtopbar-bg; + min-height: var(--topbar-minimalheight); + background: var(--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; + margin-right: var(--spacing-medium); border-color: transparent; border-radius: 0; background: transparent; @@ -96,28 +92,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 / 2)) calc(var(--brand-logo-width / 2)); + background-image: url(var($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; + margin-left: var(--spacing-small); + color: var(--navbar-brand-name); font-size: 20px; &:hover, diff --git a/packages/atlas/src/themesource/atlas_core/web/main.scss b/packages/atlas/src/themesource/atlas_core/web/main.scss index 563c96bee..cffc088a5 100644 --- a/packages/atlas/src/themesource/atlas_core/web/main.scss +++ b/packages/atlas/src/themesource/atlas_core/web/main.scss @@ -2,9 +2,16 @@ @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 { @@ -54,6 +61,10 @@ @if not $exclude-login { @include login(); } +@import "core/base/card"; +@if not $exclude-card { + @include card(); +} // Widgets @import "core/widgets/input"; @@ -131,6 +142,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(); diff --git a/packages/atlas/src/themesource/atlas_core/web/themes/_breakpoints.scss b/packages/atlas/src/themesource/atlas_core/web/themes/_breakpoints.scss new file mode 100644 index 000000000..5d2c2e90d --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/themes/_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/themes/_theme-default.scss b/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss new file mode 100644 index 000000000..aa00f747d --- /dev/null +++ b/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss @@ -0,0 +1,576 @@ +@import "breakpoints"; + +:root { + /* Brand Colors */ + --brand-primary: #264ae5; + --brand-success: #1ac61a; + --brand-warning: #f0b000; + --brand-danger: #ea3337; + + /* Gray Shades */ + --gray: #b8babf; + --color-base: #fff; + --color-contrast: #000; + --brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9); + + /* 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(--gray-300); + --border-radius-s: 4px; + --border-radius-m: 8px; + --border-radius-l: 12px; + --border-radius-default: var(--border-radius-m); + --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); + + /* 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: 8px; + --navigation-border-radius: var(--border-radius-default); + --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-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: 52px; + --navsidebar-width-open: 232px; + --navsidebar-toggle-size: 32px; + + /* 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); + + /* Shadows */ + --shadow-color-border: var(--border-color-default); + --shadow-color: var(--gray-200); + --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(--gray-200); + --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(--gray-200); + --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); + --btn-success-bg: var(--brand-success); + --btn-warning-bg: var(--brand-warning); + --btn-danger-bg: var(--brand-danger); + + --btn-default-border-color: var(--gray-200); + --btn-primary-border-color: var(--brand-primary); + --btn-success-border-color: var(--brand-success); + --btn-warning-border-color: var(--brand-warning); + --btn-danger-border-color: var(--brand-danger); + + --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(--gray-200); + --btn-primary-bg-hover: var(--brand-primary-600); + --btn-success-bg-hover: var(--brand-success-600); + --btn-warning-bg-hover: var(--brand-warning-600); + --btn-danger-bg-hover: var(--brand-danger-600); + --btn-link-bg-hover: var(--gray-50); + + /* 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(--gray-100); + --grid-bg-selected: var(--gray-200); + --grid-bg-selected-hover: var(--gray-300); + --grid-bg-striped: var(--gray-50); + --grid-footer-bg: var(--gray-200); + + --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-detail); + --tabs-color-active: var(--font-color-default); + --tabs-lined-color-active: var(--font-color-default); + + --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(--gray-100); + --tabs-bg-hover: var(--gray-200); + --tabs-bg-active: var(--brand-primary); + + /* 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); + + /* 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); + --label-success-bg: var(--brand-success); + --label-warning-bg: var(--brand-warning); + --label-danger-bg: var(--brand-danger); + + --label-default-border-color: var(--brand-default); + --label-primary-border-color: var(--brand-primary); + --label-success-border-color: var(--brand-success); + --label-warning-border-color: var(--brand-warning); + --label-danger-border-color: var(--brand-danger); + + --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(--gray-200); + --groupbox-primary-bg: var(--brand-primary); + --groupbox-success-bg: var(--brand-success); + --groupbox-warning-bg: var(--brand-warning); + --groupbox-danger-bg: var(--brand-danger); + --groupbox-white-bg: var(--color-base); + + --groupbox-default-color: var(--font-color-default); + --groupbox-primary-color: var(--color-base); + --groupbox-success-color: var(--color-base); + --groupbox-warning-color: var(--color-base); + --groupbox-danger-color: var(--color-base); + --groupbox-white-color: var(--font-color-default); + + /* Callouts */ + --callout-primary-color: var(--brand-primary); + --callout-default-color: var(--font-color-default); + --callout-success-color: var(--brand-success); + --callout-warning-color: var(--brand-warning); + --callout-danger-color: var(--brand-danger); + + --callout-primary-bg: var(--brand-primary-200); + --callout-default-bg: var(--gray-50); + --callout-success-bg: var(--brand-success-200); + --callout-warning-bg: var(--brand-warning-200); + --callout-danger-bg: var(--brand-danger-200); + + /* 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(--bg-color); + --accordion-header-default-color: var(--font-color-header); + --accordion-default-border-color: var(--border-color-default); + --accordion-bg-striped: var(--grid-bg-striped); + --accordion-bg-striped-hover: var(--grid-bg-selected); + + --accordion-header-primary-bg: var(--brand-primary); + --accordion-header-secondary-bg: var(--bg-color-secondary); + --accordion-header-success-bg: var(--brand-success); + --accordion-header-warning-bg: var(--brand-warning); + --accordion-header-danger-bg: var(--brand-danger); + + --accordion-header-primary-bg-hover: var(--brand-primary-600); + --accordion-header-secondary-bg-hover: var(--gray-50); + --accordion-header-success-bg-hover: var(--brand-success-600); + --accordion-header-warning-bg-hover: var(--brand-warning-600); + --accordion-header-danger-bg-hover: var(--brand-danger-600); + + --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: "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: false !default; // ./helpers/helperclasses.scss From 1c46ad24a9f5cc9ebccd9bca77485d8ab5d4db08 Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 23 Apr 2025 12:43:31 +0200 Subject: [PATCH 2/5] chore: update changelog atlas core --- packages/atlas-core/CHANGELOG.md | 4 ++++ packages/atlas-core/package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md index 32f213cca..177ddc381 100644 --- a/packages/atlas-core/CHANGELOG.md +++ b/packages/atlas-core/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Breaking change + +- Atlas major changes. + ## [3.17.0] Atlas Core - 2025-4-16 ### Changed diff --git a/packages/atlas-core/package.json b/packages/atlas-core/package.json index 45f5cd62b..eb9a42873 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.17.0", + "version": "4.0.0", "license": "Apache-2.0", "copyright": "© Mendix Technology BV 2024. All rights reserved.", "repository": { From 4d31f08bdf86b27028763b09dc45d83db4bfe47a Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 23 Apr 2025 15:19:38 +0200 Subject: [PATCH 3/5] feat: atlas 4 --- .../web/{themes => }/_breakpoints.scss | 0 .../atlas_core/web/_variables.scss | 12 ++-- .../atlas_core/web/core/base/_card.scss | 10 +-- .../web/core/widgets/_layout-grid.scss | 6 -- .../web/core/widgets/_list-view.scss | 2 +- .../atlas_core/web/design-properties.json | 72 +++++++++---------- .../atlas_core/web/themes/_theme-default.scss | 19 +++-- 7 files changed, 63 insertions(+), 58 deletions(-) rename packages/atlas/src/themesource/atlas_core/web/{themes => }/_breakpoints.scss (100%) diff --git a/packages/atlas/src/themesource/atlas_core/web/themes/_breakpoints.scss b/packages/atlas/src/themesource/atlas_core/web/_breakpoints.scss similarity index 100% rename from packages/atlas/src/themesource/atlas_core/web/themes/_breakpoints.scss rename to packages/atlas/src/themesource/atlas_core/web/_breakpoints.scss diff --git a/packages/atlas/src/themesource/atlas_core/web/_variables.scss b/packages/atlas/src/themesource/atlas_core/web/_variables.scss index 9725209c4..6d181ee81 100644 --- a/packages/atlas/src/themesource/atlas_core/web/_variables.scss +++ b/packages/atlas/src/themesource/atlas_core/web/_variables.scss @@ -3,6 +3,7 @@ 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"; $use-css-variables: false !default; @@ -307,17 +308,20 @@ $dataview-emptymessage-bg: $bg-color !default; $dataview-emptymessage-color: $font-color-default !default; /* Alerts */ -$alert-primary-bg: var(--brand-primary-200) !default; -$alert-success-bg: var(--brand-success-200) !default; -$alert-warning-bg: var(--brand-warning-200) !default; -$alert-danger-bg: var(--brand-danger-200) !default; +$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; 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 index 45e52c9e8..c58a9ea4a 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/base/_card.scss @@ -9,13 +9,13 @@ Cards ========================================================================== */ .card { - border: var(--border-default); - border-radius: var(--border-card-default, var(--border-radius-default)); + border: var(--border-card); + border-radius: var(--border-radius-card); background-color: var(--bg-color-secondary); overflow: hidden; position: relative; - padding: var(--spacing-large); - box-shadow: var(--shadow-medium) var(--shadow-color); - margin-bottom: var(--spacing-small); + padding: var(--spacing-card); + box-shadow: var(--shadow-card); + margin-bottom: var(--margin-bottom-card); } } 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 b61dd2367..685bf9967 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 @@ -127,15 +127,11 @@ flex-grow: 1; flex-basis: 0; max-width: 100%; - display: flex; - flex-direction: column; } .col#{$suffix}-auto { flex: 0 0 auto; width: auto; max-width: 100%; - display: flex; - flex-direction: column; } @for $i from 1 through 12 { .col#{$suffix}-#{$i} { @@ -143,8 +139,6 @@ $width: calc(100% / $col - var(--layoutgrid-column-gap) / $col * ($col - 1)); flex: 0 0 $width; max-width: $width; - display: flex; - flex-direction: column; } } 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 8f4147c88..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 @@ -41,7 +41,7 @@ } .selected { - background: var(--brand-primary-200); + background: var(--brand-primary-100); } .mx-layoutgrid { 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 0443fcd8b..cf8786b4a 100644 --- a/packages/atlas/src/themesource/atlas_core/web/design-properties.json +++ b/packages/atlas/src/themesource/atlas_core/web/design-properties.json @@ -263,12 +263,12 @@ { "name": "Horizontal (row)", "class": "flex-row", - "icon": "Atlas_Core.Atlas_Controls.direction-horizontal" + "icon": "Atlas_Core.Atlas_Styling.direction-horizontal" }, { "name": "Vertical (column)", "class": "flex-column", - "icon": "Atlas_Core.Atlas_Controls.direction-vertical" + "icon": "Atlas_Core.Atlas_Styling.direction-vertical" } ] }, @@ -304,32 +304,32 @@ { "name": "Left", "class": "align-x-left", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-left" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-left" }, { "name": "Center", "class": "align-x-center", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-center" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-center" }, { "name": "Right", "class": "align-x-right", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-right" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-right" }, { "name": "Space between (only for horizontal containers)", "class": "align-x-between", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-horizontal-space-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_Controls.aligncontent-horizontal-space-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_Controls.aligncontent-horizontal-space-even" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-even" } ] }, @@ -341,32 +341,32 @@ { "name": "Top", "class": "align-y-top", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-top" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-top" }, { "name": "Center", "class": "align-y-center", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-center" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-center" }, { "name": "Bottom", "class": "align-y-bottom", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-bottom" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-bottom" }, { "name": "Space between (only for vertical containers)", "class": "align-y-between", - "icon": "Atlas_Core.Atlas_Controls.aligncontent-vertical-space-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_Controls.aligncontent-vertical-space-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_Controls.aligncontent-vertical-space-even" + "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-even" } ] }, @@ -378,12 +378,12 @@ { "name": "Fill container (only grow)", "class": "flex-items-grow", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-auto-fill" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill" }, { "name": "Hug content (only shrink)", "class": "flex-items-shrink", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-auto-fit" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit" }, { "name": "Auto (grow or shrink)", @@ -393,7 +393,7 @@ { "name": "Fixed (neither shrink nor grow)", "class": "flex-items-fixed", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-none-fixed" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed" } ] }, @@ -406,17 +406,17 @@ { "name": "Fill container (only grow)", "variable": "--flex-grow", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-auto-fill" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill" }, { "name": "Hug content (only shrink)", "variable": "--flex-fit-content", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-auto-fit" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit" }, { "name": "Fixed (neither shrink nor grow)", "variable": "--none", - "icon": "Atlas_Core.Atlas_Controls.grow-shrink-none-fixed" + "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed" }, { "name": "1 (auto)", @@ -633,32 +633,32 @@ { "name": "None", "class": "div-border-toggle-none", - "icon": "Atlas_Core.Atlas_Controls.none" + "icon": "Atlas_Core.Atlas_Styling.none" }, { "name": "All", "class": "div-border-toggle-all", - "icon": "Atlas_Core.Atlas_Controls.borders-all" + "icon": "Atlas_Core.Atlas_Styling.borders-all" }, { "name": "Top", "class": "div-border-toggle-top", - "icon": "Atlas_Core.Atlas_Controls.borders-top" + "icon": "Atlas_Core.Atlas_Styling.borders-top" }, { "name": "Right", "class": "div-border-toggle-right", - "icon": "Atlas_Core.Atlas_Controls.borders-right" + "icon": "Atlas_Core.Atlas_Styling.borders-right" }, { "name": "Left", "class": "div-border-toggle-left", - "icon": "Atlas_Core.Atlas_Controls.borders-left" + "icon": "Atlas_Core.Atlas_Styling.borders-left" }, { "name": "Bottom", "class": "div-border-toggle-bottom", - "icon": "Atlas_Core.Atlas_Controls.borders-bottom" + "icon": "Atlas_Core.Atlas_Styling.borders-bottom" } ] }, @@ -670,17 +670,17 @@ { "name": "Solid", "variable": "--border-style-solid", - "icon": "Atlas_Core.Atlas_Controls.border-style-solid" + "icon": "Atlas_Core.Atlas_Styling.border-style-solid" }, { "name": "Dashed", "variable": "--border-style-dashed", - "icon": "Atlas_Core.Atlas_Controls.border-style-dashed" + "icon": "Atlas_Core.Atlas_Styling.border-style-dashed" }, { "name": "Dotted", "variable": "--border-style-dotted", - "icon": "Atlas_Core.Atlas_Controls.border-style-dotted" + "icon": "Atlas_Core.Atlas_Styling.border-style-dotted" } ] }, @@ -692,17 +692,17 @@ { "name": "Thin", "variable": "--border-width-thin", - "icon": "Atlas_Core.Atlas_Controls.border-width-thin" + "icon": "Atlas_Core.Atlas_Styling.border-width-thin" }, { "name": "Medium", "variable": "--border-width-medium", - "icon": "Atlas_Core.Atlas_Controls.border-width-medium" + "icon": "Atlas_Core.Atlas_Styling.border-width-medium" }, { "name": "Thick", "variable": "--border-width-thick", - "icon": "Atlas_Core.Atlas_Controls.border-width-thick" + "icon": "Atlas_Core.Atlas_Styling.border-width-thick" } ] }, @@ -742,22 +742,22 @@ { "name": "None", "variable": "--none", - "icon": "Atlas_Core.Atlas_Controls.none" + "icon": "Atlas_Core.Atlas_Styling.none" }, { "name": "Small", "variable": "--border-radius-s", - "icon": "Atlas_Core.Atlas_Controls.border-radius-small" + "icon": "Atlas_Core.Atlas_Styling.border-radius-small" }, { "name": "Medium", "variable": "--border-radius-m", - "icon": "Atlas_Core.Atlas_Controls.border-radius-medium" + "icon": "Atlas_Core.Atlas_Styling.border-radius-medium" }, { "name": "Large", "variable": "--border-radius-l", - "icon": "Atlas_Core.Atlas_Controls.border-radius-large" + "icon": "Atlas_Core.Atlas_Styling.border-radius-large" } ] }, 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 index aa00f747d..e77445a87 100644 --- a/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss +++ b/packages/atlas/src/themesource/atlas_core/web/themes/_theme-default.scss @@ -1,4 +1,4 @@ -@import "breakpoints"; +@import "../breakpoints"; :root { /* Brand Colors */ @@ -6,12 +6,12 @@ --brand-success: #1ac61a; --brand-warning: #f0b000; --brand-danger: #ea3337; - - /* Gray Shades */ + --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; - --brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9); /* Brand Logo */ --brand-logo-height: 24px; @@ -28,7 +28,7 @@ --border-radius-s: 4px; --border-radius-m: 8px; --border-radius-l: 12px; - --border-radius-default: var(--border-radius-m); + --border-radius-default: var(--border-radius-s); --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; @@ -175,7 +175,7 @@ /* Shadows */ --shadow-color-border: var(--border-color-default); - --shadow-color: var(--gray-200); + --shadow-color: var(--brand-default-300); --shadow-small: 0 2px 4px 0; --shadow-medium: 0 4px 6px 0; --shadow-large: 0 8px 10px 0; @@ -302,6 +302,13 @@ --dataview-emptymessage-bg: var(--bg-color); --dataview-emptymessage-color: var(--font-color-default); + /* Cards */ + --shadow-card: var(--shadow-small) var(--shadow-color); + --border-card: var(--border-default); + --border-radius-card: var(--border-radius-m); + --spacing-card: var(--spacing-large); + --margin-bottom-card: var(--spacing-smaller); + /* Alerts */ --alert-primary-bg: var(--brand-primary-50); --alert-success-bg: var(--brand-success-50); From e881db921eb5d03aae2583ef1b740bcf1f4c3b3a Mon Sep 17 00:00:00 2001 From: undefined Date: Fri, 25 Apr 2025 13:16:19 +0200 Subject: [PATCH 4/5] fix: try updated target --- packages/atlas-core/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/atlas-core/package.json b/packages/atlas-core/package.json index eb9a42873..58f117d94 100644 --- a/packages/atlas-core/package.json +++ b/packages/atlas-core/package.json @@ -9,13 +9,13 @@ "url": "https://github.com/mendix/atlas.git" }, "marketplace": { - "minimumMXVersion": "10.21.0.64362", + "minimumMXVersion": "10.21.1.64969", "marketplaceId": 117187 }, "testProject": { "githubUrl": "https://github.com/mendix/Atlas-Design-System", - "branchName": "main", - "mxVersion": "10.21.0.64362" + "branchName": "ui-refresh", + "mxVersion": "10.21.1.64969" }, "scripts": { "build:module": "ts-node ./scripts/build.ts build", From 32331fc5e885f8a8ce1f721c32fe006007b69ba2 Mon Sep 17 00:00:00 2001 From: undefined Date: Tue, 6 May 2025 10:35:47 +0200 Subject: [PATCH 5/5] fix: remove flex property from flex container --- .../atlas/src/themesource/atlas_core/web/core/base/_flex.scss | 1 - 1 file changed, 1 deletion(-) 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 0934bf50e..56224323d 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 @@ -26,7 +26,6 @@ .flexcontainer { display: flex #{$important-flex-value}; overflow: hidden #{$important-flex-value}; - flex: var(--flex-shrink) #{$important-flex-value}; gap: var(--flex-gap) #{$important-flex-value}; }