[Fix] styling fixes

This commit is contained in:
Robert von Burg 2022-04-28 14:58:58 +02:00
parent b7e83060de
commit bb631ecc12
2 changed files with 19 additions and 6 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "strolch-wc-dialog-button", "name": "strolch-wc-dialog-button",
"description": "Strolch WebComponent Dialog Button", "description": "Strolch WebComponent Dialog Button",
"version": "0.1.4", "version": "0.1.5",
"authors": [ "authors": [
"Robert von Burg" "Robert von Burg"
], ],
@ -19,10 +19,10 @@
"homepage": "https://github.com/strolch-li/strolch-wc-dialog-button", "homepage": "https://github.com/strolch-li/strolch-wc-dialog-button",
"ignore": [], "ignore": [],
"dependencies": { "dependencies": {
"polymer": "Polymer/polymer#^1.11.3", "polymer": "Polymer/polymer#^1.12.0",
"strolchjs": "strolch-li/strolchjs#^0.5.1", "strolchjs": "strolch-li/strolchjs#^0.5.1",
"strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.0", "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.2",
"strolch-wc-util-behavior": "strolch-li/strolch-wc-util-behavior#^0.3.0", "strolch-wc-util-behavior": "strolch-li/strolch-wc-util-behavior#^0.3.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6", "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6",

View File

@ -4,21 +4,31 @@
<link rel="import" href="../paper-button/paper-button.html"> <link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog/paper-dialog.html"> <link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="../strolch-wc-util-behavior/strolch-wc-util-behavior.html"> <link rel="import" href="../strolch-wc-util-behavior/strolch-wc-util-behavior.html">
<dom-module id="strolch-wc-dialog-button"> <dom-module id="strolch-wc-dialog-button">
<template> <template>
<!-- Style --> <!-- Style -->
<style is="custom-style" include="strolch-wc-styles"> <style is="custom-style">
:host { :host {
pointer-events: all !important; pointer-events: all !important;
} }
.title {
color: var(--paper-dialog-button-color);
}
.aligned-dialog { .aligned-dialog {
margin: 0; margin: 0;
min-width: 300px; min-width: 300px;
} }
.dialog-headline {
padding: 0 8px;
margin: 8px 0;
@apply(--layout-horizontal);
@apply(--layout-center);
}
</style> </style>
<!-- Content --> <!-- Content -->
@ -36,7 +46,10 @@
on-iron-overlay-closed="onClose"> on-iron-overlay-closed="onClose">
<template is="dom-if" if="[[dialogHeadline]]"> <template is="dom-if" if="[[dialogHeadline]]">
<h2>[[dialogHeadline]]</h2> <div class="dialog-headline">
<paper-icon-button icon="close" on-tap="toggleDialog"></paper-icon-button>
<h2 class="title">[[dialogHeadline]]</h2>
</div>
</template> </template>
<p>[[dialogContent]]</p> <p>[[dialogContent]]</p>