fix(ui5-tab-container): prevent selection indicator on text-only tabs from overlapping bottom border #12584
Conversation
selection indicator of text only tabs shows above the bottom border Fixes: #12538
|
🚀 Deployed on https://pr-12584--ui5-webcomponents-preview.netlify.app |
Please consider: The selection indicator for text-only tabs appears above the bottom border. |
kskondov
changed the title
| .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { | ||
| bottom: -0.9375rem; | ||
| } |
There was a problem hiding this comment.
this is not needed
| .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after { | ||
| left: var(--_ui5_tc_headeritem_padding); | ||
| right: var(--_ui5_tc_headeritem_padding); | ||
| } |
There was a problem hiding this comment.
/* selection indicator */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after,
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: var(--_ui5_tc_headerItemContent_border_radius);
background-color: var(--sapTab_ForegroundColor);
height: var(--sapTab_Selected_Indicator_Dimension);
}
/* selection indicator offset in text only and mixed modes */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after {
left: var(--_ui5_tc_headeritem_padding);
right: var(--_ui5_tc_headeritem_padding);
}
There was a problem hiding this comment.
Better to have the "underline" on the whole item so we do not have to adjust it with magical px.
… from overlapping bottom border Address review comments
…container-selection-border
…i5-webcomponents into ui5-tab-container-selection-border
The selection indicator for text-only tabs appears above the bottom border.
Fixes: #12538