More styling support related to paper-theme

David-Mulder · Dec 19, 2015 · 4c1021b · 4c1021b
1 parent 8fb9bda
commit 4c1021b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/docs/styling.md b/docs/styling.md
@@ -35,6 +35,7 @@ Sometimes you need to style content inside of a cell when using `<template>`'s.
  `--paper-datatable-divider-color` | divider color between rows | `--divider-color`
  `--paper-datatable-row-selection-color` | divider color between rows | `--paper-grey-100`
  `--paper-datatable-row-hover-color` | color of hovered row | `--paper-grey-200`
+ `--paper-datatable-checkbox-color` | checkbox color | `--primary-text-color`
  `--paper-datatable-header-checkbox-color` | checkbox color | `--primary-text-color`
 
 Mixins
@@ -61,7 +62,8 @@ Variables
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-datatable-divider-color` | divider color is used to draw the bottom line | --divider-color
- `--paper-datatable-selection-toolbar-color` | color of selected toolbar, should be 50 of the secondary color | --paper-pink-50
+ `--paper-datatable-selection-toolbar-color` | color of selected toolbar, should be 50 of the secondary color | `--paper-pink-50`
+ `--paper-datatable-selection-toolbar-text-color` | text color of text and icons on selection toolbar | `--accent-color`
  `--paper-datatable-navigation-bar-text-color` | color of text in navigation bar | 
 
 Mixins
@@ -71,3 +73,4 @@ Mixins
  ------|-------------
  `--paper-datatable-card` | applied to the main card
  `--paper-datatable-navigation-bar` | applied to the bottom bar containing the navigation
+ `--paper-datatable-selection-toolbar` | applied to the selection toolbar
diff --git a/paper-datatable-card.html b/paper-datatable-card.html
@@ -27,9 +27,10 @@
 			#selectionToolbar{
 				display: none;
 				background: var(--paper-datatable-selection-toolbar-color, --paper-pink-50);
+				@apply(--paper-datatable-selection-toolbar);
 				padding:0px 12px 0px 24px;
 			}
-			#selectionToolbar .selectionHeader{
+			#selectionToolbar .selectionHeader, #selectionToolbar .toolbar ::content paper-icon-button{
 				color: var(--paper-datatable-selection-toolbar-text-color, --accent-color);
 			}
 			#selectionToolbar[data-visible]{

diff --git a/paper-datatable.html b/paper-datatable.html
@@ -203,12 +203,12 @@
 				width: 100%;
 			}
 			paper-checkbox{
-				--paper-checkbox-unchecked-color: rgba(0,0,0,.54);
+				--paper-checkbox-unchecked-color: var(--paper-datatable-checkbox-color, --primary-text-color);
 				@apply(--paper-datatable-checkbox);
 			}
 			th paper-checkbox{
 				@apply(--paper-datatable-header-checkbox);
-				--paper-checkbox-unchecked-color: var(--paper-datatable-header-checkbox-color, rgba(0,0,0,.54));
+				--paper-checkbox-unchecked-color: var(--paper-datatable-header-checkbox-color, --primary-text-color);
 			}
 			.partialSelectionContainer{
 				width:18px;