[Minor] Styling updates

This commit is contained in:
Robert von Burg 2022-05-05 15:12:31 +02:00
parent d0594a792c
commit e3b8b8b72d
Signed by: eitch
GPG Key ID: 75DB9C85C74331F7
4 changed files with 35 additions and 8 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "strolch-wc-plc", "name": "strolch-wc-plc",
"description": "Strolch PLC WebComponents", "description": "Strolch PLC WebComponents",
"version": "0.3.16", "version": "0.3.17",
"authors": ["Robert von Burg"], "authors": ["Robert von Burg"],
"keywords": [ "keywords": [
"strolch", "strolch",
@ -18,7 +18,7 @@
"ignore": [], "ignore": [],
"dependencies": { "dependencies": {
"strolchjs": "strolch-li/strolchjs#^0.5.1", "strolchjs": "strolch-li/strolchjs#^0.5.1",
"strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.2", "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.4",
"strolch-wc-debounced-input": "strolch-li/strolch-wc-debounced-input#^0.1.2", "strolch-wc-debounced-input": "strolch-li/strolch-wc-debounced-input#^0.1.2",
"strolch-wc-ws-observer": "strolch-li/strolch-wc-ws-observer#^0.2.9", "strolch-wc-ws-observer": "strolch-li/strolch-wc-ws-observer#^0.2.9",
"strolch-wc-localize-behavior": "strolch-li/strolch-wc-localize-behavior#^1.1.14", "strolch-wc-localize-behavior": "strolch-li/strolch-wc-localize-behavior#^1.1.14",

View File

@ -27,6 +27,16 @@
<template> <template>
<style is="custom-style" include="strolch-wc-plc-style"> <style is="custom-style" include="strolch-wc-plc-style">
:host {
display: block;
padding-left: 10px;
padding-right: 10px;
}
paper-card {
margin-bottom: 10px;
}
.label { .label {
min-width: 300px; min-width: 300px;
margin-right: 10px; margin-right: 10px;

View File

@ -31,8 +31,14 @@
<template> <template>
<style is="custom-style" include="strolch-wc-plc-style"> <style is="custom-style" include="strolch-wc-plc-style">
h2 { :host {
margin-bottom: 10px; display: block;
padding-left: 10px;
padding-right: 10px;
}
h2:not(:first-of-type) {
margin-top: 20px;
} }
.actions { .actions {

View File

@ -1,19 +1,22 @@
<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/color.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html"> <link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html">
<dom-module id="strolch-wc-plc-style"> <dom-module id="strolch-wc-plc-style">
<template> <template>
<style is="strolch-wc-plc-style" include="strolch-wc-app-style"> <style is="strolch-wc-plc-style" include="strolch-wc-app-style">
:host { :root {
display: block; --app-primary-color: #9965F4;
--app-secondary-color: #616161;
--primary-text-color: #212121;
--secondary-text-color: #737373;
} }
paper-card { paper-card {
margin-bottom: 10px; display: block;
padding: 10px; padding: 10px;
width: calc(100% - 20px);
} }
paper-icon-button, iron-icon { paper-icon-button, iron-icon {
@ -22,11 +25,19 @@
paper-toggle-button { paper-toggle-button {
height: 35px; height: 35px;
margin-left: 10px;
margin-right: 5px;
--paper-toggle-button-checked-button-color: var(--app-primary-color);
}
paper-radio-button {
--paper-radio-button-checked-color: var(--app-primary-color);
} }
.active-icon { .active-icon {
color: var(--app-primary-color); color: var(--app-primary-color);
} }
.inactive-icon { .inactive-icon {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }