@vaadin/login 25.0.0-alpha8 → 25.0.0-beta1

package/theme/lumo/vaadin-login-overlay-styles.js

@@ -1,185 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const loginOverlayWrapper = css`
-  :host {
-    inset: 0;
-  }
-
-  [part='backdrop'] {
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-  }
-
-  [part='overlay'] {
-    background: none;
-    border-radius: 0;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-  }
-
-  [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='title'] {
-    font-size: var(--lumo-font-size-xxxl);
-    font-weight: 600;
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='description'] {
-    line-height: var(--lumo-line-height-s);
-    color: var(--lumo-tint-70pct);
-    margin: 0.5em 0 0;
-  }
-
-  [part='content'] {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-  }
-
-  [part='card'] {
-    width: calc(var(--lumo-size-m) * 10);
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    border-radius: var(--lumo-border-radius-l);
-    box-shadow: var(--lumo-box-shadow-s);
-    margin: var(--lumo-space-s);
-    height: auto;
-  }
-
-  /* Small screen */
-  @media only screen and (max-width: 500px) {
-    [part='overlay'],
-    [part='content'] {
-      height: 100%;
-    }
-
-    [part='content'] {
-      min-height: 100%;
-      background: var(--lumo-base-color);
-      align-items: flex-start;
-    }
-
-    [part='card'],
-    [part='overlay'] {
-      width: 100%;
-      border-radius: 0;
-      box-shadow: none;
-      margin: 0;
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='brand'] {
-      padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
-    }
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    [part='card'] {
-      flex-direction: row;
-      align-items: stretch;
-      max-width: calc(var(--lumo-size-m) * 16);
-      width: 100%;
-    }
-
-    [part='brand'],
-    [part='form'] {
-      flex: auto;
-      flex-basis: 0;
-      box-sizing: border-box;
-    }
-
-    [part='brand'] {
-      justify-content: flex-start;
-    }
-
-    [part='form'] {
-      padding: var(--lumo-space-l);
-      overflow: auto;
-    }
-  }
-
-  /* Landscape really small screen */
-  @media only screen and (max-height: 500px) and (min-width: 600px) and (orientation: landscape),
-    only screen and (max-width: 600px) and (min-width: 600px) and (orientation: landscape) {
-    [part='content'] {
-      height: 100vh;
-    }
-
-    [part='card'] {
-      margin: 0;
-      width: 100%;
-      max-width: none;
-      height: 100%;
-      flex: auto;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    [part='form'] {
-      height: 100%;
-      overflow: auto;
-    }
-  }
-
-  /* Handle iPhone X notch */
-  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
-    [part='card'] {
-      padding-right: env(safe-area-inset-right);
-      padding-left: env(safe-area-inset-left);
-    }
-
-    [part='brand'] {
-      margin-left: calc(env(safe-area-inset-left) * -1);
-      padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='card'] {
-      padding-left: env(safe-area-inset-right);
-      padding-right: env(safe-area-inset-left);
-    }
-
-    :host([dir='rtl']) [part='brand'] {
-      margin-right: calc(env(safe-area-inset-left) * -1);
-      padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
-    }
-  }
-`;
-
-registerStyles('vaadin-login-overlay-wrapper', [overlay, loginOverlayWrapper], {
-  moduleId: 'lumo-login-overlay-wrapper',
-});
-
-const loginFormWrapper = css`
-  :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%;
-      flex: 1;
-      padding: 2px;
-    }
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', [loginFormWrapper], {
-  moduleId: 'lumo-login-overlay',
-});

package/theme/lumo/vaadin-login-overlay.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import './vaadin-login-form-wrapper-styles.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';

package/theme/lumo/vaadin-login-overlay.js

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import './vaadin-login-form-wrapper-styles.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';