inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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

35
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.css
View File

@@ -1,35 +0,0 @@
.adf-panel-heading {
float: left;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #000000;
width: 100%;
}
.adf-panel-heading-selected {
color: #448aff;
}
.adf-panel-heading-icon {
float: left;
}
.adf-panel-heading-text {
float: left;
padding-left: 20px;
padding-top: 4px;
}
.adf-panel-heading-toggle {
float: right;
cursor: pointer;
}
.adf-panel-heading-toggle:hover {
opacity: 0.4;
}

38
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.scss Normal file
View File

@@ -0,0 +1,38 @@
@mixin mat-accordion-theme($theme) {
$primary: map-get($theme, primary);
.adf-panel-heading {
float: left;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
width: 100%;
}
.adf-panel-heading-selected {
color: mat-color($primary);
}
.adf-panel-heading-icon {
float: left;
}
.adf-panel-heading-text {
float: left;
padding-left: 20px;
padding-top: 4px;
}
.adf-panel-heading-toggle {
float: right;
cursor: pointer;
}
.adf-panel-heading-toggle:hover {
opacity: 0.4;
}
}

6
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
View File

@@ -15,14 +15,14 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { AccordionComponent } from './accordion.component';
@Component({
selector: 'adf-accordion-group',
templateUrl: 'accordion-group.component.html',
styleUrls: ['./accordion-group.component.css']
styleUrls: ['./accordion-group.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AccordionGroupComponent implements OnDestroy {
private _isOpen: boolean = false;

5
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { AccordionGroupComponent } from './accordion-group.component';
@Component({
@@ -25,7 +25,8 @@ import { AccordionGroupComponent } from './accordion-group.component';
`,
host: {
'class': 'panel-group'
}
},
encapsulation: ViewEncapsulation.None
})
export class AccordionComponent {
groups: Array<AccordionGroupComponent> = [];

91
ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
View File

@@ -1,55 +1,58 @@
@import 'theming';
$adf-pagination--height: 48px;
$adf-pagination--icon-button-size: 32px;
$adf-pagination--border: 1px solid $alfresco-divider-color;
@mixin mat-pagination-theme($theme) {
$foreground: map-get($theme, foreground);
.adf-pagination {
display: flex;
border-top: $adf-pagination--border;
height: $adf-pagination--height;
line-height: $adf-pagination--height;
color: $alfresco-secondary-text-color;
$adf-pagination--height: 48px;
$adf-pagination--icon-button-size: 32px;
$adf-pagination--border: 1px solid mat-color($foreground, text, .07);
&__block {
.adf-pagination {
display: flex;
align-items: center;
padding: 0 12px;
border-right: $adf-pagination--border;
border-top: $adf-pagination--border;
height: $adf-pagination--height;
line-height: $adf-pagination--height;
color: mat-color($primary, default-contrast);
&:first-child {
flex: 1 1 auto;
padding-left: 24px;
&__block {
display: flex;
align-items: center;
padding: 0 12px;
border-right: $adf-pagination--border;
&:first-child {
flex: 1 1 auto;
padding-left: 24px;
}
&:last-child {
border-right-width: 0;
}
}
&:last-child {
border-right-width: 0;
}
}
&__max-items {
margin-left: 10px;
}
&__max-items, &__current-page {
margin-right: 5px;
&, & + button {
color: $alfresco-primary-text-color;
&__max-items {
margin-left: 10px;
}
& + button {
margin-left: -10px;
&__max-items, &__current-page {
margin-right: 5px;
&, & + button {
color: mat-color($foreground, text);
}
& + button {
margin-left: -10px;
}
}
&__previous-button, &__next-button {
margin: 0 5px;
}
button[md-icon-button] {
width: $adf-pagination--icon-button-size;
height: $adf-pagination--icon-button-size;
line-height: $adf-pagination--icon-button-size;
}
}
&__previous-button, &__next-button {
margin: 0 5px;
}
button[md-icon-button] {
width: $adf-pagination--icon-button-size;
height: $adf-pagination--icon-button-size;
line-height: $adf-pagination--icon-button-size;
}
}
}

35
ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.scss
View File

@@ -1,22 +1,25 @@
@import 'theming';
$adf-toolbar-height: 48px;
$adf-toolbar-font-size: 14px;
@mixin mat-adf-toolbar-theme($theme) {
$foreground: map-get($theme, foreground);
$adf-toolbar-height: 48px;
$adf-toolbar-font-size: 14px;
.adf-toolbar--spacer {
flex: 1 1 auto;
}
.adf-toolbar {
.mat-toolbar {
min-height: $adf-toolbar-height;
border: 1px solid $alfresco-divider-color;
.adf-toolbar--spacer {
flex: 1 1 auto;
}
.mat-toolbar-row {
height: $adf-toolbar-height;
font-size: $adf-toolbar-font-size;
white-space: normal;
.adf-toolbar {
.mat-toolbar {
min-height: $adf-toolbar-height;
border: 1px solid mat-color($foreground, text, .07);
}
.mat-toolbar-row {
height: $adf-toolbar-height;
font-size: $adf-toolbar-font-size;
white-space: normal;
}
}
}

47
ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.scss
View File

@@ -1,28 +1,29 @@
@import 'theming';
@mixin mat-card-view-dateitem-theme($theme) {
.#{$ADF} {
&-invisible-date-input {
height: 24px;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
}
&-dateitem-editable {
cursor: pointer;
button {
width: 16px;
height: 16px;
opacity: 0.5;
margin-left: 4px;
.adf {
&-invisible-date-input {
height: 24px;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
}
&:hover button {
opacity: 1;
&-dateitem-editable {
cursor: pointer;
button {
width: 16px;
height: 16px;
opacity: 0.5;
margin-left: 4px;
}
&:hover button {
opacity: 1;
}
}
}
}
}

4
ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.scss
View File

@@ -1,6 +1,4 @@
@import 'theming';
.#{$ADF} {
.adf {
&-mapitem-clickable-value {
cursor: pointer;
}

140
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.scss
View File

@@ -1,90 +1,92 @@
@import 'theming';
@mixin mat-card-view-textitem-theme($theme) {
.#{$ADF} {
&-textitem-icon {
font-size: 16px;
width: 16px;
height: 16px;
position: relative;
top: 3px;
padding-left: 8px;
opacity: 0.5;
}
&-update-icon {
padding-left: 13px;
}
&-textitem-readonly {
cursor: pointer;
&:hover md-icon {
opacity: 1;
.adf {
&-textitem-icon {
font-size: 16px;
width: 16px;
height: 16px;
position: relative;
top: 3px;
padding-left: 8px;
opacity: 0.5;
}
}
&-textitem-clickable-value {
cursor: pointer;
}
&-update-icon {
padding-left: 13px;
}
&-textitem-editable {
display: flex;
md-icon:hover {
opacity: 1;
&-textitem-readonly {
cursor: pointer;
&:hover md-icon {
opacity: 1;
}
}
md-input-container {
width: 100%;
&-textitem-clickable-value {
cursor: pointer;
color: mat-color($primary);
}
input:focus,
textarea:focus {
border: 1px solid #EEE;
&-textitem-editable {
display: flex;
md-icon:hover {
opacity: 1;
cursor: pointer;
}
md-input-container {
width: 100%;
}
input:focus,
textarea:focus {
border: 1px solid #EEE;
}
}
}
&-textitem-editable /deep/ .mat-input-wrapper {
margin: 0;
padding-bottom: 0;
}
&-textitem-editable /deep/ .mat-input-wrapper {
margin: 0;
padding-bottom: 0;
}
&-textitem-editable /deep/ .mat-input-underline {
display: none;
}
&-textitem-editable /deep/ .mat-input-underline {
display: none;
}
&-textitem-editable /deep/ .mat-input-infix {
padding: 0;
border-top: none;
}
&-textitem-editable /deep/ .mat-input-infix {
padding: 0;
border-top: none;
}
&-textitem-editable /deep/ .mat-input-placeholder-wrapper {
padding-top: 2em;
position: static;
}
&-textitem-editable /deep/ .mat-input-placeholder-wrapper {
padding-top: 2em;
position: static;
}
&-textitem-editable /deep/ .mat-input-placeholder {
top: 0;
}
&-textitem-editable /deep/ .mat-input-placeholder {
top: 0;
}
&-textitem-editable /deep/ .mat-input-element {
font-family: inherit;
position: relative;
padding-top: 3px;
}
&-textitem-editable /deep/ .mat-input-element {
font-family: inherit;
position: relative;
padding-top: 3px;
}
&-textitem-editable /deep/ .mat-input-element:focus {
padding: 5px;
left: -6px;
top: -6px;
}
&-textitem-editable /deep/ .mat-input-element:focus {
padding: 5px;
left: -6px;
top: -6px;
}
&-textitem-editable /deep/ input.mat-input-element {
margin-bottom: 2px;
}
&-textitem-editable /deep/ input.mat-input-element {
margin-bottom: 2px;
}
&-textitem-editable /deep/ input.mat-input-element:focus {
margin-bottom: -8px;
&-textitem-editable /deep/ input.mat-input-element:focus {
margin-bottom: -8px;
}
}
}

54
ng2-components/ng2-alfresco-core/src/components/view/card-view.component.scss
View File

@@ -1,32 +1,34 @@
@import 'theming';
.#{$ADF} {
&-property-list {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
@mixin mat-card-view-theme($theme) {
&-property {
display: table-row;
}
.adf {
&-property-list {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
&-property /deep/ &-property-label {
display: table-cell;
min-width: 100px;
padding-right: 30px;
word-wrap: break-word;
color: $alfresco-gray-label;
vertical-align: top;
padding-bottom: 20px;
}
&-property {
display: table-row;
}
&-property /deep/ &-property-value {
width: 100%;
display: table-cell;
color: rgb(101, 101, 101);
vertical-align: top;
padding-bottom: 20px;
&-property /deep/ &-property-label {
display: table-cell;
min-width: 100px;
padding-right: 30px;
word-wrap: break-word;
color: rgb(186, 186, 186);;
vertical-align: top;
padding-bottom: 20px;
}
&-property /deep/ &-property-value {
width: 100%;
display: table-cell;
color: rgb(101, 101, 101);
vertical-align: top;
padding-bottom: 20px;
}
}
}