From baca954389e7eb15ce0515233a1521eba5b42458 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 4 Nov 2024 14:52:49 +0000 Subject: [PATCH 1/3] style: new display group variant, 'box_white' --- .../layout/display-group/display-group.component.scss | 8 +++++++- .../layout/display-group/display-group.component.ts | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss index 210125a5b7..2026550adc 100644 --- a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss +++ b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss @@ -45,7 +45,8 @@ .display-group-wrapper { &[data-variant~="box_gray"], &[data-variant~="box_primary"], - &[data-variant~="box_secondary"] { + &[data-variant~="box_secondary"], + &[data-variant~="box_white"] { margin-top: var(--regular-margin); padding: var(--regular-padding); border-radius: var(--ion-border-radius-secondary); @@ -68,4 +69,9 @@ --background-color: var(--ion-color-secondary-200); --border-color: var(--ion-color-secondary-500); } + + &[data-variant~="box_white"] { + --background-color: white; + --border-color: var(--ion-color-gray-300); + } } diff --git a/src/app/shared/components/template/components/layout/display-group/display-group.component.ts b/src/app/shared/components/template/components/layout/display-group/display-group.component.ts index 2eadf85834..64f4d13ece 100644 --- a/src/app/shared/components/template/components/layout/display-group/display-group.component.ts +++ b/src/app/shared/components/template/components/layout/display-group/display-group.component.ts @@ -4,7 +4,7 @@ import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from ".. interface IDisplayGroupParams { /** TEMPLATE PARAMETER: "variant" */ - variant: "box_gray" | "box_primary" | "box_secondary" | "dashed_box"; + variant: "box_gray" | "box_primary" | "box_secondary" | "box_white" | "dashed_box"; /** TEMPLATE PARAMETER: "style". TODO: Various additional legacy styles, review and convert some to variants */ style: "form" | "default" | string | null; /** TEMPLATE PARAMETER: "offset". Add a custom bottom margin */ From 85f06f6b1a8ebfd8b5a982caba26b96462f7535e Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 4 Nov 2024 17:12:53 +0000 Subject: [PATCH 2/3] style: tweak display group white variatn border colour --- .../layout/display-group/display-group.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss index 2026550adc..0ebc6a67eb 100644 --- a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss +++ b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss @@ -72,6 +72,6 @@ &[data-variant~="box_white"] { --background-color: white; - --border-color: var(--ion-color-gray-300); + --border-color: var(--ion-color-gray-200); } } From b2d3105779d8128b28c3e9ee943c8f6c1d6bc08f Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 7 Nov 2024 13:01:01 +0000 Subject: [PATCH 3/3] style: use theme variables for styling display group box variants' border --- .../layout/display-group/display-group.component.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss index 0ebc6a67eb..79b2c22cda 100644 --- a/src/app/shared/components/template/components/layout/display-group/display-group.component.scss +++ b/src/app/shared/components/template/components/layout/display-group/display-group.component.scss @@ -52,7 +52,8 @@ border-radius: var(--ion-border-radius-secondary); flex: 1; background-color: var(--background-color, transparent); - border: 2px solid var(--border-color, transparent); + border: var(--border-standard); + border-color: var(--border-color); } &[data-variant~="box_gray"] { @@ -72,6 +73,6 @@ &[data-variant~="box_white"] { --background-color: white; - --border-color: var(--ion-color-gray-200); + --border-color: var(--border-color-default, var(--ion-color-primary)); } }