[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
This commit is contained in:
parent
db94f2f57d
commit
16c78902cb
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "strolch-wc-styles",
|
"name": "strolch-wc-styles",
|
||||||
"description": "Strolch WebComponent Styles",
|
"description": "Strolch WebComponent Styles",
|
||||||
"version": "0.3.1",
|
"version": "0.4.0",
|
||||||
"authors": ["Robert von Burg"],
|
"authors": ["Robert von Burg"],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"strolch",
|
"strolch",
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue