mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Card menu styles and editor tweaks
This commit is contained in:
John O'Nolan
Kevin Ansfield
parent
4ceb547db7
commit
49a15a70c5
4 changed files with 258 additions and 31 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
@import "koenig-toolbar.css";
|
@import "koenig-toolbar.css";
|
||||||
@import "koenig-menu.css";
|
@import "koenig-menu.css";
|
||||||
|
@import "cardmenu.css";
|
||||||
|
|
||||||
.editor-holder {
|
.editor-holder {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -65,7 +66,7 @@
|
||||||
|
|
||||||
.__mobiledoc-card .card-handle button {
|
.__mobiledoc-card .card-handle button {
|
||||||
background-color: var(--lightgrey);
|
background-color: var(--lightgrey);
|
||||||
border:1px solid var(--lightgrey);
|
border: 1px solid var(--midgrey);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
}
|
}
|
||||||
|
|
@ -146,4 +147,3 @@ textarea.ed_code {
|
||||||
border-left: 10px solid transparent;
|
border-left: 10px solid transparent;
|
||||||
border-right: 10px solid transparent;
|
border-right: 10px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
68
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
Normal file
68
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
/* 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 */
|
||||||
|
.gh-cardmenu {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 15px;
|
||||||
|
width: 350px;
|
||||||
|
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);
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-search {
|
||||||
|
position: relative;
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
margin: -12px 0 -12px -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-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 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: color(var(--lightgrey) l(+5%));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-divider {
|
||||||
|
position: sticky;
|
||||||
|
top: -12px;
|
||||||
|
width: 350px;
|
||||||
|
padding: 5px 0;
|
||||||
|
margin: 12px -15px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
background: color(var(--lightgrey) l(+3%) s(-10%));
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,165 @@
|
||||||
<section class="view-container settings-debug">
|
<section class="view-container settings-debug">
|
||||||
<p class="gh-box gh-box-info"><i class="icon-idea"></i>This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.</p>
|
<p class="gh-box gh-box-info"><i class="icon-idea"></i>This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.</p>
|
||||||
|
|
||||||
|
{{!-- START: Card Menu Tamplate --}}
|
||||||
|
<div class="gh-setting-header">Card menu</div>
|
||||||
|
<div class="gh-setting">
|
||||||
|
<div class="gh-cardmenu">
|
||||||
|
<div class="gh-cardmenu-search">
|
||||||
|
<input class="gh-input gh-cardmenu-search-input" type="text" placeholder="Search for a card..."/>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{!-- END: Card Menu Tamplate --}}
|
||||||
|
|
||||||
<div class="gh-setting-header">Migration options</div>
|
<div class="gh-setting-header">Migration options</div>
|
||||||
<div class="gh-setting">
|
<div class="gh-setting">
|
||||||
<div class="gh-setting-content">
|
<div class="gh-setting-content">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue