Merge branch 'dev' into staging
This commit is contained in:
commit
e80e206bc1
@ -141,6 +141,9 @@ export enum ETypoColor {
|
|||||||
COLOR_INFO_800 = "--color-info-800",
|
COLOR_INFO_800 = "--color-info-800",
|
||||||
COLOR_INFO_900 = "--color-info-900",
|
COLOR_INFO_900 = "--color-info-900",
|
||||||
COLOR_INFO_950 = "--color-info-950",
|
COLOR_INFO_950 = "--color-info-950",
|
||||||
|
|
||||||
|
TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
|
||||||
|
TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Typography(props: IProps) {
|
export default function Typography(props: IProps) {
|
||||||
|
@ -3,14 +3,10 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 0.08px;
|
letter-spacing: 0.08px;
|
||||||
|
|
||||||
border-bottom: 1px solid var(--color-neutral-500);
|
border-bottom: 1px solid var(--tabs-stroke, #d7dce0);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&[data-is-selected="true"] {
|
&[data-is-selected="true"] {
|
||||||
border-bottom: 2px solid var(--color-neutral-950, #24282e);
|
border-bottom: 2px solid var(--tabs-contrast-actived, #24282e);
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-bottom: 2px solid var(--color-neutral-950, #24282e);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,8 +25,8 @@ export default function HorizontalTabs<T>(props: IProps<T>) {
|
|||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
data-is-selected={props.isSelected}>
|
data-is-selected={props.isSelected}>
|
||||||
<Typography
|
<Typography
|
||||||
typo={ETypo.TEXT_MD_SEMIBOLD}
|
typo={!isHovered && !props.isSelected ? ETypo.TEXT_MD_REGULAR : ETypo.TEXT_MD_SEMIBOLD}
|
||||||
color={isHovered || props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}>
|
color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}>
|
||||||
{props.label}
|
{props.label}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user