mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.6 KiB
114 lines
2.6 KiB
@use '@angular/material' as mat;
|
|
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.external-link-icon {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
@include mat.tabs-overrides(
|
|
(
|
|
active-indicator-height: 0,
|
|
divider-height: 0,
|
|
label-text-tracking: normal
|
|
)
|
|
);
|
|
|
|
::ng-deep {
|
|
.mat-mdc-tab-nav-panel {
|
|
padding: 2rem 0;
|
|
|
|
@media (max-width: 575.98px) {
|
|
padding: 1rem 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
@include mat.tabs-overrides(
|
|
(
|
|
container-height: 3rem
|
|
)
|
|
);
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
flex-direction: row-reverse;
|
|
|
|
@include mat.tabs-overrides(
|
|
(
|
|
active-focus-label-text-color: rgba(var(--palette-foreground-base), 1),
|
|
active-hover-label-text-color: rgba(var(--palette-foreground-base), 1),
|
|
active-label-text-color: rgba(var(--palette-foreground-base), 1),
|
|
active-ripple-color: rgba(var(--palette-foreground-base), 1),
|
|
container-height: 2rem,
|
|
inactive-ripple-color: rgba(var(--palette-foreground-base), 1)
|
|
)
|
|
);
|
|
|
|
::ng-deep {
|
|
.mat-mdc-tab-header {
|
|
background-color: rgba(var(--palette-foreground-base), 0.02);
|
|
padding: 2rem 0;
|
|
width: 14rem;
|
|
|
|
.mat-mdc-tab-links {
|
|
flex-direction: column;
|
|
|
|
.mat-mdc-tab-link {
|
|
border-radius: 0.25rem;
|
|
font-weight: 400;
|
|
justify-content: flex-start;
|
|
margin: 0 0.5rem 0.1rem 0.5rem;
|
|
|
|
&.mdc-tab--active {
|
|
background-color: rgba(var(--palette-foreground-base), 0.05);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mdc-tab__content,
|
|
.mdc-tab__text-label {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:host-context(.theme-dark) {
|
|
@media (min-width: 576px) {
|
|
@include mat.tabs-overrides(
|
|
(
|
|
active-focus-label-text-color: rgba(
|
|
var(--palette-foreground-base-dark),
|
|
1
|
|
),
|
|
active-hover-label-text-color: rgba(
|
|
var(--palette-foreground-base-dark),
|
|
1
|
|
),
|
|
active-label-text-color: rgba(var(--palette-foreground-base-dark), 1),
|
|
active-ripple-color: rgba(var(--palette-foreground-base-dark), 1),
|
|
inactive-ripple-color: rgba(var(--palette-foreground-base-dark), 1)
|
|
)
|
|
);
|
|
|
|
::ng-deep {
|
|
.mat-mdc-tab-header {
|
|
background-color: rgba(var(--palette-foreground-base-dark), 0.02);
|
|
|
|
.mat-mdc-tab-link {
|
|
&.mdc-tab--active {
|
|
background-color: rgba(var(--palette-foreground-base-dark), 0.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|