fix(demo): fix styles in addons demo

Fix style issues related to layouting when displayed in AddonsDemo

Author: mlopezFC

src/test/java/com/flowingcode/vaadin/addons/extendedlogin/ExtendedLoginDemoView.java

@@ -22,15 +22,13 @@
 import com.flowingcode.vaadin.addons.DemoLayout;
 import com.flowingcode.vaadin.addons.GithubLink;
 import com.flowingcode.vaadin.addons.demo.TabbedDemo;
-import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.router.ParentLayout;
 import com.vaadin.flow.router.Route;
 
 @SuppressWarnings("serial")
 @ParentLayout(DemoLayout.class)
 @Route("extended-login")
 @GithubLink("https://github.com/FlowingCode/ExtendedLoginAddon")
-@CssImport("styles/shared-styles.css")
 public class ExtendedLoginDemoView extends TabbedDemo {
 
   public ExtendedLoginDemoView() {

src/test/java/com/flowingcode/vaadin/addons/extendedlogin/ExtendedLoginOverlayDemo.java

@@ -20,6 +20,7 @@
 package com.flowingcode.vaadin.addons.extendedlogin;
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.IFrame;
 import com.vaadin.flow.router.PageTitle;
@@ -30,10 +31,11 @@
 @PageTitle("Extended Login Overlay Demo")
 @SuppressWarnings("serial")
 @Route(value = "extended-login/login-overlay-demo", layout = ExtendedLoginDemoView.class)
+@CssImport("./styles/extended-login-styles.css")
 public class ExtendedLoginOverlayDemo extends Div {
 
   public ExtendedLoginOverlayDemo() {
-
+    setClassName("wrap-iframe");
     IFrame iframe = new IFrame("/extended-login/login-overlay");
     iframe.setSizeFull();
     iframe.getElement().setAttribute("frameBorder", "0");

src/test/java/com/flowingcode/vaadin/addons/extendedlogin/LoginLayoutDemo.java

@@ -20,6 +20,7 @@
 package com.flowingcode.vaadin.addons.extendedlogin;
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.IFrame;
 import com.vaadin.flow.router.PageTitle;
@@ -29,10 +30,13 @@
 @PageTitle("Login Layout Demo")
 @SuppressWarnings("serial")
 @Route(value = "extended-login/login-layout-demo", layout = ExtendedLoginDemoView.class)
+@CssImport("./styles/extended-login-styles.css")
 public class LoginLayoutDemo extends Div {
 
   public LoginLayoutDemo() {
+    setClassName("wrap-iframe");
     IFrame iframe = new IFrame("/extended-login/login-layout");
+    iframe.setClassName("frame");
     iframe.setSizeFull();
     iframe.getElement().setAttribute("frameBorder", "0");
     add(iframe);

…TA-INF/frontend/styles/shared-styles.css …rontend/styles/extended-login-styles.csssrc/test/resources/META-INF/frontend/styles/shared-styles.css renamed to src/test/resources/META-INF/frontend/styles/extended-login-styles.css src/test/resources/META-INF/frontend/styles/shared-styles.css renamed to src/test/resources/META-INF/frontend/styles/extended-login-styles.css

@@ -20,4 +20,21 @@
 /*Demo styles*/
 vaadin-login-overlay-wrapper::part(brand) {
   background: black;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
 }
+
+@media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
+	vaadin-login-overlay-wrapper::part(form) {
+		overflow: initial;
+	}
+}
+
+vaadin-login-overlay-wrapper::part(content) {
+  transform: scale(0.75);
+}
+
+.wrap-iframe {
+  overflow: hidden;
+}