From 4718cc059d7e3250e57f3f2a06766eeb2a5d48a2 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Mon, 15 Dec 2025 16:07:13 +0100 Subject: [PATCH 1/2] [DPEDE-5747] Fix card highligt card styles --- index.html | 6 ++- src/chi/components/card/card.scss | 59 ++++++++++++++++++++-- src/chi/themes/brightspeed/_variables.scss | 2 +- src/chi/themes/centurylink/_variables.scss | 2 +- src/chi/themes/colt/_variables.scss | 2 +- src/chi/themes/connect/_variables.scss | 3 +- src/chi/themes/lumen/_variables.scss | 4 +- src/chi/themes/portal/_variables.scss | 4 +- src/chi/themes/test/_variables.scss | 4 +- sri.json | 10 +--- 10 files changed, 72 insertions(+), 24 deletions(-) mode change 100755 => 100644 src/chi/components/card/card.scss diff --git a/index.html b/index.html index d3fb335de0..6f246b449e 100644 --- a/index.html +++ b/index.html @@ -1037,13 +1037,15 @@

On-Demand Services Overview

//#region Drag and Drop const drag = document.getElementById('drag-example'); - drag.items = [ + if (drag) { + drag.items = [ { title: 'Title item 1', description: 'Item description 1', closable: false, locked: true }, { description: 'Item description 2' }, { title: 'Title item 3', icon: 'atom' }, { title: 'Title item 4', description: 'Item description 4' }, { title: 'Title item 5', description: 'Item description 5' }, - ]; + ]; + } //#endregion //#region Enterprise ID Switcher diff --git a/src/chi/components/card/card.scss b/src/chi/components/card/card.scss old mode 100755 new mode 100644 index ab378b4024..38b4b2feea --- a/src/chi/components/card/card.scss +++ b/src/chi/components/card/card.scss @@ -320,18 +320,69 @@ } &.-highlight { - background-color: $card-highlight-background-color; - border-color: $card-highlight-border-color; + &, + &.-outline, + &.-outline.-widget, + &.-widget, + &.-kpi { + background-color: $card-highlight-background-color; + border: $card-highlight-border; + } + + &.-alert { + background-color: $card-highlight-background-color; + + .chi-card__content { + background-color: $color-background-white; + } + } + + &.-kpi:hover { + box-shadow: none; + } .chi-card__header { - background-color: $color-background-white; + border-radius: $card-border-radius; + } + + .chi-card__content { + background-color: $card-highlight-background-color; + // border: $card-highlight-border; } &.-widget { - .chi-card__header { + .chi-card__header, + .chi-card__content { background-color: $card-highlight-background-color; } } + + &.-alert:has(> chi-accordion .chi-accordion, > .chi-accordion), + &.-accordion, + &.-accordion.-outline { + border-color: $card-highlight-border-color; + background-color: $card-highlight-background-color; + + > chi-accordion .chi-accordion, + > .chi-accordion { + .chi-accordion__item { + border-radius: $card-border-radius; + + .chi-accordion__content { + background-color: $card-highlight-background-color; + border-radius: $card-border-radius; + + > .chi-card__content { + background-color: $card-highlight-background-color; + } + } + + .chi-accordion__trigger { + border-color: $card-highlight-border-color; + } + } + } + } } &.-kpi { diff --git a/src/chi/themes/brightspeed/_variables.scss b/src/chi/themes/brightspeed/_variables.scss index 8f1d8b944b..9b38473564 100644 --- a/src/chi/themes/brightspeed/_variables.scss +++ b/src/chi/themes/brightspeed/_variables.scss @@ -999,7 +999,7 @@ $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-background-secondary-light; $card-highlight-border-color: $color-yellow-30; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: inset 0 -0.125rem 0 0 $color-border-base; $card-tabs-padding: 1rem 2rem; diff --git a/src/chi/themes/centurylink/_variables.scss b/src/chi/themes/centurylink/_variables.scss index b228727756..0859b704cc 100644 --- a/src/chi/themes/centurylink/_variables.scss +++ b/src/chi/themes/centurylink/_variables.scss @@ -1014,7 +1014,7 @@ $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-background-secondary-light; $card-highlight-border-color: $color-mint-30; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: none; $card-tabs-padding: 0 1rem; diff --git a/src/chi/themes/colt/_variables.scss b/src/chi/themes/colt/_variables.scss index f9347ae9d2..93e61b0ab3 100644 --- a/src/chi/themes/colt/_variables.scss +++ b/src/chi/themes/colt/_variables.scss @@ -1003,7 +1003,7 @@ $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-background-secondary-light; $card-highlight-border-color: $color-teal-20; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: inset 0 -0.125rem 0 0 $color-border-base; $card-tabs-padding: 1rem 2rem; diff --git a/src/chi/themes/connect/_variables.scss b/src/chi/themes/connect/_variables.scss index 2dc7620b02..66467025ae 100644 --- a/src/chi/themes/connect/_variables.scss +++ b/src/chi/themes/connect/_variables.scss @@ -1047,7 +1047,8 @@ $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-teal-10; $card-highlight-border-color: $color-teal-60; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border-color: $color-teal-20; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: inset 0 -0.125rem 0 0 $color-border-base; $card-tabs-padding: 1rem 2rem; diff --git a/src/chi/themes/lumen/_variables.scss b/src/chi/themes/lumen/_variables.scss index 12f8a70b0c..17bdd40d23 100644 --- a/src/chi/themes/lumen/_variables.scss +++ b/src/chi/themes/lumen/_variables.scss @@ -1036,8 +1036,8 @@ $card-header-sm-padding: 0.5rem 1rem; $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-background-secondary-light; -$card-highlight-border-color: $color-cyan-20; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border-color: $color-teal-20; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: none; $card-tabs-padding: 0 1rem; diff --git a/src/chi/themes/portal/_variables.scss b/src/chi/themes/portal/_variables.scss index 549f7d70e8..c915ade9ed 100644 --- a/src/chi/themes/portal/_variables.scss +++ b/src/chi/themes/portal/_variables.scss @@ -1035,8 +1035,8 @@ $card-header-sm-padding: 0.5rem 1rem; $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-cyan-10; -$card-highlight-border-color: $color-cyan-20; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border-color: $color-teal-20; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: inset 0 -0.125rem 0 0 $color-border-base; $card-tabs-padding: 1rem 2rem; diff --git a/src/chi/themes/test/_variables.scss b/src/chi/themes/test/_variables.scss index 37db734306..a1be68c631 100644 --- a/src/chi/themes/test/_variables.scss +++ b/src/chi/themes/test/_variables.scss @@ -1047,8 +1047,8 @@ $card-header-sm-padding: 0.5rem 1rem; $card-hero-border-radius: 0; $card-hero-width: 100%; $card-highlight-background-color: $color-cyan-10; -$card-highlight-border-color: $color-cyan-20; -$card-highlight-header-background-color: $color-background-white; +$card-highlight-border-color: $color-teal-20; +$card-highlight-border: 0.0625rem solid $card-highlight-border-color; $card-tabs-border-bottom: inset 0 -0.125rem 0 0 $color-border-base; $card-tabs-padding: 1rem 2rem; diff --git a/sri.json b/sri.json index f920e86d08..1669a78538 100644 --- a/sri.json +++ b/sri.json @@ -1,11 +1,5 @@ { - "dist/chi.css": "sha256-QXS4okL96u4MRE3qPvsBWvYTJ1eowpmVp1HR+CQ/N9w=", - "dist/chi-centurylink.css": "sha256-5hcYMMfEw2VWIMGAUGWMp1Uvqqm0v8A2KLw0755eB5c=", - "dist/chi-portal.css": "sha256-1PDW1N1o7Vyq1pdBs1v8NIvhHKY/XI8hL80H7ia2NIY=", - "dist/chi-connect.css": "sha256-4cd2+T9B8h08l0RkQea62Dty/pE5+uSR+ZPsO+3FCF4=", - "dist/chi-brightspeed.css": "sha256-EBQrTZ+6OefWdPCOsU4oBG/6CfNLVyCK7H9NUQnYZe4=", - "dist/chi-colt.css": "sha256-oryiIoETJAydEIMCP3bt95KkUSWijx0eqM+flYklBzE=", - "dist/chi-test.css": "sha256-tLhG8H4K4bLIFpNdCUarF/T8dQPuxh+wanZUaT7Q5Fc=", + "dist/chi-connect.css": "sha256-8P88Z789wxfRIldwD0vgKlJOefz3I+QkPn0wUZWHafg=", "dist/js/chi.js": "sha256-bmJ+bodcF8+fGzvnE+rbTHDTHt8p/UcpL7gWoMct7e4=", "dist/assets/themes/lumen/images/favicon.svg": "sha256-+0ITKaXKx702ZWOzublRl83MJVOIbUMTQG8JvN+76B0=", "dist/assets/themes/lumen/images/favicon.ico": "sha256-EkKmbH+i/VIQAtUl7NF4bPVaaJZCeBc5xWx8LTcMJp0=", @@ -23,4 +17,4 @@ "dist/assets/themes/colt/images/background-login.png": "sha256-V60LOksMkHO8xJNTRQUXUk+Vn/xJ0Vxa9+BQVN5Wakg=", "dist/js/ce/ux-chi-ce/ux-chi-ce.esm.js": "sha256-h6q36YMz3wgtk1akrwQmyoZqNW31vsWQnpg4czVYsZE=", "dist/js/ce/ux-chi-ce/ux-chi-ce.js": "sha256-uwblV0VFkSI96uIvK5TSQH2bAFWQjo5Z9iEsZa9Uctk=" -} \ No newline at end of file +} From dfeb31c8f6eedf336bebbe73255e64c7253d9a36 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Wed, 17 Dec 2025 10:29:38 +0100 Subject: [PATCH 2/2] [DPEDE-5750] Remove commented styles --- src/chi/components/card/card.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/chi/components/card/card.scss b/src/chi/components/card/card.scss index 38b4b2feea..bc20f0a73f 100644 --- a/src/chi/components/card/card.scss +++ b/src/chi/components/card/card.scss @@ -347,7 +347,6 @@ .chi-card__content { background-color: $card-highlight-background-color; - // border: $card-highlight-border; } &.-widget {