mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-08-07 17:48:54 +00:00
[ADF-852] Form style Material 2 (#2151)
* mdl2 transition part form 1 * hyperlink * radio buttons * label * people component * [ADF-852] moved textarea to new angular material * number widget * change error multiline * [ADF-852] added md desgin for dropdown * [ADF-852] removed unused css file * functional widget * error dropdown * [ADF-852] - changed to new md date * remove md-date-time-picker dependency in ng2-alfresco-from * [ADF-852] conversion dynamic table phase 1 * container widget * remove test unused * validation change * [ADF-852] convert dynamic table phase 2 * [ADF-852] improving style and fixing bugs * move custom style for form in form.scss * error footer refactor * fix models and test * [ADF-852]- fixed minor twitch on dynamic table * align fields and fix tests dropdown * disabling button in readonly clean mdl form start process form * align dropdown * [ADF-1048] Upload widget can manage multiple files. (#2134) * [ADF-1048] improving upload widget * [ADF-1048] added ability to upload multiple file on upload widget * [ADF-1048] added multiple upload elements on upload widget * [ADF-1048] - show all the files on the completed form * [ADF-1048] fixed wrong selecion on displya upload * [ADF-1048] removed fdescribe from upload widget * date validation and custom moment data adapter * move content widget in the widget folder * add style fields and theming * color primary radio and checkbox * fix amount widget and colors * change ViewEncapsulation and fix date style button issue * empty form customization 1736 * focus label style * [ADF-224] fix the rendering of custom stencils when form is opened in readonly state. (#2161) * [ADF-224] Fixed rendering of custom stencil in readonly mode * [ADF-224] improved variable name * test fix * container filter in form model creation * show display value correctly * fix change date and test * fix date editor and add some test coverage for date * style minor issue * fix new unused local import rule * fix test date * strict date check * fix analytics failing test * restore null as default in model * unify model diagrams and analytics
This commit is contained in:
committed by
Mario Romano
parent
47ea517ffb
commit
083c9da0d4
@@ -0,0 +1,162 @@
|
||||
@import 'theming';
|
||||
@import '../form';
|
||||
|
||||
$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);
|
||||
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
height: $dynamic-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $dynamic-table-hover-color;
|
||||
}
|
||||
|
||||
&.is-selected, &.is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline-width: 1px;
|
||||
outline-color: rgb(68,138,255);
|
||||
outline-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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%;
|
||||
color: $alfresco-primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user