Koenig - Card menu and (+) button styles (#1010)
refs https://github.com/TryGhost/Ghost/issues/9505 - apply styles to card menu and replace icons - apply styles for (+) button
This commit is contained in:
Kevin Ansfield
GitHub
parent
1b65c2dda8
commit
1345582340
|
|
@ -415,7 +415,7 @@
|
|||
.koenig-editor__editor code {
|
||||
border-radius: 2px;
|
||||
color: var(--pink);
|
||||
font-size: 1.75rem;
|
||||
font-size: 1.65rem;
|
||||
line-height: 1em;
|
||||
padding: .4rem .4rem .2rem;
|
||||
vertical-align: middle;
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
.koenig-editor__editor pre code {
|
||||
border: none;
|
||||
font-size: 1.6rem;
|
||||
color: var(--darkgrey);
|
||||
color: var(--pink);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,17 +58,23 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: var(--midgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -40px;
|
||||
margin-left: -48px;
|
||||
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: 15px;
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button svg path {
|
||||
|
|
@ -76,6 +82,10 @@
|
|||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button:hover svg path {
|
||||
stroke: var(--middarkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.koenig-plus-menu-button {
|
||||
right:10px;
|
||||
|
|
@ -97,14 +107,14 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 12px 15px;
|
||||
width: 350px;
|
||||
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(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
|
||||
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;
|
||||
|
|
@ -185,10 +195,15 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
fill: var(--darkgrey);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon svg path,
|
||||
.koenig-cardmenu-icon svg g {
|
||||
stroke: var(--midgrey);
|
||||
}
|
||||
|
||||
.koenig-cardmenu-label {
|
||||
|
|
@ -201,13 +216,20 @@
|
|||
|
||||
.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
|
||||
cursor: pointer;
|
||||
background: color-mod(var(--lightgrey) l(+3%) s(-10%));
|
||||
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;
|
||||
|
|
@ -290,6 +312,7 @@
|
|||
.koenig-editor .gh-markdown-editor {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.koenig-editor .gh-markdown-editor .editor-toolbar {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default Component.extend({
|
|||
|
||||
// attrs
|
||||
icon: null,
|
||||
iconClass: 'ih2 absolute fill-lightgrey mt2 nl10 kg-icon',
|
||||
iconClass: 'ih5 absolute stroke-midgrey-l2 mt1 nl10 kg-icon',
|
||||
toolbar: null,
|
||||
isSelected: false,
|
||||
isEditing: false,
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ const ITEM_MAP = [
|
|||
replaceArg: 'image'
|
||||
},
|
||||
{
|
||||
label: 'Embed',
|
||||
icon: 'koenig/embed',
|
||||
label: 'HTML',
|
||||
icon: 'koenig/html',
|
||||
matches: ['embed', 'html'],
|
||||
type: 'card',
|
||||
replaceArg: 'html'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#koenig-card
|
||||
icon="koenig/markdown"
|
||||
icon="koenig/card-indicator-markdown"
|
||||
class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
|
||||
toolbar=toolbar
|
||||
isSelected=isSelected
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<div class="koenig-cardmenu-label">Image</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "html" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/embed"}}</div>
|
||||
<div class="koenig-cardmenu-label">Embed</div>
|
||||
<div class="koenig-cardmenu-icon">{{svg-jar "koenig/html"}}</div>
|
||||
<div class="koenig-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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round" d="M2 14V6l4 4 4-4v8M16 6.07v7.916M13.5 11.5l2.48 2.525L18.5 11.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 287 B |
|
|
@ -1 +1,5 @@
|
|||
<svg viewBox="0 0 42 4" xmlns="http://www.w3.org/2000/svg"><path d="M1 2h40" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"></path></svg>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M2 12V4c0-1.105.895-2 2-2h24c1.105 0 2 .895 2 2v8M2 20v8c0 1.105.895 2 2 2h24c1.105 0 2-.895 2-2v-8M1 16h30" stroke="#738A94" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 178 B After Width: | Height: | Size: 332 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M2 2h19l9 9v19H2z"/>
|
||||
<path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M11 21l-3-3 3-3M21 21l3-3-3-3M14 21l4-6M21.041 2.137v8.913h8.904"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 391 B |
|
|
@ -1 +1,7 @@
|
|||
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 18.5v-17a.5.5 0 0 0-.5-.5h-17a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h17a.5.5 0 0 0 .5-.5zM18 2v13h-2.161l-2.874-7.186a.5.5 0 0 0-.453-.314.529.529 0 0 0-.467.293l-2.17 4.775-1.99-2.389a.502.502 0 0 0-.813.063L4.217 15H2V2h16zm-3.238 13H5.383l2.183-3.639 2.049 2.46a.5.5 0 0 0 .839-.114l2.016-4.434L14.762 15zM2 18v-2h16v2H2zM22.884 7.242a.5.5 0 0 0-.339-.178l-1.992-.181a.5.5 0 0 0-.09.996l1.494.135-1.272 13.942-14.44-1.317a.502.502 0 0 0-.09.997l14.937 1.363.045.001a.501.501 0 0 0 .498-.455l1.363-14.939a.497.497 0 0 0-.114-.364zM6 8c1.103 0 2-.897 2-2s-.897-2-2-2-2 .897-2 2 .897 2 2 2zm0-3c.551 0 1 .449 1 1s-.449 1-1 1-1-.449-1-1 .449-1 1-1z"></path></svg>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M24 24l-4.667-10.444L16 20.889l-3.333-4L8 24"/>
|
||||
<path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M2 2h28v28H2zM2 24h28"/>
|
||||
<path d="M13.556 10.444c0 1.63-.815 2.445-2.445 2.445s-2.444-.815-2.444-2.445S9.48 8 11.11 8s2.445.815 2.445 2.444z" stroke="#738A94" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 566 B |
|
|
@ -1 +1,6 @@
|
|||
<svg viewBox="0 0 25 11" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M.039.2h3.326L5.88 7.628h.03L8.287.201h3.327V11H9.401V3.347h-.03L6.737 11H4.916L2.28 3.422h-.03V11H.04zM20.895 5.5H25L19.526 11l-5.473-5.5h4.105V0h2.737v5.5z"/></g></svg>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M4 2h24c1.105 0 2 .895 2 2v24c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2z" stroke="#738A94" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M26 18l-2.999 3.001L20 18M23 11v9.476M6 21V11l5 4.695L16 11v10"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 463 B |
Loading…
Reference in New Issue