alfresco-ng2-components/lib/core/info-drawer/info-drawer-layout.component.scss

102 lines
3.2 KiB
SCSS

@import '~@angular/material/theming';
@mixin adf-info-drawer-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$adf-info-drawer-layout-background-color: mat-color($background, background) !default;
$adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default;
$adf-info-drawer-layout-title-font-size: 20px !default;
$adf-info-drawer-icon-size: 48px !default;
.adf {
&-info-drawer {
@include flex-column;
}
&-info-drawer-layout {
@include flex-column;
overflow: auto;
width: 100%;
background-color: $adf-info-drawer-layout-background-color;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
& .mat-tab-label {
font-weight: bold;
text-align: left;
color: mat-color($accent);
text-transform: uppercase;
opacity: 1;
&-active {
color: mat-color($primary);
}
}
&-header {
padding: 13px 0 0 23px;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
&-buttons {
padding-right:18px;
mat-icon {
cursor: pointer;
}
}
&-title {
width: 197px;
height: 32px;
font-size: $adf-info-drawer-layout-title-font-size;
line-height: 1.6;
letter-spacing: -0.5px;
text-align: left;
color: $adf-info-drawer-layout-title-color;
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
&-content {
padding: 10px;
> * {
margin-bottom: 20px;
display: block;
}
> *:last-child {
margin-bottom: 0;
}
.adf-info-drawer-tabs .mat-tab-body-content {
.adf-manage-versions-empty,
.adf-manage-versions-no-permission {
margin: 0;
padding: $adf-info-drawer-icon-size/2;
color: mat-color($foreground, text, 0.54);
text-align: center;
display: flex;
flex-direction: column;
&-icon {
width: $adf-info-drawer-icon-size;
height: $adf-info-drawer-icon-size;
font-size: $adf-info-drawer-icon-size;
margin: 0 auto $adf-info-drawer-icon-size/2;
display: block;
}
}
}
}
}
}
}