Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added basic styling to callout-card

Browse source 
Refs https://github.com/TryGhost/Team/issues/1205
This commit is contained in:
Sanne de Vries 2021-11-09 15:09:28 +01:00
parent e6a1f651ed
commit ff39c776b2
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ghost/admin/app/styles/components/koenig.css
View file

@ -1175,6 +1175,18 @@
padding-bottom: 24px;
}
.kg-callout-card {
display: flex;
padding: 16px 24px;
background: var(--whitegrey-l1);
border-radius: var(--border-radius);
}
.kg-callout-emoji {
padding-right: 12px;
line-height: 1.6;
font-size: 2rem;
}
/* Codemirror overrides
/* --------------------------------------------------------------- */

12
ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs
View file

@ -1,5 +1,5 @@
<KoenigCard
@class={{concat (kg-style "container-card") " mih10 miw-100 relative"}}
@class={{concat (kg-style "media-card") " mih10 miw-100 relative"}}
@headerOffset={{@headerOffset}}
@toolbar={{this.toolbar}}
@payload={{@payload}}
@ -21,13 +21,13 @@
>
{{#if @isEditing}}
<div style="display: flex;">
<div style="padding-right: 10px; line-height: 1.6; font-size: 2rem;">{{@payload.calloutEmoji}}</div>
<div class="kg-callout-card">
<div class="kg-callout-emoji">{{@payload.calloutEmoji}}</div>
<KoenigTextReplacementHtmlInput
@html={{@payload.calloutText}}
@placeholder="Callout text..."
@autofocus={{true}}
@class="miw-100 bn bg-transparent"
@class="bn bg-transparent"
@onChange={{action "setCalloutText"}}
@onFocus={{action (mut this.isFocused) true}}
@onBlur={{action (mut this.isFocused) false}}
@ -37,8 +37,8 @@
{{else}}
<div style="display: flex;">
<div style="padding-right: 10px; line-height: 1.6; font-size: 2rem;">{{@payload.calloutEmoji}}</div>
<div class="kg-callout-card">
<div class="kg-callout-emoji">{{@payload.calloutEmoji}}</div>
<div>{{{@payload.calloutText}}}</div>
</div>
<div class="koenig-card-click-overlay"></div>