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-992] improve datatable styles according to UX guidelines (#2088)

Browse Source 
* improve datatable style

* datatable and document list enhancements

- support to toggle header in DataTable
- Document List automatically hides header for empty content
This commit is contained in:
Denys Vuika
2017-07-15 22:31:14 +01:00
committed by Eugenio Romano
parent 45c8e9fed8
commit 335dd870ad
5 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
View File

@@ -1,16 +1,16 @@
@import 'theming';
$data-table-font-size: 13px !default;
$data-table-font-size: 14px !default;
$data-table-header-font-size: 12px !default;
$data-table-header-sort-icon-size: 16px !default;
$data-table-header-color: rgba(#000, 0.54) !default;
$data-table-header-sorted-color: rgba(#000, 0.87) !default;
$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
$data-table-divider-color: rgba(#000, 0.12) !default;
$data-table-header-color: $alfresco-secondary-text-color !default;
$data-table-header-sorted-color: $alfresco-primary-text-color !default;
$data-table-header-sorted-icon-hover-color: $alfresco-disabled-text-color !default;
$data-table-divider-color: $alfresco-divider-color !default;
$data-table-hover-color: #eeeeee !default;
$data-table-selection-color: #e0e0e0 !default;
$data-table-selection-color: #e0f7fa !default;
$data-table-dividers: 1px solid $data-table-divider-color !default;
$data-table-row-height: 48px !default;
$data-table-row-height: 56px !default;
// $data-table-last-row-height: 56px !default;
// $data-table-header-height: 56px !default;
$data-table-column-spacing: 36px !default;
@@ -20,9 +20,10 @@ $data-table-column-padding: $data-table-column-spacing / 2;
$data-table-card-padding: 24px !default;
// $data-table-button-padding-right: 16px !default;
$data-table-cell-top: $data-table-card-padding / 2;
$data-table-drag-border: 1px dashed rgb(68,138,255);
.adf-data-table {
width: 100%;
position: relative;
border: $data-table-dividers;
border-collapse: collapse;
@@ -76,6 +77,7 @@ $data-table-cell-top: $data-table-card-padding / 2;
}
td {
color: $alfresco-secondary-text-color;
position: relative;
vertical-align: middle;
height: $data-table-row-height;
@@ -157,6 +159,7 @@ $data-table-cell-top: $data-table-card-padding / 2;
.full-width {
width: 100%;
color: $alfresco-primary-text-color;
}
/* Empty folder */
@@ -243,15 +246,15 @@ $data-table-cell-top: $data-table-card-padding / 2;
.adf-upload__dragging {
& > td {
border-top: 1px dashed rgb(68,138,255);
border-bottom: 1px dashed rgb(68,138,255);
border-top: $data-table-drag-border;
border-bottom: $data-table-drag-border;
&:first-child {
border-left: 1px dashed rgb(68,138,255);
border-left: $data-table-drag-border;
}
&:last-child {
border-right: 1px dashed rgb(68,138,255);
border-right: $data-table-drag-border;
}
}
}