[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
2021-09-29 13:17:05 +01:00
committed by GitHub
parent 8113b9b10b
commit 6f968f7e4a
335 changed files with 7703 additions and 8339 deletions

View File

@@ -0,0 +1,95 @@
.adf-is-selected {
background: var(--adf-comment-list-primary-color);
}
.adf {
&-comment-img-container {
float: left;
width: 40px;
height: 100%;
display: flex;
align-self: flex-start;
padding-top: 18px;
}
&-comment-list-item {
/* stylelint-disable */
white-space: initial;
/* stylelint-enable */
display: table-row-group;
padding-top: 12px;
overflow: hidden;
height: 100% !important;
transition: background 0.8s;
background-position: center;
&:hover {
background: var(--adf-comment-list-primary-color)
radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%)
center/15000%;
}
&:active {
background-color: var(--adf-comment-list-ripple-color);
background-size: 100%;
transition: background 0s;
}
}
&-comment-user-icon {
padding: 10px 5px;
width: 30px;
background-color: var(--theme-primary-color);
color: var(--theme-primary-color-default-contrast);
border-radius: 50%;
font-size: 16px;
text-align: center;
height: 20px;
background-size: cover;
}
&-comment-user-name {
float: left;
width: calc(100% - 10%);
padding: 2px 10px;
font-weight: 600;
font-size: 14px;
}
&-comment-message {
float: left;
width: calc(100% - 10px);
padding: 2px 10px;
font-style: italic;
/* stylelint-disable */
white-space: initial !important;
/* stylelint-enable */
font-size: 14px;
letter-spacing: -0.2px;
line-height: 1.43;
color: var(--theme-foreground-text-color);
}
&-comment-message-time {
float: left;
width: calc(100% - 10%);
padding: 2px 10px;
font-size: 12px !important;
color: var(--theme-foreground-text-color);
}
&-comment-contents {
width: calc(100% - 10px);
padding-top: 12px;
padding-bottom: 12px;
padding-left: 5px;
}
&-people-img {
border-radius: 90%;
width: 40px;
height: 40px;
vertical-align: middle;
}
}

View File

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

View File

@@ -1,102 +0,0 @@
@mixin adf-task-list-comment-list-theme($theme) {
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);
$primaryColor: mat-color($primary, 100);
$rippleColor: mat-color($primary, 300);
.adf-is-selected {
background: mat-color($primary, 100);
}
.adf {
&-comment-img-container {
float: left;
width: 40px;
height: 100%;
display: flex;
align-self: flex-start;
padding-top: 18px;
}
&-comment-list-item {
/* stylelint-disable */
white-space: initial;
/* stylelint-enable */
display: table-row-group;
padding-top: 12px;
overflow: hidden;
height: 100% !important;
transition: background 0.8s;
background-position: center;
&:hover {
background: $primaryColor
radial-gradient(circle, transparent 1%, $primaryColor 1%)
center/15000%;
}
&:active {
background-color: $rippleColor;
background-size: 100%;
transition: background 0s;
}
}
&-comment-user-icon {
padding: 10px 5px;
width: 30px;
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
border-radius: 50%;
font-size: 16px;
text-align: center;
height: 20px;
background-size: cover;
}
&-comment-user-name {
float: left;
width: calc(100% - 10%);
padding: 2px 10px;
font-weight: 600;
font-size: 14px;
}
&-comment-message {
float: left;
width: calc(100% - 10px);
padding: 2px 10px;
font-style: italic;
/* stylelint-disable */
white-space: initial !important;
/* stylelint-enable */
font-size: 14px;
letter-spacing: -0.2px;
line-height: 1.43;
color: mat-color($foreground, text, 0.72);
}
&-comment-message-time {
float: left;
width: calc(100% - 10%);
padding: 2px 10px;
font-size: 12px !important;
color: mat-color($foreground, text, 0.72);
}
&-comment-contents {
width: calc(100% - 10px);
padding-top: 12px;
padding-bottom: 12px;
padding-left: 5px;
}
&-people-img {
border-radius: 90%;
width: 40px;
height: 40px;
vertical-align: middle;
}
}
}

View File

@@ -0,0 +1,39 @@
.adf-comments-container {
height: 100%;
width: 100%;
overflow: auto;
}
.adf-comments-header {
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
border-bottom: 1px solid var(--theme-fg-divider);
}
.adf-comments-input-container {
width: calc(100% - 30px);
padding: 8px 15px 0;
border-bottom: 1px solid var(--theme-fg-divider);
textarea {
resize: vertical;
}
}
.adf-comments-input-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.adf-full-width {
width: 100%;
}
adf-comment-list {
float: left;
overflow: auto;
height: calc(100% - 101px);
width: 100%;
}

View File

@@ -18,13 +18,15 @@
import { CommentProcessService } from '../services/comment-process.service';
import { CommentContentService } from '../services/comment-content.service';
import { CommentModel } from '../models/comment.model';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { Observable, Observer } from 'rxjs';
import { share } from 'rxjs/operators';
@Component({
selector: 'adf-comments',
templateUrl: './comments.component.html'
templateUrl: './comments.component.html',
styleUrls: ['./comments.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommentsComponent implements OnChanges {

View File

@@ -1,45 +0,0 @@
@mixin adf-task-list-comment-theme($theme) {
$foreground: map-get($theme, foreground);
$header-border: 1px solid mat-color($foreground, divider);
.adf-comments-container {
height: 100%;
width: 100%;
overflow: auto;
}
.adf-comments-header {
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
border-bottom: $header-border;
}
.adf-comments-input-container {
width: calc(100% - 30px);
padding: 8px 15px 0;
border-bottom: $header-border;
textarea {
resize: vertical;
}
}
.adf-comments-input-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.adf-full-width {
width: 100%;
}
adf-comment-list {
float: left;
overflow: auto;
height: calc(100% - 101px);
width: 100%;
}
}