From 16c78902cb30256c55b9e6779da1de1c441601a6 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Thu, 21 Apr 2022 11:04:58 +0200
Subject: [PATCH] [New] Added strolch-wc-app-style style

This provides standard styling for creating applications:
- action bar styling
- table styling
- optimizing paper element for applications

See the strolch's mvn archetype template for use
---
 bower.json                |   2 +-
 strolch-wc-app-style.html | 242 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 strolch-wc-app-style.html

diff --git a/bower.json b/bower.json
index 859ae3c..b19f645 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-styles",
   "description": "Strolch WebComponent Styles",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
diff --git a/strolch-wc-app-style.html b/strolch-wc-app-style.html
new file mode 100644
index 0000000..ea4bdd3
--- /dev/null
+++ b/strolch-wc-app-style.html
@@ -0,0 +1,242 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/color.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 */
+                --column-min-width: 80px;
+                --column-side-padding: 12px;
+
+                /* primary colors */
+                --app-primary-color: #9965F4;
+                --app-secondary-color: #616161;
+
+                /* highlight colors */
+                --app-light-highlight-fg-color: black;
+                --app-light-highlight-bg-color: var(--paper-indigo-100);
+                --app-regular-highlight-fg-color: white;
+                --app-regular-highlight-bg-color: var(--paper-indigo-200);
+                --app-dark-highlight-fg-color: white;
+                --app-dark-highlight-bg-color: var(--paper-indigo-400);
+
+                /* warning colors */
+                --app-light-warning-fg-color: white;
+                --app-light-warning-bg-color: var(--paper-red-200);
+                --app-regular-warning-fg-color: white;
+                --app-regular-warning-bg-color: var(--paper-red-700);
+                --app-dark-warning-fg-color: white;
+                --app-dark-warning-bg-color: var(--paper-red-700);
+
+                /* warning colors */
+                --app-light-warning2-fg-color: white;
+                --app-light-warning2-bg-color: var(--paper-amber-100);
+                --app-regular-warning2-fg-color: white;
+                --app-regular-warning2-bg-color: var(--paper-amber-200);
+                --app-dark-warning2-fg-color: white;
+                --app-dark-warning2-bg-color: var(--paper-amber-700);
+
+                /* decent colors */
+                --app-light-decent-fg-color: black;
+                --app-light-decent-bg-color: var(--paper-grey-100);
+                --app-regular-decent-fg-color: black;
+                --app-regular-decent-bg-color: var(--paper-grey-200);
+                --app-dark-decent-fg-color: black;
+                --app-dark-decent-bg-color: var(--paper-grey-300);
+
+                --paper-toolbar-background: var(--app-dark-highlight-bg-color);
+
+            }
+
+            h1, h2, h3, h4, h5, h6 {
+                color: var(--app-primary-color);
+            }
+
+            .center {
+                text-align: center;
+            }
+
+            paper-material {
+                background: white;
+                padding: 10px;
+                margin: 10px;
+            }
+
+            paper-card {
+                width: 100%;
+                background: white;
+            }
+
+            paper-card .header {
+                margin: 10px;
+            }
+
+            paper-toggle-button {
+                margin-left: 10px;
+                margin-right: 5px;
+                --paper-toggle-button-checked-button-color: var(--app-primary-color);
+            }
+
+            paper-button {
+                background: var(--app-dark-highlight-fg-color);
+                color: var(--app-light-highlight-fg-color);
+                height: 35px;
+            }
+
+            paper-button[disabled] {
+                background: var(--paper-grey-200);
+                color: var(--paper-grey-500);
+            }
+
+            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;
+                };
+            }
+
+            h3 {
+                margin-bottom: 0;
+            }
+
+            .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: #f1eeee;
+            }
+
+            .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: #e7e7e7;
+            }
+
+        </style>
+    </template>
+</dom-module>
\ No newline at end of file