mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Introducing new mobile header and more mobile nav components
This commit is contained in:
parent
5a1e3299f8
commit
12f78f22ce
9 changed files with 222 additions and 20 deletions
|
@ -8,6 +8,11 @@
|
|||
@include position(fixed, 0px 0px auto 0px);
|
||||
z-index: 9999;
|
||||
background: $darkgrey;
|
||||
|
||||
.thing,
|
||||
.thing2 {
|
||||
display: none; // hide until mobile
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for each item
|
||||
|
@ -31,13 +36,13 @@
|
|||
color: rgba(255,255,255,0.7);
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
@include transition(all 0.5s);
|
||||
@include transition(color 0.5s, background 0.5s);
|
||||
}
|
||||
.nav-item.active .nav-label,
|
||||
.nav-item:hover .nav-label {
|
||||
color: rgba(255,255,255,0.9);
|
||||
background: darken($darkgrey, 7%);
|
||||
@include transition(all 0.1s);
|
||||
@include transition(color 0.1s, background 0.1s);
|
||||
}
|
||||
|
||||
// Ghost branding
|
||||
|
@ -114,6 +119,7 @@
|
|||
|
||||
}//.user-menu
|
||||
|
||||
|
||||
//
|
||||
// Mobile
|
||||
// --------------------------------------------------
|
||||
|
@ -128,6 +134,10 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
|
||||
.thing, .thing2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
@ -153,6 +163,7 @@
|
|||
height: auto;
|
||||
padding: 15px;
|
||||
@include position(absolute, auto 0px 0px 0px);
|
||||
@include transition(color 0.5s, background 0.5s);
|
||||
|
||||
.nav-label {
|
||||
padding: 0;
|
||||
|
@ -180,7 +191,7 @@
|
|||
&:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
background: darken($darkgrey, 7%);
|
||||
@include transition(all 0.1s);
|
||||
@include transition(color 0.1s, background 0.1s);
|
||||
}
|
||||
&:hover .name {
|
||||
background: transparent;
|
||||
|
|
62
core/client/assets/sass/layouts/default.scss
Normal file
62
core/client/assets/sass/layouts/default.scss
Normal file
|
@ -0,0 +1,62 @@
|
|||
//
|
||||
// Main Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
// The <main> content wrapper
|
||||
.viewport {
|
||||
@include position(absolute, 0px 0px 0px 0px);
|
||||
overflow: hidden;
|
||||
|
||||
// TODO: move this to .global-nav-expanded class
|
||||
@media (max-width: 1025px) {
|
||||
@include transform(translate3d(260px, 0px, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
// The header bar, only visible below 1025px
|
||||
.page-header {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: $darkgrey;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
// Centered page heading
|
||||
h2 {
|
||||
display: block;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 0;
|
||||
padding: 0 15%;
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// The burger to expand .global-nav menu
|
||||
.menu-button {
|
||||
@include icon($i-menu, 18px) { line-height: 44px; }
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
}
|
|
@ -13,6 +13,33 @@ html {
|
|||
|
||||
body {
|
||||
width: 100%;
|
||||
-webkit-font-feature-settings: 'kern' 1;
|
||||
-moz-font-feature-settings: 'kern' 1;
|
||||
font-feature-settings: 'kern' 1;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #D6EDFF;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #D6EDFF;
|
||||
}
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
line-height: 1.15em;
|
||||
margin: 0 0 0.3em 0;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
margin: 0 0 1.7em 0;
|
||||
}
|
||||
|
||||
a, a:active {
|
||||
|
|
|
@ -32,3 +32,4 @@
|
|||
// Layouts - Individual application screens
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "layouts/default";
|
|
@ -5,13 +5,13 @@
|
|||
</a>
|
||||
|
||||
<a href="/" class="nav-item content active" href="#">
|
||||
<div class="nav-label">Content</div>
|
||||
<div class="nav-label"><i class="icon-content"></i> Content</div>
|
||||
</a>
|
||||
<a class="nav-item new-post" href="#">
|
||||
<div class="nav-label">New Post</div>
|
||||
<div class="nav-label"><i class="icon-add"></i> New Post</div>
|
||||
</a>
|
||||
<a class="nav-item settings" href="#">
|
||||
<div class="nav-label">Settings</div>
|
||||
<div class="nav-label"><i class="icon-settings2"></i> Settings</div>
|
||||
</a>
|
||||
<a class="nav-item thing" href="#">
|
||||
<div class="nav-label">Thing</div>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
{% include nav/global.html %}
|
||||
|
||||
<!-- Docs page -->
|
||||
<main id="gh-main" role="main">
|
||||
<main id="gh-main" class="viewport" role="main">
|
||||
{{content}}
|
||||
</main>
|
||||
|
||||
|
|
118
core/client/docs/dist/css/ghost-ui.css
vendored
118
core/client/docs/dist/css/ghost-ui.css
vendored
|
@ -589,7 +589,30 @@ html {
|
|||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
body {
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
-webkit-font-feature-settings: 'kern' 1;
|
||||
-moz-font-feature-settings: 'kern' 1;
|
||||
font-feature-settings: 'kern' 1; }
|
||||
|
||||
::-moz-selection {
|
||||
background: #D6EDFF; }
|
||||
|
||||
::selection {
|
||||
background: #D6EDFF; }
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
line-height: 1.15em;
|
||||
margin: 0 0 0.3em 0; }
|
||||
|
||||
p, ul, ol, dl {
|
||||
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
margin: 0 0 1.7em 0; }
|
||||
|
||||
a, a:active {
|
||||
text-decoration: none; }
|
||||
|
@ -630,6 +653,9 @@ a, a:active {
|
|||
left: 0px;
|
||||
z-index: 9999;
|
||||
background: #242628; }
|
||||
.global-nav .thing,
|
||||
.global-nav .thing2 {
|
||||
display: none; }
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
@ -649,17 +675,17 @@ a, a:active {
|
|||
color: rgba(255, 255, 255, 0.7);
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
transition: all 0.5s; }
|
||||
-webkit-transition: color 0.5s, background 0.5s;
|
||||
-moz-transition: color 0.5s, background 0.5s;
|
||||
transition: color 0.5s, background 0.5s; }
|
||||
|
||||
.nav-item.active .nav-label,
|
||||
.nav-item:hover .nav-label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: #131415;
|
||||
-webkit-transition: all 0.1s;
|
||||
-moz-transition: all 0.1s;
|
||||
transition: all 0.1s; }
|
||||
-webkit-transition: color 0.1s, background 0.1s;
|
||||
-moz-transition: color 0.1s, background 0.1s;
|
||||
transition: color 0.1s, background 0.1s; }
|
||||
|
||||
.ghost-logo {
|
||||
display: inline-block;
|
||||
|
@ -746,6 +772,8 @@ a, a:active {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto; }
|
||||
.global-nav .thing, .global-nav .thing2 {
|
||||
display: block; }
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
@ -769,7 +797,10 @@ a, a:active {
|
|||
top: auto;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px; }
|
||||
left: 0px;
|
||||
-webkit-transition: color 0.5s, background 0.5s;
|
||||
-moz-transition: color 0.5s, background 0.5s;
|
||||
transition: color 0.5s, background 0.5s; }
|
||||
.user-menu .nav-label {
|
||||
padding: 0;
|
||||
height: auto; }
|
||||
|
@ -788,11 +819,76 @@ a, a:active {
|
|||
.user-menu:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: #131415;
|
||||
-webkit-transition: all 0.1s;
|
||||
-moz-transition: all 0.1s;
|
||||
transition: all 0.1s; }
|
||||
-webkit-transition: color 0.1s, background 0.1s;
|
||||
-moz-transition: color 0.1s, background 0.1s;
|
||||
transition: color 0.1s, background 0.1s; }
|
||||
.user-menu:hover .name {
|
||||
background: transparent;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none; } }
|
||||
.viewport {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden; }
|
||||
@media (max-width: 1025px) {
|
||||
.viewport {
|
||||
-webkit-transform: translate3d(260px, 0px, 0px);
|
||||
-moz-transform: translate3d(260px, 0px, 0px);
|
||||
-ms-transform: translate3d(260px, 0px, 0px);
|
||||
-o-transform: translate3d(260px, 0px, 0px);
|
||||
transform: translate3d(260px, 0px, 0px); } }
|
||||
|
||||
.page-header {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #242628;
|
||||
overflow: hidden; }
|
||||
@media (min-width: 1025px) {
|
||||
.page-header {
|
||||
height: 60px;
|
||||
line-height: 60px; } }
|
||||
.page-header h2 {
|
||||
display: block;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 0;
|
||||
padding: 0 15%;
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden; }
|
||||
@media (min-width: 1025px) {
|
||||
.page-header h2 {
|
||||
height: 60px;
|
||||
line-height: 60px; } }
|
||||
|
||||
.menu-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff; }
|
||||
.menu-button:before {
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: -7%;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e005";
|
||||
font-size: 18px;
|
||||
line-height: 44px; }
|
||||
.menu-button:hover {
|
||||
text-decoration: none; }
|
||||
|
|
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -3,4 +3,7 @@ layout: default
|
|||
title: Ghost UI · Making publishing beautiful.
|
||||
---
|
||||
|
||||
test
|
||||
<header class="page-header">
|
||||
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||||
<h2>Home</h2>
|
||||
</header>
|
Loading…
Add table
Reference in a new issue