trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/elements: fix ak-expand not using correct font 

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-02-05 00:58:30 +01:00
parent 66aabcc371
commit b9a2323c51
No known key found for this signature in database
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/common/styles/authentik.css
View File

@ -237,6 +237,9 @@ html > form > input {
.pf-c-expandable-section__toggle-icon { .pf-c-expandable-section__toggle-icon {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);
} }
.pf-c-expandable-section.pf-m-display-lg {
background-color: var(--ak-dark-background-light-ish);
}
/* header for form group */ /* header for form group */
.pf-c-form__field-group-header-title-text { .pf-c-form__field-group-header-title-text {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);

14
web/src/elements/Expand.ts
View File

@ -5,7 +5,9 @@ import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css"; import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@customElement("ak-expand") @customElement("ak-expand")
export class Expand extends AKElement { export class Expand extends AKElement {
@ -19,11 +21,15 @@ export class Expand extends AKElement {
textClosed = t`Show more`; textClosed = t`Show more`;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFExpandableSection]; return [PFBase, PFExpandableSection, AKGlobal];
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-expandable-section ${this.expanded ? "pf-m-expanded" : ""}"> return html`<div
class="pf-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
? "pf-m-expanded"
: ""}"
>
<button <button
type="button" type="button"
class="pf-c-expandable-section__toggle" class="pf-c-expandable-section__toggle"
@ -39,7 +45,9 @@ export class Expand extends AKElement {
>${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span >${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span
> >
</button> </button>
<slot ?hidden=${!this.expanded} class="pf-c-expandable-section__content"></slot> <div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}>
<slot></slot>
</div>
</div>`; </div>`;
} }
} }