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

[ADF-1434] Theming ADF component (#2228)

Browse Source 
* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides
This commit is contained in:
Eugenio Romano
2017-08-19 01:06:35 +01:00
committed by Mario Romano
parent f6f94fbd0c
commit d4e64ac438
149 changed files with 31228 additions and 3136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-activiti-form/README.md
View File

@@ -12,6 +12,8 @@
- [Form Component](#form-component)
* [Properties](#properties)
+ [Form Field Validators](#form-field-validators)
- [Custom set of validators](#custom-set-of-validators)
- [Custom validator example](#custom-validator-example)
* [Advanced properties](#advanced-properties)
* [Events](#events)
* [Custom empty form template](#custom-empty-form-template)

152
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss
View File

@@ -1,80 +1,86 @@
@import 'theming';
.adf {
&-field-list {
padding: 0;
list-style-type: none;
width: 100%;
height: 100%;
@mixin mat-container-widget-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.adf {
&-field-list {
padding: 0;
list-style-type: none;
width: 100%;
height: 100%;
}
.container-widget__header-text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
margin-left: 10px;
margin-right: 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 */
&.collapsible {
cursor: pointer;
}
}
}
.container-widget__header-text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
margin-left: 10px;
margin-right: 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 */
&.collapsible {
cursor: pointer;
container-widget {
.grid-list {
display: flex;
flex-wrap: wrap;
margin-left: -1%;
margin-right: -1%;
}
.grid-list-item {
flex-grow: 1;
box-sizing: border-box;
padding-left: 1%;
padding-right: 1%;
}
md-input-container {
width: 100%;
}
.mat-input-placeholder-wrapper {
top: 0 !important;
}
.mat-input-placeholder {
top: 2.5em !important;
}
.mat-focused {
.mat-input-placeholder-wrapper {
display: none;
}
label {
transform: scaleX(1);
transition: transform 150ms linear,
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
color: mat-color($primary);
}
.mat-input-prefix {
color: mat-color($primary);
}
}
.mat-grid-tile {
overflow: visible;
}
}
}
container-widget{
.grid-list {
display: flex;
flex-wrap: wrap;
margin-left: -1%;
margin-right: -1%;
}
.grid-list-item {
flex-grow: 1;
box-sizing: border-box;
padding-left: 1%;
padding-right: 1%;
}
md-input-container {
width: 100%;
}
.mat-input-placeholder-wrapper{
top:0 !important;
}
.mat-input-placeholder{
top: 2.5em !important;
}
.mat-focused {
.mat-input-placeholder-wrapper{
display: none;
}
label {
transform: scaleX(1);
transition: transform 150ms linear,
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
color: mat-color($primary);
}
.mat-input-prefix {
color: mat-color($primary);
}
}
.mat-grid-tile {
overflow: visible;
}
}

280
ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.scss
View File

@@ -1,162 +1,162 @@
@import 'theming';
@import '../form';
@import 'mixins';
$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: $alfresco-secondary-text-color !default;
$dynamic-table-header-sorted-color: $alfresco-primary-text-color !default;
$dynamic-table-header-sorted-icon-hover-color: $alfresco-disabled-text-color !default;
$dynamic-table-divider-color: $alfresco-divider-color !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);
@mixin mat-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($primary, default-contrast) !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, .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);
.adf {
.adf {
&-dynamic-table {
width: 100%;
position: relative;
border: $dynamic-table-dividers;
white-space: nowrap;
font-size: $dynamic-table-font-size;
background-color: unquote("rgb(#{$alfresco-white})");
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0;
thead {
padding-bottom: 3px;
}
tbody {
tr {
&-dynamic-table {
width: 100%;
position: relative;
height: $dynamic-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
border: $dynamic-table-dividers;
white-space: nowrap;
font-size: $dynamic-table-font-size;
&:hover {
background-color: $dynamic-table-hover-color;
/* Firefox fixes */
border-collapse: unset;
border-spacing: 0;
thead {
padding-bottom: 3px;
}
&.is-selected, &.is-selected:hover {
background-color: $dynamic-table-selection-color;
}
tbody {
tr {
position: relative;
height: $dynamic-table-row-height;
@include material-animation-default(0.28s);
transition-property: background-color;
&:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: rgb(68,138,255);
outline-style: solid;
}
}
}
&:hover {
background-color: $dynamic-table-hover-color;
}
td, th {
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
text-align: center;
&.is-selected, &.is-selected:hover {
background-color: $dynamic-table-selection-color;
}
&:first-of-type {
padding-left: 24px;
}
&:last-of-type {
padding-right: 24px;
}
}
td {
color: $alfresco-secondary-text-color;
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 no-select;
cursor: default;
}
th {
@include 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;
&.sortable {
@include 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;
&:focus {
outline-offset: -1px;
outline-width: 1px;
outline-color: rgb(68, 138, 255);
outline-style: solid;
}
}
}
}
&.adf-dynamic-table__header--sorted-desc:before {
content: "\e5db";
}
}
.adf-dynamic-table-cell {
text-align: left;
cursor: default;
td, th {
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
text-align: center;
&--text {
text-align: left;
}
&:first-of-type {
padding-left: 24px;
}
&--number {
text-align: right;
}
&:last-of-type {
padding-right: 24px;
}
}
&--image {
text-align: left;
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;
img {
width: 24px;
height: 24px;
@include no-select;
cursor: default;
}
th {
@include 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;
&.sortable {
@include 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;
}
}
}
.full-width {
width: 100%;
}
}
}
.full-width {
width: 100%;
color: $alfresco-primary-text-color;
}
}
}

114
ng2-components/ng2-activiti-form/src/components/widgets/form.scss
View File

@@ -1,61 +1,71 @@
@import 'theming';
@import './hyperlink/hyperlink.widget';
@import 'colors';
ul > li > form-field > .adf-focus {
.adf-label {
color: mat-color($primary);
}
}
@mixin mat-form-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.adf {
&-error-text-container {
width: 95%;
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: $alfresco-gray-label;
}
&-invalid {
.mat-input-underline {
background-color: #f44336 !important;
}
.adf-file {
border-color: mat-color($warn);
}
.mat-input-prefix {
color: mat-color($warn);
}
.adf-input {
border-color: mat-color($warn);
}
@include mat-hyperlink-widget-theme($theme);
ul > li > form-field > .adf-focus {
.adf-label {
color: mat-color($primary);
}
}
.adf {
&-error-text-container {
width: 95%;
height: 20px;
margin-top: -12px;
}
&-error-text {
padding: 1px;
height: 16px;
font-size: 12px;
line-height: 1.33;
float: left;
color: mat-color($warn);
&:after {
background-color: mat-color($warn);
}
&-error-icon {
float: right;
font-size: 17px;
color: mat-color($warn);
}
&-label {
color: rgb(186, 186, 186);;
}
&-invalid {
.mat-input-underline {
background-color: #f44336 !important;
}
.adf-file {
border-color: mat-color($warn);
}
.mat-input-prefix {
color: mat-color($warn);
}
.adf-input {
border-color: mat-color($warn);
}
.adf-label {
color: mat-color($warn);
&:after {
background-color: mat-color($warn);
}
}
}
}
}

21
ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.scss
View File

@@ -1,15 +1,16 @@
@import 'theming';
@import '../form';
@mixin mat-hyperlink-widget-theme($theme) {
$primary: map-get($theme, primary);
.adf-hyperlink-widget {
padding: 0.4375em 0;
border-top: 0.84375em solid transparent;
.adf-hyperlink-widget {
padding: 0.4375em 0;
border-top: 0.84375em solid transparent;
.focus {
color: mat-color($primary);
}
.focus {
color: mat-color($primary);
}
a {
color: mat-color($primary);
a {
color: mat-color($primary);
}
}
}

1
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss
View File

@@ -1,4 +1,3 @@
@import 'theming';
@import '../form';
.adf {