[New] added styling .g-table-dl to use as a <dl>:

<table class="g-table-dl">
  <tr>
    <td>label 1</td>
    <td>value 1</td>
  </tr>
  <tr>
    <td>label 2</td>
    <td>value 2</td>
  </tr>
</table>

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-styles",
   "description": "Strolch WebComponent Styles",
-  "version": "0.3.1",
+  "version": "0.4.8",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
@@ -17,6 +17,7 @@
   "homepage": "https://github.com/strolch-li/strolch-wc-styles",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.11.3"
+    "polymer": "Polymer/polymer#^1.12.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.3.1"
   }
 }

strolch-wc-app-style.html

@@ -0,0 +1,285 @@
+<link rel="import" href="../polymer/polymer.html">
+
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<link rel="import" href="./strolch-wc-styles.html">
+
+<dom-module id="strolch-wc-app-style">
+    <template>
+        <style is="strolch-wc-app-style" include="strolch-wc-styles">
+            :root {
+
+                /* dimensions of this app */
+                --app-width: 100%;
+                --app-max-width: 2000px;
+                --app-min-width: inherit;
+
+                /* dimensions of the header */
+                --app-header-height: 64px;
+                --app-drawer-height: calc(100vh - var(--app-header-height));
+                --app-notification-height: 48px;
+
+                /* dimensions of the pages */
+                --app-pages-content-padding: 24px;
+
+                /* additional dimensions */
+                --app-font-size: 14px;
+                --column-min-width: 80px;
+                --column-side-padding: 12px;
+
+                /* primary colors */
+                --primary-color: #9965F4;
+                --secondary-color: #616161;
+                --app-primary-color: #9965F4;
+                --app-secondary-color: #616161;
+                --primary-text-color: #212121;
+                --secondary-text-color: #737373;
+
+                /* highlight colors */
+                --app-light-highlight-fg-color: black;
+                --app-light-highlight-bg-color: #c5cae9;
+                --app-regular-highlight-fg-color: white;
+                --app-regular-highlight-bg-color: #5c6bc0;
+                --app-dark-highlight-fg-color: white;
+                --app-dark-highlight-bg-color: #1a237e;
+
+                /* warning colors */
+                --app-light-warning-fg-color: white;
+                --app-light-warning-bg-color: #ef9a9a; /*var(--paper-red-200);*/
+                --app-regular-warning-fg-color: white;
+                --app-regular-warning-bg-color: #d32f2f; /*var(--paper-red-700);*/
+                --app-dark-warning-fg-color: white;
+                --app-dark-warning-bg-color: #b71c1c; /*var(--paper-red-700);*/
+
+                /* warning colors */
+                --app-light-warning2-fg-color: white;
+                --app-light-warning2-bg-color: #ffecb3; /*var(--paper-amber-100);*/
+                --app-regular-warning2-fg-color: white;
+                --app-regular-warning2-bg-color: #ffe082; /*var(--paper-amber-200);*/
+                --app-dark-warning2-fg-color: white;
+                --app-dark-warning2-bg-color: #ffa000; /*var(--paper-amber-700); */
+
+                /* decent colors */
+                --app-light-decent-fg-color: black;
+                --app-light-decent-bg-color: #f5f5f5; /*var(--paper-grey-100);*/
+                --app-regular-decent-fg-color: black;
+                --app-regular-decent-bg-color: #eeeeee; /*var(--paper-grey-200); */
+                --app-dark-decent-fg-color: black;
+                --app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
+
+                --disabled-fg-color: #9e9e9e;
+                --disabled-bg-color: #eeeeee;
+                --selected-bg-color: #e7e7e7;
+                --row-even-bg-color: #f1eeee;
+                --paper-card-bg-color: #ffffff;
+                --paper-material-bg-color: #ffffff;
+            }
+
+            app-toolbar {
+                background-color: var(--primary-color);
+                color: var(--app-regular-highlight-fg-color);
+            }
+
+            app-toolbar > paper-button {
+                font-size: var(--app-font-size, 14px);
+                color: var(--primary-text-color);
+            }
+
+            app-drawer {
+                z-index: 10;
+            }
+
+            paper-tabs {
+                --paper-tabs-selection-bar-color: var(--app-regular-highlight-bg-color);
+            }
+
+            paper-menu {
+                --paper-menu-selected-item: {
+                    background-color: var(--app-light-highlight-bg-color);
+                };
+                --paper-menu-focused-item: {
+                    background-color: var(--app-regular-highlight-bg-color);
+                };
+            }
+
+            paper-menu paper-item {
+                cursor: pointer;
+            }
+
+            paper-menu paper-item:hover {
+                background-color: var(--app-regular-highlight-bg-color);
+            }
+
+            .center {
+                text-align: center;
+            }
+
+            paper-material {
+                background-color: var(--paper-material-bg-color);
+                padding: 10px;
+                margin: 10px;
+            }
+
+            paper-card {
+                width: 100%;
+                background-color: var(--paper-card-bg-color);
+            }
+
+            paper-card .header {
+                margin: 10px;
+            }
+
+            paper-toggle-button {
+                margin-left: 10px;
+                margin-right: 5px;
+                --paper-toggle-button-checked-button-color: var(--app-dark-highlight-bg-color);
+            }
+
+            paper-radio-button {
+                --paper-radio-button-checked-color: var(--app-dark-highlight-bg-color);
+            }
+
+            paper-button {
+                background-color: var(--app-dark-highlight-fg-color);
+            }
+
+            paper-button[disabled] {
+                background-color: var(--disabled-bg-color);
+                color: var(--disabled-fg-color);
+            }
+
+            paper-checkbox {
+                padding: 8px;
+            }
+
+            paper-input.readonly {
+                --paper-input-container: {
+                    padding: 4px 0;
+                };
+                --paper-input-container-underline: {
+                    display: none;
+                };
+                --paper-input-container-underline-focus: {
+                    display: none;
+                };
+                --paper-input-container-underline-disabled: {
+                    display: none;
+                };
+            }
+
+            paper-toast paper-button {
+                background-color: var(--app-dark-highlight-fg-color);
+                color: var(--app-light-highlight-fg-color);
+            }
+
+            .content {
+                padding: var(--app-pages-content-padding);
+                padding-top: 10px;
+            }
+
+            .actions {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .actions paper-button {
+                margin: 0;
+            }
+
+            .actions paper-button:not(:first-child) {
+                margin-left: 5px;
+            }
+
+            .actions.padding {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+
+            .actions div {
+                display: flex;
+                flex-direction: row;
+            }
+
+            .actions-right {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+            }
+
+            .actions-center {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+            }
+
+            .actions p {
+                padding: 0;
+                margin: 0;
+                line-height: 40px;
+            }
+
+            .actions-left paper-button,
+            .actions-left paper-icon-button,
+            .actions-left paper-toggle-button {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+
+            .actions-right paper-button,
+            .actions-left paper-icon-button,
+            .actions-right paper-toggle-button {
+                margin-right: 0;
+                margin-left: 10px;
+            }
+
+            .actions-right *:last-child {
+                margin-right: 10px;
+            }
+
+            .actions-left *:first-child {
+                margin-left: 10px;
+            }
+
+
+            .table {
+                min-width: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .table-row {
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: row;
+                margin-top: -1px;
+            }
+
+            .data:nth-child(even) {
+                background-color: var(--row-even-bg-color);
+            }
+
+            .table-heading {
+                font-weight: bold;
+            }
+
+            .table-heading,
+            .table-cell {
+                display: flex;
+                padding: 0 var(--column-side-padding);
+                overflow: hidden;
+                align-items: center;
+                flex-basis: var(--column-min-width);
+                flex-grow: 1;
+                flex-shrink: 0;
+                justify-content: flex-start;
+                min-height: 48px;
+            }
+
+            .selected {
+                background-color: var(--selected-bg-color);
+            }
+        </style>
+    </template>
+</dom-module>

strolch-wc-styles.html

@@ -1,8 +1,10 @@
 <link rel="import" href="../polymer/polymer.html">
 
+<link rel="import" href="../paper-styles/paper-styles.html">
+
 <dom-module id="strolch-wc-styles">
     <template>
-        <style>
+        <style is="custom-style">
 
             .g-card {
                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -12,6 +14,14 @@
                 border-radius: 2px;
             }
 
+            /*
+             * table as a data definition list. Works simpler than a dl
+             */
+            .g-table-dl td:first-child {
+                text-align: right;
+                padding-right: 5px;
+            }
+
             /*
              * data definition list
              */