mirror of
https://github.com/euzu/tuliprox.git
synced 2026-09-23 09:32:15 +02:00
131 lines
2.5 KiB
SCSS
131 lines
2.5 KiB
SCSS
@use '../../size';
|
|
|
|
.tp__tab-set {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 0 var(--padding-small) 0;
|
|
gap: var(--gap-default);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__tab {
|
|
position: relative;
|
|
|
|
.tp__icon-button {
|
|
.svg-icon {
|
|
height: 1.4rem;
|
|
width: 1.4rem;
|
|
}
|
|
}
|
|
|
|
.tp__text-button:not(.active) {
|
|
color: var(--modest-text-color);
|
|
}
|
|
|
|
.tp__icon-button,
|
|
.tp__text-button:not(.active) {
|
|
&:hover {
|
|
color: var(--tab-hover-color);
|
|
fill: currentColor;
|
|
background-color: var(--tab-hover-background-color);
|
|
}
|
|
}
|
|
|
|
&--active {
|
|
.tp__icon-button:not(.active),
|
|
.tp__text-button:not(.active) {
|
|
background-color: var(--tab-active-background-color);
|
|
color: var(--tab-active-color);
|
|
fill: currentColor;
|
|
border-color: var(--tab-active-border-color);
|
|
}
|
|
|
|
}
|
|
|
|
&-desktop {
|
|
@media (max-width: size.$mobile-breakpoint) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
&-mobile {
|
|
display: none;
|
|
@media (max-width: size.$mobile-breakpoint) {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&__body {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__panel {
|
|
height: 100%;
|
|
overflow: auto; pointer-events: auto;
|
|
touch-action: pan-x pan-y;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
/* Tabs header */
|
|
.tp__tab-header {
|
|
display: flex;
|
|
border-bottom: 2px solid var(--card-border-color);
|
|
background-color: var(--card-background-color);
|
|
border-radius: 8px 8px 0 0;
|
|
overflow: hidden;
|
|
box-shadow: var(--tab-header-shadow);
|
|
}
|
|
|
|
.tp__tab-button {
|
|
flex: 1;
|
|
padding: 0.6rem 1.2rem;
|
|
font-weight: 500;
|
|
font-size: var(--font-size-base);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-color);
|
|
transition: all 0.25s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.tp__tab-button:hover {
|
|
color: var(--text-button-hover-color);
|
|
background-color: var(--text-button-hover-background-color);
|
|
}
|
|
|
|
.tp__tab-button.active {
|
|
color: var(--text-button-primary-color);
|
|
background-color: var(--text-button-primary-background-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tp__tab-button.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
.tp__tab-button {
|
|
transition: all 0.25s ease;
|
|
}
|