Strolch
/
strolch-wc-styles
mirror of https://github.com/strolch-li/strolch-wc-styles.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Minor] Added styling for additional components

This commit is contained in:
Robert von Burg 2022-04-25 16:59:10 +02:00
parent 16c78902cb
commit b27b5f02d7
3 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bower.json
View File

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

50
strolch-wc-app-style.html
View File

@ -1,5 +1,6 @@
<link rel="import" href="../polymer/polymer.html"> <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"> <link rel="import" href="./strolch-wc-styles.html">
@ -31,40 +32,59 @@
/* highlight colors */ /* highlight colors */
--app-light-highlight-fg-color: black; --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-fg-color: white;
--app-regular-highlight-bg-color: var(--paper-indigo-200); --app-regular-highlight-bg-color: #9fa8da;
--app-dark-highlight-fg-color: white; --app-dark-highlight-fg-color: white;
--app-dark-highlight-bg-color: var(--paper-indigo-400); --app-dark-highlight-bg-color: #5c6bc0;
/* warning colors */ /* warning colors */
--app-light-warning-fg-color: white; --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-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-fg-color: white;
--app-dark-warning-bg-color: var(--paper-red-700); --app-dark-warning-bg-color: #b71c1c; /*var(--paper-red-700);*/
/* warning colors */ /* warning colors */
--app-light-warning2-fg-color: white; --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-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-fg-color: white;
--app-dark-warning2-bg-color: var(--paper-amber-700); --app-dark-warning2-bg-color: #ffa000; /*var(--paper-amber-700); */
/* decent colors */ /* decent colors */
--app-light-decent-fg-color: black; --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-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-fg-color: black;
--app-dark-decent-bg-color: var(--paper-grey-300); --app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
--paper-toolbar-background: var(--app-dark-highlight-bg-color); --paper-toolbar-background: var(--app-dark-highlight-bg-color);
--paper-dialog-button-color: var(--app-dark-highlight-bg-color);
} }
app-toolbar {
background-color: var(--app-dark-highlight-bg-color);
color: var(--app-regular-highlight-fg-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:hover {
background-color: var(--app-regular-highlight-bg-color);
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: var(--app-primary-color); color: var(--app-primary-color);
} }
@ -101,8 +121,8 @@
} }
paper-button[disabled] { paper-button[disabled] {
background: var(--paper-grey-200); background: #eeeeee;
color: var(--paper-grey-500); color: #9e9e9e;
} }
paper-checkbox { paper-checkbox {

4
strolch-wc-styles.html
View File

@ -1,8 +1,10 @@
<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<dom-module id="strolch-wc-styles"> <dom-module id="strolch-wc-styles">
<template> <template>
<style> <style is="custom-style">
.g-card { .g-card {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),