jan/joi/src/core/Tabs/styles.scss
Faisal Amir d6891a5628
fix: api playground text overlap button and search hub model (#3833)
* fix: button api playground overlap button and search hub model

* fix: update overlap text responsive tab and conditional render GPU menu
2024-10-21 09:57:04 +07:00

67 lines
1.2 KiB
SCSS

.tabs {
display: flex;
flex-direction: column;
width: 100%;
&--segmented {
background-color: hsla(var(--secondary-bg));
border-radius: 6px;
height: 33px;
.tabs__list {
border: none;
justify-content: center;
align-items: center;
height: 33px;
}
.tabs__trigger[data-state='active'] {
background-color: hsla(var(--app-bg));
border: none;
height: 25px;
margin: 0 4px;
border-radius: 5px;
}
}
&__list {
flex-shrink: 0;
display: flex;
border-bottom: 1px solid hsla(var(--app-border));
}
&__trigger {
padding: 0 12px;
flex: 1;
height: 38px;
display: flex;
white-space: nowrap;
color: hsla(var(--text-secondary));
align-items: center;
justify-content: center;
line-height: 1;
font-weight: medium;
user-select: none;
&:focus {
position: relative;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
&__content {
flex-grow: 1;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: none;
}
}
.tabs__trigger[data-state='active'] {
border-bottom: 1px solid hsla(var(--primary-bg));
font-weight: 600;
color: hsla(var(--text-primary));
}