Updated header card placeholders

This commit is contained in:
Peter Zimon 2021-12-16 16:11:19 +01:00
parent dcb5d2ad0a
commit b6da19df65
2 changed files with 32 additions and 19 deletions

View File

@ -2085,10 +2085,16 @@ button.emoji-picker__category-button.active {
background-position: center center; background-position: center center;
} }
/* 4em 5em 6em*/
.kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card h2 { .kg-header-card h2 {
font-size: 5em; font-size: 5em;
font-weight: 700; font-weight: 700;
line-height: 1.1em; line-height: 1.1em;
}
.kg-header-card h2 {
margin: 0; margin: 0;
} }
@ -2096,32 +2102,40 @@ button.emoji-picker__category-button.active {
font-weight: 800; font-weight: 800;
} }
.kg-header-card.kg-size-small .kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-small h2 { .kg-header-card.kg-size-small h2 {
font-size: 4em; font-size: 4em;
} }
.kg-header-card.kg-size-large .kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-large h2 { .kg-header-card.kg-size-large h2 {
font-size: 6em; font-size: 6em;
} }
.kg-header-card-subheader .__mobiledoc-editor.__has-no-content:after,
.kg-header-card h3 { .kg-header-card h3 {
font-size: 1.5em; font-size: 1.5em;
font-weight: 500; font-weight: 500;
line-height: 1.4em; line-height: 1.4em;
margin: 0.35em 0 0 !important; margin: 0.35em 0 0 !important;
min-width: unset;
max-width: 40em; max-width: 40em;
}
.kg-header-card h3 {
opacity: 0.85; opacity: 0.85;
min-width: unset;
} }
.kg-header-card h3 strong { .kg-header-card h3 strong {
font-weight: 600; font-weight: 600;
} }
.kg-header-card.kg-size-small .kg-header-card-subheader .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-small h3 { .kg-header-card.kg-size-small h3 {
font-size: 1.25em; font-size: 1.25em;
} }
.kg-header-card.kg-size-large .kg-header-card-subheader .__mobiledoc-editor.__has-no-content:after,
.kg-header-card.kg-size-large h3 { .kg-header-card.kg-size-large h3 {
font-size: 1.75em; font-size: 1.75em;
line-height: 1.35em; line-height: 1.35em;
@ -2200,6 +2214,21 @@ button.emoji-picker__category-button.active {
z-index: 999; z-index: 999;
} }
.kg-header-card-header .koenig-basic-html-input__editor.__has-no-content {
font-weight: 700;
}
.kg-header-card-subheader,
.kg-header-card-subheader .koenig-basic-html-input__editor {
display: flex;
flex-direction: column;
align-items: center;
}
.kg-header-card-subheader .koenig-basic-html-input__editor-wrappper {
width: 100%;
}
/* Upload cards: audio and file /* Upload cards: audio and file
/* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */
.kg-upload-container { .kg-upload-container {
@ -3095,20 +3124,4 @@ button.emoji-picker__category-button.active {
top: 0; top: 0;
left: 0; left: 0;
color: var(--midlightgrey); color: var(--midlightgrey);
}
.kg-header-card-header .__mobiledoc-editor.__has-no-content:after {
top: 36px;
font-size: 4em;
}
.kg-header-card-subheader .__mobiledoc-editor.__has-no-content:after {
top: 10px;
font-size: 1.4em;
}
.kg-header-card-subheader {
display: flex;
flex-direction: column;
align-items: center;
} }

View File

@ -24,7 +24,7 @@
<div class="kg-header-card kg-size-{{@payload.size}} kg-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}"> <div class="kg-header-card kg-size-{{@payload.size}} kg-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
<KoenigBasicHtmlInput <KoenigBasicHtmlInput
@html={{@payload.header}} @html={{@payload.header}}
@placeholder="Header" @placeholder="Enter heading text"
@class="w-100 fw4 bn bg-transparent kg-header-card-header" @class="w-100 fw4 bn bg-transparent kg-header-card-header"
@name="header" @name="header"
@defaultTag="h2" @defaultTag="h2"
@ -33,7 +33,7 @@
/> />
<KoenigBasicHtmlInput <KoenigBasicHtmlInput
@html={{@payload.subheader}} @html={{@payload.subheader}}
@placeholder="Subheader" @placeholder="Enter subheading text"
@class="w-100 fw4 bg-transparent kg-header-card-subheader" @class="w-100 fw4 bg-transparent kg-header-card-subheader"
@name="subheader" @name="subheader"
@defaultTag="h3" @defaultTag="h3"