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 {
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 */
.pf-c-form__field-group-header-title-text {
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 { 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 PFBase from "@patternfly/patternfly/patternfly-base.css";
@customElement("ak-expand")
export class Expand extends AKElement {
@ -19,11 +21,15 @@ export class Expand extends AKElement {
textClosed = t`Show more`;
static get styles(): CSSResult[] {
return [PFExpandableSection];
return [PFBase, PFExpandableSection, AKGlobal];
}
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
type="button"
class="pf-c-expandable-section__toggle"
@ -39,7 +45,9 @@ export class Expand extends AKElement {
>${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span
>
</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>`;
}
}