Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

style(console): update tab item style in readme docs (#6013)

Browse source
This commit is contained in:
Xiao Yijun 2024-06-15 11:21:14 +08:00 • committed by GitHub
parent 7d6e8dcf9a
commit d17e26ab30
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/console/src/mdx-components/Tabs/index.module.scss
View file

@ -4,28 +4,46 @@
width: 100%;
margin-top: _.unit(3);
ul {
// This 'tabItemList' class name is required or the styles below will be overridden by the default styles in mdx guide pages.
ul.tabItemList {
border-bottom: 1px solid var(--color-divider);
display: flex;
margin: _.unit(1) 0;
padding: 0;
li {
position: relative;
list-style: none;
margin-right: _.unit(6);
padding-bottom: _.unit(1);
font: var(--font-label-2);
color: var(--color-text-secondary);
margin-block-end: unset;
padding-inline-start: unset;
margin: 0 _.unit(6) _.unit(1) 0;
padding: _.unit(0.5) _.unit(1.5);
font: var(--font-label-2);
color: var(--color-text-secondary);
cursor: pointer;
border-radius: 4px;
&:hover {
background-color: var(--color-hover-variant);
}
}
li[aria-selected='true'] {
color: var(--color-text-link);
border-bottom: 2px solid var(--color-text-link);
margin-bottom: -1px;
outline: none;
// Selected underline
&::after {
content: '';
display: block;
position: absolute;
// Underline position = item's margin-bottom (_.unit(1)) + tab item list's border-bottom width (1px)
bottom: -5px;
left: 0;
right: 0;
border-top: 2px solid var(--color-text-link);
border-radius: 8px 8px 0 0;
}
}
}

7
packages/console/src/mdx-components/Tabs/index.tsx
View file

@ -6,6 +6,7 @@
*/
import type { Nullable } from '@silverhand/essentials';
import classNames from 'classnames';
import { useState, isValidElement, type ReactElement, cloneElement, useRef, Children } from 'react';
import type { Props as TabItemProps } from '../TabItem';
@ -72,7 +73,11 @@ function Tabs({ className, children }: Props): JSX.Element {
return (
<div className={styles.container}>
<ul role="tablist" aria-orientation="horizontal" className={className}>
<ul
role="tablist"
aria-orientation="horizontal"
className={classNames(styles.tabItemList, className)}
>
{values.map(({ value, label }, index) => (
<li
key={value}