[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",
|
||||
"description": "Strolch WebComponent Styles",
|
||||
"version": "0.3.1",
|
||||
"version": "0.4.0",
|
||||
"authors": ["Robert von Burg"],
|
||||
"keywords": [
|
||||
"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