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

121
lib/core/form/components/form-renderer.component.scss Normal file
View File

@@ -0,0 +1,121 @@
.adf {
&-form-container {
max-width: 100% !important;
max-height: 100% !important;
& .mat-card {
padding: 16px 24px;
overflow: hidden;
}
& .mat-card-header-text {
margin: 0 !important;
}
& .mat-tab-body-content {
overflow: hidden;
}
& .mat-tab-label {
font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px;
text-align: left;
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
}
& .mat-ink-bar {
height: 4px;
}
& .mat-form-field-wrapper {
margin: 0 12px 0 0;
}
}
&-form-title {
font-size: var(--theme-title-font-size);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-form-debug-container {
padding: 10px;
}
&-form-debug-container .adf-debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .adf-debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
top: 30px;
}
&-form-validation-button {
position: absolute;
right: 50px;
top: 39px;
color: var(--theme-accent-color);
& .adf-invalid-color {
color: var(--theme-warn-color);
}
}
&-form-hide-button {
display: none !important;
}
&-task-title {
text-align: center;
}
&-label {
width: 32px;
height: 16px;
font-size: var(--theme-caption-font-size);
line-height: var(--theme-headline-line-height);
text-align: left;
white-space: nowrap;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;
padding-right: 25px !important;
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: var(--theme-body-2-font-size);
font-weight: bold;
}
}
}
form-field {
width: 100%;
.mat-input-element {
font-size: var(--theme-body-2-font-size);
padding-top: 8px;
line-height: normal;
}
}

1
lib/core/form/components/form-renderer.component.ts
View File

@@ -21,6 +21,7 @@ import { FormModel } from './widgets/core/form.model';
@Component({
selector: 'adf-form-renderer',
templateUrl: './form-renderer.component.html',
styleUrls: ['./form-renderer.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FormRendererComponent {

130
lib/core/form/components/form-renderer.theme.scss
View File

@@ -1,130 +0,0 @@
@mixin adf-form-renderer-theme($theme) {
$config: mat-typography-config();
$warn: map-get($theme, warn);
$accent: map-get($theme, accent);
.adf {
&-form-container {
max-width: 100% !important;
max-height: 100% !important;
& .mat-card {
padding: 16px 24px;
overflow: hidden;
}
& .mat-card-header-text {
margin: 0 !important;
}
& .mat-tab-body-content {
overflow: hidden;
}
& .mat-tab-label {
font-size: mat-font-size($config, subheading-2);
line-height: mat-line-height($config, headline);
letter-spacing: -0.4px;
text-align: left;
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
}
& .mat-ink-bar {
height: 4px;
}
& .mat-form-field-wrapper {
margin: 0 12px 0 0;
}
}
&-form-title {
font-size: mat-font-size($alfresco-typography, title);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-form-debug-container {
padding: 10px;
}
&-form-debug-container .adf-debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .adf-debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
top: 30px;
}
&-form-validation-button {
position: absolute;
right: 50px;
top: 39px;
color: mat-color($accent);
& .adf-invalid-color {
color: mat-color($warn);
}
}
&-form-hide-button {
display: none !important;
}
&-task-title {
text-align: center;
}
&-label {
width: 32px;
height: 16px;
font-size: mat-font-size($config, caption);
line-height: mat-line-height($config, headline);
text-align: left;
white-space: nowrap;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;
padding-right: 25px !important;
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: mat-font-size($config, body-2);
font-weight: bold;
}
}
}
form-field {
width: 100%;
.mat-input-element {
font-size: mat-font-size($config, body-2);
padding-top: 8px;
line-height: normal;
}
}
}

24
lib/core/form/components/widgets/amount/amount.theme.scss
View File

@@ -1,24 +0,0 @@
@mixin adf-amount-widget-theme($theme) {
$foreground: map-get($theme, foreground);
.adf {
&-amount-widget {
width: 100%;
margin-top: 15px;
}
&-amount-widget__input {
margin-top: -15px;
.mat-focused {
transition: none;
}
&:not(.mat-focused):not(.mat-form-field-invalid) {
.adf-amount-widget__prefix-spacing {
color: mat-color($foreground, secondary-text);
}
}
}
}
}

20
lib/core/form/components/widgets/amount/amount.widget.scss Normal file
View File

@@ -0,0 +1,20 @@
.adf {
&-amount-widget {
width: 100%;
margin-top: 15px;
}
&-amount-widget__input {
margin-top: -15px;
.mat-focused {
transition: none;
}
&:not(.mat-focused):not(.mat-form-field-invalid) {
.adf-amount-widget__prefix-spacing {
color: var(--theme-secondary-text-color);
}
}
}
}

1
lib/core/form/components/widgets/amount/amount.widget.ts
View File

@@ -30,6 +30,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
@Component({
selector: 'amount-widget',
templateUrl: './amount.widget.html',
styleUrls: ['./amount.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',

119
lib/core/form/components/widgets/container/container.theme.scss
View File

@@ -1,119 +0,0 @@
@mixin adf-form-container-widget-theme($theme) {
$primary: map-get($theme, primary);
.adf-hidden {
display: none;
}
.adf-container-widget__header-text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
padding-bottom: 10px;
cursor: default;
user-select: none;
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
-webkit-touch-callout: none;
/* iOS Safari */
&.adf-collapsible {
cursor: pointer;
}
}
.adf-field-list {
padding: 0;
list-style-type: none;
width: 100%;
height: 100%;
}
container-widget {
.adf-grid-list-column-view {
display: flex;
align-items: flex-start;
margin-right: -1%;
}
.adf-grid-list-single-column {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
}
.adf-grid-list-column-view-item {
width: 100%;
flex-grow: 1;
box-sizing: border-box;
padding-left: 1%;
padding-right: 1%;
}
.adf-grid-list {
display: grid;
}
.adf-grid-list-item {
box-sizing: border-box;
padding-left: 3px;
padding-right: 3px;
}
@media screen and (max-width: 959px) {
.adf-grid-list-item {
flex: 1 0 100%;
}
.adf-grid-list--column-view {
flex-direction: column;
}
.adf-grid-list-single-column {
width: 90% !important;
}
.adf-grid-list-column-view-item {
flex: 1 0 auto;
}
}
.mat-form-field {
width: 100%;
}
mat-form-field {
width: 100%;
}
.mat-input-placeholder {
top: 1.8em !important;
}
.mat-focused {
label {
transform: scaleX(1);
transition: transform 150ms linear,
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
color: mat-color($primary);
}
.mat-form-field-prefix {
color: mat-color($primary);
}
}
.mat-grid-tile {
overflow: visible;
width: 80%;
}
adf-form-field {
width: 100%;
}
}
}

115
lib/core/form/components/widgets/container/container.widget.scss Normal file
View File

@@ -0,0 +1,115 @@
.adf-hidden {
display: none;
}
.adf-container-widget__header-text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
padding-bottom: 10px;
cursor: default;
user-select: none;
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
-webkit-touch-callout: none;
/* iOS Safari */
&.adf-collapsible {
cursor: pointer;
}
}
.adf-field-list {
padding: 0;
list-style-type: none;
width: 100%;
height: 100%;
}
container-widget {
.adf-grid-list-column-view {
display: flex;
align-items: flex-start;
margin-right: -1%;
}
.adf-grid-list-single-column {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
}
.adf-grid-list-column-view-item {
width: 100%;
flex-grow: 1;
box-sizing: border-box;
padding-left: 1%;
padding-right: 1%;
}
.adf-grid-list {
display: grid;
}
.adf-grid-list-item {
box-sizing: border-box;
padding-left: 3px;
padding-right: 3px;
}
@media screen and (max-width: 959px) {
.adf-grid-list-item {
flex: 1 0 100%;
}
.adf-grid-list--column-view {
flex-direction: column;
}
.adf-grid-list-single-column {
width: 90% !important;
}
.adf-grid-list-column-view-item {
flex: 1 0 auto;
}
}
.mat-form-field {
width: 100%;
}
mat-form-field {
width: 100%;
}
.mat-input-placeholder {
top: 1.8em !important;
}
.mat-focused {
label {
transform: scaleX(1);
transition: transform 150ms linear;
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
color: var(--theme-primary-color);
}
.mat-form-field-prefix {
color: var(--theme-primary-color);
}
}
.mat-grid-tile {
overflow: visible;
width: 80%;
}
adf-form-field {
width: 100%;
}
}

1
lib/core/form/components/widgets/container/container.widget.ts
View File

@@ -26,6 +26,7 @@ import { ContainerWidgetComponentModel } from './container.widget.model';
@Component({
selector: 'container-widget',
templateUrl: './container.widget.html',
styleUrls: ['./container.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',

166
lib/core/form/components/widgets/dynamic-table/dynamic-table.theme.scss
View File

@@ -1,166 +0,0 @@
@mixin adf-dynamic-table-theme($theme) {
$foreground: map-get($theme, foreground);
$dynamic-table-font-size: 14px !default;
$dynamic-table-header-font-size: 12px !default;
$dynamic-table-header-sort-icon-size: 16px !default;
$dynamic-table-header-color: mat-color($foreground, text) !default;
$dynamic-table-header-sorted-color: mat-color($foreground, text) !default;
$dynamic-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
$dynamic-table-divider-color: mat-color($foreground, text, 0.07) !default;
$dynamic-table-hover-color: #eeeeee !default;
$dynamic-table-selection-color: #e0f7fa !default;
$dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default;
$dynamic-table-row-height: 56px !default;
$dynamic-table-column-spacing: 36px !default;
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
$dynamic-table-card-padding: 24px !default;
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
dynamic-table-widget .adf-label {
width: auto;
height: auto;
}
.adf {
&-dynamic-table-scrolling {
overflow: auto;
}
&-dynamic-table {
width: 100%;
position: relative;
border: $dynamic-table-dividers;
white-space: nowrap;
font-size: $dynamic-table-font-size;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0;
thead {
padding-bottom: 3px;
}
tbody {
tr {
position: relative;
height: $dynamic-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
&:hover {
background-color: $dynamic-table-hover-color;
}
&.adf-is-selected, &.adf-is-selected:hover {
background-color: $dynamic-table-selection-color;
}
&:focus {
outline-offset: -1px;
outline: rgb(68, 138, 255) solid 1px;
}
}
}
td, th {
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
text-align: center;
&:first-of-type {
padding-left: 24px;
}
&:last-of-type {
padding-right: 24px;
}
}
td {
color: mat-color($foreground, text);
position: relative;
vertical-align: middle;
height: $dynamic-table-row-height;
border-top: $dynamic-table-dividers;
border-bottom: $dynamic-table-dividers;
padding-top: $dynamic-table-cell-top;
box-sizing: border-box;
@include adf-no-select;
cursor: default;
}
th {
@include adf-no-select;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: $dynamic-table-row-height;
font-size: $dynamic-table-header-font-size;
color: $dynamic-table-header-color;
padding-bottom: 8px;
box-sizing: border-box;
&.adf-sortable {
@include adf-no-select;
&:hover {
cursor: pointer;
}
}
&.adf-dynamic-table__header--sorted-asc,
&.adf-dynamic-table__header--sorted-desc {
color: $dynamic-table-header-sorted-color;
&::before {
@include typo-icon;
font-size: $dynamic-table-header-sort-icon-size;
content: '\e5d8';
margin-right: 5px;
vertical-align: sub;
}
&:hover {
cursor: pointer;
&::before {
color: $dynamic-table-header-sorted-icon-hover-color;
}
}
}
&.adf-dynamic-table__header--sorted-desc::before {
content: '\e5db';
}
}
.adf-dynamic-table-cell {
text-align: left;
cursor: default;
&--text {
text-align: left;
}
&--number {
text-align: right;
}
&--image {
text-align: left;
img {
width: 24px;
height: 24px;
}
}
}
.adf-full-width {
width: 100%;
}
}
}
}

161
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss Normal file
View File

@@ -0,0 +1,161 @@
@import '~@angular/material/theming';
@import '../../../../styles/mixins';
$dynamic-table-font-size: 14px !default;
$dynamic-table-header-font-size: 12px !default;
$dynamic-table-header-sort-icon-size: 16px !default;
$dynamic-table-hover-color: #eeeeee !default;
$dynamic-table-selection-color: #e0f7fa !default;
$dynamic-table-row-height: 56px !default;
$dynamic-table-column-spacing: 36px !default;
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
$dynamic-table-card-padding: 24px !default;
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
dynamic-table-widget .adf-label {
width: auto;
height: auto;
}
.adf {
&-dynamic-table-scrolling {
overflow: auto;
}
&-dynamic-table {
width: 100%;
position: relative;
border: 1px solid var(--theme-border-color);
white-space: nowrap;
font-size: $dynamic-table-font-size;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0;
thead {
padding-bottom: 3px;
}
tbody {
tr {
position: relative;
height: $dynamic-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
&:hover {
background-color: $dynamic-table-hover-color;
}
&.adf-is-selected, &.adf-is-selected:hover {
background-color: $dynamic-table-selection-color;
}
&:focus {
outline-offset: -1px;
outline: rgb(68, 138, 255) solid 1px;
}
}
}
td, th {
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
text-align: center;
&:first-of-type {
padding-left: 24px;
}
&:last-of-type {
padding-right: 24px;
}
}
td {
color: var(--theme-text-fg-color);
position: relative;
vertical-align: middle;
height: $dynamic-table-row-height;
border-top: 1px solid var(--theme-border-color);
border-bottom: 1px solid var(--theme-border-color);
padding-top: $dynamic-table-cell-top;
box-sizing: border-box;
@include adf-no-select;
cursor: default;
}
th {
@include adf-no-select;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
height: $dynamic-table-row-height;
font-size: $dynamic-table-header-font-size;
color: var(--theme-text-fg-color);
padding-bottom: 8px;
box-sizing: border-box;
&.adf-sortable {
@include adf-no-select;
&:hover {
cursor: pointer;
}
}
&.adf-dynamic-table__header--sorted-asc,
&.adf-dynamic-table__header--sorted-desc {
color: var(--theme-text-fg-color);
&::before {
@include typo-icon;
font-size: $dynamic-table-header-sort-icon-size;
content: '\e5d8';
margin-right: 5px;
vertical-align: sub;
}
&:hover {
cursor: pointer;
&::before {
color: var(--theme-disabled-text-color);
}
}
}
&.adf-dynamic-table__header--sorted-desc::before {
content: '\e5db';
}
}
.adf-dynamic-table-cell {
text-align: left;
cursor: default;
&--text {
text-align: left;
}
&--number {
text-align: right;
}
&--image {
text-align: left;
img {
width: 24px;
height: 24px;
}
}
}
.adf-full-width {
width: 100%;
}
}
}

1
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts
View File

@@ -29,6 +29,7 @@ import { DynamicTableModel } from './dynamic-table.widget.model';
@Component({
selector: 'dynamic-table-widget',
templateUrl: './dynamic-table.widget.html',
styleUrls: ['./dynamic-table.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',

179
lib/core/form/components/widgets/form.theme.scss
View File

@@ -1,97 +1,86 @@
@mixin adf-form-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
@include adf-hyperlink-widget-theme($theme);
ul > li > form-field > .adf-focus {
.adf-label {
color: mat-color($primary);
}
ul > li > form-field > .adf-focus {
.adf-label {
color: var(--theme-primary-color);
}
}
.adf {
&-error-text-container {
height: 20px;
margin-top: -12px;
}
&-error-text {
padding: 1px;
height: 16px;
font-size: 12px;
line-height: 1.33;
float: left;
color: var(--theme-warn-color);
}
&-error-icon {
float: right;
font-size: 17px;
color: var(--theme-warn-color);
}
&-label {
color: rgb(186, 186, 186);;
}
&-invalid {
.mat-form-field-underline {
background-color: #f44336 !important;
}
.mat-checkbox {
color: var(--theme-warn-color);
.mat-checkbox-frame {
border-color: var(--theme-warn-color);
}
}
.mat-select {
&-value {
color: var(--theme-warn-color);
}
&-arrow {
color: var(--theme-warn-color);
}
}
.adf-file {
border-color: var(--theme-warn-color);
}
.mat-form-field-prefix {
color: var(--theme-warn-color);
}
.adf-input {
border-color: var(--theme-warn-color);
}
.adf-label {
color: var(--theme-warn-color);
&::after {
background-color: var(--theme-warn-color);
}
}
}
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
adf-form-field {
.mat-input-element, .mat-select, .mat-form-field {
display: block !important;
}
}
.adf {
&-error-text-container {
height: 20px;
margin-top: -12px;
}
&-error-text {
padding: 1px;
height: 16px;
font-size: 12px;
line-height: 1.33;
float: left;
color: mat-color($warn);
}
&-error-icon {
float: right;
font-size: 17px;
color: mat-color($warn);
}
&-label {
color: rgb(186, 186, 186);;
}
&-invalid {
.mat-form-field-underline {
background-color: #f44336 !important;
}
.mat-checkbox {
color: mat-color($warn);
.mat-checkbox-frame {
border-color: mat-color($warn);
}
}
.mat-select {
&-value {
color: mat-color($warn);
}
&-arrow {
color: mat-color($warn);
}
}
.adf-file {
border-color: mat-color($warn);
}
.mat-form-field-prefix {
color: mat-color($warn);
}
.adf-input {
border-color: mat-color($warn);
}
.adf-label {
color: mat-color($warn);
&::after {
background-color: mat-color($warn);
}
}
}
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
adf-form-field {
.mat-input-element, .mat-select, .mat-form-field {
display: block !important;
}
}
}
}

12
lib/core/form/components/widgets/hyperlink/hyperlink.theme.scss
View File

@@ -1,12 +0,0 @@
@mixin adf-hyperlink-widget-theme($theme) {
$primary: map-get($theme, primary);
.adf-hyperlink-widget {
padding: 0.4375em 0;
border-top: 0.84375em solid transparent;
a {
color: mat-color($primary);
}
}
}

8
lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss Normal file
View File

@@ -0,0 +1,8 @@
.adf-hyperlink-widget {
padding: 0.4375em 0;
border-top: 0.84375em solid transparent;
a {
color: var(--theme-primary-color);
}
}

1
lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts
View File

@@ -25,6 +25,7 @@ import { FormFieldModel } from '../core';
@Component({
selector: 'hyperlink-widget',
templateUrl: './hyperlink.widget.html',
styleUrls: ['./hyperlink.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',

60
lib/core/form/components/widgets/people/people.theme.scss
View File

@@ -1,60 +0,0 @@
@mixin adf-form-people-widget-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf {
&-people-widget {
width: 100%;
.mat-form-field-label-wrapper {
top: 10px;
}
}
&-people-widget-list {
margin: 5px 0;
padding: 10px 0;
}
&-people-widget-row {
display: flex;
align-items: center;
}
&-people-widget-pic {
background: mat-color($primary);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100px;
color: mat-color($foreground, text);
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
}
&-people-widget-image {
margin-left: -44px;
left: 21px;
background: mat-color($background, dialog);
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0;
}
&-people-widget-image-row {
display: inline-block;
}
&-people-label-name {
padding-left: 10px;
}
}
}

54
lib/core/form/components/widgets/people/people.widget.scss Normal file
View File

@@ -0,0 +1,54 @@
.adf {
&-people-widget {
width: 100%;
.mat-form-field-label-wrapper {
top: 10px;
}
}
&-people-widget-list {
margin: 5px 0;
padding: 10px 0;
}
&-people-widget-row {
display: flex;
align-items: center;
}
&-people-widget-pic {
background: var(--theme-primary-color);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100px;
color: var(--theme-text-fg-color);
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
}
&-people-widget-image {
margin-left: -44px;
left: 21px;
background: var(--theme-dialog-bg-color);
border-radius: 100px;
width: 40px;
height: 40px;
vertical-align: middle;
display: inline-block;
padding: 0;
}
&-people-widget-image-row {
display: inline-block;
}
&-people-label-name {
padding-left: 10px;
}
}

1
lib/core/form/components/widgets/people/people.widget.ts
View File

@@ -36,6 +36,7 @@ import {
@Component({
selector: 'people-widget',
templateUrl: './people.widget.html',
styleUrls: ['./people.widget.scss'],
host: {
'(click)': 'event($event)',
'(blur)': 'event($event)',