habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: move colour styles to css file

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-17 17:50:44 +01:00
parent 16950dbc54
commit 88cf0b2cdc
7 changed files with 40 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/authentik.css
View File

@ -42,6 +42,28 @@ ak-message {
display: block;
}
.pf-m-success {
color: var(--pf-global--success-color--100);
}
.pf-c-button.pf-m-success {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--success-color--100);
}
.pf-m-warning {
color: var(--pf-global--warning-color--100);
}
.pf-c-button.pf-m-warning {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--warning-color--100);
}
.pf-m-danger {
color: var(--pf-global--danger-color--100);
}
.pf-c-button.pf-m-danger {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--danger-color--100);
}
@media (prefers-color-scheme: dark) {
:root {
--ak-dark-foreground: #fafafa;

25
web/src/common/styles.ts
View File

@ -1,25 +0,0 @@
import { css } from "lit-element";
export const ColorStyles = css`
.pf-m-success {
color: var(--pf-global--success-color--100);
}
.pf-c-button.pf-m-success {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--success-color--100);
}
.pf-m-warning {
color: var(--pf-global--warning-color--100);
}
.pf-c-button.pf-m-warning {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--warning-color--100);
}
.pf-m-danger {
color: var(--pf-global--danger-color--100);
}
.pf-c-button.pf-m-danger {
color: var(--pf-c-button--m-primary--Color);
background-color: var(--pf-global--danger-color--100);
}
`;

5
web/src/elements/Spinner.ts
View File

@ -1,7 +1,6 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
export enum SpinnerSize {
Small = "pf-m-sm",
@ -16,7 +15,7 @@ export class Spinner extends LitElement {
size: SpinnerSize = SpinnerSize.Medium;
static get styles(): CSSResult[] {
return [SpinnerStyle];
return [PFSpinner];
}
render(): TemplateResult {

17
web/src/elements/buttons/SpinnerButton.ts
View File

@ -1,13 +1,9 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import { SpinnerSize } from "../Spinner";
import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
import { ColorStyles } from "../../common/styles";
@customElement("ak-spinner-button")
export class SpinnerButton extends LitElement {
@ -19,10 +15,9 @@ export class SpinnerButton extends LitElement {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
SpinnerStyle,
ColorStyles,
PFBase,
PFButton,
PFSpinner,
css`
button {
/* Have to use !important here, as buttons with pf-m-progress have transition already */

14
web/src/elements/buttons/TokenCopyButton.ts
View File

@ -1,12 +1,10 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { CoreApi } from "authentik-api";
import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
import { ColorStyles } from "../../common/styles";
import { DEFAULT_CONFIG } from "../../api/Config";
import AKGlobal from "../../authentik.css";
@customElement("ak-token-copy-button")
export class TokenCopyButton extends LitElement {
@ -18,9 +16,9 @@ export class TokenCopyButton extends LitElement {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
ColorStyles,
PFBase,
PFButton,
AKGlobal,
css`
button {
transition: background-color 0.3s ease 0s;

4
web/src/elements/table/TablePagination.ts
View File

@ -4,7 +4,7 @@ import { gettext } from "django";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
import AKGlobal from "../../authentik.css";
@customElement("ak-table-pagination")
export class TablePagination extends LitElement {
@ -16,7 +16,7 @@ export class TablePagination extends LitElement {
pageChangeHandler: (page: number) => void = (page: number) => {}
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFPagination];
return [PFBase, PFButton, PFPagination, AKGlobal];
}
render(): TemplateResult {

4
web/src/pages/outposts/OutpostHealth.ts
View File

@ -5,7 +5,7 @@ import { OutpostsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../../elements/Spinner";
import { ColorStyles } from "../../common/styles";
import AKGlobal from "../../authentik.css";
@customElement("ak-outpost-health")
export class OutpostHealth extends LitElement {
@ -14,7 +14,7 @@ export class OutpostHealth extends LitElement {
outpostId?: string;
static get styles(): CSSResult[] {
return [PFBase, ColorStyles];
return [PFBase, AKGlobal];
}
render(): TemplateResult {