mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Koenig - Replace custom CSS classes with Spirit
no issue - Koenig container styles for Spirit - Applying Spirit styles to card menu - Applying Spirit styles to generic cards - Replacing icon styles with Spirit - Fix slash menu selected state - Cleanup of unused files + fix empty HTML
This commit is contained in:
Zimo
Kevin Ansfield
parent
d1b3237780
commit
4c05d618bd
@ -3,7 +3,7 @@ import Component from '@ember/component';
|
||||
export default Component.extend({
|
||||
|
||||
// public attrs
|
||||
classNames: ['gh-koenig-editor'],
|
||||
classNames: ['gh-koenig-editor', 'relative', 'w-100', 'vh-100', 'overflow-x-hidden', 'overflow-y-auto', 'z-0'],
|
||||
title: '',
|
||||
titlePlaceholder: '',
|
||||
body: null,
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
/* Patterns: Groups of Styles
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "patterns/global.css";
|
||||
@import "patterns/_shame.css";
|
||||
@import "patterns/icons.css";
|
||||
@import "patterns/forms.css";
|
||||
@import "patterns/buttons.css";
|
||||
@ -37,7 +36,6 @@
|
||||
@import "components/popovers.css";
|
||||
@import "components/tour.css";
|
||||
@import "components/unsplash.css";
|
||||
@import "components/koenig";
|
||||
|
||||
|
||||
/* Layouts: Groups of Components
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
/* Patterns: Groups of Styles
|
||||
/* ---------------------------------------------------------- */
|
||||
@import "patterns/global.css";
|
||||
@import "patterns/_shame.css";
|
||||
@import "patterns/icons.css";
|
||||
@import "patterns/forms.css";
|
||||
@import "patterns/buttons.css";
|
||||
@ -37,7 +36,6 @@
|
||||
@import "components/popovers.css";
|
||||
@import "components/tour.css";
|
||||
@import "components/unsplash.css";
|
||||
@import "components/koenig";
|
||||
|
||||
|
||||
/* Layouts: Groups of Components
|
||||
|
||||
@ -1,525 +0,0 @@
|
||||
/* Vertical riddim
|
||||
/*
|
||||
/* We use only margin-top to set the vertical spacings. The styles below
|
||||
/* set up the margin for content pairs (e.g. paragraph preceded by a heading).
|
||||
|
||||
|
||||
/* Global Koenig content styles
|
||||
/* -------------------------------------------------------------------- */
|
||||
.koenig-editor__editor {
|
||||
color: var(--darkgrey);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-moz-font-feature-settings: "liga" on;
|
||||
}
|
||||
|
||||
|
||||
/* Reset margins */
|
||||
|
||||
.koenig-editor__editor p,
|
||||
.koenig-editor__editor h1,
|
||||
.koenig-editor__editor h2,
|
||||
.koenig-editor__editor h3,
|
||||
.koenig-editor__editor h4,
|
||||
.koenig-editor__editor h5,
|
||||
.koenig-editor__editor h6,
|
||||
.koenig-editor__editor blockquote {
|
||||
margin: 1.6rem 0 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Heading
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor h1,
|
||||
.koenig-editor__editor h2,
|
||||
.koenig-editor__editor h3,
|
||||
.koenig-editor__editor h4,
|
||||
.koenig-editor__editor h5,
|
||||
.koenig-editor__editor h6 {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h1 {
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: .04rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h2 {
|
||||
font-size: 2.3rem;
|
||||
line-height: 1.6em;
|
||||
letter-spacing: .04rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 {
|
||||
font-size: 2.0rem;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: .04rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h4 {
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: .06rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h5 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.6em;
|
||||
letter-spacing: .04rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h6 {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6em;
|
||||
letter-spacing: .06rem;
|
||||
}
|
||||
|
||||
|
||||
.koenig-editor__editor p + h1,
|
||||
.koenig-editor__editor p + h2,
|
||||
.koenig-editor__editor p + h3,
|
||||
.koenig-editor__editor p + h4,
|
||||
.koenig-editor__editor p + h5,
|
||||
.koenig-editor__editor p + h6,
|
||||
|
||||
.koenig-editor__editor blockquote + h1,
|
||||
.koenig-editor__editor blockquote + h2,
|
||||
.koenig-editor__editor blockquote + h3,
|
||||
.koenig-editor__editor blockquote + h4,
|
||||
.koenig-editor__editor blockquote + h5,
|
||||
.koenig-editor__editor blockquote + h6,
|
||||
|
||||
.koenig-editor__editor ul + h1,
|
||||
.koenig-editor__editor ul + h2,
|
||||
.koenig-editor__editor ul + h3,
|
||||
.koenig-editor__editor ul + h4,
|
||||
.koenig-editor__editor ul + h5,
|
||||
.koenig-editor__editor ul + h6,
|
||||
|
||||
.koenig-editor__editor ol + h1,
|
||||
.koenig-editor__editor ol + h2,
|
||||
.koenig-editor__editor ol + h3,
|
||||
.koenig-editor__editor ol + h4,
|
||||
.koenig-editor__editor ol + h5,
|
||||
.koenig-editor__editor ol + h6 {
|
||||
margin: 4.8rem 0 0;
|
||||
}
|
||||
|
||||
/* Heading 1 vertical rhythm */
|
||||
|
||||
.koenig-editor__editor h1 + h1 {
|
||||
margin: 1.4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h2 + h1,
|
||||
.koenig-editor__editor h3 + h1 {
|
||||
margin: 1.0rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h4 + h1,
|
||||
.koenig-editor__editor h5 + h1 {
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h6 + h1 {
|
||||
margin: 0.6rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor div + h1 {
|
||||
margin: 4.8rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Heading 2 */
|
||||
|
||||
.koenig-editor__editor h1 + h2 {
|
||||
margin: 1.6rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h2 + h2,
|
||||
.koenig-editor__editor h3 + h2,
|
||||
.koenig-editor__editor h4 + h2,
|
||||
.koenig-editor__editor h5 + h2 {
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h6 + h2 {
|
||||
margin: 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor div + h2 {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Heading 3 - 6 (share common styles) */
|
||||
|
||||
.koenig-editor__editor h1 + h3,
|
||||
.koenig-editor__editor h2 + h3,
|
||||
|
||||
.koenig-editor__editor h1 + h4,
|
||||
.koenig-editor__editor h2 + h4,
|
||||
|
||||
.koenig-editor__editor h1 + h5,
|
||||
.koenig-editor__editor h2 + h5,
|
||||
|
||||
.koenig-editor__editor h1 + h6,
|
||||
.koenig-editor__editor h2 + h6 {
|
||||
margin: 1.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 + h4 {
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 + h3,
|
||||
.koenig-editor__editor h4 + h3,
|
||||
.koenig-editor__editor h5 + h3,
|
||||
|
||||
.koenig-editor__editor h4 + h4,
|
||||
.koenig-editor__editor h5 + h4,
|
||||
|
||||
.koenig-editor__editor h3 + h5,
|
||||
.koenig-editor__editor h4 + h5,
|
||||
.koenig-editor__editor h5 + h5,
|
||||
|
||||
.koenig-editor__editor h3 + h6,
|
||||
.koenig-editor__editor h4 + h6 {
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h5 + h6 {
|
||||
margin: 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h6 + h3,
|
||||
.koenig-editor__editor h6 + h4,
|
||||
.koenig-editor__editor h6 + h5,
|
||||
.koenig-editor__editor h6 + h6 {
|
||||
margin: 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor div + h3,
|
||||
.koenig-editor__editor div + h4,
|
||||
.koenig-editor__editor div + h5,
|
||||
.koenig-editor__editor div + h6 {
|
||||
margin: 2.4rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Paragraph
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor p,
|
||||
.koenig-editor__editor blockquote,
|
||||
.koenig-editor__editor ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor ol
|
||||
{
|
||||
font-family: georgia,serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02rem;
|
||||
line-height: 1.6em;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h1 + p {
|
||||
margin: 1.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h2 + p {
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 + p,
|
||||
.koenig-editor__editor h4 + p,
|
||||
.koenig-editor__editor h5 + p,
|
||||
.koenig-editor__editor h6 + p {
|
||||
margin: .8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor p + p,
|
||||
.koenig-editor__editor blockquote + p,
|
||||
.koenig-editor__editor ul + p,
|
||||
.koenig-editor__editor ol + p
|
||||
{
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */
|
||||
margin: 2.8rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Lists
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor ol {
|
||||
padding: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.koenig-editor__editor ul:not(.kg-action-bar) li {
|
||||
margin: 1.6rem 0 0 2.4rem;
|
||||
padding: 0 0 0 0.6rem;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor ul:not(.kg-action-bar) li:first-child {
|
||||
margin: 0 0 0 2.4rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor ol li {
|
||||
margin: 1.6rem 0 0 2.2rem;
|
||||
padding: 0 0 0 0.8rem;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor ol li:first-child {
|
||||
margin: 0 0 0 2.2rem;
|
||||
}
|
||||
|
||||
.koenig-editor__editor p + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor p + ol,
|
||||
.koenig-editor__editor ul:not(.kg-action-bar) + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor ul:not(.kg-action-bar) + ol,
|
||||
.koenig-editor__editor ol + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor ol + ol,
|
||||
.koenig-editor__editor blockquote + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor blockquote + ol {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h1 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h1 + ol,
|
||||
.koenig-editor__editor h2 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h2 + ol {
|
||||
margin: .8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h3 + ol,
|
||||
.koenig-editor__editor h4 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h4 + ol,
|
||||
.koenig-editor__editor h5 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h5 + ol,
|
||||
.koenig-editor__editor h6 + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor h6 + ol {
|
||||
margin: .4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor div + ul:not(.kg-action-bar),
|
||||
.koenig-editor__editor div + ol {
|
||||
margin: 2.8rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Cards in general
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor > div {
|
||||
line-height: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.koenig-editor__editor > div + div {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor > p + div,
|
||||
.koenig-editor__editor > blockquote + div,
|
||||
.koenig-editor__editor > ul + div,
|
||||
.koenig-editor__editor > ol + div {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor > h1 + div {
|
||||
margin: 2.8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor > h2 + div,
|
||||
.koenig-editor__editor > h3 + div,
|
||||
.koenig-editor__editor > h4 + div,
|
||||
.koenig-editor__editor > h5 + div,
|
||||
.koenig-editor__editor > h6 + div {
|
||||
margin: 1.6rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Links
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor a {
|
||||
color: var(--darkgrey);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: inset 0 -1px 0 var(--blue);
|
||||
}
|
||||
|
||||
|
||||
/* Blockquote
|
||||
/* -------------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor blockquote {
|
||||
border-left: 0.25rem solid var(--blue);
|
||||
padding-left: 2.0rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h1 + blockquote,
|
||||
.koenig-editor__editor h2 + blockquote {
|
||||
margin: .8rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor h3 + blockquote,
|
||||
.koenig-editor__editor h4 + blockquote,
|
||||
.koenig-editor__editor h5 + blockquote,
|
||||
.koenig-editor__editor h6 + blockquote {
|
||||
margin: .4rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor p + blockquote,
|
||||
.koenig-editor__editor blockquote + blockquote {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobiledoc cards can be selected by their wrapper div element */
|
||||
.koenig-editor__editor div + blockquote {
|
||||
margin: 2.8rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Code
|
||||
/* ------------------------------------------------------------------ */
|
||||
.koenig-card-html--editor .CodeMirror,
|
||||
.koenig-editor__editor code,
|
||||
.koenig-editor__editor pre {
|
||||
font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
background: color-mod(var(--lightgrey) lightness(+4%));
|
||||
border: 1px solid var(--lightgrey);
|
||||
}
|
||||
|
||||
.koenig-editor__editor code {
|
||||
border-radius: 2px;
|
||||
color: var(--pink);
|
||||
font-size: 1.65rem;
|
||||
line-height: 1em;
|
||||
padding: .4rem .4rem .2rem;
|
||||
vertical-align: middle;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.koenig-editor__editor pre code {
|
||||
border: none;
|
||||
font-size: 1.6rem;
|
||||
color: var(--pink);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.koenig-editor__editor pre {
|
||||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
padding: .8rem .8rem .4rem;
|
||||
border-radius: .4rem;
|
||||
font-size: 1.6rem;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
width: 100%;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
|
||||
/* Markdown
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
Resetting the default top margin of the redered markdown content. This is
|
||||
needed because the top margin is applied to the card itself. It's the 2nd
|
||||
child because there's an SVG at the first place.
|
||||
NOTE: this is not too elegant.
|
||||
*/
|
||||
|
||||
.koenig-card-markdown-rendered > :nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.koenig-card-markdown-rendered hr {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-card-markdown-rendered hr + p {
|
||||
margin: 3.2rem 0 0;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor pre {
|
||||
border: none;
|
||||
background: none;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor a {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* HTML editor
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.koenig-card-html-rendered > :nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.koenig-card-html--editor pre {
|
||||
border: none;
|
||||
background: none;
|
||||
white-space: pre-line;
|
||||
padding: 0 .8rem;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.koenig-card-html--editor .CodeMirror {
|
||||
border: none;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.koenig-card-html--editor .CodeMirror-linenumber {
|
||||
padding: 12px 3px 0 5px;
|
||||
color: var(--midlightgrey-l2);
|
||||
}
|
||||
|
||||
.koenig-card-html--editor .CodeMirror-gutters {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
/* Table
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.koenig-editor__editor table {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
font-family: georgia,serif;
|
||||
letter-spacing: .02rem;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.koenig-editor__editor table tr td,
|
||||
.koenig-editor__editor table tr th {
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid var(--lightgrey);
|
||||
}
|
||||
@ -1,467 +0,0 @@
|
||||
|
||||
/* Import basic typography styles for Koenig */
|
||||
@import "./koenig-content.css";
|
||||
|
||||
/* TODO: move these back into the editor.css layout? */
|
||||
|
||||
/* scrollable container */
|
||||
.gh-koenig-editor {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* padded container housing title + editor canvas, scrollable content */
|
||||
.gh-koenig-editor-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
padding: 10vw 4vw;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.gh-koenig-editor-pane {
|
||||
padding: 15vw 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* use flex-grow to fill the available vertical space so clicks outside the
|
||||
editor content can trigger focus */
|
||||
.gh-koenig-editor-pane .koenig-editor {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
/* NOTE: everything from this point should be Koenig addon specific */
|
||||
|
||||
/* Editor canvas layout ----------------------------------------------------- */
|
||||
|
||||
.koenig-editor {
|
||||
position: relative; /* necessary to position toolbar etc */
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* ⨁ menu ------------------------------------------------------------------ */
|
||||
|
||||
.koenig-plus-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: var(--midgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -66px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button:hover {
|
||||
border: var(--blue) 1px solid;
|
||||
background: rgba(62, 176, 239, .05);
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button svg path {
|
||||
stroke: var(--midgrey);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button:hover svg path {
|
||||
stroke: var(--middarkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.koenig-plus-menu-button {
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Slash shortcut menu ------------------------------------------------------ */
|
||||
|
||||
.koenig-slash-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Menu items --------------------------------------------------------------- */
|
||||
|
||||
/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
|
||||
.koenig-cardmenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 20px;
|
||||
width: 360px;
|
||||
max-height: 460px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 10px 34px rgba(0,0,0,0.12);
|
||||
text-transform: none;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
z-index: 9999999; /* have to compete with codemirror */
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: var(--midgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button svg path {
|
||||
stroke: var(--midgrey);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.koenig-cardmenu-button {
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 40px;
|
||||
margin: -12px -15px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search svg {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 40px;
|
||||
padding: 10px 0 10px 40px;
|
||||
border: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon svg path,
|
||||
.koenig-cardmenu-icon svg g {
|
||||
stroke: var(--midgrey);
|
||||
}
|
||||
|
||||
.koenig-cardmenu-label {
|
||||
margin: 7px 0 0 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--midgrey);
|
||||
letter-spacing: 0.2px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
|
||||
cursor: pointer;
|
||||
background: rgba(62, 176, 239, .05);
|
||||
border: 1px solid var(--blue);
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
|
||||
color: var(--darkgrey);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card:hover svg path,
|
||||
.koenig-cardmenu-card:hover svg g {
|
||||
stroke: var(--darkgrey);
|
||||
}
|
||||
|
||||
.koenig-cardmenu-divider {
|
||||
top: -12px;
|
||||
width: 350px;
|
||||
padding: 5px 0;
|
||||
margin: 12px -15px;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
background: color-mod(var(--lightgrey) l(+3%) s(-10%));
|
||||
}
|
||||
|
||||
|
||||
/* Cards -------------------------------------------------------------------- */
|
||||
|
||||
/* generic containers... */
|
||||
|
||||
.koenig-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: calc(100% + 60px);
|
||||
border: 2px solid color-mod(var(--blue) alpha(-85%));
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-left: -50px;
|
||||
max-width: none;
|
||||
cursor: default;
|
||||
caret-color: auto; /* override hidden cursors around cards */
|
||||
}
|
||||
|
||||
.koenig-card:hover {
|
||||
border-color: color-mod(var(--blue) alpha(-25%));
|
||||
}
|
||||
|
||||
.koenig-card--selected {
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.koenig-card-icon {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.koenig-card-content {
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.koenig-card-click-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 400;
|
||||
}
|
||||
|
||||
/* embedded CodeMirror overrides */
|
||||
|
||||
.koenig-editor .CodeMirror pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.koenig-editor .CodeMirror-wrap pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* specific cards... */
|
||||
|
||||
/* HTML */
|
||||
|
||||
.koenig-card-html--editor .CodeMirror {
|
||||
min-height: 170px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.koenig-card-html--editor .CodeMirror:hover {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.koenig-card-html--editor .CodeMirror-scroll {
|
||||
min-height: 170px;
|
||||
overflow: hidden !important;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Markdown */
|
||||
|
||||
.koenig-editor .gh-markdown-editor {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor .editor-toolbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0 0 .4rem .4rem;
|
||||
z-index: 9999;
|
||||
background-color: #fff;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor .CodeMirror {
|
||||
min-height: 130px;
|
||||
/* margin to account for absolutely positioned toolbar */
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor .CodeMirror-scroll {
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
/* mobiledoc-kit base styles ------------------------------------------------
|
||||
* NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
|
||||
*/
|
||||
|
||||
/**
|
||||
* Editor
|
||||
*/
|
||||
|
||||
/* TODO: update to match Ghost styles */
|
||||
.__mobiledoc-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.7rem;
|
||||
resize: none;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.1px;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.__mobiledoc-editor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.__mobiledoc-editor > * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.__mobiledoc-editor.__has-no-content:after {
|
||||
font-family: georgia,serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02rem;
|
||||
line-height: 1.6em;
|
||||
font-size: 2rem;
|
||||
min-width: 100%;
|
||||
content: attr(data-placeholder);
|
||||
color: var(--midgrey-l2);
|
||||
cursor: text;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
/* override of global.css block display */
|
||||
.__mobiledoc-editor i {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cards
|
||||
*/
|
||||
|
||||
.__mobiledoc-card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltips
|
||||
*/
|
||||
|
||||
@-webkit-keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.__mobiledoc-tooltip {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 0.7em;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
background-color: rgba(43,43,43,0.9);
|
||||
border-radius: 3px;
|
||||
line-height: 1em;
|
||||
padding: 0.7em 0.9em;
|
||||
color: #FFF;
|
||||
-webkit-animation: fade-in 0.2s;
|
||||
animation: fade-in 0.2s;
|
||||
}
|
||||
|
||||
.__mobiledoc-tooltip:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.4em solid transparent;
|
||||
border-right: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid rgba(43,43,43,0.9);
|
||||
top: -0.4em;
|
||||
margin-left: -0.4em;
|
||||
}
|
||||
|
||||
/* help keeps mouseover state when moving from link to tooltip */
|
||||
.__mobiledoc-tooltip:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -0.4em;
|
||||
height: 0.4em;
|
||||
}
|
||||
|
||||
.__mobiledoc-tooltip a {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.__mobiledoc-tooltip a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
/* Shame
|
||||
/* ---------------------------------------------------------- */
|
||||
/* TODO: Kill with fire 🔥 */
|
||||
|
||||
.kg-card-selected {
|
||||
border: 1px solid var(--blue);
|
||||
box-shadow: 0 0 0 1px #3eb0ef;
|
||||
}
|
||||
|
||||
/* force a 16:10 aspect ratio */
|
||||
.kg-media-placeholder:before {
|
||||
content: "";
|
||||
float: left;
|
||||
padding-bottom: 62.5%;
|
||||
}
|
||||
.kg-media-placeholder:after {
|
||||
clear: left;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* similar to .kg-action-bar to add a positionable triangle to a popup */
|
||||
/* .kg-input-bar:after,
|
||||
.kg-input-bar:before {
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: calc(50% - 8px);
|
||||
width: 0;
|
||||
content: "";
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.kg-input-bar:after {
|
||||
margin-left: 1px;
|
||||
border-top: 7px solid #fff;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
.kg-input-bar:before {
|
||||
border-top: 8px solid var(--blue);
|
||||
border-right: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
} */
|
||||
|
||||
.kg-input-bar-close {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 9px;
|
||||
left: auto;
|
||||
line-height: 1.2rem;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{{!-- full height content pane --}}
|
||||
<div class="gh-koenig-editor-pane" onclick={{action "focusEditor"}}>
|
||||
<div class="gh-koenig-editor-pane flex flex-column mih-100" onclick={{action "focusEditor"}}>
|
||||
{{gh-textarea
|
||||
class="gh-editor-title"
|
||||
placeholder=titlePlaceholder
|
||||
|
||||
@ -80,7 +80,7 @@ export default Component.extend({
|
||||
layout,
|
||||
|
||||
tagName: 'article',
|
||||
classNames: ['koenig-editor'],
|
||||
classNames: ['koenig-editor', 'w-100', 'flex-grow', 'relative', 'center', 'mb0', 'mt0'],
|
||||
|
||||
// public attrs
|
||||
mobiledoc: null,
|
||||
|
||||
@ -8,7 +8,7 @@ export default Component.extend({
|
||||
layout,
|
||||
|
||||
// public attrs
|
||||
classNames: 'koenig-plus-menu',
|
||||
classNames: ['koenig-plus-menu', 'absolute'],
|
||||
attributeBindings: ['style'],
|
||||
editor: null,
|
||||
editorRange: null,
|
||||
|
||||
@ -43,7 +43,7 @@ export default Component.extend({
|
||||
layout,
|
||||
|
||||
// public attrs
|
||||
classNames: 'koenig-slash-menu',
|
||||
classNames: 'absolute',
|
||||
attributeBindings: ['style'],
|
||||
editor: null,
|
||||
editorRange: null,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{{#koenig-card
|
||||
icon="koenig/card-indicator-html"
|
||||
class=(concat (kg-style "container-card") " mih10 miw-100 relative koenig-card-html-rendered")
|
||||
class=(concat (kg-style "container-card") " mih10 miw-100 relative")
|
||||
headerOffset=headerOffset
|
||||
toolbar=toolbar
|
||||
isSelected=isSelected
|
||||
@ -17,7 +17,7 @@
|
||||
update=(action "updateHtml")
|
||||
}}
|
||||
{{else}}
|
||||
{{{payload.html}}}
|
||||
<div class="koenig-card-html-rendered">{{{payload.html}}}</div>
|
||||
<div class="koenig-card-click-overlay"></div>
|
||||
{{/if}}
|
||||
{{/koenig-card}}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{#if showButton}}
|
||||
<button class="koenig-plus-menu-button" {{action "openMenu"}}>{{svg-jar "plus"}}</button>
|
||||
<button class="koenig-plus-menu-button flex justify-center items-center relative w9 h9 ba b--midgrey bg-white br-100 kg-blue-hover" {{action "openMenu"}}>{{svg-jar "plus" class="w4 h4 stroke-midgrey i-strokew--2"}}</button>
|
||||
{{/if}}
|
||||
|
||||
{{#if showMenu}}
|
||||
<div class="koenig-cardmenu">
|
||||
<div class="koenig-cardmenu {{kg-style "cardmenu"}}">
|
||||
{{!-- <div class="koenig-cardmenu-search">
|
||||
{{svg-jar "koenig/search"}}
|
||||
<input type="text" placeholder="Search for a card..." class="gh-input koenig-cardmenu-search-input">
|
||||
@ -11,21 +11,21 @@
|
||||
<div class="koenig-cardmenu-divider">
|
||||
Primary
|
||||
</div> --}}
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "markdown" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/markdown"}}</div>
|
||||
<div class="koenig-cardmenu-label">Markdown</div>
|
||||
<div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "markdown" on="click"}}>
|
||||
<div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/markdown" class="w8 h8 stroke-midgrey"}}</div>
|
||||
<div class="{{kg-style "cardmenu-label"}}">Markdown</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "image" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/image"}}</div>
|
||||
<div class="koenig-cardmenu-label">Image</div>
|
||||
<div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "image" on="click"}}>
|
||||
<div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/image" class="w8 h8 stroke-midgrey"}}</div>
|
||||
<div class="{{kg-style "cardmenu-label"}}">Image</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "html" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/html"}}</div>
|
||||
<div class="koenig-cardmenu-label">HTML</div>
|
||||
<div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "html" on="click"}}>
|
||||
<div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/html" class="w8 h8 stroke-midgrey"}}</div>
|
||||
<div class="{{kg-style "cardmenu-label"}}">HTML</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "hr" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/divider"}}</div>
|
||||
<div class="koenig-cardmenu-label">Divider</div>
|
||||
<div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "hr" on="click"}}>
|
||||
<div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/divider" class="w8 h8 stroke-midgrey"}}</div>
|
||||
<div class="{{kg-style "cardmenu-label"}}">Divider</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{#if showMenu}}
|
||||
<div class="koenig-cardmenu">
|
||||
<div class="koenig-cardmenu {{kg-style "cardmenu"}}">
|
||||
{{#each items as |item|}}
|
||||
<div class="koenig-cardmenu-card {{if item.selected "selected"}}" {{action "itemClicked" item on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar item.icon}}</div>
|
||||
<div class="koenig-cardmenu-label">{{item.label}}</div>
|
||||
<div class="koenig-cardmenu-card {{if item.selected "kg-blue-selected"}} {{kg-style "cardmenu-card"}}" {{action "itemClicked" item on="click"}}>
|
||||
<div class="{{kg-style "cardmenu-icon"}}">{{svg-jar item.icon class="w8 h8 stroke-midgrey"}}</div>
|
||||
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user