From 7ad5e3b3b0967119257d21be60b39bd9273f75e8 Mon Sep 17 00:00:00 2001
From: Diego Cardoso <diegopc86@gmail.com>
Date: Fri, 14 Dec 2018 11:53:21 -0200
Subject: [PATCH] Extract title/description to vaadin-login-overlay (#48)

- Make vaadin-login-overlay-element extend vaadin-overlay template
- Move title/description to vaadin-login-overlay
- Remove props from mixin
- Pass through to vloe props set on vaadin-login-overlay
- Move styles to vaadin-login-overlary-element
- Move tests related to title/description

Fix #45
---
 demo/element-basic-demos.html               |  14 +--
 demo/i18n-demos.html                        |  15 ++-
 src/vaadin-login-mixin.html                 |  16 ----
 src/vaadin-login-overlay-element.html       | 100 ++++++++++++++++++++
 src/vaadin-login-overlay.html               |  67 ++++++-------
 src/vaadin-login.html                       |  81 ++++------------
 test/login-overlay-test.html                |  36 +++++--
 test/login-test.html                        |  59 +-----------
 theme/lumo/vaadin-login-overlay-styles.html |  86 +++++++++++++----
 theme/lumo/vaadin-login-styles.html         |  17 +---
 10 files changed, 277 insertions(+), 214 deletions(-)
 create mode 100644 src/vaadin-login-overlay-element.html

diff --git a/demo/element-basic-demos.html b/demo/element-basic-demos.html
index 4a676a8..4f88c60 100644
--- a/demo/element-basic-demos.html
+++ b/demo/element-basic-demos.html
@@ -63,11 +63,11 @@ <h3>Login opened in full screen</h3>
         </vaadin-dialog>
         <script>
           window.addDemoReadyListener('#login-overlay', function(document) {
-            const button = document.querySelector('vaadin-button');
-            const vaadinLoginOverlay = document.querySelector('vaadin-login-overlay');
-            const feedbackDialog = document.querySelector('#feedbackDialog');
+            var button = document.querySelector('vaadin-button');
+            var vaadinLoginOverlay = document.querySelector('vaadin-login-overlay');
+            var feedbackDialog = document.querySelector('#feedbackDialog');
 
-            const i18n = Object.assign(
+            var i18n = Object.assign(
               {},
               vaadinLoginOverlay.i18n,
               {additionalInformation: 'For this demo, use admin/admin to a successful login.'}
@@ -79,9 +79,11 @@ <h3>Login opened in full screen</h3>
               vaadinLoginOverlay.opened = true;
             });
 
-            vaadinLoginOverlay.addEventListener('login', (e) => {
+            vaadinLoginOverlay.addEventListener('login', function(e) {
               feedbackDialog.opened = true;
-              const {username, password} = e.detail;
+              var detail = e.detail,
+                username = detail.username,
+                password = detail.password;
 
               setTimeout(function() {
                 feedbackDialog.opened = false;
diff --git a/demo/i18n-demos.html b/demo/i18n-demos.html
index ce16a72..0cb424e 100644
--- a/demo/i18n-demos.html
+++ b/demo/i18n-demos.html
@@ -11,7 +11,20 @@ <h3>Internationalization</h3>
     <p>Set the <code>i18n</code> object to localize the component</p>
     <vaadin-demo-snippet id="login-demo-internationalisation">
       <template preserve-content>
-        <vaadin-login></vaadin-login>
+        <style include="lumo-typography lumo-color">
+          </style>
+        </custom-style>
+        <style>
+          main {
+            display: flex;
+            justify-content: center;
+            background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+            padding: var(--lumo-space-m);
+          }
+        </style>
+        <main>
+          <vaadin-login></vaadin-login>
+        </main>
         <script>
           window.addDemoReadyListener('#login-demo-internationalisation', function(document) {
             const login = document.querySelector('vaadin-login');
diff --git a/src/vaadin-login-mixin.html b/src/vaadin-login-mixin.html
index af2292f..fd97acb 100644
--- a/src/vaadin-login-mixin.html
+++ b/src/vaadin-login-mixin.html
@@ -116,22 +116,6 @@
             };
           },
           notify: true
-        },
-        /**
-         * Defines the application title
-         */
-        title: {
-          type: String,
-          value: 'App name',
-          notify: true
-        },
-        /**
-         * Defines the application description
-         */
-        description: {
-          type: String,
-          value: 'Application description',
-          notify: true
         }
       };
     }
diff --git a/src/vaadin-login-overlay-element.html b/src/vaadin-login-overlay-element.html
new file mode 100644
index 0000000..afd9bbf
--- /dev/null
+++ b/src/vaadin-login-overlay-element.html
@@ -0,0 +1,100 @@
+<!--
+@license
+Vaadin Login
+Copyright (C) 2018 Vaadin Ltd
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html">
+
+<dom-module id="vaadin-login-overlay-element-template">
+  <template>
+    <style>
+      [part="overlay"] {
+        outline: none;
+      }
+
+      [part="card"] {
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      [part="brand"] {
+        box-sizing: border-box;
+        overflow: hidden;
+        flex-grow: 1;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      [part="brand"] h1 {
+        color: inherit;
+        margin: 0;
+      }
+    </style>
+    <section part="card">
+      <div part="brand">
+        <h1>[[title]]</h1>
+        <p>[[description]]</p>
+      </div>
+      <div part="form">
+        <slot></slot>
+      </div>
+    </section>
+  </template>
+    <script>
+      (function() {
+        let memoizedTemplate;
+
+        /**
+         * The overlay element
+         *
+         * @memberof Vaadin
+         * @private
+        */
+        class LoginOverlayElement extends Vaadin.OverlayElement {
+          static get is() {
+            return 'vaadin-login-overlay-element';
+          }
+
+          static get properties() {
+            return {
+              title: {
+                type: String
+              },
+              description: {
+                type: String
+              }
+            };
+          }
+
+          static get template() {
+            if (!memoizedTemplate) {
+              // Clone the superclass template
+              memoizedTemplate = super.template.cloneNode(true);
+
+              // Retrieve the elements from component's template
+              const thisTemplate = Polymer.DomModule.import(this.is + '-template', 'template');
+              const card = thisTemplate.content.querySelector('[part=card]');
+              const styles = thisTemplate.content.querySelector('style');
+
+              // Append elements to cloned template
+              const content = memoizedTemplate.content.querySelector('#content');
+              content.replaceChild(card, content.children[0]);
+              content.appendChild(styles);
+            }
+
+            return memoizedTemplate;
+          }
+        }
+
+        customElements.define(LoginOverlayElement.is, LoginOverlayElement);
+      })();
+    </script>
+  </dom-module>
\ No newline at end of file
diff --git a/src/vaadin-login-overlay.html b/src/vaadin-login-overlay.html
index 102fb9f..efd11f5 100644
--- a/src/vaadin-login-overlay.html
+++ b/src/vaadin-login-overlay.html
@@ -8,25 +8,16 @@
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
-<link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html">
 
 <link rel="import" href="vaadin-login.html">
 <link rel="import" href="vaadin-login-mixin.html">
+<link rel="import" href="vaadin-login-overlay-element.html">
 
-<dom-module id="vaadin-login-overlay-styles" theme-for="vaadin-login-overlay-element">
-  <template>
-    <style>
-      [part="overlay"] {
-        outline: none;
-      }
-    </style>
-  </template>
-</dom-module>
 
 <dom-module id="vaadin-login-overlay">
   <template>
-    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap with-backdrop>
-      <vaadin-login
+    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap with-backdrop title="[[title]]" description="[[description]]">
+    <vaadin-login
         theme="with-overlay"
         id="login"
         action="{{action}}"
@@ -34,8 +25,6 @@
         error="{{error}}"
         no-forgot-password="{{noForgotPassword}}"
         i18n="{{i18n}}"
-        title="{{title}}"
-        description="{{description}}"
         on-login="_handleEvent"
         on-forgot-password="_handleEvent">
       </vaadin-login>
@@ -43,22 +32,6 @@
   </template>
   <script>
     (function() {
-
-      /**
-       * The overlay element
-       *
-       * @memberof Vaadin
-       * @private
-      */
-      class LoginOverlayElement extends Vaadin.OverlayElement {
-        static get is() {
-          return 'vaadin-login-overlay-element';
-        }
-      }
-
-      customElements.define(LoginOverlayElement.is, LoginOverlayElement);
-
-
       /**
        * `<vaadin-login-overlay>` is a Web Component.
         *
@@ -79,15 +52,35 @@
 
         static get properties() {
           return {
+            /**
+             * Defines the application description
+             */
+            description: {
+              type: String,
+              value: 'Application description',
+              notify: true
+            },
             opened: {
               type: Boolean,
               value: false,
-              observer: '_onOpenedChange',
-              notify: true
+              observer: '_onOpenedChange'
+            },
+            /**
+             * Defines the application title
+             */
+            title: {
+              type: String,
+              value: 'App name'
             }
           };
         }
 
+        static get observers() {
+          return [
+            '__i18nChanged(i18n.header.*)'
+          ];
+        }
+
         ready() {
           super.ready();
 
@@ -109,6 +102,16 @@
           this.$.overlay.opened = false;
         }
 
+
+        __i18nChanged(i18n) {
+          const header = i18n.base;
+          if (!header) {
+            return;
+          }
+          this.title = header.title;
+          this.description = header.description;
+        }
+
         _preventClosingLogin(e) {
           e.preventDefault();
         }
diff --git a/src/vaadin-login.html b/src/vaadin-login.html
index f0c4acb..6b14af1 100644
--- a/src/vaadin-login.html
+++ b/src/vaadin-login.html
@@ -28,31 +28,8 @@
         display: none !important;
       }
 
-      [part="card"] {
-        max-width: 100%;
-        box-sizing: border-box;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      [part="brand"] {
-        box-sizing: border-box;
-        overflow: hidden;
-        flex-grow: 1;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-      }
-
-      [part="brand"] h1 {
-        color: inherit;
-        margin: 0;
-      }
-
       [part="form"] {
-        flex: none;
+        flex: 1;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
@@ -72,32 +49,25 @@
         position: relative;
       }
     </style>
-      <section part="card">
-        <div part="brand">
-          <h1>[[title]]</h1>
-          <p>[[description]]</p>
+      <section part="form">
+        <h2>[[i18n.form.title]]</h2>
+        <div part="error-message" hidden$="[[!error]]">
+          <h5>[[i18n.errorMessage.title]]</h5>
+          <p>[[i18n.errorMessage.message]]</p>
         </div>
+        <iron-form id="loginForm" allow-redirect>
+          <form method="POST" action$="[[action]]">
+            <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required on-keydown="_handleInputKeydown"></vaadin-text-field>
+            <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required on-keydown="_handleInputKeydown"></vaadin-password-field>
 
-        <div part="form">
-          <h2>[[i18n.form.title]]</h2>
-          <div part="error-message" hidden$="[[!error]]">
-            <h5>[[i18n.errorMessage.title]]</h5>
-            <p>[[i18n.errorMessage.message]]</p>
-          </div>
-          <iron-form id="loginForm" allow-redirect>
-            <form method="POST" action$="[[action]]">
-              <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required on-keydown="_handleInputKeydown"></vaadin-text-field>
-              <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required on-keydown="_handleInputKeydown"></vaadin-password-field>
-
-              <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
-            </form>
-          </iron-form>
-
-          <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
-
-          <div part="footer">
-            <p>[[i18n.additionalInformation]]</p>
-          </div>
+            <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
+          </form>
+        </iron-form>
+
+        <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
+
+        <div part="footer">
+          <p>[[i18n.additionalInformation]]</p>
         </div>
       </section>
   </template>
@@ -126,21 +96,6 @@ <h5>[[i18n.errorMessage.title]]</h5>
           return '1.0.0-alpha3';
         }
 
-        static get observers() {
-          return [
-            '__i18nChanged(i18n.header.*)'
-          ];
-        }
-
-        __i18nChanged(i18n) {
-          const header = i18n.base;
-          if (!header) {
-            return;
-          }
-          this.title = header.title;
-          this.description = header.description;
-        }
-
         submit() {
           if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
             return;
diff --git a/test/login-overlay-test.html b/test/login-overlay-test.html
index 642a9f9..aa7bf13 100644
--- a/test/login-overlay-test.html
+++ b/test/login-overlay-test.html
@@ -24,7 +24,7 @@
 
   <test-fixture id="set-title">
     <template>
-      <vaadin-login-overlay title="New title" description="New description"></vaadin-login-overlay>
+      <vaadin-login-overlay title="New title" description="New description" opened></vaadin-login-overlay>
     </template>
   </test-fixture>
 
@@ -121,21 +121,43 @@
         const {type} = loginEventSpy.args[0][0];
         expect(type).to.be.equal('login');
       });
+    });
 
-      it('should set title and description from attributes and pass them to vaadin-login', () => {
-        const loginOverlay = fixture('set-title');
-        loginOverlay.opened = true;
-        const login = document.querySelectorAll('vaadin-login')[0];
+    describe('Title and description test', function() {
+      var login, headerElement, descriptionElement;
 
-        const headerElement = login.shadowRoot.querySelector('[part="brand"] h1');
-        const descriptionElement = login.shadowRoot.querySelector('[part="brand"] p');
+      beforeEach(function() {
+        login = fixture('set-title');
+        headerElement = login.$.overlay.shadowRoot.querySelector('[part="brand"] h1');
+        descriptionElement = login.$.overlay.shadowRoot.querySelector('[part="brand"] p');
+      });
 
+      it('should display title and description set via attributes or properties', function() {
         expect(login.title).to.be.equal('New title');
         expect(login.description).to.be.equal('New description');
 
         expect(headerElement.textContent).to.be.equal(login.title);
         expect(descriptionElement.textContent).to.be.equal(login.description);
       });
+
+      it('should update title and description when property updated', function() {
+        login.title = 'The newest title';
+        login.description = 'The newest description';
+
+        expect(headerElement.textContent).to.be.equal(login.title);
+        expect(descriptionElement.textContent).to.be.equal(login.description);
+      });
+
+      it('should update title and description when i18n.header updated', function() {
+        const i18n = Object.assign({}, login.i18n, {header: {title: 'The newest title', description: 'The newest description'}});
+        login.i18n = i18n;
+
+        expect(headerElement.textContent).to.be.equal('The newest title');
+        expect(descriptionElement.textContent).to.be.equal('The newest description');
+
+        expect(login.title).to.be.equal(login.i18n.header.title);
+        expect(login.description).to.be.equal(login.i18n.header.description);
+      });
     });
   </script>
 </body>
diff --git a/test/login-test.html b/test/login-test.html
index e3efd21..bbf316f 100644
--- a/test/login-test.html
+++ b/test/login-test.html
@@ -6,6 +6,7 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../vaadin-login.html">
+  <link rel="import" href="../vaadin-login-overlay.html">
   <link rel="import" href="../../iron-test-helpers/mock-interactions.html">
 </head>
 
@@ -28,12 +29,6 @@
     </template>
   </test-fixture>
 
-  <test-fixture id="set-title">
-    <template>
-      <vaadin-login title="New title" description="New description"></vaadin-login>
-    </template>
-  </test-fixture>
-
   <script>
     describe('Login test', () => {
       var login;
@@ -66,9 +61,6 @@
       });
 
       it('should display default strings', () => {
-        const titleElement = login.shadowRoot.querySelector('[part="brand"] h1');
-        const descriptionElement = login.shadowRoot.querySelector('[part="brand"] p');
-
         const formTitleElement = login.shadowRoot.querySelector('[part="form"] h2');
         const errorTitleElement = login.shadowRoot.querySelector('[part="error-message"] h5');
         const errorMessageElement = login.shadowRoot.querySelector('[part="error-message"] p');
@@ -80,9 +72,6 @@
 
         const footerElement = login.shadowRoot.querySelector('[part="footer"] p');
 
-        expect(titleElement.textContent).to.be.equal(login.title);
-        expect(descriptionElement.textContent).to.be.equal(login.description);
-
         expect(formTitleElement.textContent).to.be.equal(login.i18n.form.title);
         expect(errorTitleElement.textContent).to.be.equal(login.i18n.errorMessage.title);
         expect(errorMessageElement.textContent).to.be.equal(login.i18n.errorMessage.message);
@@ -109,14 +98,13 @@
       });
 
       it('should be able to internationalize via `i18n` property', () => {
-        const headerElement = login.shadowRoot.querySelector('[part="brand"] h1');
-        expect(headerElement.textContent).to.be.equal(login.title);
+        const additionalInformation = login.shadowRoot.querySelector('[part="footer"] p');
+        expect(additionalInformation.textContent).to.be.equal(login.i18n.additionalInformation);
         expect(login.$.forgotPasswordButton.textContent).to.be.equal(login.i18n.form.forgotPassword);
 
-        const i18n = Object.assign({}, login.i18n, {header: {title: 'Nome do aplicativo'}, form: {forgotPassword: 'Esqueci a senha'}});
+        const i18n = Object.assign({}, login.i18n, {additionalInformation: 'Mais informações', form: {forgotPassword: 'Esqueci a senha'}});
         login.i18n = i18n;
-        expect(headerElement.textContent).to.be.equal(login.i18n.header.title);
-        expect(login.title).to.be.equal(login.i18n.header.title);
+        expect(additionalInformation.textContent).to.be.equal(login.i18n.additionalInformation);
         expect(login.$.forgotPasswordButton.textContent).to.be.equal(login.i18n.form.forgotPassword);
       });
 
@@ -314,42 +302,5 @@
         expect(errorPart.offsetHeight).to.equal(0);
       });
     });
-
-    describe('Title and description test', function() {
-      var login, headerElement, descriptionElement;
-
-      beforeEach(function() {
-        login = fixture('set-title');
-        headerElement = login.shadowRoot.querySelector('[part="brand"] h1');
-        descriptionElement = login.shadowRoot.querySelector('[part="brand"] p');
-      });
-
-      it('should display title and description set via attributes or properties', function() {
-        expect(login.title).to.be.equal('New title');
-        expect(login.description).to.be.equal('New description');
-
-        expect(headerElement.textContent).to.be.equal(login.title);
-        expect(descriptionElement.textContent).to.be.equal(login.description);
-      });
-
-      it('should update title and description when property updated', function() {
-        login.title = 'The newest title';
-        login.description = 'The newest description';
-
-        expect(headerElement.textContent).to.be.equal(login.title);
-        expect(descriptionElement.textContent).to.be.equal(login.description);
-      });
-
-      it('should update title and description when i18n.header updated', function() {
-        const i18n = Object.assign({}, login.i18n, {header: {title: 'The newest title', description: 'The newest description'}});
-        login.i18n = i18n;
-
-        expect(headerElement.textContent).to.be.equal('The newest title');
-        expect(descriptionElement.textContent).to.be.equal('The newest description');
-
-        expect(login.title).to.be.equal(login.i18n.header.title);
-        expect(login.description).to.be.equal(login.i18n.header.description);
-      });
-    });
   </script>
 </body>
diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html
index e91c658..2fdb670 100644
--- a/theme/lumo/vaadin-login-overlay-styles.html
+++ b/theme/lumo/vaadin-login-overlay-styles.html
@@ -7,7 +7,7 @@
 
 <dom-module id="vaadin-login-overlay-element-lumo-styles" theme-for="vaadin-login-overlay-element">
   <template>
-    <style>
+    <style include="lumo-color lumo-typography">
       :host {
         top: 0;
         right: 0;
@@ -27,6 +27,8 @@
         background: none;
         border-radius: 0;
         box-shadow: none;
+        width: 100%;
+        height: 100%;
       }
 
       @media only screen
@@ -36,21 +38,33 @@
           height: 100%;
         }
       }
-    </style>
-  </template>
-</dom-module>
 
-<dom-module id="lumo-login-overlay" theme-for="vaadin-login">
-  <template>
-    <style include="lumo-color lumo-typography">
-      :host([theme~="with-overlay"]) {
+      [part="card"] {
+        width: calc(var(--lumo-size-m) * 10);
+        background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+      }
+
+      [part="brand"] {
+        padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
+        background-color: var(--lumo-primary-color);
+        color: var(--lumo-primary-contrast-color);
+        min-height: calc(var(--lumo-size-m) * 5);
+      }
+
+      [part="brand"] p {
+        line-height: var(--lumo-line-height-s);
+        color: var(--lumo-tint-70pct);
+        margin-bottom: 0;
+      }
+
+      [part="content"] {
         min-height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
       }
 
-      :host([theme~="with-overlay"]) [part="card"] {
+      [part="card"] {
         border-radius: var(--lumo-border-radius);
         box-shadow: var(--lumo-box-shadow-s);
         margin: var(--lumo-space-s);
@@ -59,13 +73,14 @@
       /* Small screen */
       @media only screen
       and (max-width: 500px) {
-        :host([theme~="with-overlay"]) {
+        [part="content"] {
           min-height: 100%;
           background: var(--lumo-base-color);
           align-items: flex-start;
         }
 
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"],
+        [part="overlay"] {
           width: 100%;
           border-radius: 0;
           box-shadow: none;
@@ -78,23 +93,28 @@
       and (max-height: 600px)
       and (min-width: 600px)
       and (orientation: landscape) {
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           flex-direction: row;
           align-items: stretch;
           max-width: calc(var(--lumo-size-m) * 16);
           width: 100%;
         }
 
-        :host([theme~="with-overlay"]) [part="brand"],
-        :host([theme~="with-overlay"]) [part="form"] {
+        [part="brand"],
+        [part="form"] {
           flex: auto;
           flex-basis: 0;
           box-sizing: border-box;
         }
 
-        :host([theme~="with-overlay"]) [part="brand"] {
+        [part="brand"] {
           justify-content: flex-start;
         }
+
+        [part="form"] {
+          padding: var(--lumo-space-l);
+          overflow: auto;
+        }
       }
 
       /* Landscape really small screen */
@@ -106,11 +126,11 @@
       and (max-width: 600px)
       and (min-width: 600px)
       and (orientation: landscape) {
-        :host([theme~="with-overlay"]) {
+        [part="content"] {
           height: 100vh;
         }
 
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           margin: 0;
           width: 100%;
           max-width: none;
@@ -120,7 +140,7 @@
           box-shadow: none;
         }
 
-        :host([theme~="with-overlay"]) [part="form"] {
+        [part="form"] {
           height: 100%;
           overflow: auto;
           -webkit-overflow-scrolling: touch;
@@ -132,12 +152,12 @@
       and (device-width: 375px)
       and (device-height: 812px)
       and (-webkit-device-pixel-ratio: 3) {
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           padding: 0 constant(safe-area-inset-bottom);
           padding: 0 env(safe-area-inset-bottom);
         }
 
-        :host([theme~="with-overlay"]) [part="brand"] {
+        [part="brand"] {
           margin-left: calc(constant(safe-area-inset-bottom) * -1);
           margin-left: calc(env(safe-area-inset-bottom) * -1);
           padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-bottom));
@@ -147,3 +167,29 @@
     </style>
   </template>
 </dom-module>
+
+<dom-module id="lumo-login-overlay" theme-for="vaadin-login">
+  <template>
+    <style include="lumo-color lumo-typography">
+      :host([theme~="with-overlay"]) {
+        min-height: 100%;
+        display: flex;
+        justify-content: center;
+        max-width: 100%;
+      }
+
+      /* Landscape small screen */
+      @media only screen
+      and (max-height: 600px)
+      and (min-width: 600px)
+      and (orientation: landscape) {
+        :host([theme~="with-overlay"]) [part="form"] {
+          height: 100%;
+          -webkit-overflow-scrolling: touch;
+          flex: 1;
+          padding: 2px;
+        }
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/theme/lumo/vaadin-login-styles.html b/theme/lumo/vaadin-login-styles.html
index 469b47e..8ef6896 100644
--- a/theme/lumo/vaadin-login-styles.html
+++ b/theme/lumo/vaadin-login-styles.html
@@ -5,24 +5,11 @@
 <dom-module id="lumo-login" theme-for="vaadin-login">
   <template>
     <style include="lumo-color lumo-typography">
-      [part="card"] {
-        width: calc(var(--lumo-size-m) * 10);
+      :host {
+        max-width: calc(var(--lumo-size-m) * 10);
         background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
       }
 
-      [part="brand"] {
-        padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
-        background-color: var(--lumo-primary-color);
-        color: var(--lumo-primary-contrast-color);
-        min-height: calc(var(--lumo-size-m) * 5);
-      }
-
-      [part="brand"] p {
-        line-height: var(--lumo-line-height-s);
-        color: var(--lumo-tint-70pct);
-        margin-bottom: 0;
-      }
-
       [part="form"] {
         padding: var(--lumo-space-l);
       }