blob: 7ef300ec792e1ca5257070e270a6a0f8f628ff2a [file] [log] [blame]
@import '../common/styles/elevation';
@import '../common/styles/theme-functions';
@import '../common/styles/typography-functions';
@mixin td-layout-typography($config) {
td-navigation-drawer {
.td-navigation-drawer-title {
font: {
family: td-font-family($config);
size: td-font-size($config, subheading-2);
}
}
.td-navigation-drawer-name {
font: {
family: td-font-family($config);
size: td-font-size($config, body-1);
weight: 500;
}
line-height: td-line-height($config, body-1);
}
.td-navigation-drawer-menu-toggle {
font: {
family: td-font-family($config);
size: td-font-size($config, body-2);
weight: 400;
}
line-height: td-line-height($config, body-2);
}
}
}
@mixin td-layout-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.mat-drawer-container {
background-color: mat-color($background, status-bar);
}
[mat-icon-button].td-layout-menu-button {
margin-left: 0;
::ng-deep [dir='rtl'] & {
margin-right: 0;
margin-left: 6px;
}
}
td-layout-nav,
td-layout-nav-list,
td-layout-manage-list,
td-layout-card-over,
td-navigation-drawer,
td-layout {
mat-toolbar {
@include mat-elevation(1);
z-index: 1;
}
}
body[dense] td-layout-nav,
body[dense] td-layout-nav-list,
body[dense] td-layout-card-over,
td-layout-nav[dense],
td-layout-nav-list[dense],
td-layout-card-over[dense] {
mat-toolbar.td-layout-toolbar {
&.mat-toolbar-row,
&.mat-toolbar-single-row {
height: 48px;
}
}
}
body[dense] td-layout-card-over,
td-layout-card-over[dense] {
.td-layout-card-over-wrapper {
margin: -48px;
margin-left: 0;
margin-right: 0;
}
}
.mat-drawer-side.td-layout-sidenav {
@include mat-elevation(2);
}
.td-layout-footer {
background: mat-color($background, app-bar);
color: mat-color($foreground, text);
@include mat-elevation(2);
&.mat-primary {
background: mat-color($primary);
&,
mat-icon {
color: mat-color($primary, default-contrast);
}
}
&.mat-accent {
background: mat-color($accent);
&,
mat-icon {
color: mat-color($accent, default-contrast);
}
}
&.mat-warn {
background: mat-color($warn);
&,
mat-icon {
color: mat-color($warn, default-contrast);
}
}
}
}