Compare commits
8 Commits
Author | SHA1 | Date |
---|---|---|
Robert von Burg | 1859d1ab15 | |
Robert von Burg | 35d3c93426 | |
Robert von Burg | 760d028742 | |
Robert von Burg | 1fbf06afdb | |
Robert von Burg | 6f8154ee09 | |
Robert von Burg | 2b88bcaf07 | |
Robert von Burg | ea53c88fd9 | |
Robert von Burg | b27b5f02d7 |
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "strolch-wc-styles",
|
||||
"description": "Strolch WebComponent Styles",
|
||||
"version": "0.4.0",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
|
||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||
|
||||
<link rel="import" href="./strolch-wc-styles.html">
|
||||
|
||||
|
@ -22,51 +23,91 @@
|
|||
--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: var(--paper-indigo-100);
|
||||
--app-light-highlight-bg-color: #c5cae9;
|
||||
--app-regular-highlight-fg-color: white;
|
||||
--app-regular-highlight-bg-color: var(--paper-indigo-200);
|
||||
--app-regular-highlight-bg-color: #5c6bc0;
|
||||
--app-dark-highlight-fg-color: white;
|
||||
--app-dark-highlight-bg-color: var(--paper-indigo-400);
|
||||
--app-dark-highlight-bg-color: #1a237e;
|
||||
|
||||
/* warning colors */
|
||||
--app-light-warning-fg-color: white;
|
||||
--app-light-warning-bg-color: var(--paper-red-200);
|
||||
--app-light-warning-bg-color: #ef9a9a; /*var(--paper-red-200);*/
|
||||
--app-regular-warning-fg-color: white;
|
||||
--app-regular-warning-bg-color: var(--paper-red-700);
|
||||
--app-regular-warning-bg-color: #d32f2f; /*var(--paper-red-700);*/
|
||||
--app-dark-warning-fg-color: white;
|
||||
--app-dark-warning-bg-color: var(--paper-red-700);
|
||||
--app-dark-warning-bg-color: #b71c1c; /*var(--paper-red-700);*/
|
||||
|
||||
/* warning colors */
|
||||
--app-light-warning2-fg-color: white;
|
||||
--app-light-warning2-bg-color: var(--paper-amber-100);
|
||||
--app-light-warning2-bg-color: #ffecb3; /*var(--paper-amber-100);*/
|
||||
--app-regular-warning2-fg-color: white;
|
||||
--app-regular-warning2-bg-color: var(--paper-amber-200);
|
||||
--app-regular-warning2-bg-color: #ffe082; /*var(--paper-amber-200);*/
|
||||
--app-dark-warning2-fg-color: white;
|
||||
--app-dark-warning2-bg-color: var(--paper-amber-700);
|
||||
--app-dark-warning2-bg-color: #ffa000; /*var(--paper-amber-700); */
|
||||
|
||||
/* decent colors */
|
||||
--app-light-decent-fg-color: black;
|
||||
--app-light-decent-bg-color: var(--paper-grey-100);
|
||||
--app-light-decent-bg-color: #f5f5f5; /*var(--paper-grey-100);*/
|
||||
--app-regular-decent-fg-color: black;
|
||||
--app-regular-decent-bg-color: var(--paper-grey-200);
|
||||
--app-regular-decent-bg-color: #eeeeee; /*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);
|
||||
--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;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--app-primary-color);
|
||||
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 {
|
||||
|
@ -74,14 +115,14 @@
|
|||
}
|
||||
|
||||
paper-material {
|
||||
background: white;
|
||||
background-color: var(--paper-material-bg-color);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
paper-card {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background-color: var(--paper-card-bg-color);
|
||||
}
|
||||
|
||||
paper-card .header {
|
||||
|
@ -91,18 +132,20 @@
|
|||
paper-toggle-button {
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
--paper-toggle-button-checked-button-color: var(--app-primary-color);
|
||||
--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: var(--app-dark-highlight-fg-color);
|
||||
color: var(--app-light-highlight-fg-color);
|
||||
height: 35px;
|
||||
background-color: var(--app-dark-highlight-fg-color);
|
||||
}
|
||||
|
||||
paper-button[disabled] {
|
||||
background: var(--paper-grey-200);
|
||||
color: var(--paper-grey-500);
|
||||
background-color: var(--disabled-bg-color);
|
||||
color: var(--disabled-fg-color);
|
||||
}
|
||||
|
||||
paper-checkbox {
|
||||
|
@ -124,8 +167,9 @@
|
|||
};
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
paper-toast paper-button {
|
||||
background-color: var(--app-dark-highlight-fg-color);
|
||||
color: var(--app-light-highlight-fg-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
@ -213,7 +257,7 @@
|
|||
}
|
||||
|
||||
.data:nth-child(even) {
|
||||
background: #f1eeee;
|
||||
background-color: var(--row-even-bg-color);
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
|
@ -234,9 +278,8 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
background: #e7e7e7;
|
||||
background-color: var(--selected-bg-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
|
@ -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
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue