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;
}
/* 4em 5em 6em*/
.kg-header-card-header .__mobiledoc-editor.__has-no-content:after,
.kg-header-card h2 {
font-size: 5em;
font-weight: 700;
line-height: 1.1em;
}
.kg-header-card h2 {
margin: 0;
}
@ -2096,32 +2102,40 @@ button.emoji-picker__category-button.active {
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 {
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 {
font-size: 6em;
}
.kg-header-card-subheader .__mobiledoc-editor.__has-no-content:after,
.kg-header-card h3 {
font-size: 1.5em;
font-weight: 500;
line-height: 1.4em;
margin: 0.35em 0 0 !important;
min-width: unset;
max-width: 40em;
}
.kg-header-card h3 {
opacity: 0.85;
min-width: unset;
}
.kg-header-card h3 strong {
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 {
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 {
font-size: 1.75em;
line-height: 1.35em;
@ -2200,6 +2214,21 @@ button.emoji-picker__category-button.active {
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
/* --------------------------------------------------------------- */
.kg-upload-container {
@ -3096,19 +3125,3 @@ button.emoji-picker__category-button.active {
left: 0;
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}}">
<KoenigBasicHtmlInput
@html={{@payload.header}}
@placeholder="Header"
@placeholder="Enter heading text"
@class="w-100 fw4 bn bg-transparent kg-header-card-header"
@name="header"
@defaultTag="h2"
@ -33,7 +33,7 @@
/>
<KoenigBasicHtmlInput
@html={{@payload.subheader}}
@placeholder="Subheader"
@placeholder="Enter subheading text"
@class="w-100 fw4 bg-transparent kg-header-card-subheader"
@name="subheader"
@defaultTag="h3"