From f193e3e835b28988c60b5dd276197466681efc65 Mon Sep 17 00:00:00 2001 From: gjulivan Date: Tue, 5 May 2026 11:49:49 +0200 Subject: [PATCH 1/2] chore: improve css variables support --- .../atlas_core/web/core/widgets/_modal.scss | 19 ++++++++++--------- .../atlas_core/web/core/widgets/_switch.scss | 10 +++++----- 2 files changed, 15 insertions(+), 14 deletions(-) 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 e9fefbd1f..43983ef3c 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 @@ -16,12 +16,13 @@ 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); + background-color: var(--bg-color-secondary, $bg-color-secondary); .modal-header { padding: 15px 20px; border-bottom-color: var(--modal-header-border-color); border-radius: 0; // Because of the class .mx-window-active in mxui.css - background-color: var(--modal-header-bg); + background-color: var(--modal-header-bg, $modal-header-bg); h2, h4 { margin: 0; @@ -39,13 +40,13 @@ text-shadow: none; &:focus { border-radius: 4px; - outline: 2px solid var(--brand-primary); + outline: 2px solid var(--brand-primary, $brand-primary); } } } .modal-body { - background-color: var(--modal-body-bg); + background-color: var(--modal-body-bg, $modal-body-bg); } .modal-footer { @@ -54,7 +55,7 @@ margin-top: 0; padding: 20px; border-style: none; - background-color: var(--modal-footer-bg); + background-color: var(--modal-footer-bg, $modal-footer-bg); } } } @@ -77,8 +78,8 @@ justify-content: flex-end; margin: 0; padding: 20px; - text-align: var(--dataview-controls-alignment); - border-top: 1px solid var(--modal-header-border-color); + text-align: var(--dataview-controls-alignment, $dataview-controls-alignment); + border-top: 1px solid var(--modal-header-border-color, $modal-header-border-color); } } @@ -106,13 +107,13 @@ input { height: 56px; padding: 12px 12px; - border: 1px solid var(--bg-color-secondary); - background: var(--bg-color-secondary); + border: 1px solid var(--bg-color-secondary, $bg-color-secondary); + background: var(--bg-color-secondary, $bg-color-secondary); box-shadow: none; font-size: 16px; &:focus { - border-color: var(--brand-primary-200); + border-color: var(--brand-primary-200, $color-primary-light); } } } 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 9b6b8463b..e7e7d4e40 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 @@ -5,8 +5,8 @@ // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten. // -$default-android-color: #6fbeb5; -$default-ios-color: rgb(100, 189, 99); +$default-android-color: #6fbeb5 !default; +$default-ios-color: rgb(100, 189, 99) !default; @mixin bootstrap-style-ios($brand-style) { border-color: $brand-style; @@ -48,7 +48,7 @@ $default-ios-color: rgb(100, 189, 99); .widget-switch-btn-wrapper { &.checked { &.widget-switch-btn-wrapper-default { - @include bootstrap-style-ios($default-ios-color); + @include bootstrap-style-ios(var(--switch-ios-color, $default-ios-color)); } &.widget-switch-btn-wrapper-success { @@ -83,10 +83,10 @@ $default-ios-color: rgb(100, 189, 99); .widget-switch-btn-wrapper { &.checked { &.widget-switch-btn-wrapper-default { - @include bootstrap-style-android($default-android-color); + @include bootstrap-style-android(var(--switch-android-color, $default-android-color)); .widget-switch-btn { - background: $default-android-color; + background: var(--switch-android-color, $default-android-color); } } From 4a38867994fd62dfa721599bca923c0f0ca1ef02 Mon Sep 17 00:00:00 2001 From: gjulivan Date: Fri, 19 Jun 2026 16:11:34 +0200 Subject: [PATCH 2/2] fix: remove unused styling and add scss vars fallback --- packages/atlas-core/CHANGELOG.md | 8 ++ .../atlas_core/web/core/widgets/_modal.scss | 12 +- .../atlas_core/web/core/widgets/_switch.scss | 135 ------------------ 3 files changed, 14 insertions(+), 141 deletions(-) diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md index f32ccbba4..77323a1ef 100644 --- a/packages/atlas-core/CHANGELOG.md +++ b/packages/atlas-core/CHANGELOG.md @@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Changed + +- We removed legacy styling for switch widget below version 3.0. + +### Fixed + +- We added scss variables fallback for css variables styling in modal-dialog. + ## [4.3.6] Atlas Core - 2026-4-23 ### Fixed 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 43983ef3c..2511edef5 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,30 +13,30 @@ ========================================================================== */ .modal-dialog { .modal-content { - border: var(--border-width-default) solid var(--modal-header-border-color); + border: var(--border-width-default, $border-width-default) solid var(--modal-header-border-color, $modal-header-border-color); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background-color: var(--bg-color-secondary, $bg-color-secondary); .modal-header { padding: 15px 20px; - border-bottom-color: var(--modal-header-border-color); + border-bottom-color: var(--modal-header-border-color, $modal-header-border-color); border-radius: 0; // Because of the class .mx-window-active in mxui.css background-color: var(--modal-header-bg, $modal-header-bg); h2, h4 { margin: 0; - color: var(--modal-header-color); + color: var(--modal-header-color, $modal-header-color); font-size: 16px; - font-weight: var(--font-weight-header); + font-weight: var(--font-weight-header, $font-weight-header); } .close { margin-top: -3px; opacity: 1; - font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal, $font-weight-normal); /* For IE8 and earlier */ - color: var(--modal-header-color); + color: var(--modal-header-color, $modal-header-color); text-shadow: none; &:focus { border-radius: 4px; 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 e7e7d4e40..a7e2daeb1 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 @@ -43,104 +43,6 @@ $default-ios-color: rgb(100, 189, 99) !default; } } -// maintained for backwards compatibility prior to Switch 3.0.0. -@mixin ios { - .widget-switch-btn-wrapper { - &.checked { - &.widget-switch-btn-wrapper-default { - @include bootstrap-style-ios(var(--switch-ios-color, $default-ios-color)); - } - - &.widget-switch-btn-wrapper-success { - @include bootstrap-style-ios(var(--brand-success)); - } - - &.widget-switch-btn-wrapper-info { - @include bootstrap-style-ios(var(--brand-primary-300)); - } - - &.widget-switch-btn-wrapper-primary { - @include bootstrap-style-ios(var(--brand-primary)); - } - - &.widget-switch-btn-wrapper-warning { - @include bootstrap-style-ios(var(--brand-warning)); - } - - &.widget-switch-btn-wrapper-danger { - @include bootstrap-style-ios(var(--brand-danger)); - } - - &.widget-switch-btn-wrapper-inverse { - @include bootstrap-style-ios(var(--brand-primary-600)); - } - } - } -} - -// maintained for backwards compatibility prior to Switch 3.0.0. -@mixin android { - .widget-switch-btn-wrapper { - &.checked { - &.widget-switch-btn-wrapper-default { - @include bootstrap-style-android(var(--switch-android-color, $default-android-color)); - - .widget-switch-btn { - background: var(--switch-android-color, $default-android-color); - } - } - - &.widget-switch-btn-wrapper-success { - @include bootstrap-style-android(var(--brand-success)); - - .widget-switch-btn { - background: var(--brand-success); - } - } - - &.widget-switch-btn-wrapper-info { - @include bootstrap-style-android(var(--brand-primary-300)); - - .widget-switch-btn { - background: var(--brand-primary-300); - } - } - - &.widget-switch-btn-wrapper-primary { - @include bootstrap-style-android(var(--brand-primary)); - - .widget-switch-btn { - background: var(--brand-primary); - } - } - - &.widget-switch-btn-wrapper-warning { - @include bootstrap-style-android(var(--brand-warning)); - - .widget-switch-btn { - background: var(--brand-warning); - } - } - - &.widget-switch-btn-wrapper-danger { - @include bootstrap-style-android(var(--brand-danger)); - - .widget-switch-btn { - background: var(--brand-danger); - } - } - - &.widget-switch-btn-wrapper-inverse { - @include bootstrap-style-android(var(--brand-primary-600)); - - .widget-switch-btn { - background: var(--brand-primary-600); - } - } - } - } -} - @mixin switch() { .widget-switch-btn-wrapper { &:focus-visible { @@ -162,41 +64,4 @@ $default-ios-color: rgb(100, 189, 99) !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 { - &.widget-switch { - &.iOS { - @include ios; - } - - &.android { - @include android; - } - - &.auto { - @include ios; - } - } - } - - html { - div { - &.dj_android { - .widget-switch { - &.auto { - @include android; - } - } - } - - &.dj_ios { - .widget-switch { - &.auto { - @include ios; - } - } - } - } - } }