web: fix styling for flow stages

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-17 20:00:51 +01:00
parent 14d990df7f
commit a8c1fd1e4e
14 changed files with 41 additions and 15 deletions

View File

@ -1,13 +1,13 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../../authentik.css";
@customElement("ak-sidebar-hamburger") @customElement("ak-sidebar-hamburger")
export class SidebarHamburger extends LitElement { export class SidebarHamburger extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFButton].concat( return [PFBase, PFButton, AKGlobal].concat(
css` css`
:host { :host {
position: absolute; position: absolute;

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -22,7 +24,7 @@ export class AuthenticatorStaticStage extends BaseStage {
challenge?: AuthenticatorStaticChallenge; challenge?: AuthenticatorStaticChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css` return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
/* Static OTP Tokens */ /* Static OTP Tokens */
.ak-otp-tokens { .ak-otp-tokens {
list-style: circle; list-style: circle;

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "webcomponent-qr-code"; import "webcomponent-qr-code";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
@ -24,7 +26,7 @@ export class AuthenticatorTOTPStage extends BaseStage {
challenge?: AuthenticatorTOTPChallenge; challenge?: AuthenticatorTOTPChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage, StageHost } from "../base"; import { BaseStage, StageHost } from "../base";
import "./AuthenticatorValidateStageWebAuthn"; import "./AuthenticatorValidateStageWebAuthn";
import "./AuthenticatorValidateStageCode"; import "./AuthenticatorValidateStageCode";
@ -45,7 +47,7 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css` return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
ul > li:not(:last-child) { ul > li:not(:last-child) {
padding-bottom: 1rem; padding-bottom: 1rem;
} }

View File

@ -5,6 +5,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage"; import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
@ -25,7 +27,7 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
showBackButton = false; showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {

View File

@ -5,6 +5,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils"; import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
@ -29,7 +31,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
showBackButton = false; showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
async authenticate(): Promise<void> { async authenticate(): Promise<void> {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils"; import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@ -31,7 +33,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
registerMessage = ""; registerMessage = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFFormControl, PFForm, PFTitle, PFButton]; return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton, AKGlobal];
} }
async register(): Promise<void> { async register(): Promise<void> {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -21,7 +23,7 @@ export class AutosubmitStage extends BaseStage {
challenge?: AutosubmitChallenge; challenge?: AutosubmitChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
} }
updated(): void { updated(): void {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { SpinnerSize } from "../../../elements/Spinner"; import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
@ -23,7 +25,7 @@ export class CaptchaStage extends BaseStage {
challenge?: CaptchaChallenge; challenge?: CaptchaChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
submitFormAlt(token: string): void { submitFormAlt(token: string): void {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
import "../../FormStatic"; import "../../FormStatic";
@ -29,7 +31,7 @@ export class ConsentStage extends BaseStage {
challenge?: ConsentChallenge; challenge?: ConsentChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -18,7 +20,7 @@ export class EmailStage extends BaseStage {
challenge?: EmailChallenge; challenge?: EmailChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows"; import { Challenge } from "../../../api/Flows";
@ -44,7 +46,7 @@ export class IdentificationStage extends BaseStage {
challenge?: IdentificationChallenge; challenge?: IdentificationChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat( return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(
css` css`
/* login page's icons */ /* login page's icons */
.pf-c-login__main-footer-links-item-link img { .pf-c-login__main-footer-links-item-link img {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -23,7 +25,7 @@ export class PasswordStage extends BaseStage {
challenge?: PasswordChallenge; challenge?: PasswordChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {

View File

@ -6,6 +6,8 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base"; import { BaseStage } from "../base";
import "../../../elements/forms/FormElement"; import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState"; import "../../../elements/EmptyState";
@ -31,7 +33,7 @@ export class PromptStage extends BaseStage {
challenge?: PromptChallenge; challenge?: PromptChallenge;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
} }
renderPromptInner(prompt: Prompt): string { renderPromptInner(prompt: Prompt): string {