inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)

Browse Source 
* 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
2021-09-29 13:17:05 +01:00
committed by GitHub
parent 8113b9b10b
commit 6f968f7e4a
335 changed files with 7703 additions and 8339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
lib/core/layout/components/header/header.component.scss Normal file
View File

@@ -0,0 +1,108 @@
adf-layout-header .mat-toolbar-single-row {
color: var(--theme-primary-color-default-contrast) !important;
position: relative;
padding: 0 24px;
.adf-menu-icon {
position: relative;
margin-right: 0;
.mat-icon {
font-size: 29px;
padding: 0 5px 0 0;
}
}
.adf-app-logo {
position: relative;
height: 28px;
width: 28px;
vertical-align: middle;
margin-top: -3px;
}
.adf-app-title {
cursor: pointer;
letter-spacing: -0.3px;
font-weight: 100;
}
.adf-toolbar-divider {
margin: 0 5px;
& > div {
background-color: var(--theme-card-bg-color);
}
}
.adf-header-delimiter {
height: 24px;
width: 2px;
background-color: var(--theme-primary-color-default-contrast);
}
.adf-userinfo-container {
flex-direction: row;
padding: 0;
}
@media screen and (max-width: 599px) {
.adf-app-logo,
.adf-app-title {
display: none;
}
}
}
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
.adf-menu-icon {
margin-right: -11px;
}
.adf-app-logo {
margin-right: 6px;
}
.adf-app-title {
margin-right: 6px;
}
.adf-header-delimiter {
margin-left: 16px;
}
.adf-userinfo-container {
margin-left: 16px;
}
.adf-userinfo-name {
padding-left: 8px;
}
}
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
.adf-menu-icon {
margin-left: -11px;
}
.adf-app-logo {
margin-left: 6px;
}
.adf-app-title {
margin-left: 6px;
}
.adf-header-delimiter {
margin-right: 16px;
}
.adf-userinfo-container {
margin-right: 16px;
}
.adf-userinfo-name {
padding-right: 8px;
}
}

1
lib/core/layout/components/header/header.component.ts
View File

@@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core';
@Component({
selector: 'adf-layout-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-layout-header' }
})

116
lib/core/layout/components/header/header.theme.scss
View File

@@ -1,116 +0,0 @@
@mixin adf-header-layout-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
adf-layout-header .mat-toolbar-single-row {
color: mat-color($primary, default-contrast) !important;
position: relative;
padding: 0 24px;
.adf-menu-icon {
position: relative;
margin-right: 0;
.mat-icon {
font-size: 29px;
padding: 0 5px 0 0;
}
}
.adf-app-logo {
position: relative;
height: 28px;
width: 28px;
vertical-align: middle;
margin-top: -3px;
}
.adf-app-title {
cursor: pointer;
letter-spacing: -0.3px;
font-weight: 100;
}
.adf-toolbar-divider {
margin: 0 5px;
& > div {
background-color: mat-color($background, card, 1);
}
}
.adf-header-delimiter {
height: 24px;
width: 2px;
background-color: mat-color($primary, default-contrast);
}
.adf-userinfo-container {
flex-direction: row;
padding: 0;
}
@media screen and (max-width: 599px) {
.adf-app-logo,
.adf-app-title {
display: none;
}
}
}
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
.adf-menu-icon {
margin-right: -11px;
}
.adf-app-logo {
margin-right: 6px;
}
.adf-app-title {
margin-right: 6px;
}
.adf-header-delimiter {
margin-left: 16px;
}
.adf-userinfo-container {
margin-left: 16px;
}
.adf-userinfo-name {
padding-left: 8px;
}
}
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
.adf-menu-icon {
margin-left: -11px;
}
.adf-app-logo {
margin-left: 6px;
}
.adf-app-title {
margin-left: 6px;
}
.adf-header-delimiter {
margin-right: 16px;
}
.adf-userinfo-container {
margin-right: 16px;
}
.adf-userinfo-name {
padding-right: 8px;
}
}
}

55
lib/core/layout/components/layout-container/layout-container.component.scss Normal file
View File

@@ -0,0 +1,55 @@
adf-layout-container {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.adf-container-full-width {
width: inherit;
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-container-full-width {
width: 100%;
}
}
.adf-sidenav--hidden {
visibility: hidden !important;
width: 0 !important;
transform: unset !important;
opacity: 0 !important;
}
.mat-sidenav-container {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.mat-sidenav {
overflow: hidden;
border-right: 1px solid var(--theme-border-color);
background-color: var(--theme-background-color);
}
mat-sidenav-content.mat-sidenav-content,
.mat-drawer-transition .mat-drawer-content {
margin-left: 0 !important;
transform: unset !important;
transition-property: unset !important;
transition-duration: unset !important;
transition-timing-function: unset !important;
}
mat-sidenav-content > div {
display: flex;
height: 100%;
> div {
flex: auto;
}
}

1
lib/core/layout/components/layout-container/layout-container.component.ts
View File

@@ -23,6 +23,7 @@ import { Direction } from '@angular/cdk/bidi';
@Component({
selector: 'adf-layout-container',
templateUrl: './layout-container.component.html',
styleUrls: ['./layout-container.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: [sidenavAnimation, contentAnimation]
})

61
lib/core/layout/components/layout-container/layout-container.theme.scss
View File

@@ -1,61 +0,0 @@
@mixin adf-layout-container-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$adf-layout-container-height: 100% !default;
adf-layout-container {
display: block;
width: 100%;
height: $adf-layout-container-height;
overflow: hidden;
}
.adf-container-full-width {
width: inherit;
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-container-full-width {
width: 100%;
}
}
.adf-sidenav--hidden {
visibility: hidden !important;
width: 0 !important;
transform: unset !important;
opacity: 0 !important;
}
.mat-sidenav-container {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.mat-sidenav {
overflow: hidden;
border-right: 1px solid mat-color($foreground, text, 0.07);
background-color: mat-color($background, background);
}
mat-sidenav-content.mat-sidenav-content,
.mat-drawer-transition .mat-drawer-content {
margin-left: 0 !important;
transform: unset !important;
transition-property: unset !important;
transition-duration: unset !important;
transition-timing-function: unset !important;
}
mat-sidenav-content > div {
display: flex;
height: $adf-layout-container-height;
> div {
flex: auto;
}
}
}

56
lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss Normal file
View File

@@ -0,0 +1,56 @@
@import '~@angular/material/theming';
.adf {
&-sidebar-action-menu {
& .mat-raised-button {
width: 100%;
display: block;
box-shadow: none !important;
height: 37.5px;
font-weight: bold;
background-color: var(--theme-primary-color);
color: var(--theme-primary-color-default-contrast) !important;
border-radius: 4px;
& mat-icon {
width: 24px;
height: 25px;
color: var(--theme-primary-color-default-contrast) !important;
}
}
&-text {
width: 100%;
height: 20px;
text-align: left;
}
}
&-sidebar-action-menu-icon {
margin: 18px 0 0 20px;
color: var(--theme-text-color);
cursor: pointer;
&:hover {
color: var(--theme-primary-color);
}
}
&-sidebar-action-menu-options {
text-align: left;
letter-spacing: -0.4px;
.mat-menu-item {
font-size: 14px;
color: var(--theme-text-bold-color);
text-align: left;
line-height: 1.5;
letter-spacing: -0.4px;
}
.mat-menu-item:hover {
color: var(--theme-primary-color);
opacity: inherit;
}
}
&-sidebar-action-menu-panel {
margin-top: 7.5px;
border-radius: 2px;
@include mat-elevation(2);
}
}

1
lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts
View File

@@ -20,6 +20,7 @@ import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation
@Component({
selector: 'adf-sidebar-action-menu',
templateUrl: './sidebar-action-menu.component.html',
styleUrls: ['./sidebar-action-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: { 'class': 'adf-sidebar-action-menu' }

66
lib/core/layout/components/sidebar-action/sidebar-action-menu.theme.scss
View File

@@ -1,66 +0,0 @@
@mixin adf-sidebar-action-menu-theme($theme) {
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);
$adf-sidebar-action-menu-button-height: 37.5px;
$adf-sidebar-action-menu-button-border-radius: 4px;
$adf-sidebar-action-menu-opacity: 0.54;
$adf-sidebar-action-menu-item-opacity: 0.87;
$adf-sidebar-action-menu-item-line-spacing: -0.4px;
$adf-sidebar-action-menu-item-font-size: 14px;
.adf {
&-sidebar-action-menu {
& .mat-raised-button {
width: 100%;
display: block;
box-shadow: none !important;
height: $adf-sidebar-action-menu-button-height;
font-weight: bold;
background-color: mat-color($primary);
color: mat-color($primary, default-contrast) !important;
border-radius: $adf-sidebar-action-menu-button-border-radius;
& mat-icon {
width: 24px;
height: 25px;
color: mat-color($primary, default-contrast) !important;
}
}
&-text {
width: 100%;
height: 20px;
text-align: left;
}
}
&-sidebar-action-menu-icon {
margin: 18px 0 0 20px;
color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
cursor: pointer;
&:hover {
color: mat-color($primary);
}
}
&-sidebar-action-menu-options {
text-align: left;
letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
.mat-menu-item {
font-size: $adf-sidebar-action-menu-item-font-size;
color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
text-align: left;
line-height: 1.5;
letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
}
.mat-menu-item:hover {
color: mat-color($primary);
opacity: inherit;
}
}
&-sidebar-action-menu-panel {
margin-top: 7.5px;
border-radius: 2px;
@include mat-elevation(2);
}
}
}

39
lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss Normal file
View File

@@ -0,0 +1,39 @@
@import '~@angular/flex-layout/mq';
@import '../../../styles/mixins';
.adf-sidenav-layout {
&-full-space {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
width: 100%;
}
@include flex-column;
width: 100%;
.adf-layout__content {
flex: 1 1 auto;
}
router-outlet {
flex: 0 0;
}
@include layout-bp(lt-sm) {
.mat-drawer {
width: calc(-50px + 100vw) !important;
max-width: 300px !important;
}
}
.mat-drawer-content {
@include flex-column;
position: unset;
overflow: auto;
}
}

1
lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
View File

@@ -40,6 +40,7 @@ import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'adf-sidenav-layout',
templateUrl: './sidenav-layout.component.html',
styleUrls: ['./sidenav-layout.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-sidenav-layout' }
})

39
lib/core/layout/components/sidenav-layout/sidenav-layout.theme.scss
View File

@@ -1,39 +0,0 @@
@mixin adf-sidenav-layout-theme($theme) {
.adf-sidenav-layout {
&-full-space {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
width: 100%;
}
@include flex-column;
width: 100%;
.adf-layout__content {
flex: 1 1 auto;
}
router-outlet {
flex: 0 0;
}
@include layout-bp(lt-sm) {
.mat-drawer {
width: calc(-50px + 100vw) !important;
max-width: 300px !important;
}
}
.mat-drawer-content {
@include flex-column;
position: unset;
overflow: auto;
}
}
}