diff --git a/package-lock.json b/package-lock.json
index 45ec6aa..154ea65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1165,12 +1165,12 @@
}
},
"@designestate/dees-wcctools": {
- "version": "1.0.52",
- "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-wcctools/-/dees-wcctools-1.0.52.tgz",
- "integrity": "sha512-Kg5skpyYLlX5gLqMyS/ITJMY5Cjwawxhu5TxE8LAw2QkJDZFM3MqfDmB4M+gNFNIXyQ734NxsupsG4j8HDw0Fw==",
+ "version": "1.0.54",
+ "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-wcctools/-/dees-wcctools-1.0.54.tgz",
+ "integrity": "sha512-rqA1rh1Es1HHR4w1EhfZfSMSuRSCLcA9n3cz2p9V5ZfB6yhpSuUAzZWoEii3i3cMWO2s3uthHIxFAMwRlpcPqw==",
"requires": {
"@designestate/dees-domtools": "^1.0.81",
- "@designestate/dees-element": "^1.0.9",
+ "@designestate/dees-element": "^1.0.10",
"@gitzone/tsrun": "^1.2.12",
"@pushrocks/smartdelay": "^2.0.10",
"@pushrocks/smartexpress": "^3.0.98",
diff --git a/package.json b/package.json
index 0434f38..d4771ba 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"dependencies": {
"@designestate/dees-domtools": "^1.0.84",
"@designestate/dees-element": "^1.0.10",
- "@designestate/dees-wcctools": "^1.0.52",
+ "@designestate/dees-wcctools": "^1.0.54",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts
index 6033ab8..fb41d8d 100644
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@@ -43,7 +43,7 @@ export class DeesButton extends DeesElement {
display: block;
text-align: center;
background: ${this.goBright ? '#eee' : '#333'};
- border-top: 1px solid #444;
+ border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
border-radius: 2px;
line-height: 40px;
padding: 0px 10px;
diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts
index 8f73b05..1ac71f0 100644
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@@ -8,11 +8,13 @@ import { DeesInputRadio } from './dees-input-radio';
@customElement('dees-form')
export class DeesForm extends LitElement {
public static demo = () => html`
-
-
-
+
+
+
+
Submit
- `;
+
+ `;
public name: string = 'myform';
diff --git a/ts_web/elements/dees-input-checkbox.ts b/ts_web/elements/dees-input-checkbox.ts
index badbcbb..3612ee4 100644
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -1,8 +1,8 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends LitElement {
+export class DeesInputCheckbox extends DeesElement {
public static demo = () => html``;
@property()
@@ -33,11 +33,11 @@ export class DeesInputCheckbox extends LitElement {
display: grid;
grid-template-columns: 25px auto;
padding: 5px 0px;
- color: #ccc;
+ color: ${this.goBright ? '#333' : '#ccc'};
}
.maincontainer:hover {
- color: #fff;
+ ${this.goBright ? '#000' : '#ccc'};
}
.label {
@@ -55,12 +55,12 @@ export class DeesInputCheckbox extends LitElement {
.checkbox {
transition: all 0.1s;
box-sizing: border-box;
- border: 1px solid #999;
+ border: 1px solid ${this.goBright ? '#CCC' : '#999'};
border-radius: 2px;
height: 24px;
width: 24px;
display: inline-block;
- background: #222;
+ background: ${this.goBright ? '#fafafa' : '#222'};
}
.checkbox.selected {
diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts
index 2f0dbb4..d105e4e 100644
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@@ -4,6 +4,8 @@ import * as domtools from '@designestate/dees-domtools';
@customElement('dees-input-dropdown')
export class DeesInputDropdown extends LitElement {
+ public static demo = () => html``
+
@property()
public label: string = 'Label';
diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts
index 10a9038..0a7d037 100644
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@@ -1,8 +1,8 @@
-import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends LitElement {
+export class DeesInputQuantitySelector extends DeesElement {
public static demo = () => html``;
@property()
@@ -32,8 +32,13 @@ export class DeesInputQuantitySelector extends LitElement {
line-height: 40px;
padding: 0px;
min-width: 100px;
- color: #CCC;
- border: 1px solid #CCC;
+ color: ${this.goBright ? '#666' : '#CCC'};
+ border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+ }
+
+ .mainContainer:hover {
+ color: ${this.goBright ? '#333' : '#fff'};
+ border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
}
.minus {
@@ -57,10 +62,7 @@ export class DeesInputQuantitySelector extends LitElement {
text-align: center;
}
- .mainContainer:hover {
- color: #fff;
- border: 1px solid #fff;
- }
+
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index 5ac5547..0cafd45 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -1,7 +1,7 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
@customElement('dees-input-text')
-export class DeesInputText extends LitElement {
+export class DeesInputText extends DeesElement {
public static demo = () => html``;
@property()
@@ -28,7 +28,7 @@ export class DeesInputText extends LitElement {
}
.maincontainer {
- color: #ccc;
+ color: ${this.goBright ? '#333' : '#ccc'};
}
.label {
@@ -38,10 +38,11 @@ export class DeesInputText extends LitElement {
input {
margin-top: 5px;
- background: #222;
- border: none;
- border-top: 1px solid #444;
- border-bottom: 1px solid #333;
+ background: ${this.goBright ? '#fafafa' : '#222'};
+ border-top: ${this.goBright ? '1px solid #CCC' : '1px solid #444'};
+ border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
+ border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+ border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
padding-left:10px;
padding-right: 10px;
border-radius: 2px;