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:
95
lib/core/comments/comment-list.component.scss
Normal file
95
lib/core/comments/comment-list.component.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
@@ -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
|
||||
})
|
||||
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
39
lib/core/comments/comments.component.scss
Normal file
39
lib/core/comments/comments.component.scss
Normal 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%;
|
||||
}
|
@@ -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 {
|
||||
|
||||
|
@@ -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%;
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue
Block a user