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

21
lib/core/styles/_default-class.scss
View File

@@ -1,14 +1,11 @@
@mixin adf-default-class-theme($theme) {
.adf-hide-small {
@media screen and (max-width: 959px) {
display: none !important;
}
}
.adf-hide-xsmall {
@media screen and (max-width: 599px) {
display: none !important;
}
.adf-hide-small {
@media screen and (max-width: 959px) {
display: none !important;
}
}
.adf-hide-xsmall {
@media screen and (max-width: 599px) {
display: none !important;
}
}

166
lib/core/styles/_index.scss
View File

@@ -1,80 +1,102 @@
@import './theme-colors';
@import './default-class';
@import './theming';
@import '../card-view/card-view.theme';
@import '../datatable/components/datatable/datatable.theme';
@import '../form/components/widgets/container/container.theme';
@import '../form/components/widgets/dynamic-table/dynamic-table.theme';
@import '../form/components/widgets/form.theme';
@import '../form/components/widgets/hyperlink/hyperlink.theme';
@import '../form/components/widgets/amount/amount.theme';
@import '../form/components/widgets/people/people.theme';
@import '../info-drawer/info-drawer-layout.theme';
@import '../login/components/login.theme';
@import '../pagination/pagination.theme';
@import '../toolbar/toolbar.theme';
@import '../userinfo/components/user-info.theme';
@import '../viewer/components/viewer.theme';
@import '../viewer/components/pdf-viewer.theme';
@import '../viewer/components/pdf-viewer-thumbnails.theme';
@import '../viewer/components/pdf-viewer-password-dialog.theme.scss';
@import '../viewer/components/txt-viewer.theme';
@import '../viewer/components/img-viewer.theme';
@import '../viewer/components/unknown-format/unknown-format.theme';
@import '../form/components/form-renderer.theme';
@import '../layout/components/sidebar-action/sidebar-action-menu.theme';
@import '../layout/components/header/header.theme';
@import '../comments/comment-list.theme';
@import '../comments/comments.theme';
@import '../layout/components/layout-container/layout-container.theme';
@import '../layout/components/sidenav-layout/sidenav-layout.theme';
@import '../templates/empty-content/empty-content.theme';
@import '../templates/error-content/error-content.theme';
@import '../clipboard/clipboard.theme';
@import '../search-text/search-text-input.theme';
@import './snackbar.theme';
@import '../directives/tooltip-card/tooltip-card.theme';
@import '../notifications/components/notification-history.theme';
@import './material.theme';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
@mixin adf-core-theme($theme) {
@include adf-colors-theme($theme);
@include adf-default-class-theme($theme);
@include adf-card-view-module-theme($theme);
@include adf-datatable-theme($theme);
@include adf-form-container-widget-theme($theme);
@include adf-dynamic-table-theme($theme);
@include adf-form-theme($theme);
@include adf-hyperlink-widget-theme($theme);
@include adf-amount-widget-theme($theme);
@include adf-form-people-widget-theme($theme);
@include adf-info-drawer-theme($theme);
@include adf-login-theme($theme);
@include adf-pagination-theme($theme);
@include adf-toolbar-theme($theme);
@include adf-userinfo-theme($theme);
@include adf-viewer-theme($theme);
@include adf-pdf-viewer-theme($theme);
@include adf-pdf-thumbnails-theme($theme);
@include adf-pdf-viewer-password-dialog-theme($theme);
@include adf-image-viewer-theme($theme);
@include adf-unknown-viewer-theme($theme);
@include adf-text-viewer-theme($theme);
@include adf-form-renderer-theme($theme);
@include adf-sidebar-action-menu-theme($theme);
@include adf-task-list-comment-list-theme($theme);
@include adf-task-list-comment-theme($theme);
@include adf-layout-container-theme($theme);
@include adf-empty-content-theme($theme);
@include adf-error-content-theme($theme);
@include adf-header-layout-theme($theme);
@include adf-sidenav-layout-theme($theme);
@include adf-clipboard-theme($theme);
@include adf-snackbar-theme($theme);
@include mat-expansion-panel-theme--fix($theme);
@include mat-calendar-theme--fix($theme);
@include mat-datetimepicker-theme--fix($theme);
@include adf-search-text-input-theme($theme);
@include adf-tooltip-card-directive($theme);
@include adf-notification-history-theme($theme);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$warn: map-get($theme, warn);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
// map SCSS variables to expose as CSS variables
$defaults: (
// material colors
--theme-primary-color: mat-color($primary),
--theme-primary-color-default-contrast: mat-color($primary, default-contrast),
--theme-warn-color: mat-color($warn),
--theme-warn-color-default-contrast: mat-color($warn, default-contrast),
--theme-accent-color: mat-color($accent),
--theme-accent-color-a200: mat-color($accent, A200),
--theme-accent-color-default-contrast: mat-color($accent, default-contrast),
// component themes
--adf-snackbar-error-bg-color: mat-color($warn),
--adf-snackbar-error-action-color: white,
--adf-snackbar-warning-bg-color: mat-color($accent),
--adf-snackbar-warning-action-color: white,
--adf-snackbar-info-bg-color: mat-color($primary),
--adf-snackbar-info-action-color: white,
--adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87),
--adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64),
--adf-node-selector-icon-color: mat-color($foreground, icon, 0.54),
--adf-node-selector-base-color: mat-color($foreground, base, 0.45),
--adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65),
--adf-datatable-cell-link-hover-color: mat-color($accent, 500),
--adf-datatable-selected-color: mat-color($primary, 100),
--adf-user-info-color: mat-color($primary, 300),
--adf-comment-list-primary-color: mat-color($primary, 100),
--adf-comment-list-ripple-color: mat-color($primary, 300),
--adf-search-input-bg-color: mat-color($primary, 50),
--adf-search-input-highlight-color: mat-color($primary, 900),
--adf-tooltip-card-color: mat-color($foreground, text, 0.75),
--adf-card-view-text-color: mat-color($foreground, text, 0.25),
--adf-card-view-label-color: mat-color($foreground, text, 0.4),
--adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42),
--adf-upload-border-color: mat-color($foreground, text, 0.14),
--theme-hover-bg-color: mat-color($background, hover),
--theme-text-color: mat-color($foreground, text, 0.54),
--theme-text-bold-color: mat-color($foreground, text, 0.87),
--theme-background-color: mat-color($background, background),
--theme-text-fg-color: mat-color($foreground, text),
--theme-text-fg-shadow-color: mat-color($foreground, text, 0.27),
--theme-border-color: mat-color($foreground, text, 0.07),
--theme-card-bg-color: mat-color($background, card),
--theme-card-bg-bold-color: mat-color($background, card, 0.87),
--theme-foreground-text-color: mat-color($foreground, text, 0.72),
--theme-secondary-text-color: mat-color($foreground, secondary-text),
--theme-dialog-bg-color: mat-color($background, dialog),
--theme-bg-hover-color: mat-color($background, hover),
--theme-fg-base-color: mat-color($foreground, base),
--theme-fg-divider: mat-color($foreground, divider),
--theme-disabled-text-color: mat-color($foreground, disabled-text),
--theme-selected-button-bg-color: mat-color($background, selected-button),
--theme-icon-fg-color: mat-color($foreground, icon),
--theme-unselected-chip-bg-color: mat-color($background, unselected-chip),
--theme-status-bar-bg-color: mat-color($background, status-bar),
// fonts
--theme-font-family: mat-font-family($alfresco-typography),
--theme-body-1-font-size: mat-font-size($alfresco-typography, body-1),
--theme-body-2-font-size: mat-font-size($alfresco-typography, body-2),
--theme-body-1-line-height: mat-line-height($alfresco-typography, body-1),
--theme-display-1-font-size: mat-font-size($alfresco-typography, display-1),
--theme-display-3-font-size: mat-font-size($alfresco-typography, display-3),
--theme-display-4-font-size: mat-font-size($alfresco-typography, display-4),
--theme-caption-font-size: mat-font-size($alfresco-typography, caption),
--theme-title-font-size: mat-font-size($alfresco-typography, title),
--theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2),
--theme-button-font-size: mat-font-size($alfresco-typography, button),
--theme-headline-line-height: mat-line-height($alfresco-typography, headline),
// specific colors
--theme-colors-mat-grey: mat-color($mat-grey, A200),
--theme-colors-mat-grey-dark: mat-color($mat-grey, A400),
--theme-colors-mag-grey-light: mat-color($mat-grey, 50),
);
// propagates SCSS variables into the CSS variables scope
:root {
@each $name, $value in $defaults {
#{$name}: #{$value};
}
}
@include mat-datetimepicker-theme($theme);
@include adf-snackbar-theme();
@include adf-material-theme();
}

94
lib/core/styles/_mixins.scss
View File

@@ -1,6 +1,3 @@
@import '~@angular/material/theming';
@import 'variables';
@mixin adf-no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -27,27 +24,7 @@
@mixin material-animation-default($duration: 0.2s) {
transition-duration: $duration;
transition-timing-function: $animation-curve-default;
}
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
position: relative;
line-height: $line-height;
padding: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
@supports (-webkit-line-clamp: 1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
height: calc(0.99em * #{$line-height} * #{$lines});
}
@supports not (-webkit-line-clamp: 1) {
white-space: nowrap;
width: 100%;
}
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@mixin flex-column {
@@ -66,72 +43,3 @@
height: 100%;
overflow: hidden;
}
@mixin mat-expansion-panel-theme--fix($theme) {
$background: map-get($theme, background);
.mat-expansion-panel {
& .mat-expansion-panel-header.cdk-keyboard-focused,
& .mat-expansion-panel-header.cdk-program-focused,
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
&:not([aria-disabled='true']) {
background: mat-color($background, hover);
}
}
}
}
@mixin mat-calendar-theme--fix($theme) {
$foreground: map-get($theme, foreground);
.mat-calendar {
.mat-calendar-header {
button {
color: mat-color($foreground, text, 0.87);
&:disabled {
color: mat-color($foreground, text, 0.54);
}
}
}
.mat-calendar-content {
.mat-calendar-table-header th {
color: mat-color($foreground, text, 0.54);
}
.mat-calendar-body-disabled > div {
color: mat-color($foreground, text, 0.54) !important;
}
}
}
}
@mixin mat-datetimepicker-theme--fix($theme) {
$foreground: map-get($theme, foreground);
.mat-datetimepicker-calendar {
.mat-datetimepicker-calendar-header {
.mat-datetimepicker-calendar-header-year {
opacity: 1;
}
.mat-datetimepicker-calendar-header-date {
opacity: 1;
}
.mat-datetimepicker-calendar-header-time {
opacity: 1;
}
}
.mat-datetimepicker-calendar-content {
.mat-datetimepicker-calendar-table-header th {
color: mat-color($foreground, text, 0.54);
}
.mat-datetimepicker-calendar-body-disabled > div {
color: mat-color($foreground, text, 0.54);
}
}
}
}

44
lib/core/styles/_theme-colors.scss
View File

@@ -1,44 +0,0 @@
@import '~@angular/material/theming';
@mixin adf-colors-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);
.adf-primary-color {
color: mat-color($primary) !important;
}
.adf-accent-color {
color: mat-color($accent) !important;
}
.adf-warn-color {
color: mat-color($warn) !important;
}
.adf-dialog-background-color {
background: mat-color($background, dialog) !important;
}
.adf-primary-background-color {
color: mat-color($primary, default-contrast) !important;
background: mat-color($primary) !important;
}
.adf-accent-background-color {
color: mat-color($accent, default-contrast) !important;
background: mat-color($accent) !important;
}
.adf-primary-contrast-text-color {
color: mat-color($primary, default-contrast) !important;
}
.adf-accent-contrast-text-color {
color: mat-color($accent, default-contrast) !important;
}
}

1
lib/core/styles/_theming.scss
View File

@@ -1,7 +1,6 @@
@import '~@angular/material/theming';
@import '~@angular/flex-layout/mq';
@import './colors';
@import './variables';
@import './mixins';
@import './typography';

8
lib/core/styles/_variables.scss
View File

@@ -1,8 +0,0 @@
@import './colors';
/* ANIMATION */
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
$swift-ease-in-duration: 300ms !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;

59
lib/core/styles/material.theme.scss Normal file
View File

@@ -0,0 +1,59 @@
@mixin adf-material-theme() {
.mat-expansion-panel {
& .mat-expansion-panel-header.cdk-keyboard-focused,
& .mat-expansion-panel-header.cdk-program-focused,
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
&:not([aria-disabled='true']) {
background-color: var(--theme-hover-bg-color);
}
}
}
.mat-calendar {
.mat-calendar-header {
button {
color: var(--theme-text-bold-color);
&:disabled {
color: var(--theme-text-color);
}
}
}
.mat-calendar-content {
.mat-calendar-table-header th {
color: var(--theme-text-color);
}
.mat-calendar-body-disabled > div {
color: var(--theme-text-color) !important;
}
}
}
.mat-datetimepicker-calendar {
.mat-datetimepicker-calendar-header {
.mat-datetimepicker-calendar-header-year {
opacity: 1;
}
.mat-datetimepicker-calendar-header-date {
opacity: 1;
}
.mat-datetimepicker-calendar-header-time {
opacity: 1;
}
}
.mat-datetimepicker-calendar-content {
.mat-datetimepicker-calendar-table-header th {
color: var(--theme-text-color);
}
.mat-datetimepicker-calendar-body-disabled > div {
color: var(--theme-text-color);
}
}
}
}

8
lib/core/styles/prebuilt/_all-theme.scss
View File

@@ -1,13 +1,5 @@
@import '../../../content-services/src/lib/styles/index';
@import '../../../process-services/src/lib/styles/index';
@import '../../../process-services-cloud/src/lib/styles/index';
@import '../../../core/styles/index';
@import '../../../insights/src/lib/styles/index';
@mixin alfresco-material-theme($theme) {
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);
@include adf-process-services-cloud-theme($theme);
@include adf-core-theme($theme);
@include adf-insights-theme($theme);
}

32
lib/core/styles/snackbar.theme.scss
View File

@@ -1,29 +1,25 @@
@mixin adf-snackbar-theme($theme) {
$warn: map-get($theme, warn);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
@mixin adf-snackbar-theme() {
.adf-error-snackbar {
background-color: mat-color($warn);
background-color: var(--adf-snackbar-error-bg-color);
.mat-simple-snackbar-action {
color: white;
}
.mat-simple-snackbar-action {
color: var(--adf-snackbar-error-action-color);
}
}
.adf-warning-snackbar {
background-color: mat-color($accent);
background-color: var(--adf-snackbar-warning-bg-color);
.mat-simple-snackbar-action {
color: white;
}
.mat-simple-snackbar-action {
color: var(--adf-snackbar-warning-action-color);
}
}
.adf-info-snackbar {
background-color: mat-color($primary);
background-color: var(--adf-snackbar-info-bg-color);
.mat-simple-snackbar-action {
color: white;
}
.mat-simple-snackbar-action {
color: var(--adf-snackbar-info-action-color);
}
}
}
}