Put style property of Elements below render method (#661)

* Put style property of Elements below render method

* the rule

* reverse this

* move styles

* only warn

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Niels Lyngsø
2023-04-21 14:01:09 +02:00
committed by GitHub
parent 0821ac85f8
commit f5894e26c2
266 changed files with 5265 additions and 4689 deletions

View File

@@ -5,6 +5,24 @@ import loginImg from '/login.jpeg';
@customElement('umb-auth-layout')
export class UmbAuthLayoutElement extends LitElement {
render() {
return html`
<div id="background"></div>
<div id="logo">
<img src="${logoImg}" alt="Umbraco" />
</div>
<div id="container">
<uui-box id="box">
<slot></slot>
</uui-box>
</div>
`;
}
static styles: CSSResultGroup = [
css`
#background {
@@ -49,22 +67,6 @@ export class UmbAuthLayoutElement extends LitElement {
}
`,
];
render() {
return html`
<div id="background"></div>
<div id="logo">
<img src="${logoImg}" alt="Umbraco" />
</div>
<div id="container">
<uui-box id="box">
<slot></slot>
</uui-box>
</div>
`;
}
}
declare global {

View File

@@ -4,6 +4,16 @@ import { customElement } from 'lit/decorators.js';
@customElement('umb-external-login-provider-test')
export class UmbExternalLoginProviderTestElement extends LitElement {
render() {
return html`
<b>Custom External Login Provider</b>
<p>This is an example of a custom external login provider using the external login provider extension point</p>
<uui-button label="My custom login provider" look="primary"></uui-button>
`;
}
static styles = [
UUITextStyles,
css`
@@ -21,14 +31,6 @@ export class UmbExternalLoginProviderTestElement extends LitElement {
}
`,
];
render() {
return html`
<b>Custom External Login Provider</b>
<p>This is an example of a custom external login provider using the external login provider extension point</p>
<uui-button label="My custom login provider" look="primary"></uui-button>
`;
}
}
export default UmbExternalLoginProviderTestElement;

View File

@@ -4,6 +4,26 @@ import { customElement } from 'lit/decorators.js';
@customElement('umb-external-login-provider-test2')
export class UmbExternalLoginProviderTest2Element extends LitElement {
render() {
return html`
<b>Another Custom External Login Provider</b>
<p>This is an example of another custom external login provider</p>
<uui-form-layout-item>
<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
<uui-input
type="email"
id="email"
name="email"
placeholder="Enter your email..."
required
required-message="Email is required"></uui-input>
</uui-form-layout-item>
<uui-button label="Custom login" look="primary"></uui-button>
`;
}
static styles = [
UUITextStyles,
css`
@@ -24,24 +44,6 @@ export class UmbExternalLoginProviderTest2Element extends LitElement {
}
`,
];
render() {
return html`
<b>Another Custom External Login Provider</b>
<p>This is an example of another custom external login provider</p>
<uui-form-layout-item>
<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
<uui-input
type="email"
id="email"
name="email"
placeholder="Enter your email..."
required
required-message="Email is required"></uui-input>
</uui-form-layout-item>
<uui-button label="Custom login" look="primary"></uui-button>
`;
}
}
export default UmbExternalLoginProviderTest2Element;

View File

@@ -7,15 +7,7 @@ import './auth-layout.element';
@customElement('umb-login')
export default class UmbLoginElement extends LitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
#email,
#password {
width: 100%;
}
`,
];
@state()
private _loggingIn = false;
@@ -109,6 +101,16 @@ export default class UmbLoginElement extends LitElement {
</umb-auth-layout>
`;
}
static styles: CSSResultGroup = [
UUITextStyles,
css`
#email,
#password {
width: 100%;
}
`,
];
}
declare global {