Skip to content

Commit

Permalink
Cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomivirkki
tomivirkki committed Dec 22, 2016
1 parent e2d15ca commit b5ffc98
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 41 deletions.
57 changes: 28 additions & 29 deletions demo/styling.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,27 +44,27 @@ <h3>Material Design</h3>

--vaadin-grid-cell: {
padding: 0;
}
};

--vaadin-grid-header-cell: {
height: 64px;
color: rgba(0, 0, 0, var(--dark-secondary-opacity));
font-size: 12px;
}
};

--vaadin-grid-body-cell: {
height: 48px;
color: rgba(0, 0, 0, var(--dark-primary-opacity));
font-size: 13px;
}
};

--vaadin-grid-body-row-hover-cell: {
background-color: var(--paper-grey-200);
}
};

--vaadin-grid-body-row-selected-cell: {
background-color: var(--paper-grey-100);
}
};

}

Expand All @@ -88,7 +88,6 @@ <h3>Material Design</h3>
}

vaadin-grid#material vaadin-grid-sorter {

--vaadin-grid-sorter-arrow: {
display: none !important;
};
Expand Down Expand Up @@ -195,43 +194,43 @@ <h3>Valo</h3>
height: 38px;
border-right: 1px solid #d4d4d4;
box-sizing: border-box;
}
};

--vaadin-grid-header-cell: {
border-bottom: 1px solid #d4d4d4;
background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
}
};

--vaadin-grid-footer-cell: {
background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
}
};

--vaadin-grid-cell-last-frozen: {
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}
};

--vaadin-grid-body-row-active-cell: {
background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
color: #c8dbed;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
border-right-color: #1d69b4;
}
};

--vaadin-grid-body-row-odd-cell: {
background-color: #f5f5f5;
}
};

--vaadin-grid-loading-spinner: {
display: none;
}
};

--vaadin-grid-body-cell: {
transition: opacity 0.2s;
}
};

--vaadin-grid-loading-body-cell: {
opacity: 0.2;
}
};

}

Expand All @@ -243,11 +242,11 @@ <h3>Valo</h3>
padding: 0;
border: 6px solid transparent;
border-bottom-color: #000;
}
};

--vaadin-grid-sorter-order: {
display: none;
}
};
}

vaadin-grid#valo-grid vaadin-grid-filter {
Expand Down Expand Up @@ -278,7 +277,7 @@ <h3>Valo</h3>
}
}

vaadin-grid#valo-grid:before {
vaadin-grid#valo-grid::before {
content: "";
width: 100%;
position: absolute;
Expand All @@ -291,7 +290,7 @@ <h3>Valo</h3>
transition: opacity 0.2s;
}

vaadin-grid#valo-grid[loading]:before {
vaadin-grid#valo-grid[loading]::before {
opacity: 1;
animation: loading-expand 1s linear;
}
Expand Down Expand Up @@ -402,11 +401,11 @@ <h3>Transparent Header</h3>

--vaadin-grid-cell: {
padding: 0 13px;
}
};

--vaadin-grid-body-cell: {
height: 65px;
}
};

--vaadin-grid-header-cell: {
background: rgba(235, 238, 246, 0.9);
Expand All @@ -418,25 +417,25 @@ <h3>Transparent Header</h3>
background-size: 1px 100%;
background-position: 100% 0%;
background-repeat: no-repeat;
}
};

--vaadin-grid-body-row-selected-cell: {
background-color: rgb(131, 183, 236);
color: #fff;
border-bottom-color: rgb(108, 160, 218);
}
};

--vaadin-grid-body-row-odd-cell: {
background-color: rgb(251, 252, 254);
}
};

--vaadin-grid-body-row-hover-cell: {
background-color: rgb(235, 238, 246);
}
};

--vaadin-grid-body-row-details-cell: {
text-align: center;
}
};

}

Expand Down Expand Up @@ -548,16 +547,16 @@ <h3>Rounded Rows</h3>

--vaadin-grid-cell: {
background: rgb(80, 91, 102);
}
};

--vaadin-grid-body-cell: {
padding: 0 0 10px;
}
};

--vaadin-grid-header-cell: {
text-transform: uppercase;
padding: 16px;
}
};

}

Expand Down
4 changes: 2 additions & 2 deletions docs/vaadin-grid-styling.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ This section explains how to customize the [vaadinelement]#vaadin-grid#'s appear
See the link:https://cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/demo/styling.html[live demos] for more thorough examples on how the grid can be modified to comply link:https://material.io/guidelines/components/data-tables.html[Material Design] specification, how to define data rows with rounded borders and more.

[[vaadin-grid.styling.mixins]]
== Theming With Style Mixins
== Styling With Style Mixins

The vaadin-grid bundles a set of pre-defined style mixins intended for easy styling of the grid's cells in various different states and contexts.

Expand Down Expand Up @@ -104,7 +104,7 @@ image::img/vaadin-grid-styling-sorter.png[width="450"]


[[vaadin-grid.styling.templates]]
== Custom Theming With Column Templates
== Custom Styling With Column Templates

In addition to the style mixins, column templates provide a handy means for making specific style adjustments to [vaadinelement]#vaadin-grid# cells.
Since the cell content doesn't get hidden inside the [vaadinelement]#vaadin-grid#'s shadow root, it can be targeted with standard CSS selectors.
Expand Down
2 changes: 0 additions & 2 deletions test/sorting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,14 +185,12 @@
});

it('should not sort the items if sorters is empty', function() {
debugger;
sorterFirst.direction = null;
sorterLast.direction = null;
grid.items = buildDataSet(1000);
var bodyRows = getRows(grid.$.scroller.$.items);
var cells = getRowCells(bodyRows[0]);
expect(cells[0].item).to.equal(grid.items[0]);
debugger;
});

});
Expand Down
4 changes: 2 additions & 2 deletions vaadin-grid-active-item-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@

_activeItemChanged: function() {
if (this.$.scroller._physicalItems) {
this.$.scroller._physicalItems.forEach(function(row) {
this.$.scroller._physicalItems.forEach(function(row) {
this._updateItem(row, row.item);
}.bind(this));
}
}
};
</script>
</script>
7 changes: 5 additions & 2 deletions vaadin-grid-data-source-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
<template>
<style>
:host(:not([has-data])) tbody tr::after {
visibility: hidden;
/* A placeholder for empty rows.
Content must include (any) text so it derives any possible style
rules affecting text height. */
content: "-";
visibility: hidden;
width: 0;
padding: 8px 0;
}
Expand Down Expand Up @@ -50,7 +53,7 @@
animation: vaadin-grid-spin-360 400ms linear infinite;
}

:host([loading]):before {
:host([loading])::before {
content: "";
position: absolute;
top: 0;
Expand Down
6 changes: 3 additions & 3 deletions vaadin-grid-sort-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}

:host(:not([direction])) #order,
:host(:not([direction])) #indicators:before {
:host(:not([direction])) #indicators::before {
opacity: 0.2;
}

Expand All @@ -46,14 +46,14 @@
@apply(--vaadin-grid-sorter-order);
}

#indicators:before {
#indicators::before {
content: "▲";
display: block;
padding: 0 8px;
@apply(--vaadin-grid-sorter-arrow);
}

:host([direction=desc]) #indicators:before {
:host([direction=desc]) #indicators::before {
transform: rotateZ(180deg);
}
</style>
Expand Down
7 changes: 6 additions & 1 deletion vaadin-grid-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,12 @@
<tfoot id="footer" is="vaadin-grid-table-footer" column-tree="[[columnTree]]"></tfoot>
</table>

<vaadin-grid-table-outer-scroller id="outerscroller" scroll-target="[[scrollTarget]]" overflow-hidden$="[[_hideOuterScroller(scrollbarWidth, safari)]]" ios$="[[ios]]" scrolling$="[[scrolling]]">
<vaadin-grid-table-outer-scroller
id="outerscroller"
scroll-target="[[scrollTarget]]"
overflow-hidden$="[[_hideOuterScroller(scrollbarWidth, safari)]]"
ios$="[[ios]]"
scrolling$="[[scrolling]]">
<div id="outersizer" is="vaadin-grid-sizer" top="[[_estScrollHeight]]" column-tree="[[columnTree]]"></div>
</vaadin-grid-table-outer-scroller>

Expand Down

0 comments on commit b5ffc98

Please sign in to comment.