Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs
Kevin Ansfield 508cd31265 Koenig - Update toolbar to use Spirit classes
refs https://github.com/TryGhost/Ghost/issues/9505
- switch `{{koenig-toolbar}}` to use Spirit classes and icons
- wrap the toolbar `<ul>` in an absolutely positioned `<div>` rather than positioning the toolbar directly to improve animation behaviour
- remove old/unused Koenig SVG icons
2018-04-03 16:52:00 +01:00

88 lines
3.3 KiB
Handlebars

<ul class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
<li class="ma0 lh-solid">
<button
type="button"
title="Bold"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleMarkup" "strong"}}
>
{{svg-jar "koenig/kg-bold" class=(concat (if activeMarkupTagNames.isStrong "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Italic"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleMarkup" "em"}}
>
{{svg-jar "koenig/kg-italic" class=(concat (if (or activeMarkupTagNames.isEm activeMarkupTagNames.isI) "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Heading One"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleSection" "h1"}}
>
{{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Heading Two"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleSection" "h2"}}
>
{{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
<li class="ma0 lh-solid">
<button
type="button"
title="Quote"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleSection" "blockquote"}}
>
{{svg-jar "koenig/kg-quote" class=(concat (if activeSectionTagNames.isBlockquote "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Unordered List"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleSection" "ul"}}
>
{{svg-jar "koenig/kg-bullet-list" class=(concat (if activeSectionTagNames.isUl "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid">
<button
type="button"
title="Ordered List"
class="dib dim-lite pa3 pt2 pb2 link"
{{action "toggleSection" "ol"}}
>
{{svg-jar "koenig/kg-numbered-list" class=(concat (if activeSectionTagNames.isOl "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
<li class="ma0 lh-solid">
<button
type="button"
title="Link"
class="dib dim-lite pa3 pt2 pb2 link"
>
{{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
</button>
</li>
</ul>