mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
* remove default-class mixin and use regular import * cleanup colors * remove variables file, fix bugs in animations * proper ordering of imports, core css vars * cleanup snackbar and material themes * tags component * login component styles * app login * toolbar component styles * breadcrumb styles * dropdown breadcrumb * app layout component * demo shell: files component * aspect list styles * content metadata styles * node selector * name location cell * node share dialog * content type dialog * folder dialog * document list * datatable theme * pagination theme * viewer theme * viewer theme * user-info theme * container widget * dynamic table theme * form widgets * form theme * form renderer * sidebar menu * header theme * info drawer theme * comment list * commens and layout container * sidenav layout * empty content * error content * clipboard theme * search input * tooltip card and notification history * card view theme * remove unused keys * add permission dialog * search and permission dialogs * version comparison and column themes * upload drag area and cleanup references * remove the need for content styles * insight components * cleanup insights theme * process components * process components * process cloud themes * cleanup unsed imports * cleanup mixins * update build scripts * test fixes * remove fdescribe * css fixes * update unit tests
This commit is contained in:
Denys Vuika
GitHub
204
lib/core/viewer/components/viewer.component.scss
Normal file
204
lib/core/viewer/components/viewer.component.scss
Normal file
@@ -0,0 +1,204 @@
|
||||
.adf-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--theme-card-bg-color);
|
||||
}
|
||||
|
||||
.adf-viewer {
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.mat-toolbar {
|
||||
color: var(--theme-text-color);
|
||||
|
||||
.adf-toolbar-title {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&__mimeicon {
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: var(--theme-card-bg-bold-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__file-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__display-name {
|
||||
font-size: 16px;
|
||||
opacity: 0.87;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
|
||||
max-width: 400px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
&-container {
|
||||
.adf-viewer-layout-content {
|
||||
@extend .adf-full-screen;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
background-color: var(--theme-background-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-viewer-layout {
|
||||
@extend .adf-full-screen;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.adf-viewer-content {
|
||||
@extend .adf-full-screen;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
height: 0; // Firefox
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-overlay-container {
|
||||
.adf-viewer-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-container {
|
||||
@extend .adf-full-screen;
|
||||
}
|
||||
|
||||
&-content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-custom-content {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
&-unknown-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__loading-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
width: 350px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
background-color: var(--theme-background-color);
|
||||
box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color);
|
||||
overflow: auto;
|
||||
|
||||
&__right {
|
||||
border-left: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
&__left {
|
||||
border-right: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbnails {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: #e6e6e6;
|
||||
|
||||
.adf-info-drawer-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-info-drawer-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content > *:last-child {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
&-page-scale {
|
||||
cursor: default;
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user