From 87489066994364f4208ade8e77a5cdb49ba58642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= Date: Sat, 7 Dec 2024 14:27:07 -0300 Subject: [PATCH 1/2] Use the right size for the tab icon --- packages/mercury/src/components/tab/_tab-styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mercury/src/components/tab/_tab-styles.scss b/packages/mercury/src/components/tab/_tab-styles.scss index ab80170aa..8d7603eda 100644 --- a/packages/mercury/src/components/tab/_tab-styles.scss +++ b/packages/mercury/src/components/tab/_tab-styles.scss @@ -1,6 +1,7 @@ %tab { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: 16px; // TODO: Use a token + --ch-tab-close-button__image-size: var(--mer-spacing--md); + --ch-tab-image-size: var(--mer-icon__box--md); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); From f215d869df1783a5601cd979971e277d13fdb68c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= Date: Sat, 7 Dec 2024 14:28:25 -0300 Subject: [PATCH 2/2] Improve the style of the flexible-layout's tabs --- .../flexible-layout/_flexible-layout-styles.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss index d5060d6d0..1ac43fd1a 100644 --- a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss +++ b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss @@ -31,7 +31,8 @@ &-tab { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: 16px; // TODO: Use a token + --ch-tab-close-button__image-size: var(--mer-spacing--md); + --ch-tab-image-size: var(--mer-icon__box--md); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); @@ -65,6 +66,11 @@ border-inline: 1px solid transparent; } + // Style for the button of the selected tab + &-tab-button--selected-before { + color: var(--mer-accent__primary); + } + // Block Start &-tab-button-block-start { background-color: var( @@ -272,6 +278,10 @@ #{$tab-button-block-start--selected-selector} { @extend %flexible-layout-tab-button-block-start--selected; + + &::before { + @extend %flexible-layout-tab-button--selected-before; + } } @if $add--disabled { @@ -304,6 +314,10 @@ #{$tab-button-block-end--selected-selector} { @extend %flexible-layout-tab-button-block-end--selected; + + &::before { + @extend %flexible-layout-tab-button--selected-before; + } } @if $add--disabled {