antd-mobile
Version:
<div align="center">
68 lines (67 loc) • 1.49 kB
CSS
.adm-jumbo-tabs {
--gap: 8px;
position: relative;
min-width: 0;
}
.adm-jumbo-tabs-header {
position: relative;
border-bottom: solid 1px var(--adm-color-border);
}
.adm-jumbo-tabs-tab-list {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
position: relative;
overflow-x: scroll;
padding: 0 var(--gap);
scrollbar-width: none;
}
.adm-jumbo-tabs-tab-list::-webkit-scrollbar {
display: none;
}
.adm-jumbo-tabs-tab-wrapper {
flex: auto;
padding: 0 calc(var(--gap) / 2);
text-align: center;
}
.adm-jumbo-tabs-tab {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: -webkit-min-content;
width: min-content;
margin: 0 auto;
padding: 12px 0;
cursor: pointer;
font-size: var(--adm-font-size-9);
white-space: nowrap;
}
.adm-jumbo-tabs-tab-title {
line-height: 24px;
padding: 0 4px;
}
.adm-jumbo-tabs-tab-description {
width: -webkit-min-content;
width: min-content;
padding: 0 8px;
border-radius: 10px;
color: var(--adm-color-weak);
font-size: var(--adm-font-size-main);
background-color: var(--adm-color-fill-content);
}
.adm-jumbo-tabs-tab-active {
color: var(--adm-color-primary);
}
.adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
color: var(--adm-color-text-light-solid);
background-color: var(--adm-color-primary);
}
.adm-jumbo-tabs-tab-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.adm-jumbo-tabs-content {
padding: 12px;
}