Labs
+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.
+ +This is the intended output of the Ghost 1.0 editor card menu
+ + + +diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index 8f30ba284e..1d76f2220f 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -30,6 +30,7 @@ @import "components/settings-menu.css"; @import "components/selectize.css"; @import "components/power-select.css"; +@import "components/publishmenu.css"; /* Layouts: Groups of Components diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css new file mode 100644 index 0000000000..5a5cb634d9 --- /dev/null +++ b/ghost/admin/app/styles/components/publishmenu.css @@ -0,0 +1,172 @@ +/* Publish Menu +/* ---------------------------------------------------------- */ + +.gh-publishmenu-trigger { + color: var(--blue); + border: none; +} + +.gh-publishmenu-trigger:focus { + outline: 0; +} + +.gh-publishmenu { + position: relative; + z-index: 1000; +} + +.gh-publishmenu-dropdown { + position: absolute; + top: 100%; + left: 0; + margin: 5px 0 20px 0; + padding: 20px; + width: 300px; + 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); + list-style: none; + text-align: left; + text-transform: none; + font-size: 1.4rem; + font-weight: normal; +} + +.gh-publishmenu-heading { + margin: 0 0 15px 0; + font-size: 1.8rem; + line-height: 1.15em; +} + +.gh-publishmenu-content { + margin: 20px 0; + border-top: var(--lightgrey) 1px solid; + border-bottom: var(--lightgrey) 1px solid; +} + +.gh-publishmenu-footer { + display: flex; + align-items: center; + justify-content: flex-end; + margin: 15px 0 0 0; +} + +.gh-publishmenu-button { + float: right; +} + +.gh-publishmenu-radio { + display: flex; + margin: 25px 0; +} + +.gh-publishmenu-radio-button { + flex-shrink: 0; + position: relative; + width: 15px; + height: 15px; + border: color(var(--lightgrey) l(-10%)) 1px solid; + border-radius: 100%; + background: #fff; +} + +.gh-publishmenu-radio-content { + display: flex; + flex-direction: column; + margin: 0 0 0 15px; +} + +.gh-publishmenu-radio-label { + font-size: 1.4rem; + line-height: 1.2em; + font-weight: 500; +} + +.gh-publishmenu-radio-desc { + font-size: 1.3rem; + line-height: 1.4em; + font-weight: 200; + color: color(var(--midgrey) l(+10%)); +} + +.gh-publishmenu-radio-label:hover, +.gh-publishmenu-radio-button:hover { + cursor: pointer; +} + +.gh-publishmenu-radio.active .gh-publishmenu-radio-button { + border-color: color(var(--blue) l(-12%)); + background: var(--blue); +} + +.gh-publishmenu-radio.active .gh-publishmenu-radio-button:before { + display: block; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 7px; + height: 7px; + background: #fff; + border-radius: 100%; + box-shadow: rgba(0,0,0,0.25) 0 1px 3px; +} + +.gh-publishmenu-schedule { + display: flex; + align-items: center; + justify-content: space-between; +} + +.gh-publishmenu-schedule-date, +.gh-publishmenu-schedule-time { + display: flex; + align-items: center; + position: relative; + margin: 7px 0 4px; + padding: 6px 8px; + border: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid; + border-radius: 3px; + transition: border-color 0.15s linear; + background: #fff; +} + +.gh-publishmenu-schedule-time { + margin-left: 10px; + width: 170px; +} + +.gh-publishmenu-radio input { + display: block; + padding: 0; + width: 100%; + border: none; + color: color(var(--midgrey) l(-18%)); + font-size: 1.3rem; + line-height: 1em; + font-weight: 400; + user-select: text; + + -webkit-appearance: none; +} + +.gh-publishmenu-schedule-date:focus, +.gh-publishmenu-schedule-time:focus { + border-color: color(var(--lightgrey) l(-15%) s(-10%)); +} + +.gh-publishmenu-radio input:focus { + outline: 0; +} + +.gh-publishmenu-schedule-date svg { + height: 14px; + fill: color(var(--midgrey) l(+15%)); +} + +.gh-publishmenu-schedule-timezone { + font-size: 1.1rem; + font-weight: 200; + color: color(var(--midgrey) l(+17%)); +} diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index 3d43e602d6..7ed46ee02e 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -5,6 +5,8 @@ .gh-contentfilter { display: flex; + align-items: center; + justify-content: space-between; margin: 2vw 0 1vw; padding: 0; border-top: color(var(--lightgrey)) 1px solid; diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index a3c8c41cb3..1cf5ce4854 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -126,10 +126,12 @@ select { display: block; padding: 10px 12px; width: 100%; + height: 40px; border: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid; border-radius: var(--border-radius); color: color(var(--midgrey) l(-18%)); font-size: 1.6rem; + line-height: 1em; font-weight: 300; user-select: text; transition: border-color 0.15s linear; diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index 1bc20e7e59..5f595caa14 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -102,6 +102,7 @@ html { font-family: var(--font-family); font-size: 62.5%; line-height: 1.65; + letter-spacing: 0.2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs index 1bb7077e4f..afe7190bc6 100644 --- a/ghost/admin/app/templates/posts.hbs +++ b/ghost/admin/app/templates/posts.hbs @@ -5,58 +5,61 @@ {{#link-to "editor.new" class="gh-btn gh-btn-green" data-test-new-post-button=true}}New story{{/link-to}} -
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.
+ {{!-- START: Publish Button Template --}} +