Files
sogo/UI/WebServerResources/scss/components/tabs/tabs-theme.scss

62 lines
1.3 KiB
SCSS

$tabs-color-palette: $primary-color-palette !default;
$tabs-header-background-color: map-get($tabs-color-palette, '500') !default;
$tabs-inactive-color: map-get($tabs-color-palette, '100') !default;
$tabs-active-color: $primary-color-palette-contrast-color !default;
$tabs-disabled-color: $foreground-quarternary-color !default;
$tabs-highlight-color: $primary-color-palette-contrast-color !default;
md-tabs.md-THEME_NAME-theme {
.md-header {
background-color: '{{primary-color}}';
}
&.md-accent {
.md-header {
background-color: '{{accent-color}}';
}
md-tab:not([disabled]) {
color: '{{accent-100}}';
&.active {
color: '{{accent-contrast}}';
}
}
}
&.md-warn {
.md-header {
background-color: '{{warn-color}}';
}
md-tab:not([disabled]) {
color: '{{warn-100}}';
&.active {
color: '{{warn-contrast}}';
}
}
}
md-tabs-ink-bar {
color: $tabs-highlight-color;
background: $tabs-highlight-color;
}
md-tab {
color: '{{primary-100}}';
&.active {
color: '{{primary-contrast}}';
}
&[disabled] {
color: '{{foreground-4}}';
}
&:focus {
color: '{{primary-contrast}}';
background-color: '{{primary-contrast-0.1}}';
}
.md-ripple-container {
color: $tabs-highlight-color;
}
}
}