diff --git a/ghost/admin/app/styles/app.scss b/ghost/admin/app/styles/app.scss index 10c452a2fe..0840fde049 100644 --- a/ghost/admin/app/styles/app.scss +++ b/ghost/admin/app/styles/app.scss @@ -35,7 +35,6 @@ // Components: Groups of Patterns // -------------------------------------------------- -@import "components/navigation"; @import "components/modals"; @import "components/notifications"; @import "components/uploader"; diff --git a/ghost/admin/app/styles/components/navigation.scss b/ghost/admin/app/styles/components/navigation.scss deleted file mode 100644 index 41b784d829..0000000000 --- a/ghost/admin/app/styles/components/navigation.scss +++ /dev/null @@ -1,397 +0,0 @@ -// ------------------------------------------------------------ -// Global Navigation -// -// Styles for the main top bar & mobile navigation -// -// * Main wrapper -// * Nav Items -// * Ghost branding -// * User Menu -// * Mobile -// ------------------------------------------------------------ - -// -// Main wrapper -// -------------------------------------------------- - -.global-nav { - height: 60px; - position: fixed; - top: 0; - right: 0; - bottom: auto; - left: 0; - z-index: 800; - background: $darkgrey; - transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); - - i:before { - display: inline-block; - width: 16px; - } - - // This selector ends up being `body.settings-menu-expanded .global-nav` - body.settings-menu-expanded & { - transform: translate3d(-350px, 0px, 0px); - } - - ::selection { - background: none; - } -} - - -// -// Nav Items -// -------------------------------------------------- - -// Wrapper for each item -.nav-item { - position: relative; - display: block; - float: left; - height: 60px; - padding-right: 10px; - font-size: 1.1rem; - letter-spacing: 1px; - font-weight: 200; - line-height: 1.1em; -} - -// What looks like the actual button
-.nav-label { - height: 33px; - margin-top: 14px; - padding: 10px 12px; - color: rgba(255,255,255,0.7); - text-transform: uppercase; - border-radius: 4px; - white-space: nowrap; - transition: color 0.5s, background 0.5s; -} -.nav-item.active .nav-label, -.nav-item:focus .nav-label, -.nav-item:hover .nav-label, -.nav-item:active .nav-label { - color: #fff; - background: darken($darkgrey, 9%); - transition: color 0.1s, background 0.1s; -} - - -// -// Ghost branding -// -------------------------------------------------- - -.ghost-logo { - width: 60px; - padding-right: 0; - text-align: center; - color: lighten($grey, 20%); - font-size: 1.2rem; - line-height: 1em; - transition: color 0.5s; - - span { - display: none; - } -} -.ghost-logo:hover, -.ghost-logo:focus { - color: $lightgrey; - transition: color 0.1s; - - .nav-label { - background: transparent; - } -} - -// -// Help Menu -// -------------------------------------------------- - -.help-menu { - padding-right: 0; - float: right; - cursor: pointer; - - .nav-label { - margin: 0; - padding: 0 6px 0 12px; - background: none !important; - } -} - -.help-button { - height: 30px; - width: 30px; - border: $midgrey 1px solid; - margin-top: 15px; - text-align: center; - font-size: 1.6rem; - line-height: 30px; - border-radius: 100%; - transition: border 0.5s; -} - -.help-menu:hover { - .help-button { - border: $lightgrey 1px solid; - transition: border 0.3s; - } -} - -.help-menu .dropdown { - right: 77px; - left: auto; - - .dropdown-menu { - min-width: 200px; - } - - &.fade-in-scale { - animation-duration: 0.1s; - } - - &.fade-out { - animation-duration: 0.01s; - } -} - - -// -// User Menu -// -------------------------------------------------- - -// Right hand dropdown -.user-menu { - float: right; - padding: 0; - margin: 0; - cursor: pointer; - - .nav-label { - margin: 0; - padding: 0 12px; - background: none !important; - height: 60px; - } - - // Profile picture - .image { - @include circular-image(30px) { - float: left; - margin: 15px 10px 0 0; - } - } - - // Descriptive label for mobile menu - .name { - float: right; - height: 33px; - margin-top: 14px; - padding: 10px 12px; - border-radius: 4px; - max-width: 300px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - transition: background 0.5s; - - small { - display: none; // hide until mobile - font-size: 11px; - text-transform: none; - letter-spacing: 0; - color: rgba(255,255,255,0.4); - margin-top: 0; - line-height: 11px; - } - } - - &:hover .name { - color: rgba(255,255,255,0.9); - background: darken($darkgrey, 7%); - transition: background 0.1s; - } - - .dropdown { - position: fixed; - top: 50px; - right: 15px; - left: auto; - - &.fade-in-scale { - animation-duration: 0.1s; - } - - &.fade-out { - animation-duration: 0.01s; - } - - .dropdown-menu { - min-width: 180px; - position: absolute; - top: 0; - right: 0; - left: auto; - } - } -}//.user-menu - - -// -// Mobile -// -------------------------------------------------- - -@media (max-width: 900px) { - - // Fixed width, position left - .global-nav { - z-index: 20; // below the .viewport when collapsed - width: 260px; - height: auto; - top: 0; - bottom: 0; - left: 0; - background: darken($darkgrey, 7%); - overflow: auto; - -webkit-overflow-scrolling: touch; - - transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect - transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); - - body.global-nav-expanded & { - transform: translate3d(0, 0px, 0px); - } - } - - .nav-item { - position: relative; - float: none; - height: auto; - margin: 0; - padding: 0; - border-bottom: $darkgrey 1px solid; - } - - // Convert to full-width mobile-friendly - .nav-label { - display: block; - height: 44px; - line-height: 44px; - margin: 0; - padding: 0 15px; - border-radius: 0; - } - .nav-item.active .nav-label { - color: #fff !important; - background: darken($darkgrey, 4%); - - i { - color: #fff; - } - } - .nav-item:hover .nav-label { - color: rgba(255,255,255,0.9); - background: $darkgrey; - } - - .ghost-logo { - display: block; - width: 100%; - font-size: 1.1rem; - line-height: 44px; - text-align: left; - - span { - display: inline; - } - } - - .help-menu { - display: none; - } - - // Drop it to the bottom of the menu - .user-menu { - position: absolute; - top: auto; - right: 0; - bottom: 0; - left: 0; - height: auto; - padding: 0; - border-bottom: none; - border-top: $darkgrey 1px solid; - transition: color 0.5s, background 0.5s; - - .nav-label { - padding: 15px; - height: auto; - } - - .image { - margin: 2px 10px 0 0; - } - - .name { - float: left; - margin: 0; - max-width: 300px; - padding: 0 0 5px 0; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 19px; - overflow: hidden; - - small { - display: block; - } - } - - // Hide the user-menu icons - i { - display: none; - } - - &:hover { - color: rgba(255,255,255,0.9); - background: $darkgrey; - transition: color 0.1s, background 0.1s; - - .name { - background: transparent; - transition: none; - } - } - - .dropdown { - position: absolute; - top: 100%; - right: 100%; - - .dropdown-menu { - top: auto; - right: auto; - bottom: calc(100% + 80px); - left: 10px; - } - } - }//.user-menu - - body.global-nav-expanded & { - - .nav-cover { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 600; - transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); - transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect - }//.nav-cover - }//body.global-nav-expanded - -}//@media (max-width: 900px) diff --git a/ghost/admin/app/styles/components/settings-menu.scss b/ghost/admin/app/styles/components/settings-menu.scss index fad80a0a4d..285451fa80 100644 --- a/ghost/admin/app/styles/components/settings-menu.scss +++ b/ghost/admin/app/styles/components/settings-menu.scss @@ -20,8 +20,8 @@ bottom: 0; z-index: 500; width: 350px; - border: #efefef 1px solid; - background: $lightestgrey; + border: #e1e1e1 1px solid; + background: #fff; overflow: hidden; transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); diff --git a/ghost/admin/app/styles/layouts/editor.scss b/ghost/admin/app/styles/layouts/editor.scss index a215a317bf..bde3fa1bce 100644 --- a/ghost/admin/app/styles/layouts/editor.scss +++ b/ghost/admin/app/styles/layouts/editor.scss @@ -214,7 +214,7 @@ } @media (min-width: 1001px) { - padding: 62px 20px 36px 20px; + padding: 42px 20px 36px 20px; } } @@ -235,7 +235,7 @@ right: 0; bottom: 0; left: 0; - padding: 60px 40px 37px 40px; + padding: 40px 20px 37px 20px; overflow: auto; -webkit-overflow-scrolling: touch; word-break: break-word; @@ -247,9 +247,6 @@ padding: 15px; } - @media (max-width: 1000px) { - padding-top: 20px; - } } // Special case, when scrolling, add shadows to content headers. @@ -596,6 +593,9 @@ body.zen { transition: color 0.15s linear; } + &:hover { + cursor: pointer; + } } .publish-bar-inner { diff --git a/ghost/admin/app/styles/layouts/main.scss b/ghost/admin/app/styles/layouts/main.scss index 62365b53ed..1f17cedc1b 100644 --- a/ghost/admin/app/styles/layouts/main.scss +++ b/ghost/admin/app/styles/layouts/main.scss @@ -162,12 +162,76 @@ .gh-nav-footer { flex-shrink: 0; + display: flex; align-items: center; height: 40px; - padding: 0 20px; border-top: #E1E1E1 1px solid; } +.gh-nav-footer-sitelink { + flex-grow: 1; + display: flex; + padding: 12px; + font-size: 1.3rem; + line-height: 1.2em; + color: $midgrey; + + i { + margin-left: 5px; + font-size: 1rem; + } + + &:hover { + color: $blue; + } +} + +// +// Help Menu +// -------------------------------------------------- + +.gh-help-menu { + display: flex; + align-items: center; + padding: 5px 10px; + cursor: pointer; + border-left: #e1e1e1 1px solid; +} + +.gh-help-button { + padding: 0 5px; + text-align: center; + font-size: 1.4rem; + line-height: 1.2em; + color: $midgrey; + transition: all 0.5s; +} + +.gh-help-menu:hover { + .gh-help-button { + color: $blue; + transition: all 0.3s; + } +} + +.gh-help-menu .dropdown { + right: 112px; + bottom: 215px; + + .dropdown-menu { + min-width: 200px; + } + + &.fade-in-scale { + animation-duration: 0.1s; + } + + &.fade-out { + animation-duration: 0.01s; + } +} + + //-------------------------------------------------------------- .gh-view { @@ -187,6 +251,8 @@ } .view-title { + display: flex; + align-items: baseline; margin: 0; padding: 0; font-size: 2rem; @@ -195,6 +261,17 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + + a { + color: inherit; + &:hover { color: $blue; } + } + + i { + margin: 0 10px; + color: #818181; + font-size: 1.4rem; + } } .view-actions { diff --git a/ghost/admin/app/styles/layouts/user.scss b/ghost/admin/app/styles/layouts/user.scss index 2099804921..9ddda12769 100644 --- a/ghost/admin/app/styles/layouts/user.scss +++ b/ghost/admin/app/styles/layouts/user.scss @@ -18,6 +18,7 @@ .user-actions-cog { padding: 9px 11px; + margin-right: 10px; } .user-actions-menu { @@ -235,4 +236,4 @@ text-transform: uppercase; text-decoration: none; transition: opacity 0.3s ease; -} \ No newline at end of file +} diff --git a/ghost/admin/app/templates/-nav-menu.hbs b/ghost/admin/app/templates/-nav-menu.hbs index 3a7887c5e0..fd98f46e03 100644 --- a/ghost/admin/app/templates/-nav-menu.hbs +++ b/ghost/admin/app/templates/-nav-menu.hbs @@ -40,6 +40,24 @@ diff --git a/ghost/admin/app/templates/settings/users/user.hbs b/ghost/admin/app/templates/settings/users/user.hbs index 9c8ae8397b..c2bd80d422 100644 --- a/ghost/admin/app/templates/settings/users/user.hbs +++ b/ghost/admin/app/templates/settings/users/user.hbs @@ -1,5 +1,5 @@
-

Team » {{user.name}}

+

{{#link-to "settings.users"}}Team{{/link-to}} {{user.name}}

{{#if view.userActionsAreVisible}} @@ -17,7 +17,7 @@
-
+