mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated email CTA card
Refs https://github.com/TryGhost/Team/issues/928 - Added icons for top and bottom border - Updated spacing for hr element when not in edit mode - Got rid of hr element when in edit mode - Got rid of left border for email, html and markdown cards and feature image
This commit is contained in:
Sanne de Vries
parent
bc7f761bd3
commit
6dc901993c
10 changed files with 35 additions and 27 deletions
|
|
@ -446,12 +446,6 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
|
|||
height: 4px;
|
||||
}
|
||||
|
||||
.gh-editor-feature-image {
|
||||
margin-left: -1.2rem;
|
||||
padding-left: 1.2rem;
|
||||
border-left: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-editor-feature-image .image-delete {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -521,12 +515,10 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
|
|||
.gh-editor-feature-image-alttext,
|
||||
.gh-editor-feature-image-caption {
|
||||
width: 100%;
|
||||
margin: 0 0 1.7em -1.2rem;
|
||||
padding: 0 0 0 1.2rem;
|
||||
margin: 0 0 1.7em 0;
|
||||
outline: none;
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
border-left: 1px solid var(--whitegrey);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.65;
|
||||
letter-spacing: .04rem;
|
||||
|
|
@ -977,6 +969,19 @@ figure {
|
|||
|
||||
/* Email-CTA card
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
.kg-email-card .border-top {
|
||||
margin: -1.6rem 0 2.4rem;
|
||||
}
|
||||
|
||||
.kg-email-card .border-bottom {
|
||||
margin: 2.4rem 0 1rem;
|
||||
}
|
||||
|
||||
.kg-email-card.no-border {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.email-cta-button-text-input {
|
||||
margin-right: 1.2rem;
|
||||
padding: 4px;
|
||||
|
|
@ -1037,7 +1042,7 @@ figure {
|
|||
}
|
||||
|
||||
.gh-email-cta-segment-indicator p {
|
||||
padding: 6px 0 24px !important;
|
||||
padding: 4px 0 24px !important;
|
||||
color: var(--midgrey);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@
|
|||
|
||||
/* Action bar */
|
||||
|
||||
.kg-card-left-border {
|
||||
border-left-color: var(--lightgrey-d1);
|
||||
}
|
||||
|
||||
.kg-action-bar {
|
||||
background: var(--whitegrey-l2);
|
||||
border: 1px solid var(--whitegrey-l2);
|
||||
|
|
|
|||
|
|
@ -689,9 +689,6 @@
|
|||
/*
|
||||
/* Styles that extend Spirit classes.
|
||||
/* -------------------------------------------------------------------- */
|
||||
.kg-card-left-border {
|
||||
border-left-color: var(--whitegrey);
|
||||
}
|
||||
|
||||
.kg-card-hover:hover {
|
||||
box-shadow: 0 0 0 1px var(--green);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
as |card|
|
||||
>
|
||||
{{#if @isEditing}}
|
||||
{{#if this.hasTopDivider}}<hr>{{/if}}
|
||||
|
||||
<div class="kg-card-help kg-card-help-labs">
|
||||
<p>
|
||||
|
|
@ -91,7 +90,7 @@
|
|||
<p>{{capitalize this.selectedSegment.name}}</p>
|
||||
</div>
|
||||
|
||||
{{#if this.hasTopDivider}}<hr>{{/if}}
|
||||
{{#if this.hasTopDivider}}<hr class="border-top">{{/if}}
|
||||
|
||||
{{#if @payload.html}}
|
||||
<div class="relative">
|
||||
|
|
@ -103,7 +102,10 @@
|
|||
{{#if (and @payload.buttonText @payload.buttonUrl)}}
|
||||
<div class="{{if @payload.html "mt6"}} {{if (eq @payload.buttonAlignment "center") "tc"}}"><a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a></div>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.hasBottomDivider}}<hr class="border-bottom">{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if this.hasBottomDivider}}<hr>{{/if}}
|
||||
|
||||
</KoenigCard>
|
||||
|
|
|
|||
|
|
@ -48,12 +48,12 @@ export default class KoenigCardEmailCtaComponent extends Component {
|
|||
return {
|
||||
items: [{
|
||||
title: 'Top divider',
|
||||
icon: 'koenig/kg-img-regular',
|
||||
icon: 'koenig/kg-cta-bordertop',
|
||||
iconClass: this.hasTopDivider ? 'fill-green-l2' : 'fill-white',
|
||||
action: run.bind(this, this.toggleDivider, 'top')
|
||||
}, {
|
||||
title: 'Bottom divider',
|
||||
icon: 'koenig/kg-img-regular',
|
||||
icon: 'koenig/kg-cta-borderbottom',
|
||||
iconClass: this.hasBottomDivider ? 'fill-green-l2' : 'fill-white',
|
||||
action: run.bind(this, this.toggleDivider, 'bottom')
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}} @instantClose={{this.koenigUi.inputHasFocus}}>
|
||||
{{#each this.toolbar.items as |item|}}
|
||||
{{#if item.divider}}
|
||||
<li class="ma0 kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
<li class="ma0 ml1 mr1 kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
{{else}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
{{#if showSnippetIcon}}
|
||||
{{#if this.toolbar.items}}
|
||||
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
<li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
{{/if}}
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</li>
|
||||
{{/unless}}
|
||||
|
||||
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
<li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
|
||||
{{#unless this.basicOnly}}
|
||||
<li class="ma0 lh-solid">
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
{{#if @addSnippet}}
|
||||
{{#unless this.basicOnly}}
|
||||
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
<li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export function kgStyle([style], options) {
|
|||
let cssClass = '';
|
||||
|
||||
let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif';
|
||||
let cardBorderStyle = 'pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-left-border kg-card-hover';
|
||||
let cardBorderStyle = 'pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-hover';
|
||||
|
||||
switch (style) {
|
||||
// Card menu
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 2h12c.265 0 .52.14.707.39.188.25.293.59.293.943v5.334c0 .353-.105.693-.293.943-.187.25-.442.39-.707.39H2c-.265 0-.52-.14-.707-.39A1.586 1.586 0 011 8.667V3.333c0-.353.105-.693.293-.943C1.48 2.14 1.735 2 2 2z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 13a1 1 0 01-1 1H2a1 1 0 110-2h12a1 1 0 011 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 412 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 6h12c.265 0 .52.14.707.39.188.25.293.59.293.943v5.334c0 .354-.105.693-.293.943-.187.25-.442.39-.707.39H2c-.265 0-.52-.14-.707-.39A1.586 1.586 0 011 12.667V7.333c0-.353.105-.693.293-.943C1.48 6.14 1.735 6 2 6z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3a1 1 0 01-1 1H2a1 1 0 010-2h12a1 1 0 011 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 412 B |
Loading…
Add table
Reference in a new issue