fix(core): update

ts_web/elements/dees-button.ts

@@ -64,6 +64,7 @@ export class DeesButton extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     css`
+
       :host {
         display: block;
         box-sizing: border-box;
@@ -73,14 +74,15 @@ export class DeesButton extends DeesElement {
       }
 
       .button {
+        transition: all 0.1s ease;
         position: relative;
-        transition: all 0.2s ease;
         font-size: 14px;
         display: flex;
         justify-content: center;
         align-items: center;
         background: ${cssManager.bdTheme('#eee', '#333')};
         box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
+        border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
         border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
         border-radius: 2px;
         line-height: 40px;
@@ -94,7 +96,7 @@ export class DeesButton extends DeesElement {
       .button:hover {
         cursor: pointer;
         background: #039be5;
-        border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
+        border: 1px solid #039be5;
         border-top: 1px solid #039be5;
         color: #ffffff;
       }

ts_web/elements/dees-stepper.ts

@@ -0,0 +1,61 @@
+import { DeesElement, customElement, html, css, unsafeCSS, cssManager, property } from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-stepper')
+export class DeesStepper extends DeesElement {
+  public static demo = () => html`
+    <dees-stepper></dees-stepper>
+  `;
+
+  constructor() {
+    super();
+  }
+
+  @property({
+    type: Array
+  })
+  public steps = [{
+    title: 'Who are you?'
+  }, {
+    title: 'Verification:'
+  }]
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .stepperContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #111;
+        overflow: hidden;
+      }
+
+      .step {
+        max-width: 600px;
+        min-height: 300px;
+        border-radius: 10px;
+        background: #222;
+        margin: auto;
+        margin-bottom: 20px;
+
+      }
+    `
+  ]
+
+  public render () {
+    return html`
+      <div class="stepperContainer">
+        ${this.steps.map(stepArg => html`
+          <div class="step"></div>
+        `)}
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-updater.ts

@@ -31,16 +31,46 @@ export class DeesUpdater extends LitElement {
       ${domtools.elementBasic.styles}
       <style>
         .modalContainer {
-          background: #333333;
+          will-change: transform;
+          position: relative;
+          background: #222;
           margin: auto;
-          height: 200px;
-          width: 800px;
-          margin-top: 80px;
-          border-radius: 10px;
+          max-width: 800px;
+          border-radius: 3px;
+          border-top: 1px solid #333;
+        }
+
+        .headingContainer {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 40px 40px;
+        }
+
+        h1 {
+          margin: none;
+          font-size: 20px;
+          color: #fff;
+          margin-left: 20px;
+          font-weight: normal;
+        }
+
+        .buttonContainer {
+          display: grid;
+          grid-template-columns: 50% 50%;
         }
       </style>
       <dees-windowlayer>
-        <div class="modalContainer"></div>
+        <div class="modalContainer">
+          <div class="headingContainer">
+            <dees-spinner .size=${60}></dees-spinner>
+            <h1>Updating the application...</h1>
+          </div>
+          <div class="buttonContainer">
+            <dees-button>More info</dees-button>
+            <dees-button>Changelog</dees-button>
+          </div>
+        </div>
       </dees-windowlayer>>
     `;
   }

ts_web/elements/dees-windowlayer.ts

@@ -22,18 +22,23 @@ export class DeesWindowLayer extends LitElement {
       ${domtools.elementBasic.styles}
       <style>
         .windowOverlay {
+          will-change: transform;
           transition: all 1s;
           position: fixed;
           top: 0px;
           left: 0px;
           height: 100vh;
           width: 100vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           background: rgba(0, 0, 0, 0.0);
           backdrop-filter: blur(0px);
         }
+        
         .visible {
           background: rgba(0, 0, 0, 0.2);
-          backdrop-filter: blur(3px);
+          backdrop-filter: brightness(0.3);
         }
       </style>
       <div class="windowOverlay">

ts_web/elements/index.ts

@@ -9,6 +9,7 @@ export * from './dees-input-quantityselector';
 export * from './dees-input-radio';
 export * from './dees-input-text';
 export * from './dees-spinner';
+export * from './dees-stepper';
 export * from './dees-toast';
 export * from './dees-updater';
 export * from './dees-windowlayer';