Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Merge branch '0.8'

Browse source
This commit is contained in:
Paul Adam Davis 2014-06-24 21:21:58 +01:00
commit a9a00f9b4a
55 changed files with 2486 additions and 3396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -1,5 +1,5 @@
source 'https://rubygems.org'
gem 'bourbon', "~> 3.1.8"
gem 'bourbon', "~> 4.0.1"
gem "sass", "~> 3.3.1"

8
Gemfile.lock
View file

@ -1,15 +1,15 @@
GEM
remote: https://rubygems.org/
specs:
bourbon (3.1.8)
sass (>= 3.2.0)
bourbon (4.0.1)
sass (~> 3.3)
thor
sass (3.3.1)
thor (0.18.1)
thor (0.19.1)
PLATFORMS
ruby
DEPENDENCIES
bourbon (~> 3.1.8)
bourbon (~> 4.0.1)
sass (~> 3.3.1)

136
code-injection.html
View file

@ -1,136 +0,0 @@
<!doctype html>
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ghost Admin</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta http-equiv="cleartype" content="on" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Ghost" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="/ghost/img/touch-icon-iphone.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/ghost/img/touch-icon-ipad.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/ghost/img/small.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/ghost/img/medium.png?v=f0332a6f54" />
<meta name="application-name" content="Ghost" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-square70x70logo" content="/ghost/img/small.png?v=f0332a6f54" />
<meta name="msapplication-square150x150logo" content="/ghost/img/medium.png?v=f0332a6f54" />
<meta name="msapplication-square310x310logo" content="/ghost/img/large.png?v=f0332a6f54" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
<link rel="stylesheet" href="/Users/John/Sites/Ghost-UI/dist/css/ghost-ui.css" />
</head>
<body class="settings" data-ember-extension="1">
<header id="global-header" class="navbar">
<a class="ghost-logo" href="/" data-off-canvas="left" title="/">
<span class="hidden">Ghost </span>
</a>
<nav id="global-nav" role="navigation">
<ul id="main-menu">
<li class="content"><a href="/ghost/">Content</a></li>
<li class="editor"><a href="/ghost/editor/">New Post</a></li>
<li class="settings active"><a href="/ghost/settings/">Settings</a></li>
<li id="usermenu" class="usermenu subnav">
<a href="#" data-toggle="ul" class="dropdown">
<img class="avatar" src="//www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404" alt="Avatar">
<span class="name">John O'Nolan</span>
</a>
<ul class="overlay" style="display: none;">
<li class="usermenu-profile"><a href="/ghost/settings/user/">Your Profile</a></li>
<li class="divider"></li>
<li class="usermenu-help"><a href="http://ghost.org/forum/">Help / Support</a></li>
<li class="divider"></li>
<li class="usermenu-signout"><a href="/ghost/signout/">Sign Out</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<aside id="notifications" class="notifications" style="display: block; height: auto;">
</aside>
<div class="wrapper">
<aside class="settings-sidebar" role="complementary" data-apps="false"><header>
<h1 class="title">Settings</h1>
</header>
<nav class="settings-menu">
<ul>
<li class="code active"><a href="#code">Code Injection</a></li>
</ul>
</nav></aside>
<section class="settings-content active" data-filestorage="true" id="code" style=""><header>
<button class="button-back">Back</button>
<h2 class="title">Code Injection</h2>
<section class="page-actions">
<button class="button-save">Save</button>
</section>
</header>
<section class="content">
<!--this is it-->
<p>Ghost allows you to inject code to the top and bottom of your template files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta data</p>
<section class="header-injection">
<header class="hgroup">
<h3>Blog Header</h3>
<p>Code here will be injected to the <code>{{ghost_head}}</code> helper at the top of each page of your blog</p>
</header>
<textarea id="header-injection"></textarea>
</section>
<section class="footer-injection">
<header class="hgroup">
<h3>Blog Footer</h3>
<p>Code here will be injected to the <code>{{ghost_foot}}</code> helper at the bottom of each page of your blog</p>
</header>
<textarea id="footer-injection"></textarea>
</section>
<!--this is no longer it-->
</section>
</section>
</div>
</main>
<div id="modal-container"></div>
<div class="modal-background fade"></div>
<script src="/ghost/scripts/vendor.js?v=4e698dfc50"></script><script src="/ghost/scripts/helpers.js?v=4e698dfc50"></script><script src="/ghost/scripts/templates.js?v=4e698dfc50"></script><script src="/ghost/scripts/models.js?v=4e698dfc50"></script><script src="/ghost/scripts/views.js?v=4e698dfc50"></script>
<script type="text/javascript" src="chrome-extension://bmdblncegkenkacieihfhpjfppoconhi/in-page-script.js"></script></body>
</html>

4
core/client/_config.yml
View file

@ -1,6 +1,6 @@
# Dependencies
markdown: rdiscount
pygments: true
highlighter: pygments
# Permalinks
permalink: pretty
@ -9,7 +9,7 @@ permalink: pretty
source: ./docs
destination: ./_gh_pages
host: 0.0.0.0
port: 9001
port: 9008
baseurl: /
url: http://localhost:9001
encoding: UTF-8

60
core/client/assets/sass/helpers/mixins.scss Normal file
View file

@ -0,0 +1,60 @@
/*
* Mixins
*
* Table of Contents
*
* Baseline
* Gradients
*/
/* ==========================================================================
Baseline
========================================================================== */
@mixin baseline {
margin: 1.6em 0;
}
/* ==========================================================================
Gradients
========================================================================== */
@mixin gradient($color1: #aaa, $color2: none) {
@if $color2 == 'none' {
background-color: lighten($color1, 10%);
background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: -ms-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: linear-gradient(bottom, $color1, lighten($color1, 10%));
} @else {
background-color: $color2;
background-image: -webkit-linear-gradient(bottom, $color1, $color2);
background-image: -moz-linear-gradient(bottom, $color1, $color2);
background-image: -ms-linear-gradient(bottom, $color1, $color2);
background-image: linear-gradient(to top, $color1, $color2);
}
}
// The same as the above, but with the colours reversed.
@mixin inversegradient($color1: #aaa, $color2: none) {
@if $color2 == 'none' {
background-color: $color1;
background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: -moz-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: linear-gradient(bottom, lighten($color1, 10%), $color1);
} @else {
background-color: $color1;
background-image: -webkit-linear-gradient(bottom, $color2, $color1);
background-image: -moz-linear-gradient(bottom, $color2, $color1);
background-image: -ms-linear-gradient(bottom, $color2, $color1);
background-image: linear-gradient(to top, $color2, $color1);
}
}

66
core/client/assets/sass/helpers/variables.scss Normal file
View file

@ -0,0 +1,66 @@
/*
* Variables used in Ghost-UI
*
* Table of Contents
*
* Misc Default Values
* Pixel Densities
* Colours
* Typography
*/
/* ==========================================================================
Misc Default Values
========================================================================== */
$rounded: 2px;
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
$default-transition-duration: 0.3s;
/* ==========================================================================
Pixel Densities
========================================================================== */
$at2x: 2 device-pixel-ratio;
/* ==========================================================================
Colours
========================================================================== */
$darkgrey: #242628;
$grey: #35393b;
$midgrey: #7d878a;
$lightgrey: #e2edf2;
$brown: #aaa9a2;
$midbrown: #c0bfb6;
$lightbrown: #edece4;
$blue: #5BA4E5;
$red: #e25440;
$orange: #F2A925;
$green: #9FBB58;
$list-colours:
('darkgrey' $darkgrey)
('grey' $grey)
('midgrey' $midgrey)
('lightgrey' $lightgrey)
('brown' $brown)
('midbrown' $midbrown)
('lightbrown' $lightbrown)
('blue' $blue)
('red' $red)
('orange' $orange)
('green' $green);
/* ==========================================================================
Typography
========================================================================== */
$font-family: 'Open Sans', sans-serif;
$font-family-sans: $font-family;
$font-family-serif: serif;
$font-family-mono: Inconsolata, monospace;

140
core/client/assets/sass/layouts/auth.scss
View file

@ -1,6 +1,18 @@
//
// Auth - Login / Signup / Reset Password
// --------------------------------------------------
/*
* Auth layout for login, signup & reset password
*
* Table of Contents
*
* Globals
* Login
* Signup and Reset
* Forgotten Password
*/
/* ==========================================================================
Globals
========================================================================== */
.ghost-login,
.ghost-signup,
@ -9,7 +21,7 @@
color: $midgrey;
background: $darkgrey;
@include breakpoint($mobile) {
@media (max-width: 400px) {
background: $darkgrey;
}
@ -19,9 +31,9 @@
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
}
}
}//.ghost-login
}
.login-box,
.signup-box,
@ -33,7 +45,7 @@
padding: 0;
display: table;
@include breakpoint(630px) {
@media (max-width: 630px) {
max-width: 264px;
text-align: center;
}
@ -41,33 +53,36 @@
/* =============================================================================
1. Login
Login
============================================================================= */
.login-form {
@include box-sizing(border-box);
max-width: 530px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
@media (max-width: 630px) {
max-width: 264px;
}
div { // Yes. Really.
position:relative;
margin:0 0 5px 0;
// TODO: This ^ can be improved 1000%
position: relative;
margin: 0 0 5px 0;
background: lighten($darkgrey, 10%);
float: left;
@include breakpoint(630px) { margin-bottom: 1em; }
@media (max-width: 630px) {
margin-bottom: 1em;
}
}
// TODO: make more specific
input {
display:inline-block;
clear:both;
margin:0;
display: inline-block;
clear: both;
margin: 0;
padding: 8px 0 8px 8px;
width: 216px;
position: relative;
@ -79,31 +94,31 @@
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@media (max-width: 630px) {
width:264px;
@include transition(none);
}
&:focus {
border: none;
background: lighten($darkgrey, 15%);
background: lighten($darkgrey, 15%);
}
}
.email-wrap {
position:relative;
position: relative;
@include icon($i-mail, 12px) {
position:absolute;
bottom:11px;
left:8px;
z-index:100;
position: absolute;
bottom: 11px;
left: 8px;
z-index: 100;
}
margin-right: 3px;
border-radius: 2px 0 0 2px;
@include breakpoint(630px) {
margin-right:0;
@media (max-width: 630px) {
margin-right: 0;
border-radius: 2px;
}
@ -116,14 +131,14 @@
.password-wrap {
position:relative;
@include icon($i-lock, 10px) {
position:absolute;
bottom:12px;
left:11px;
z-index:100;
position: absolute;
bottom: 12px;
left: 11px;
z-index: 100;
}
border-radius: 0 2px 2px 0;
@include breakpoint(630px) {
@media (max-width: 630px) {
border-radius: 2px;
}
@ -143,15 +158,15 @@
min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
@include breakpoint(630px) {
margin:0;
@media (max-width: 630px) {
margin: 0;
width: 100%;
margin-bottom: 1em;
}
}
.meta {
clear:both;
clear: both;
color: $midgrey;
}
@ -159,40 +174,41 @@
color: darken($midgrey, 10%);
font-size: 0.9em;
&:hover {
&:hover {
color: lighten($midgrey, 5%);
text-decoration: none;
}
}
}
} // .login-form
/* =============================================================================
2. Signup and Reset
Signup and Reset
============================================================================= */
.signup-form, .reset-form {
@include box-sizing(border-box);
.signup-form,
.reset-form {
max-width: 280px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
@media (max-width: 630px) {
width: 264px;
}
div { // Yes. Really.
position:relative;
margin:0 0 1em 0;
// TODO: Same here as above
position: relative;
margin: 0 0 1em 0;
background: lighten($darkgrey, 10%);
float: left;
display: table;
}
input {
margin:0;
margin: 0;
width: 280px;
padding: 8px 10px;
position: relative;
@ -202,22 +218,24 @@
font-weight: 200;
background: transparent;
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@include transition(none);
@media (min-width: 631px) {
@include transition(background ease 0.25s);
}
@media (max-width: 630px) {
width: 264px;
}
&:focus {
&:focus {
border: none;
background: lighten($darkgrey, 15%);
background: lighten($darkgrey, 15%);
}
}
.name-wrap {
position:relative;
position: relative;
border-radius: 2px;
.name {
@ -226,7 +244,7 @@
}
.email-wrap {
position:relative;
position: relative;
border-radius: 2px;
.email {
@ -235,7 +253,7 @@
}
.password-wrap {
position:relative;
position: relative;
border-radius: 2px;
.password {
@ -244,7 +262,6 @@
}
button {
@include box-sizing(border-box);
width: 100%;
height: 36px;
margin: 0 0 1em 0;
@ -254,29 +271,29 @@
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
}
} // .signup-form, .reset-form
/* =============================================================================
3. Forgotten
Forgotten Password
============================================================================= */
.forgotten-form {
@include box-sizing(border-box);
max-width: 280px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
div { // Yes. Really.
position:relative;
margin:0 0 1em 0;
// TODO: Again, can make this better.
position: relative;
margin: 0 0 1em 0;
background: lighten($darkgrey, 10%);
float: left;
}
input {
margin:0;
margin: 0;
padding: 8px 10px;
position: relative;
border: none;
@ -286,10 +303,10 @@
background: transparent;
box-shadow: none;
@include transition(background ease 0.25s);
&:focus {
border: none;
background: lighten($darkgrey, 15%);
background: lighten($darkgrey, 15%);
}
}
@ -305,7 +322,6 @@
}
button {
@include box-sizing(border-box);
width: 100%;
height: 36px;
margin: 0 0 1em 0;
@ -315,4 +331,4 @@
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
}
}
} // .forgotten-form

158
core/client/assets/sass/layouts/content.scss
View file

@ -1,6 +1,16 @@
//
// Content Management
// --------------------------------------------------
/*
* Content screen styles
*
* Table of Contents
*
* Content Management
* Preview
*/
/* ==========================================================================
Content Management
========================================================================== */
.manage {
.content-view-container {
@ -8,78 +18,78 @@
height: 100%;
width: 100%;
@include breakpoint($tablet) {
@media (max-width: 800px) {
overflow-x: hidden;
}
}
} // .content-view-container
.content-list {
@include box-sizing(border-box);
width: 35%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
left:0;
border-right:$lightbrown 2px solid;
bottom: 0;
top: 0;
left: 0;
border-right: $lightbrown 2px solid;
background: #fff;
box-shadow: $shadow;
@include breakpoint($tablet) {
width:auto;
right:0;
@media (max-width: 800px) {
width: auto;
right: 0;
z-index: 500;
border:none;
border: none;
}
.content-filter {
position:relative;
position: relative;
z-index: 300;
> a {
padding: 5px;
margin-left:-5px;
margin-left: -5px;
}
.menu-drop {
display: block;
}
}
} // .content-filter
.button-add {
@include icon($i-add);
position:absolute;
top:10px;
right:15px;
position: absolute;
top: 10px;
right: 15px;
z-index: 700;
color: #fff;
padding-left:5px;
}
padding: 3px 4px 3px 5px;
min-height: 0;
} // .button-add
.content-list-content {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
padding-top: 40px;
}
} // .content-list-content
.entry-title {
font-size: 1.4em;
line-height:1.1em;
margin-bottom:0.5em;
line-height: 1.1em;
margin-bottom: 0.5em;
font-weight: normal;
}
.views {
@include icon($i-stats, 10px, $brown);
float:right;
float: right;
text-align: right;
margin-left:15px;
@include breakpoint($tablet) {
float:none;
margin-left: 15px;
@media (max-width: 800px) {
float: none;
}
}
@ -100,40 +110,50 @@
ol {
list-style: none;
padding:0;
margin:0;
padding: 0;
margin: 0;
border-top: $lightbrown 1px solid;
li {
margin:0;
margin: 0;
padding: 0;
border-bottom: $lightbrown 1px solid;
position:relative;
position: relative;
a {
display:block;
padding:20px 15px;
display: block;
padding: 20px 15px;
color: $brown;
@include breakpoint($mobile) { padding:15px; }
@include breakpoint($tablet) { padding-right: 40px; }
@media (max-width: 400px) {
padding: 15px;
}
@media (max-width: 800px) {
padding-right: 40px;
}
@include icon-after($i-chevron) {
position:absolute;
top:50%;
margin-top:-6px;
right:15px;
position: absolute;
top: 50%;
margin-top: -6px;
right: 15px;
}
@media (min-width: 801px) {
&:after {
display: none;
}
}
@include breakpoint($biggerthan-tablet) { &::after {display: none} }
&:hover { text-decoration: none; }
&:hover {
text-decoration: none;
}
}
} // a
}//li
} // li
li.active {
@include breakpoint($biggerthan-tablet) {
@media (min-width: 801px) {
// only apply active styles on larger devices
border-bottom: lighten($midgrey, 40%) 1px solid;
@ -148,8 +168,12 @@
@include transition(all 0.4s ease);
}
.entry-title { font-weight: bold; }
.entry-meta { color: $darkgrey; }
.entry-title {
font-weight: bold;
}
.entry-meta {
color: $darkgrey;
}
.views {
@include icon($i-stats, 10px, $darkgrey);
@ -158,18 +182,20 @@
}
}
}//li.active
}
} // li.active
} // ol
}//.content-list
} // .content-list
} // .manage
/* =============================================================================
Preview
============================================================================= */
.manage {
.content-preview {
@include box-sizing(border-box);
width: 65%;
padding: 15px;
position: absolute;
@ -179,7 +205,7 @@
border-left:$lightbrown 2px solid;
background: #fff;
box-shadow: $shadow;
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: auto;
left: 100%;
right: -100%;
@ -220,7 +246,7 @@
max-width: 700px;
margin:0 auto;
}
}
} // .content-preview-content
.post-controls {
float:right;
@ -244,7 +270,7 @@
height:auto;
}
}//.preview-post
} // .preview-post
.no-posts-box {
position: relative;
@ -253,7 +279,7 @@
padding: 0px;
display: table;
z-index: 600;
@include breakpoint($tablet) {
@media (max-width: 800px) {
position: fixed;
top: 45%;
left: 50%;
@ -263,7 +289,7 @@
vertical-align: middle;
display: table-cell;
text-align: center;
@include breakpoint($tablet) {
@media (max-width: 800px) {
display: block;
position: relative;
left: -50%;
@ -274,6 +300,8 @@
font-weight: 200;
font-size: 2em;
}
}
}//.no-posts-box
}//.manage
} // ,no-posts
} // .no-posts-box
} // .manage

115
core/client/assets/sass/layouts/editor.scss
View file

@ -1,11 +1,25 @@
//
// The Editor
// --------------------------------------------------
/*
* Editor screen styles
*
* Table of Contents
*
* Editor
* Post Preview Content
* Full Screen Mode
* Publish Bar
* Markdown Help Modal
* CodeMirror
*/
/* ==========================================================================
Editor
========================================================================== */
.editor {
.notifications {
@include breakpoint($biggerthan-mobile) {
@media (min-width: 401px) {
bottom: 40px;
}
}
@ -13,12 +27,12 @@
// The main post title
.entry-title {
@extend .box;
height: 53px;
height: 57px;
padding: 2px 15px;
margin-bottom: 5px;
position: relative;
@include breakpoint($mobile) {
@media (max-width: 400px) {
box-shadow: none;
}
@ -49,7 +63,6 @@
// The visual styles for both panels
.entry-markdown, .entry-preview {
@include box-sizing(border-box);
width: 50%;
padding: 15px;
position: absolute;
@ -58,12 +71,12 @@
background: #fff;
box-shadow: $shadow;
@include breakpoint($mobile) {
@media (max-width: 400px) {
box-shadow: none;
}
// Convert all content areas to small boxes
@include breakpoint($netbook) {
@media (max-width: 1000px) {
top: 109px;
left: 0;
right: 0;
@ -81,7 +94,7 @@
// Turn headers into tabs which act as links
// both headers set to grey/inactive colour
@include breakpoint($netbook) {
@media (max-width: 1000px) {
cursor: pointer;
width: 50%;
border-right: $lightbrown 2px solid;
@ -135,7 +148,7 @@
// Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
&.active header {
@include breakpoint($netbook) {
@media (max-width: 1000px) {
cursor: auto;
color: $brown;
background: #fff;
@ -147,7 +160,7 @@
}
// Hide markdown icon + wordcount when we hit mobile
@include breakpoint($mobile) {
@media (max-width: 400px) {
.markdown-help,
.entry-word-count {
display: none;
@ -204,12 +217,12 @@
.CodeMirror-lines {
padding: 65px 0 40px 0; /* Vertical padding around content */
@include breakpoint($netbook) {padding-top: 25px;}
@include breakpoint($mobile) {padding: 15px 0;}
@media (max-width: 1000px) {padding-top: 25px;}
@media (max-width: 400px) {padding: 15px 0;}
}
.CodeMirror pre {
padding: 0 40px; /* Horizontal padding of content */
@include breakpoint($mobile) {padding: 0 15px;}
@media (max-width: 400px) {padding: 0 15px;}
}
.cm-header {
@ -242,7 +255,7 @@
.entry-preview {
// Align the tab of entry-preview on the right
.floatingheader {
@include breakpoint($netbook) {
@media (max-width: 1000px) {
right: 0;
left: auto;
border-right: none;
@ -264,8 +277,12 @@
cursor: default;
// Tweak padding for smaller screens
@include breakpoint($netbook) {padding-top: 20px;}
@include breakpoint($mobile) {padding: 15px;}
@media (max-width: 1000px) {
padding-top: 20px;
}
@media (max-width: 400px) {
padding: 15px;
}
}
}
@ -273,24 +290,26 @@
.scrolling {
.floatingheader {
@include breakpoint($netbook) {
@media (max-width: 1000px) {
box-shadow: none;
}
&::before,
&::after {
@include breakpoint($netbook) {display: none;}
@media (max-width: 1000px) {
display: none;
}
}
}
.CodeMirror-scroll,
.entry-preview-content {
@include breakpoint($netbook) {
@media (max-width: 1000px) {
box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
}
}
}
}//.editor
} // .editor
/* =============================================================================
@ -310,7 +329,7 @@
}
p {
margin: 1.2em 0 1.6em;
&:first-child {
&:first-of-type {
margin-top: 0;
}
}
@ -362,16 +381,26 @@
body.zen {
background: lighten($lightbrown, 3%);
.usermenu {display: none;}
#global-header, #publish-bar {
.usermenu {
display: none;
}
#global-header,
#publish-bar {
opacity: 0;
height: 0;
overflow: hidden;
@include transition(all 0.5s ease-out);
}
main {top: 15px;@include transition(all 0.5s ease-out);}
.entry-markdown, .entry-preview {bottom: 0;@include transition(all 0.5s ease-out);}
main {
top: 15px;
@include transition(all 0.5s ease-out);
}
.entry-markdown,
.entry-preview {
bottom: 0;
@include transition(all 0.5s ease-out);
}
}
@ -381,7 +410,6 @@ body.zen {
============================================================================= */
#publish-bar {
@include box-sizing(border-box);
height: 40px;
padding: 0;
color: $midgrey;
@ -394,7 +422,9 @@ body.zen {
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
@include transform(translateZ(0));
@include breakpoint($netbook) {font-weight: normal;}
@media (max-width: 1000px) {
font-weight: normal;
}
.post-settings {
&:hover,
@ -418,7 +448,9 @@ body.zen {
border-top: rgba(255,255,255,0.4) 1px solid;
}
.button-link { border-top: none; }
.button-link {
border-top: none;
}
.options {
width: 30px;
@ -441,7 +473,7 @@ body.zen {
bottom: 140%;
right: -3%;
a{
a {
font-size: 14px;
}
}
@ -461,7 +493,8 @@ body.zen {
width: 281px;
}
.tag-label, .tag-label.touch {
.tag-label,
.tag-label.touch {
color: #fff;
}
@ -498,7 +531,7 @@ body.zen {
z-index: 9999;
pointer-events: none;
@include breakpoint($mobile) {
@media (max-width: 400px) {
right: 161px;
}
}
@ -510,7 +543,7 @@ body.zen {
width: auto;
max-width: 80%;
max-width: calc(100% - 320px);
height: 26px;
height: 22px;
padding-left: 5px;
padding-bottom: 20px;
overflow-x: auto;
@ -519,8 +552,7 @@ body.zen {
white-space: nowrap;
@include transition(width 0.2s linear);
@include breakpoint($mobile) {
@include box-sizing(border-box);
@media (max-width: 400px) {
display: block;
width: 115px;
max-width: inherit;
@ -567,15 +599,13 @@ body.zen {
@include transition;
}
display: inline;
margin-right: 5px;
margin-right: 2px;
padding: 0 5px;
color: $lightgrey;
white-space: nowrap;
background: lighten($grey, 15%);
border-radius: $rounded;
box-shadow:
rgba(255,255,255,0.2) 0 1px 0 inset,
#000 0 1px 3px;
box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, #000 0 1px 3px;
@include user-select(none);
@ -597,9 +627,7 @@ body.zen {
li.selected{
background: $blue;
box-shadow:
rgba(255,255,255,0.2) 0 1px 0 inset,
rgba(0,0,0,0.5) 0 1px 5px;
box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, rgba(0,0,0,0.5) 0 1px 5px;
}
li a {
@ -615,7 +643,6 @@ body.zen {
}
#entry-controls {
@include box-sizing(border-box);
display: inline-block;
position: relative;
padding: 0;

25
core/client/assets/sass/layouts/errors.scss
View file

@ -1,6 +1,15 @@
//
// Error Pages
// --------------------------------------------------
/*
* Error page styles
*
* Table of Contents
*
* Error pages
*/
/* ==========================================================================
Error pages
========================================================================== */
.error-content {
max-width: 530px;
@ -9,7 +18,7 @@
display: table;
height: 100%;
@include breakpoint(630px) {
@media (max-width: 630px) {
max-width: 264px;
text-align: center;
}
@ -26,7 +35,7 @@
width: 96px;
height: 150px;
@include breakpoint(630px) {
@media (max-width: 630px) {
width: 72px;
height: 112px;
}
@ -51,7 +60,7 @@
line-height: 0.9em;
color: #979797;
@include breakpoint(630px) {
@media (max-width: 630px) {
font-size: 5.8em;
}
}
@ -64,7 +73,7 @@
color: #979797;
border: none;
@include breakpoint(630px) {
@media (max-width: 630px) {
font-size: 1.4em;
}
}
@ -84,7 +93,7 @@
.error-stack-list li {
display: block;
&::before {
color: #BBB;
content: "\21AA";

149
core/client/assets/sass/layouts/settings.scss
View file

@ -1,6 +1,18 @@
//
// Settings
// --------------------------------------------------
/*
* Setting pages styles
*
* Table of Contents
*
* Settings
* Sidebar
* Content
* Code Injection
*/
/* ==========================================================================
Settings
========================================================================== */
.settings {
// The main white bg for the page
@ -13,7 +25,7 @@
margin: 0;
padding: 0;
@include breakpoint($tablet) {
@media (max-width: 800px) {
overflow-x: hidden;
}
}
@ -27,14 +39,14 @@
padding: 0;
border: none;
}
}//.settings
} // .settings
/* =============================================================================
Sidebar
============================================================================= */
//The whole left column sidebar, duh.
// The whole left column sidebar, duh.
.settings-sidebar {
width: 20%;
position: absolute;
@ -44,7 +56,7 @@
z-index: 700;
background: #fff;
box-shadow: $lightbrown 1px 0 0;
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: 100%;
box-shadow: none;
}
@ -53,22 +65,24 @@
position: relative;
z-index: 400;
height: 17px;
padding: 30px 15px 30px 40px;
padding: 30px 15px 47px 40px;
margin-bottom: 0;
border-bottom: none;
box-shadow: #edece4 0 -1px 0 inset, #edece4 1px 0 0;
//Transparent gradient to make bg fade out as it goes out the top.
// Transparent gradient to make bg fade out as it goes out the top.
// TODO: Much improve
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
@include breakpoint($netbook) {
@media (max-width: 1000px) {
padding-left: 15px;
};
}
}//.settings-sidebar
} // .settings-sidebar
//Main settings-menu styles, apply to every item
// Main settings-menu styles, apply to every item
.settings-menu {
position: absolute;
top: 0;
@ -76,25 +90,25 @@
bottom: 0;
right: -1px;
overflow: auto;
@include breakpoint($tablet) { right: 0; };
@media (max-width: 800px) { right: 0; };
// Create placeholder the same height as the floating header
// to push content down by the same amount
&:before {
display: block;
content: "";
height: 77px; //30px + 17px title + 30px
height: 77px; // 30px + 17px title + 30px
}
ul {
border-top: none;
@include breakpoint($tablet) { border-bottom: #edece4 1px solid; }
@media (max-width: 800px) { border-bottom: #edece4 1px solid; }
}
li {
margin-right: 1px;
border-top: #fff 1px solid;
@include breakpoint($tablet) {
@media (max-width: 800px) {
margin-right: 0;
border-top: #edece4 1px solid;
}
@ -102,26 +116,28 @@
a {
padding: 15px 15px 15px 40px;
border-bottom: none;
@include breakpoint($netbook) { padding-left: 15px; }
@include breakpoint($tablet) {
@media (max-width: 1000px) { padding-left: 15px; }
@media (max-width: 800px) {
@include icon-after($i-chevron) {float: right;margin-top: 5px;};
}
}
&:first-child { border-top: none; }
&:first-child.active { border-top: none; }
&:first-child {
border-top: none;
}
&:first-child.active {
border-top: none;
}
&.active {
@include breakpoint($biggerthan-tablet) {
@media (min-width: 1001px) {
// only apply active styles on larger devices
margin-right: 0;
position: relative;
z-index: 300;
border-top: #edece4 1px solid;
box-shadow:
#fff 1px 0 0,
#edece4 0 1px 0;
box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
@include transition;
a {
@ -132,28 +148,42 @@
}
}
}//.active
} // .active
}//li
} // li
// Give all icons some space
li a:before {
margin-right: 20px;
@include breakpoint($netbook) {
@media (max-width: 1000px) {
margin-right: 15px;
}
}
// Add the icons for specific menu items
.general a { @include icon($i-settings) }
.publishing a { @include icon($i-content) }
.services a { @include icon($i-services) }
.users a { @include icon($i-users) }
.appearance a { @include icon($i-appearance) }
.apps a { @include icon($i-app) }
.code a { @include icon($i-code) }
.general a {
@include icon($i-settings);
}
.publishing a {
@include icon($i-content);
}
.services a {
@include icon($i-services);
}
.users a {
@include icon($i-users);
}
.appearance a {
@include icon($i-appearance);
}
.apps a {
@include icon($i-app);
}
.code a {
@include icon($i-code);
}
}//.settings-menu
} // .settings-menu
/* =============================================================================
@ -170,7 +200,7 @@
bottom: 0;
background: #fff;
@include breakpoint($tablet) {
@media (max-width: 800px) {
display: none;
width: 100%;
left: 100%;
@ -180,23 +210,27 @@
img {
max-width: 100%;
max-height: 400px;
}
display: none;
&.active {display: block;}
// TODO: Header could really be more specific (class)
> header {
position: relative;
z-index: 200;
height: 17px;
padding: 30px 220px 29px 40px;
padding: 30px 220px 46px 40px;
border-bottom: $lightbrown 1px solid;
margin-bottom: 40px;
text-transform: none;
font-weight: normal;
line-height: inherit;
color: inherit;
//Transparent gradient to make bg fade out as it goes out the top.
// Transparent gradient to make bg fade out as it goes out the top.
// TODO: Significantly improve
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.90) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
@ -204,9 +238,13 @@
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
@include breakpoint($netbook) { padding-left: 15px; }
@include breakpoint($tablet) { padding-left: 115px; }
@include breakpoint($letterbox) {
@media (max-width: 1000px) {
padding-left: 15px;
}
@media (max-width: 800px) {
padding-left: 115px;
}
@media (max-height: 600px) {
height: auto;
padding: 5px;
position: absolute;
@ -215,9 +253,11 @@
border: none;
background: transparent;
.title { display: none; }
.title {
display: none;
}
}
@include breakpoint(650px) {
@media (max-width: 650px) {
padding-left: 15px;
.button-back {
@ -234,7 +274,7 @@
}
}
}//header
} // header
.page-actions {
position: absolute;
@ -243,8 +283,8 @@
z-index: 700;
font-size: 1em;
@include breakpoint($netbook) { right: 15px; }
@include breakpoint(650px) {
@media (max-width: 1000px) { right: 15px; }
@media (max-width: 650px) {
position: fixed;
top: 5px;
right: 4px;
@ -287,19 +327,24 @@
display: block;
content: "";
height: 77px; //30px + 17px title + 30px
@include breakpoint($letterbox) { display: none; }
@media (max-height: 600px) { display: none; }
}
&.no-padding {
padding: 0;
}
@include breakpoint($netbook) { padding-left: 15px; }
@include breakpoint(550px) { padding: 0 15px 40px; }
@media (max-width: 1000px) {
padding-left: 15px;
}
@media (max-width: 550px) {
padding: 0 15px 40px;
}
}
.description-container, .bio-container {
max-width: 370px;
.description-container,
.bio-container {
max-width: 510px;
}
.word-count {
@ -309,7 +354,7 @@
color: darken($brown, 5%);
}
}//.settings-content
} // .settings-content
/* =============================================================================

44
core/client/assets/sass/layouts/setup.scss
View file

@ -1,15 +1,28 @@
//
// Setup Ghost for The First Time
// --------------------------------------------------
/*
* Setup screen styles
*
* Table of Contents
*
* Setup Ghost for The First Time
*/
/* ==========================================================================
Setup Ghost for The First Time
========================================================================== */
.ghost-setup {
color: $midgrey;
background: $darkgrey;
@include breakpoint(550px) { background: darken($darkgrey, 5%); }
@media (max-width: 550px) {
background: darken($darkgrey, 5%);
}
main {
top: 15px;
@include breakpoint(550px) { top: 0; }
@media (max-width: 550px) {
top: 0;
}
}
input:-webkit-autofill {
@ -22,7 +35,7 @@
font-size: 26px;
color: $lightgrey;
@include breakpoint(550px) {
@media (max-width: 550px) {
font-size: 20px;
}
}
@ -35,7 +48,7 @@
font-size: 16px;
color: $midgrey;
@include breakpoint(550px) {
@media (max-width: 550px) {
font-size: 14px;
}
}
@ -50,24 +63,27 @@
}
.setup-form {
@include box-sizing(border-box);
max-width: 530px;
padding: 40px;
color: lighten($midgrey, 15%);
background: darken($darkgrey, 5%);
@include breakpoint(400px) {
@media (max-width: 400px) {
padding: 15px;
}
header {
margin-bottom: 45px;
@include breakpoint(550px) { margin-bottom: 35px; }
@media (max-width: 550px) {
margin-bottom: 35px;
}
}
footer {
margin: 40px 0 5px 0;
@include breakpoint(550px) { margin-top: 35px; }
@media (max-width: 550px) {
margin-top: 35px;
}
}
label {
@ -75,7 +91,7 @@
color: $lightgrey;
font-weight: 300;
@include breakpoint(550px) {
@media (max-width: 550px) {
width: 100%;
}
}
@ -83,7 +99,7 @@
.form-group {
padding-left: 110px;
@include breakpoint(550px) {
@media (max-width: 550px) {
padding-left: 0;
}
}
@ -96,7 +112,7 @@
background: lighten($darkgrey, 10%);
@include transition(background ease 0.25s);
@include breakpoint(550px) {
@media (max-width: 550px) {
width: 100%;
}

63
core/client/assets/sass/layouts/users.scss
View file

@ -1,6 +1,16 @@
//
// Users
// --------------------------------------------------
/*
* Users screen styles
*
* Table of Contents
*
* Users
* User Profile
*/
/* ==========================================================================
Users
========================================================================== */
.settings {
@ -25,15 +35,17 @@
display: inline-block;
float: right;
label { margin: 0}
label {
margin: 0;
}
&:hover .user-search-input, .user-search-input:focus {
&:hover .user-search-input,
.user-search-input:focus {
width: 260px;
padding: 0 10px;
}
.user-search-input {
@include box-sizing(border-box);
width: 0px;
padding: 0;
border: none;
@ -54,7 +66,6 @@
}
.user {
@include box-sizing(border-box);
display: block;
width: 100%;
padding: 20px;
@ -75,7 +86,6 @@
border-radius: 20px;
&.invite {
@include box-sizing(border-box);
padding-top: 8px;
text-align: center;
@include icon($i-mail, 1em, $brown);
@ -128,6 +138,8 @@
.user-profile-header {
position: relative;
max-height: 400px;
overflow: hidden;
// Gradient overlay
&:after {
@ -162,7 +174,9 @@
color 0.3s ease,
background 0.3s ease
);
@include breakpoint($netbook) { right: 15px;}
@media (max-width: 1000px) {
right: 15px;
}
&:hover {
color: #fff;
@ -178,19 +192,28 @@
fieldset {
padding: 0 40px;
}
textarea {
min-width: 240px;
}
}
fieldset.user-details-top {
margin-bottom: 0;
padding: 10px 0 0 0;
p {
color: #fff;
@media (max-width: 500px) {
margin-bottom: 10px;
}
@media (min-width: 501px) {
margin-bottom: 0;
padding: 10px 0 0 0;
p {
color: #fff;
}
}
}
.user-image {
@include box-sizing(border-box);
display: block;
position: relative;
width: 120px;
@ -205,6 +228,10 @@
background: #fff;
z-index: 2;
@media (max-width: 500px) {
margin-left: -10px;
}
.img {
display: block;
width: 110px;
@ -233,8 +260,10 @@
@include transition(opacity 0.3s ease);
}
#user-name {
border-color: #fff;
@media (min-width: 501px) {
#user-name {
border-color: #fff;
}
}
.user-details-bottom {
@ -242,4 +271,4 @@
margin: -30px 0 0 0;
}
} //.settings
} // .settings

74
core/client/assets/sass/modules/animations.scss
View file

@ -1,25 +1,19 @@
//
// Animations
// --------------------------------------------------
/*
* Reusable keyframe animations
*
* Table of Contents
*
* Off-Canvas
* Fade In
* Fade Out
*/
@-webkit-keyframes off-canvas {
0% { left:0; }
100% { left:300px; }
}
@-moz-keyframes off-canvas {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes off-canvas {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes off-canvas {
0% { opacity: 0; }
100% { opacity: 1; }
}
@include keyframes(fadeIn) {
/* ==========================================================================
Off-Canvas
========================================================================== */
@include keyframes(off-canvas) {
from {
opacity: 0;
}
@ -28,3 +22,43 @@
}
}
/* ==========================================================================
Fade In
TODO: Make the fadeIn keyframe name hyphenated, not camelCase
========================================================================== */
@include keyframes(fade-in) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
-o-animation: fade-in 0.5s;
-moz-animation: fade-in 0.5s;
-webkit-animation: fade-in 0.5s;
animation: fade-in 0.5s;
}
/* ==========================================================================
Fade Out
TODO: Make the fadeIn keyframe name hyphenated, not camelCase
========================================================================== */
@include keyframes(fade-out) {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
-o-animation: fade-out 0.5s;
-moz-animation: fade-out 0.5s;
-webkit-animation: fade-out 0.5s;
animation: fade-out 0.5s;
}

60
core/client/assets/sass/modules/base.scss Normal file
View file

@ -0,0 +1,60 @@
/*
* Global styles for Ghost which are used throughout the admin interface
* Utility classes defined here to keep other libraries (Normalize) from
* being modified, preventing upgrade later.
*
* Table of Contents
*
* Box Sizing
* Text Selection
* Colour Classes
*/
/* ==========================================================================
Box Sizing
---
Apple `border-box` globally
========================================================================== */
*,
*:before,
*:after {
@include box-sizing(border-box);
}
/* ==========================================================================
Text Selection
---
These colours do not differ much from browser defaults, but
this makes it consistent & predicable.
========================================================================== */
::-moz-selection {
color: $darkgrey;
background: lighten($blue, 20%);
text-shadow: none;
}
::selection {
color: $darkgrey;
background: lighten($blue, 20%);
text-shadow: none;
}
/* ==========================================================================
Color Classes
---
Pragmatically generate classes for background & text colour, based on
`$list-colours` in `variables.scss`
========================================================================== */
@each $colour in $list-colours {
.#{nth($colour, 1)}-bg {
background: nth($colour, 2);
}
.#{nth($colour, 1)} {
color: nth($colour, 2);
}
}

149
core/client/assets/sass/modules/buttons.scss
View file

@ -1,22 +1,25 @@
//
// Buttons
// --------------------------------------------------
/*
* Buttons are used for primary calls to action on a page.
* Button classes, including
*
* Usage:
* <button type="button" class="button">Default</button>
* Table of Contents
*
* Buttons
* Split Buttons
*/
// This base style is used on all buttons
.btn {
@include box-sizing(border-box);
/* ==========================================================================
Buttons
========================================================================== */
%btn {
min-height: 35px;
width: auto;
display: inline-block;
padding: 0.9em 1.37em;
cursor: pointer;
text-decoration: none;
color: #fff;
font-size: 11px; // Hack because Firefox sucks.
@ -25,24 +28,28 @@
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: none;
border-radius: 0.2em;
border: rgba(0,0,0,0.05) 0.1em solid;
@include transition(background 0.3s ease, border-color 0.3s ease);
&:hover {
&:hover,
&.hover {
will-change: border-color, background;
border-color: transparent;
background: #f8f8f8;
text-decoration: none;
}
&:active {
&:active,
&.active {
box-shadow: rgba(0,0,0,0.3) 0 1px 3px inset;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.large {
@ -50,13 +57,41 @@
font-size: 14px;
line-height: 16px;
}
// Styling for buttons with icons in them
&[class*='icon-'] {
position: relative;
padding-left: calc(1.37em + 36px);
&:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 35px;
font-size: 13px;
line-height: 35px;
border-right: 1px solid rgba($darkgrey, 0.1);
opacity: 0.95;
}
&.large {
padding-left: calc(1.8em + 46px);
&:before {
width: 46px;
line-height: 46px;
font-size: 17px;
}
}
}
}
// This is the default button style
.button,
button,
input[type="button"] {
@extend .btn;
@extend %btn;
color:#777;
font-weight: normal;
background: #eee;
@ -70,39 +105,59 @@ input[type="button"] {
.button-save,
button[type="submit"],
input[type="submit"] {
@extend .btn;
@extend %btn;
background: $blue;
box-shadow: none;
&:hover {background: darken($blue, 10%);}
&:hover {
background: darken($blue, 10%);
}
}
// Button for actions which add stuff
.button-add {
@extend .btn;
@extend %btn;
background: $green;
&:hover {background: darken($green, 8%);}
&:hover {
background: darken($green, 8%);
}
}
// Button for deleting/removing stuff
.button-delete,
button[type="reset"],
input[type="reset"] {
@extend .btn;
@extend %btn;
background: $red;
box-shadow: none;
&:hover {background: darken($red, 10%);}
&:hover {
background: darken($red, 10%);
}
}
// Alternative button with more visual attention, but no extra semantic meaning
.button-alt {
@extend .btn;
@extend %btn;
background: lighten($darkgrey, 10%);
&:hover {background: $darkgrey;}
&:hover {
background: $darkgrey;
}
&[class*='icon-']:before {
border-right-color: lighten($darkgrey, 10%);
}
}
// Alternative button with more visual attention, but no extra semantic meaning
.button-info {
@extend %btn;
background: #A1ADB3;
&:hover {
background: lighten(#A1ADB3, 10%);
}
}
// This applies normal link styles to de-emphasise a button
.button-link {
@extend .btn;
@extend %btn;
color: $blue;
background: transparent;
border: none;
@ -114,7 +169,7 @@ input[type="reset"] {
// Back button for pane animations
.button-back {
@extend .btn;
@extend %btn;
position: absolute;
top: 20px;
left: 20px;
@ -150,9 +205,6 @@ input[type="reset"] {
}
}
@include breakpoint($tablet) {
display: inline-block;
}
}
@ -160,18 +212,7 @@ input[type="reset"] {
Split Buttons
============================================================================= */
/*
* The splitbutton adds addition values to a button, via a dropdown (or drop-up).
*
* Usage:
* <section class="splitbutton">
* <button type="button" class="button">Split Up</button>
* <a class="options" href="#"><span class="hidden">Options</span></a>
* </section>
*/
// These are the base styles applied to all splitbuttons
.splitbtn {
%splitbtn {
display: inline-block;
position: relative;
font-size: 0; // hack to stop space after button
@ -198,6 +239,7 @@ input[type="reset"] {
rgba(0,0,0,0.02) 0 1px 0 inset,
rgba(0,0,0,0.02) -1px 0 0 inset,
rgba(0,0,0,0.02) 0 -1px 0 inset;
@include icon($i-chevron-down, 9px) {
position: absolute;
top: 50%;
@ -212,6 +254,7 @@ input[type="reset"] {
@include transition-duration(0.3);
@include transition-timing-function(ease);
};
@include transition(background-color 0.3s linear);
// Keep the arrow spun when the associated menu is open
@ -226,9 +269,11 @@ input[type="reset"] {
// Spin the arrow on hover and while menu is open
&:hover {
will-change: box-shadow, background;
box-shadow: none;
background: #f8f8f8;
@include icon($i-chevron-down) {
will-change: transform;
@include transform(rotate(360deg));
};
}
@ -248,7 +293,7 @@ input[type="reset"] {
// The default splitbutton
.splitbutton {
@extend .splitbtn;
@extend %splitbtn;
.options {
color:#777;
&:hover {
@ -262,36 +307,44 @@ input[type="reset"] {
// For save/next/continue/confirm actions
.splitbutton-save {
@extend .splitbtn;
@extend %splitbtn;
.options {
background: darken($blue, 5%);
&:hover, &.active {background: darken($blue, 10%);}
&:hover, &.active {
background: darken($blue, 10%);
}
}
}
// For actions which add something
.splitbutton-add {
@extend .splitbtn;
@extend %splitbtn;
.options {
background: darken($green, 6%);
&:hover {background: darken($green, 8%);}
&:hover {
background: darken($green, 8%);
}
}
}
// For actions which delete something
.splitbutton-delete {
@extend .splitbtn;
@extend %splitbtn;
.options {
background: darken($red, 6%);
&:hover {background: darken($red, 10%);}
&:hover {
background: darken($red, 10%);
}
}
}
// Alternative style with more visual attention, but no extra semantic meaning
.splitbutton-alt {
@extend .splitbtn;
@extend %splitbtn;
.options {
background: lighten($darkgrey, 4%);
&:hover {background: $darkgrey;}
&:hover {
background: $darkgrey;
}
}
}

52
core/client/assets/sass/modules/code.scss
View file

@ -1,52 +0,0 @@
//
// Code (inline and block)
// --------------------------------------------------
code, tt {
font-family: $font-family-mono;
font-size: 0.85em;
white-space: pre-wrap;
background: lighten($lightbrown, 2%);
border: 1px solid darken($lightbrown, 8%);
border-radius: 2px;
padding: 1px 3px;
}
pre {
@include baseline;
@include box-sizing(border-box);
background: lighten($lightbrown, 2%);
border: 1px solid darken($lightbrown, 8%);
width: 100%;
padding: 10px;
font-family: $font-family-mono;
font-size: 0.9em;
white-space: pre;
overflow: auto;
border-radius: 3px;
code, tt {
font-size: inherit;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
background: transparent;
border: none;
padding: 0;
}
}
kbd {
display: inline-block;
margin-bottom: 0.4em;
padding: 1px 8px;
border: #ccc 1px solid;
color: $darkgrey;
text-shadow: #fff 0 1px 0;
font-size: 0.9em;
font-weight: bold;
background: #f4f4f4;
border-radius: 4px;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.2),
0 1px 0 0 #fff inset;
}

149
core/client/assets/sass/modules/dropdowns.scss
View file

@ -1,6 +1,19 @@
//
// Dropdowns
// --------------------------------------------------
/*
* Dropdown classes, including default styles and section-specific styles
*
* Table of Contents
*
* Dropdowns
* Dropdown Show & Hide
* Menu
* Menu Positioning Options
* Post Settings
*/
/* ==========================================================================
Dropdowns
========================================================================== */
.dropdown {
@include icon-after($i-chevron-down, 8px) {
@ -12,17 +25,44 @@
color: $darkgrey;
@include icon-after($i-chevron-down, 8px);
}
} // .dropdown
a.dropdown,
button.dropdown {
cursor: pointer;
}
// This is the base menu extend used for styles on interaction menus
// Default: Pop menu, chiclet bottom center.
/* ==========================================================================
Dropdown Show & Hide
---
Sadly !important is needed, to counteract the stringer selectors applying
a display property.
========================================================================== */
.ghost-popover {
display: none !important;
}
.ghost-popover.open {
display: block !important;
}
/* ==========================================================================
Menu
---
This is the base menu extend used for styles on interaction menus
Default: Pop menu, chiclet bottom center.
========================================================================== */
.menu {
display: inline-block;
position:absolute;
position: absolute;
z-index: 960;
padding:6px 0;
border:none;
border: none;
list-style: none;
color: $lightgrey;
background: $darkgrey;
@ -32,27 +72,28 @@
// The triangle chiclet that points to where the menu came from
// By default, this is bottom center.
&:before {
content:"";
position:absolute;
bottom:-10px;
left:50%;
margin-left:-10px;
border-width:10px 10px 0 10px;
border-style:solid;
border-color:$darkgrey transparent;
display:block;
width:0;
content: "";
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: $darkgrey transparent;
display: block;
width: 0;
} // &:before
// Stop :hover shadow from overflowing
li {
overflow: hidden;
}
li {overflow:hidden;} // Stop :hover shadow from overflowing
a, p {
@include box-sizing(border-box);
display: block;
position: relative;
padding:10px 25px 10px 35px;
padding: 10px 25px 10px 35px;
border: none;
@include box-sizing(border-box);
color: $lightgrey !important; // It's dirty, but it's needed.
text-transform: none;
text-decoration: none;
@ -61,7 +102,7 @@
background: $blue;
box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset;
}
}
} // a, p
// Add a check mark to the currently active menu item
.active a {
@ -72,7 +113,14 @@
}
}
}
} // .menu
/* ==========================================================================
Menu Positioning Options
---
Combine above classes into one usable class
========================================================================== */
// This extend moves the chiclet to the top, for menus which drop down.
.menu-drop {
@ -117,25 +165,28 @@
@extend .menu-right;
}
/* ==========================================================================
Post Settings
---
There classes are used on conjunction with the above classes
========================================================================== */
.post-settings {
@include icon($i-settings, 14px);
@include box-sizing(border-box);
display: inline-block;
padding: 0 10px;
color: $midgrey;
@include transition;
position: relative;
top: 1px;
cursor: pointer;
&:hover,
&.active {
color: $darkgrey;
}
}
} // .post-settings
.post-settings-menu {
padding-top: 0;
@ -169,7 +220,9 @@
width: 200px;
margin: 0;
@include breakpoint(550px) { width: 200px; }
@media (max-width: 550px) {
width: 200px;
}
&[type="text"] {
border: none;
@ -183,7 +236,7 @@
border: none;
}
}
}
} // input
.post-setting-item {
padding: 5px 0 0 10px;
@ -192,20 +245,38 @@
.checkbox {
position: relative;
margin-top: 0;
width: 18px;
border: lighten($grey, 10%) 1px solid;
background: $grey;
}
top: 0; // Resets a global `form label` style
border: 0;
&:after {
border-color: lighten($grey, 10%);
background: $grey;
}
} // .checkbox
// Colour the checkbox border correctly for a dark background
input[type='checkbox'] {
&:focus {
& + .checkbox {
&:after {
border-color: lighten($grey, 10%);
}
}
}
} // input[type='checkbox']
.delete {
display: block;
padding: 10px 15px;
@include icon($i-trash) {
position: relative;
top: -1px;
margin-right: 10px
cursor: pointer;
@include icon($i-trash) {
position: relative;
top: -1px;
margin-right: 10px
};
&:hover { background: $red; }
}
}
&:hover {
background: $red;
}
} // .delete
} // .post-settings-menu

108
core/client/assets/sass/modules/floatingheaders.scss Normal file
View file

@ -0,0 +1,108 @@
/*
* Floating header styles
*
* Table of Contents
*
* Floating Headers
* Scroll Shadows
*/
/* ==========================================================================
Floating Headers
========================================================================== */
// Semi-opaque fixed-position headers - used on content/editor
.floatingheader {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 400;
height: 40px;
padding: 10px 15px;
text-transform: uppercase;
color: $brown;
//Transparent gradient to make bg fade out as it goes out the top.
@include linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%, $fallback: transparent);
button,
.button {
display: inline-block;
font-size: 10px;
min-height: 20px;
height: 20px;
padding: 3px 4px;
vertical-align: top;
&.button-back {
position: relative;
top: -2px;
left: 3px;
display: none;
padding: 0 6px 0 3px;
&:active {
box-shadow: none;
}
&:before {
left: -8px;
border-width: 10px 8px 10px 0;
}
@media (max-width: 800px) {
display: inline-block;
}
}
}
small {
font-size: 0.85em;
}
a {
color: $brown;
&:hover {
color: $darkgrey;
}
}
} // .floatingheader
/* ==========================================================================
Scroll Shadows
---
Special case, when scrolling, add shadows to content headers.
========================================================================== */
.scrolling {
.floatingheader {
box-shadow:
rgba(0,0,0,0.02) 0 1px 2px,
rgba(255, 255, 255, 0.5) 0 -1px 0 inset;
&:before {
content: "";
height: 40px;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -40%;
box-shadow: rgba(0,0,0,0.02) 0 2px 2px;
}
&:after {
content: "";
height: 40px;
width: 30%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15%;
box-shadow: rgba(0,0,0,0.02) 0 3px 3px;
}
} // .floatingheader
} // .scrolling

140
core/client/assets/sass/modules/forms.scss
View file

@ -1,8 +1,23 @@
//
// Forms
// --------------------------------------------------
/*
* Form styling, for inputs, selects, checkboxes, labels etc etc.
*
* Table of Contents
*
* Labels
* Form Wrapper
* Form Group
* Fieldsets
* Legends
* Input, textarea & select
* Checkboxes
*/
.label {
/* ==========================================================================
Labels
========================================================================== */
.label {
display: inline-block;
position: absolute;
top: 0.5em;
@ -12,7 +27,7 @@
color: $brown;
text-align: right;
@include breakpoint(550px) {
@media (max-width: 550px) {
display: block;
position: relative;
top: auto;
@ -23,6 +38,11 @@
}
}
/* ==========================================================================
Form Wrapper
========================================================================== */
form {
label {
@ -36,13 +56,38 @@ form {
margin: 0;
}
}//form
} // form
/* ==========================================================================
Form Group
========================================================================== */
.form-group {
position: relative;
margin: 1.5em 0;
padding-left: 140px;
@media (max-width: 550px) {
padding-left: 0;
}
} // .form-group
/* ==========================================================================
Fieldsets
========================================================================== */
fieldset {
border: none;
margin: 0 0 3em 0;
padding: 0;
}
} // fieldset
/* ==========================================================================
Legends
========================================================================== */
legend {
display: block;
@ -52,10 +97,16 @@ legend {
font-size: 1.2em;
line-height: 2.0em;
color: $brown;
}
} // legend
input, textarea, select {
@include box-sizing(border-box);
/* ==========================================================================
Input, textarea & select
========================================================================== */
input,
textarea,
select {
width: 280px;
padding: 5px 7px;
margin: 0;
@ -65,9 +116,9 @@ input, textarea, select {
background: #fff;
border: darken($lightbrown, 5%) 1px solid;
border-radius: $rounded;
@include transition(all 0.15s ease-in-out);
@include transition(border-color 0.15s ease-in-out);
@include breakpoint(550px) {
@media (max-width: 550px) {
width: 100%;
}
}
@ -80,7 +131,9 @@ textarea {
min-height: 6.5em;
}
input, select, textarea {
input,
select,
textarea {
margin-bottom: 5px;
}
@ -108,12 +161,11 @@ select {
}
select {
@include box-sizing(border-box);
width: 270px;
height: 30px;
line-height: 30px;
@include breakpoint(550px) {
@media (max-width: 550px) {
width: 100%;
}
}
@ -124,75 +176,89 @@ select {
}
}
.form-group {
position: relative;
margin: 1.5em 0;
padding-left: 140px;
@include breakpoint(550px) { padding-left: 0; }
}
/* =============================================================================
Checkboxes
============================================================================= */
// Hide the default checkbox using absolute positioning to retain the focusability of the checkbox
// Hide the default checkbox
input[type="checkbox"] {
@include position(absolute, 0 0 0 -9999px);
}
// Turn the label element into a fake checkbox
.checkbox {
@include box-sizing(border-box);
position: relative;
width: auto;
// Create a checkmark, hidden by default
// Create a tick, hidden by default
&:before {
content: '';
position: absolute;
width: 10px;
height: 6px;
top: 5px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
@include transform(rotate(-45deg));
opacity: 0;
}
// The background for the faux checkbox
&:after {
content: "";
content: '';
display: inline-block;
width: 15px;
height: 15px;
width: 18px;
height: 18px;
margin-right: 5px;
background: lighten($lightbrown, 5%);
border-radius: $rounded;
border: darken($lightbrown, 5%) 1px solid;
@include transition(all 0.2s ease);
}
// The paragraph after the .checkbox
& + p {
display: inline-block;
line-height: 28px;
position: relative;
bottom: -2px;
}
}
// If the checkbox is checked, show the the :after element
input[type=checkbox] {
// Colour the checkbox correctly when checked
input[type='checkbox'] {
&:checked + .checkbox {
&:after {
background: $green;
border-color: lighten($green, 10%);
}
}
}
input[type=checkbox] {
&:checked + .checkbox:after {
input[type='checkbox'] {
// When checkbox is checked, show the tick
&:checked + .checkbox:before {
opacity: 1;
}
&:focus {
& + .checkbox {
&:after {
border: $brown 1px solid;
}
}
}
} // &:focus
&:active {
& + .checkbox {
&:after {
background: $lightbrown;
}
}
}
}
} // &:active
} // input[type='checkbox']

471
core/client/assets/sass/modules/global.scss
View file

@ -1,471 +0,0 @@
/*
* Global styles for Ghost which are used throughout the admin interface
* Utility classes defined here to keep other libraries (Normalize) from
* being modified, preventing upgrade later.
*
* Table of Contents
*
* Utility Classes
* Global Styles
* Global Navigation
* Mobile Navigation
* Drop-down / Pop-up Menu
* Notifications
* Modals
* Main Elements
* Floating Headers
* Image Uploader
* Misc
*/
/* ==========================================================================
Utility Classes
========================================================================== */
.hidden { @include hidden; } // TODO: Merge this with .visuallyhidden
.invisible { visibility: hidden; }
.right { float: right; }
.left { float: left; }
.wrapper { position: relative; }
.markdown, pre, code { font-family: $font-family-mono; }
.visuallyhidden,
.screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
// to vertically center elements whose parent element is display: table
.vertical {
display: table-cell;
vertical-align: middle;
}
// for <p> tags under <h> tags which should cuddle like lovers
.hgroup {
margin-bottom: 1.6em;
h1, h2, h3,
h4, h5, h6, p { margin: 0; }
}
/* ==========================================================================
Global Styles
========================================================================== */
html {
font: normal 81.2%/1.65 "Open Sans", sans-serif;
}
body {
width:100%;
color: $darkgrey;
font-weight: 300;
background: $lightbrown;
@include breakpoint($mobile) { background: #fff; }
}
::-moz-selection {
color: $darkgrey;
background: lighten($blue, 20%);
text-shadow: none;
}
::selection {
color: $darkgrey;
background: lighten($blue, 20%);
text-shadow: none;
}
article aside {
width: 30%;
padding: 0 2.2em;
margin: 0 2.2em 1.6em 2.2em;
float: right;
background: $lightbrown;
border-radius: 3px;
}
// Headings
h1, h2, h3,
h4, h5, h6 {
color: $darkgrey;
text-rendering: optimizeLegibility;
line-height: 1;
margin-top: 0;
}
h2 {
padding-top: 0.8em;
margin-top: 0.8em;
border-top: $lightbrown 1px solid;
}
h1 a:hover {
text-decoration: none;
box-shadow: $blue 0 -5px 0 inset;
}
h2 a:hover {
text-decoration: none;
box-shadow: $blue 0 -4px 0 inset;
}
h3 a:hover {
text-decoration: none;
box-shadow: $blue 0 -3px 0 inset;
}
h4 a:hover,
h5 a:hover,
h6 a:hover {
text-decoration: none;
box-shadow: $blue 0 -1px 0 inset;
}
hgroup {
@include baseline;
h1, h2, h3,
h4, h5, h6 {
padding:0;
margin:0;
border:none;
margin-bottom: 5px;
a {
color: $darkgrey;
&:hover {
box-shadow: $darkgrey 0 -1px 0 inset;
}
}
/*
* Make everything except the first
* heading appear smaller/thinner.
*/
&:nth-child(n+2) {
font-size: 1.8em;
font-weight: 300;
color: $brown;
}
}
}
// Text elements
p, ul, ol { @include baseline; }
ol ol, ul ul,
ul ol, ol ul {
margin: 0.4em 0;
}
a {
color:$blue;
text-decoration:none;
@include transition(all 0.15s ease-in-out);
&:hover {
text-decoration:underline;
}
&.highlight {
color: $orange;
font-weight: bold;
}
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid $lightbrown;
margin: 3.2em 0;
padding: 0;
}
blockquote {
@include baseline;
@include box-sizing(border-box);
padding: 0 1.6em 0 1.6em;
border-left: $lightbrown 0.6em solid;
p {
margin:0.8em 0;
font-size:1.2em;
font-weight: 300;
}
small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size:0.9em;
color: $brown;
&:before { content: '\2014 \00A0'; }
}
cite {
font-weight:bold;
a { font-weight: normal; }
}
}
dl {
@include baseline;
dt {
float: left;
width: 180px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
margin-bottom: 1em
}
dd {
margin-left: 200px;
margin-bottom: 1em
}
}
mark {
background-color: #ffc336;
}
/* ==========================================================================
Main Elements
========================================================================== */
main {
position: absolute;
top: 55px;
right: 15px;
bottom: 0;
left: 15px;
padding: 0;
@include breakpoint($mobile) {
top: 40px;
left:0;
right:0;
}
}
/* ==========================================================================
Floating Headers
========================================================================== */
// Semi-opaque fixed-position headers - used on content/editor
.floatingheader {
@include box-sizing(border-box);
position: absolute;
top:0;
left:0;
right:0;
z-index: 400;
height: 40px;
padding: 10px 15px;
text-transform: uppercase;
color: $brown;
//Transparent gradient to make bg fade out as it goes out the top.
@include linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%, $fallback: transparent);
button, .button {
display: inline-block;
font-size: 10px;
min-height: 20px;
height: 20px;
padding: 3px 4px;
vertical-align: top;
&.button-back {
position: relative;
top: -2px;
left: 3px;
display: none;
padding: 0 6px 0 3px;
&:active {
box-shadow: none;
}
&:before {
left: -8px;
border-width: 10px 8px 10px 0;
}
@include breakpoint($tablet) {
display: inline-block;
}
}
}
small {
font-size: 0.85em;
}
a {
color: $brown;
&:hover { color: $darkgrey; }
}
}//.floatingheader
// Special case, when scrolling, add shadows to content headers.
.scrolling {
.floatingheader {
box-shadow:
rgba(0,0,0,0.02) 0 1px 2px,
rgba(255, 255, 255, 0.5) 0 -1px 0 inset;
&::before {
content: "";
height:40px;
width: 80%;
position:absolute;
bottom:0;
left:50%;
margin-left: -40%;
box-shadow: rgba(0,0,0,0.02) 0 2px 2px;
}
&::after {
content: "";
height:40px;
width: 30%;
position:absolute;
bottom:0;
left:50%;
margin-left: -15%;
box-shadow: rgba(0,0,0,0.02) 0 3px 3px;
}
}
}
/* ==========================================================================
NProgress
========================================================================== */
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
-webkit-pointer-events: none;
}
#nprogress .bar {
background: $blue;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $blue, 0 0 5px $blue;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 100;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: $blue;
border-left-color: $blue;
border-radius: 10px;
-webkit-animation: nprogress-spinner 400ms linear infinite;
-moz-animation: nprogress-spinner 400ms linear infinite;
-ms-animation: nprogress-spinner 400ms linear infinite;
-o-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

284
core/client/assets/sass/modules/icons.scss
View file

@ -1,10 +1,23 @@
//
// Icons - Pictos, by Drew Wilson
// --------------------------------------------------
/*
* Icon classes and utility mixins
* The icons are Pictos, by Drew Wilson - http://pictos.cc/
* Icon-font is generated by http://icomoon.co
*
* Table of Contents
*
* @font-face rule
* The Icon (before) Mixin
* The Icon (after) Mixin
* Icon Variables
* Icon Class Styles
* Icon Classes
*/
// The Font Face
// Generated by icomoon.co
/* ==========================================================================
@font-face rule
========================================================================== */
@font-face {
font-family: 'Icons';
src:url('../fonts/icons.eot');
@ -17,7 +30,10 @@
}
// The Icon Element
/* ==========================================================================
The Icon (before) Mixin
========================================================================== */
@mixin icon($char, $size: '', $color: '') {
&:before {
// Base
@ -46,8 +62,10 @@
}
}
// Special use case for when we want to add an icon after an element rather
// than before it. For things like dropdowns.
/* ==========================================================================
The Icon (after) Mixin
========================================================================== */
@mixin icon-after($char, $size: '', $color: '') {
&:after {
// Base
@ -77,12 +95,16 @@
}
// Icon Variables / Short Names
// For accessibility, icon characters in the icon font are stored in Unicode's
// Private Use Area characters. This means that screen readers won't attempt to
// read them out loud. For code maintainability, we then store these Unicode
// references inside Sass variables.
/* ==========================================================================
Icon Variables
---
For accessibility, icon characters in the icon font are stored in Unicode's
Private Use Area characters. This means that screen readers won't attempt to
read them out loud. For code maintainability, we then store these Unicode
references inside Sass variables.
========================================================================== */
// Placeholder
$i: \e018;
@ -102,7 +124,7 @@ $i-preview: \e00a;
$i-app: \e00b;
$i-pin: \e00c;
$i-pc: \e00d;
$i-db: \e00e;
$i-pacman: \e00e;
$i-edit: \e00f;
$i-mobile: \e010;
$i-image: \e011;
@ -153,38 +175,216 @@ $i-lightning: \e03d;
$i-code: \e03e;
/* Usage
/* ==========================================================================
Icon Class Styles
========================================================================== */
To create a button with a label that is prefixed with a camera icon, we might
write our Sass something like this:
[class*=icon-] {
&:before {
// Base
font-family: "Icons";
font-weight: normal;
font-style: normal;
vertical-align: -7%;
text-transform:none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
#button {
display: block;
width: 200px;
height: 40px;
@include icon($i-camera, 16px, #fff) {vertical-align: -10%;};
&:hover {
text-decoration:none;
}
}
This would then output full CSS something like this:
#button {
display: block;
width: 200px;
height: 40px;
/* ==========================================================================
Icon Classes
========================================================================== */
.icon-ghost:before {
content: '#{$i-ghost}';
}
#button:before {
content: "\e02a";
size: 16px;
color: #fff;
font-family: "Icons";
font-weight: normal;
font-style: normal;
vertical-align: -10%;
text-transform:none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
.icon-chevron-down:before {
content: '#{$i-chevron-down}';
}
*/
.icon-users:before {
content: '#{$i-users}';
}
.icon-tag:before {
content: '#{$i-tag}';
}
.icon-tablet:before {
content: '#{$i-tablet}';
}
.icon-menu:before {
content: '#{$i-menu}';
}
.icon-settings:before {
content: '#{$i-settings}';
}
.icon-search:before {
content: '#{$i-search}';
}
.icon-search-left:before {
content: '#{$i-search-left}';
}
.icon-rss:before {
content: '#{$i-rss}';
}
.icon-preview:before {
content: '#{$i-preview}';
}
.icon-app:before {
content: '#{$i-app}';
}
.icon-pin:before {
content: '#{$i-pin}';
}
.icon-pc:before {
content: '#{$i-pc}';
}
.icon-pacman:before {
content: '#{$i-pacman}';
}
.icon-edit:before {
content: '#{$i-edit}';
}
.icon-mobile:before {
content: '#{$i-mobile}';
}
.icon-image:before {
content: '#{$i-image}';
}
.icon-mail:before {
content: '#{$i-mail}';
}
.icon-list:before {
content: '#{$i-list}';
}
.icon-info:before {
content: '#{$i-info}';
}
.icon-home:before {
content: '#{$i-home}';
}
.icon-grid:before {
content: '#{$i-grid}';
}
.icon-fullscreen:before {
content: '#{$i-fullscreen}';
}
.icon-question:before {
content: '#{$i-question}';
}
.icon-external:before {
content: '#{$i-external}';
}
.icon-error:before {
content: '#{$i-error}';
}
.icon-comments:before {
content: '#{$i-comments}';
}
.icon-close:before {
content: '#{$i-close}';
}
.icon-chevron:before {
content: '#{$i-chevron}';
}
.icon-calendar:before {
content: '#{$i-calendar}';
}
.icon-archive:before {
content: '#{$i-archive}';
}
.icon-services:before {
content: '#{$i-services}';
}
.icon-appearance:before {
content: '#{$i-appearance}';
}
.icon-video:before {
content: '#{$i-video}';
}
.icon-trash:before {
content: '#{$i-trash}';
}
.icon-reply:before {
content: '#{$i-reply}';
}
.icon-stats:before {
content: '#{$i-stats}';
}
.icon-featured:before {
content: '#{$i-featured}';
}
.icon-unfeatured:before {
content: '#{$i-unfeatured}';
}
.icon-clock:before {
content: '#{$i-clock}';
}
.icon-settings2:before {
content: '#{$i-settings2}';
}
.icon-camera:before {
content: '#{$i-camera}';
}
.icon-power:before {
content: '#{$i-power}';
}
.icon-lock:before {
content: '#{$i-lock}';
}
.icon-content:before {
content: '#{$i-content}';
}
.icon-user:before {
content: '#{$i-user}';
}
.icon-support:before {
content: '#{$i-support}';
}
.icon-success:before {
content: '#{$i-success}';
}
.icon-notification:before {
content: '#{$i-notification}';
}
.icon-add:before {
content: '#{$i-add}';
}
.icon-check:before {
content: '#{$i-check}';
}
.icon-x:before {
content: '#{$i-x}';
}
.icon-link:before {
content: '#{$i-link}';
}
.icon-camera:before {
content: '#{$i-camera}';
}
.icon-repost:before {
content: '#{$i-repost}';
}
.icon-weather-rain:before {
content: '#{$i-weather-rain}';
}
.icon-weather-sun:before {
content: '#{$i-weather-sun}';
}
.icon-weather-partial:before {
content: '#{$i-weather-partial}';
}
.icon-weather-snow:before {
content: '#{$i-weather-snow}';
}
.icon-weather-cloudy:before {
content: '#{$i-weather-cloudy}';
}
.icon-lightning:before {
content: '#{$i-lightning}';
}

111
core/client/assets/sass/modules/layout.scss Normal file
View file

@ -0,0 +1,111 @@
/*
* Generic layout classes, applying both structure and visual design
*
* Table of Contents
*
* Globals
* Helpers
* Floats
* Box
* Main
*/
/* ==========================================================================
Globals
========================================================================== */
body {
width: 100%;
background: $lightbrown;
}
/* ==========================================================================
Helpers
========================================================================== */
.clearfix {
@include clearfix;
}
.wrapper {
position: relative;
}
/* ==========================================================================
Floats
========================================================================== */
.right {
float: right;
}
.left {
float: left;
}
/* ==========================================================================
Box
========================================================================== */
.box {
padding: 15px;
margin-bottom: 15px;
background: #fff;
position: relative;
box-shadow: $shadow;
header {
height:14px;
border-bottom: 1px solid $lightbrown;
padding-bottom: 15px;
margin-bottom: 15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
footer {
height:14px;
border-top: 1px solid $lightbrown;
padding-top: 10px;
margin-top:15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
header a,
footer a {
color:$brown;
&:hover {
color:$darkgrey;
text-decoration: none;
}
}
}
/* ==========================================================================
Main
---
Make t/r/b/l values variables where needed
========================================================================== */
main {
position: absolute;
top: 55px;
right: 15px;
bottom: 0;
left: 15px;
padding: 0;
@media (max-width: 400px) {
top: 40px;
left: 0;
right: 0;
}
}

198
core/client/assets/sass/modules/mixins.scss
View file

@ -1,198 +0,0 @@
/*
* These are Sass variables used to make our CSS more dynamic by re-using
* common property values throughout our styles. Don't overdo it.
*
* Table of Contents:
*
* Bourbon
* Breakpoint
* Typography
* Colors
* Gradients
* Global Styles
*
*/
/* =============================================================================
Bourbon
============================================================================= */
// Bourbon - http://bourbon.io/
@import "_bourbon";
$rounded: 2px;
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
$default-transition-duration: 0.3s;
/* =============================================================================
Breakpoint
============================================================================= */
// Breakpoint - http://breakpoint-sass.com/
@import "breakpoint";
$breakpoint-default-feature: max-width;
// Max widths
$netbook: 1000px;
$tablet: 800px;
$mobile: 400px;
// Min widths
$biggerthan-widescreen: min-width 1500px, min-width 1500px;
$biggerthan-netbook: min-width 1000px, min-width 1000px;
$biggerthan-tablet: min-width 800px, min-width 800px;
$biggerthan-mobile: min-width 401px, min-width 401px;
// Heights
$letterbox: max-height 600px, max-height 600px;
// Pixel Densities
$retina: 2 device-pixel-ratio;
/* =============================================================================
Typography
============================================================================= */
$font-family: 'Open Sans', sans-serif;
$font-family-serif: serif;
$font-family-mono: Inconsolata, monospace;
@mixin baseline {
margin: 1.6em 0;
}
//Does this really need to be a mixin?
@mixin hidden {
text-indent: -9999px;
visibility: hidden;
display: none;
}
/* =============================================================================
Colors
============================================================================= */
$darkgrey: #242628;
$grey: #35393b;
$midgrey: #7d878a;
$lightgrey: #e2edf2;
$brown: #aaa9a2;
$midbrown: #c0bfb6;
$lightbrown: #edece4;
$blue: #5BA4E5;
$red: #e25440;
$orange: #F2A925;
$green: #9FBB58;
/* =============================================================================
Gradients
============================================================================= */
/*
* Auto Gradients
*
* If the gradient mixin is called with 1 value: gradient(#444) - then a second
* color which is 10% lighter than the entered value will be auto-generated. If
* the gradient mixin is called with 2 values: gradient(#444,#666) - then those
* two values will be used instead, as normal.
*/
@mixin gradient($color1: #aaa, $color2: none) {
@if $color2 == 'none' {
background-color: lighten($color1, 10%);
background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: -ms-linear-gradient(bottom, $color1, lighten($color1, 10%));
background-image: linear-gradient(bottom, $color1, lighten($color1, 10%));
} @else {
background-color: $color2;
background-image: -webkit-linear-gradient(bottom, $color1, $color2);
background-image: -moz-linear-gradient(bottom, $color1, $color2);
background-image: -ms-linear-gradient(bottom, $color1, $color2);
background-image: linear-gradient(to top, $color1, $color2);
}
}
// The same as the above, but with the colours reversed.
@mixin inversegradient($color1: #aaa, $color2: none) {
@if $color2 == 'none' {
background-color: $color1;
background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: -moz-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1);
background-image: linear-gradient(bottom, lighten($color1, 10%), $color1);
} @else {
background-color: $color1;
background-image: -webkit-linear-gradient(bottom, $color2, $color1);
background-image: -moz-linear-gradient(bottom, $color2, $color1);
background-image: -ms-linear-gradient(bottom, $color2, $color1);
background-image: linear-gradient(to top, $color2, $color1);
}
}
/* =============================================================================
Global Elements
============================================================================= */
.box {
padding: 15px;
margin-bottom: 15px;
background: #fff;
position: relative;
box-shadow: $shadow;
header {
height:14px;
border-bottom: 1px solid $lightbrown;
padding-bottom: 15px;
margin-bottom: 15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
footer {
height:14px;
border-top: 1px solid $lightbrown;
padding-top: 10px;
margin-top:15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
header a,
footer a {
color:$brown;
&:hover {
color:$darkgrey;
text-decoration: none;
}
}
}
/* =============================================================================
Animations
============================================================================= */
@include keyframes(fade-out) {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

33
core/client/assets/sass/modules/modals.scss
View file

@ -1,9 +1,17 @@
//
// Modals
// --------------------------------------------------
/*
* Modals styles
*
* Table of Contents
*
* Modal Container
*/
/* ==========================================================================
Modal Container
========================================================================== */
#modal-container { // TODO: This should probably not be an ID
@include box-sizing(border-box);
display: none;
position: fixed;
top: 0;
@ -13,7 +21,6 @@
overflow-x: auto;
overflow-y: scroll;
z-index: 1040;
pointer-events: none;
@include transition(all 0.15s linear 0s);
@include transform(translateZ(0));
}
@ -35,12 +42,11 @@
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
background: rgba(0,0,0,0.6);
z-index: 1030;
}
.modal {
@include box-sizing(border-box);
left: 50%;
right: auto;
width: 450px;
@ -51,8 +57,7 @@
z-index: 1050;
pointer-events: auto;
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: auto;
padding: 10px;
};
@ -61,12 +66,12 @@
min-width: 100px;
}
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: 100%;
margin-left: 0;
}
//Uploaders
// Uploaders
.image-uploader,
.pre-image-uploader {
margin: 0;
@ -77,13 +82,12 @@
@extend .modal;
padding: 60px 0 30px;
@include breakpoint($tablet) {
@media (max-width: 800px) {
padding: 30px 0;
}
}
.modal-content {
@include box-sizing(padding-box);
position: relative;
padding: 20px;
background-clip: padding-box;
@ -92,7 +96,6 @@
box-shadow: rgba(0,0,0,0.2) 0 0 0 6px;
.close {
@include box-sizing(border-box);
position: absolute;
top: 15px;
right: 15px;
@ -137,7 +140,7 @@
.modal-style-wide {
width: 550px;
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: 100%;
}
}

235
core/client/assets/sass/modules/navbar.scss
View file

@ -1,50 +1,74 @@
//
// Navbar
// --------------------------------------------------
/*
* Navbar styling
*
* Table of Contents
*
* Ghost Logo
* Nav Bar
* Mobile Navigation
*/
/* ==========================================================================
Ghost Logo
========================================================================== */
.ghost-logo {
@include icon($i-ghost) { line-height: 0; }
@include icon($i-ghost) {
line-height: 0;
}
display: block;
float:left;
height:40px;
padding:12px 15px;
float: left;
height: 40px;
padding: 12px 15px;
color: lighten($grey, 10%);
@include box-sizing(border-box);
&:hover {text-decoration:none;}
&:hover {
text-decoration: none;
}
}
.ghost-logo:hover {
color: $lightgrey;
background:darken($darkgrey, 2%);
background: darken($darkgrey, 2%);
}
/* ==========================================================================
Nav Bar
========================================================================== */
.navbar {
height: 40px;
font-size: 0.85em;
background: $darkgrey;
@include breakpoint($netbook) {font-weight:normal}
@media (max-width: 1000px) {
font-weight: normal;
}
// The main navbar styles, apply to to everything.
nav {
ul {
float:left;
border-left:$grey 1px solid;
border-top:none;
float: left;
border-left: $grey 1px solid;
border-top: none;
margin: 0;
padding: 0;
}
li {
float:left;
float: left;
font-size: 1em;
position:relative;
border-right:$grey 1px solid;
position: relative;
border-right: $grey 1px solid;
a {
display: block;
height:40px;
padding:11px 15px;
border-bottom:none;
height: 40px;
padding: 11px 15px;
border-bottom: none;
color: $midgrey;
text-transform: uppercase;
@include box-sizing(border-box);
@ -54,25 +78,25 @@
&.active a {
color: $lightgrey;
text-decoration: none;
position:relative;
background:darken($grey, 2%);
position: relative;
background: darken($grey, 2%);
box-shadow: 0 -2px 2px rgba(0,0,0,0.2) inset;
}
// Make a little arrow pointing up at the currently active menu item
&.active a:after {
content:"";
position:absolute;
bottom:0;
left:50%;
margin-left:-5px;
border-width:0 5px 5px 5px;
border-style:solid;
border-color:$lightbrown transparent;
display:block;
width:0;
content: "";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px 5px;
border-style: solid;
border-color: $lightbrown transparent;
display: block;
width: 0;
@include breakpoint($mobile) {
@media (max-width: 400px) {
border-color: #fff transparent;
}
@ -80,9 +104,9 @@
ul {
position: absolute;
top:40px;
right:0;
min-width:200px;
top: 40px;
right: 0;
min-width: 200px;
background: $darkgrey;
}
@ -94,13 +118,25 @@
}
// Add some icons to specific nav items
a:before {margin-right: 5px;}
.dashboard a { @include icon($i-stats) {vertical-align: -10%} }
.content a { @include icon($i-content) }
.editor a { @include icon($i-add) }
.settings a { @include icon($i-settings2) }
a:before {
margin-right: 5px;
}
.dashboard a {
@include icon($i-stats) {
vertical-align: -10%;
}
}
.content a {
@include icon($i-content);
}
.editor a {
@include icon($i-add);
}
.settings a {
@include icon($i-settings2);
}
}//nav ul
} //nav ul
// Style any nav items which have dropdowns
.subnav {
@ -108,7 +144,9 @@
// The anchor which toggles the menu open/closed
> a {
@include icon-after($i-chevron-down, 8px) {margin-left: 8px};
@include icon-after($i-chevron-down, 8px) {
margin-left: 8px;
};
&.active {
color: $lightgrey;
@ -124,14 +162,15 @@
padding: 7px 0;
border-left: none;
position: absolute;
top:40px;
left:-1px;
top: 40px;
left: -1px;
z-index: 800;
background:darken($grey, 3%);
background: darken($grey, 3%);
box-shadow: rgba(0,0,0,0.2) 0 4px 6px;
}
li {
list-style: none;
a {
color: $lightgrey;
@ -141,7 +180,9 @@
box-shadow: none;
}
&:before { margin-right: 1em; } // space for icons
&:before {
margin-right: 1em;
} // space for icons
}
}
@ -158,23 +199,23 @@
// The user menu in the top right corner of the screen
.usermenu.subnav {
position:absolute;
top:0;
right:0;
border-right:none;
border-left:$grey 1px solid;
position: absolute;
top: 0;
right: 0;
border-right: none;
border-left: $grey 1px solid;
> a {
padding-left:43px; //15px + 18px avatar + 10px
padding-left: 43px; //15px + 18px avatar + 10px
}
.avatar {
height:18px;
width:18px;
height: 18px;
width: 18px;
border-radius: 50px;
position:absolute;
top:11px;
left:15px;
position: absolute;
top: 11px;
left: 15px;
}
> ul {
@ -183,10 +224,18 @@
}
//Add some icons to specific items
.usermenu-profile a { @include icon($i-user) }
.usermenu-help a { @include icon($i-support, 1.1em) }
.usermenu-shortcuts a { @include icon($i-pc) }
.usermenu-signout a { @include icon($i-power) }
.usermenu-profile a {
@include icon($i-user);
}
.usermenu-help a {
@include icon($i-support, 1.1em);
}
.usermenu-shortcuts a {
@include icon($i-pc);
}
.usermenu-signout a {
@include icon($i-power);
}
}
@ -196,11 +245,11 @@
// Yo dawg, I heard you like nav menus so I put nav menus in your nav menus
#global-header {
@include breakpoint(650px) {
@media (max-width: 650px) {
.ghost-logo {
@include icon($i-menu, 14px);
height:40px;
height: 40px;
width: 40px;
text-align: center;
padding:12px 0;
@ -223,7 +272,7 @@
padding-top: 40px;
font-weight:normal;
background: $darkgrey;
border-left:none;
border-left: none;
@include transition(left 0.3s ease 0.2s);
.off-canvas & {
left: 0;
@ -232,37 +281,45 @@
}
li {
float:none;
border-right:none;
border-bottom:$grey 1px solid;
float: none;
border-right: none;
border-bottom: $grey 1px solid;
a:hover,
&.active a {box-shadow: none;}
&.active a {
box-shadow: none;
}
&.active a:after {display:none;}
&.active a:after {
display: none;
}
a:before {margin-right: 1em;}
a:before {
margin-right: 1em;
}
ul {
position: static;
min-width:0;
min-width: 0;
background: $darkgrey;
}
li {width: auto;}
li {
width: auto;
}
}
.usermenu {
position:fixed;
top:0;
right:auto;
position: fixed;
top: 0;
right: auto;
bottom: auto;
left:-280px;
height:40px;
left: -280px;
height: 40px;
z-index: 990;
width:279px;
border-left:none;
width: 279px;
border-left: none;
border-right: darken($grey, 7%) 1px solid;
border-bottom: darken($grey, 5%) 1px solid;
@include gradient(darken($darkgrey, 8%), darken($darkgrey, 3%));
@ -272,8 +329,12 @@
@include transition(left 0.3s ease 0s);
}
> a {
&:hover { background: inherit; }
&.active { background: darken($grey, 3%); }
&:hover {
background: inherit;
}
&.active {
background: darken($grey, 3%);
}
}
> ul {
@ -293,13 +354,19 @@
a {
background: darken($grey, 3%);
&:hover {background: darken($grey, 8%)}
&:before { margin-right: 1em; } // space for icons
&:hover {
background: darken($grey, 8%);
}
&:before {
margin-right: 1em;
} // space for icons
}
}
.divider {display: none}
.divider {
display: none;
}
}
}

37
core/client/assets/sass/modules/navs.scss
View file

@ -1,29 +1,40 @@
//
// Navigation Menus
// --------------------------------------------------
/*
* Navigation Menus
*
* Table of Contents
*
* Nav
*/
/* ==========================================================================
Nav
========================================================================== */
nav {
ul {
list-style: none;
margin:0;
padding:0;
border-top:$lightbrown 1px solid;
margin: 0;
padding: 0;
border-top: $lightbrown 1px solid;
}
li {
li {
a {
display:block;
padding:10px 15px;
color:$brown;
border-bottom:$lightbrown 1px solid;
display: block;
padding: 10px 15px;
color: $brown;
border-bottom: $lightbrown 1px solid;
&:hover {
color:$darkgrey;
color: $darkgrey;
background: $lightbrown;
text-decoration: none;
}
&:before { margin-right:1em; } // Make space for icons
&:before {
margin-right: 1em;
} // Make space for icons
}
}

53
core/client/assets/sass/modules/notifications.scss
View file

@ -1,9 +1,20 @@
//
// Notifications
// --------------------------------------------------
/*
* Button classes, including
*
* Table of Contents
*
* Buttons
* Split Buttons
*/
/* ==========================================================================
Notifications
========================================================================== */
.notifications {
@include breakpoint($biggerthan-mobile) {
@media (min-width: 401px) {
position: absolute;
bottom: 0;
left: 0;
@ -11,7 +22,7 @@
width: 300px;
}
@include breakpoint($mobile) {
@media (max-width: 400px) {
position: fixed;
top: 0;
left: 0;
@ -29,7 +40,6 @@
position: absolute;
top: 0;
left: 0;
@include box-sizing(border-box);
height: 100%;
width: 44px;
padding: 14px 15px;
@ -37,30 +47,39 @@
color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.1);
};
@include box-sizing(border-box);
width: 100%;
min-height: 40px;
padding: 10px 43px 10px 57px;
max-height: 253px;
margin: 0 0 15px 0;
color: rgba(255,255,255,0.9);
background: $blue;
position:relative;
position: relative;
box-shadow: $shadow;
@include transform(translateZ(0));
@include breakpoint($mobile) {margin-bottom: 1px;}
@media (max-width: 400px) {
margin-bottom: 1px;
}
.notification-message {
display: block;
padding: 10px 43px 10px 57px;
max-height: 253px;
overflow: auto;
}
.close {
@include icon-after($i-close) {
padding:6px;
position:absolute;
top:8px;
right:9px;
padding: 6px;
position: absolute;
top: 8px;
right: 9px;
};
display: inline-block;
color: rgba(255,255,255,0.6);
cursor: pointer;
&:hover { color: #fff; }
&:hover {
color: #fff;
}
}
@ -81,7 +100,7 @@
@include animation-iteration-count(1);
@include animation-fill-mode(forwards);
}
&.notification-passive:hover {
@include animation(fade-in 0.2s linear);
}

98
core/client/assets/sass/modules/nprogress.scss Normal file
View file

@ -0,0 +1,98 @@
/*
* NProgress styles
*
* Table of Contents
*
* NProgress
* Keyframes
*/
/* ==========================================================================
NProgress
========================================================================== */
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
-webkit-pointer-events: none;
}
#nprogress .bar {
background: $blue;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $blue, 0 0 5px $blue;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 100;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: $blue;
border-left-color: $blue;
border-radius: 10px;
-webkit-animation: nprogress-spinner 400ms linear infinite;
-moz-animation: nprogress-spinner 400ms linear infinite;
-ms-animation: nprogress-spinner 400ms linear infinite;
-o-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
/* ==========================================================================
Keyframes
========================================================================== */
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

114
core/client/assets/sass/modules/objectlist.scss Normal file
View file

@ -0,0 +1,114 @@
/*
* Object list styles
*
* Table of Contents
*
* Object List
*/
/* ==========================================================================
Object List
========================================================================== */
.object-list + .object-list {
margin-top: 34px;
}
.object-list-title {
font-size: 13px;
font-weight: normal;
color: $midbrown;
margin-bottom: 14px;
} // .object-list-title
.object-list-item {
@include display(flex);
@include justify-content(start);
@include align-items(center);
padding-left: 15px;
padding-right: 15px;
border-top: 1px solid $lightbrown;
min-height: 68px;
&:hover {
background: lighten($lightbrown, 5%);
}
&:last-child:hover {
box-shadow: inset 0px -1px 0px $lightbrown;
}
} // .object-list-item
.object-list-item-icon {
width: 35px;
height: 35px;
display: block;
border-radius: 100%;
background: $lightbrown;
font-size: 0px;
color: transparent;
overflow: hidden;
position: relative;
&:before {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -7px;
text-align: center;
color: $brown;
font-size: 14px;
}
} // .object-list-item-icon
.object-list-item-figure {
width: 35px;
border-radius: 100%;
display: block;
border: 1px solid #979797;
} // .object-list-item-figure
.object-list-item-body {
@include flex(1);
@include align-items(stretch);
padding-left: 15px;
line-height: 1;
.name {
display: inline-block;
font-size: 15px;
font-weight: 400;
color: $darkgrey;
}
.description {
display: inline-block;
font-size: 12px;
color: $midbrown;
margin-top: 3px;
}
} // .object-list-item-body
.object-list-item-aside {
.object-list-action + .object-list-action {
margin-left: 20px;
}
.role-label + .role-label {
margin-left: 5px;
}
} // .object-list-item-aside
.object-list-action {
font-size: 11px;
text-transform: uppercase;
text-decoration: underline;
&:hover {
}
} // .object-list-action

45
core/client/assets/sass/modules/rolelables.scss Normal file
View file

@ -0,0 +1,45 @@
/*
* Role Lable styles
*
* Table of Contents
*
* Role Labels
*/
/* ==========================================================================
Role Labels
========================================================================== */
.role-label {
background: #eee;
display: inline-block;
padding-left: 8px;
padding-right: 8px;
color: rgba(0,0,0,0.5);
font-size: 9px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 400;
&.owner, &.admin, &.editor {
color: rgba(255,255,255,0.7);
}
&.owner {
background: $darkgrey;
}
&.admin {
background: $red;
}
&.editor {
background: $blue;
}
}

58
core/client/assets/sass/modules/tables.scss
View file

@ -1,11 +1,21 @@
//
// Tables
// --------------------------------------------------
/*
* Table classes
*
* Table of Contents
*
* Base Styles
* Styles Tables
* Raw Tables
*/
table {
/* ==========================================================================
Base Styles
========================================================================== */
%table {
@include baseline;
@include box-sizing(border-box);
width:100%;
width: 100%;
max-width: 100%;
background-color: transparent;
@ -15,10 +25,27 @@ table {
line-height: 20px;
text-align: left;
vertical-align: middle;
}
}
/* ==========================================================================
Styles Tables
========================================================================== */
.table {
@extend %table;
th,
td {
border-top: 1px solid $lightbrown;
}
th { color: $brown; }
th {
color: $brown;
}
caption + thead tr:first-child th,
caption + thead tr:first-child td,
@ -29,9 +56,13 @@ table {
border-top: 0;
}
tbody + tbody { border-top: 2px solid $lightbrown; }
tbody + tbody {
border-top: 2px solid $lightbrown;
}
table table { background-color: #fff; }
table table {
background-color: #fff;
}
tbody > tr:nth-child(odd) > td,
tbody > tr:nth-child(odd) > th {
@ -44,4 +75,13 @@ table {
background: transparent;
}
}
}
/* ==========================================================================
Raw Tables
========================================================================== */
table {
@extend %table;
}

280
core/client/assets/sass/modules/typography.scss Normal file
View file

@ -0,0 +1,280 @@
/*
* Type styles, including headers, elements, links, and everything else.
*
* Table of Contents
*
* Global font sizing & colour
* Headings
* Heading Groups
* Generic Text Elements
* Code
* Keyboard
* Links
* Horizontal Rules
* Blockquotes
* Definition Lists
*/
/* ==========================================================================
Global font sizing & colour
========================================================================== */
html {
font: normal 81.2%/1.65 "Open Sans", sans-serif;
}
body {
color: $darkgrey;
font-weight: 300;
}
/* ==========================================================================
Headings
========================================================================== */
h1, h2, h3, h4, h5, h6 {
color: $darkgrey;
text-rendering: optimizeLegibility;
line-height: 1;
margin-top: 0;
}
h2 {
padding-top: 0.8em;
margin-top: 0.8em;
border-top: $lightbrown 1px solid;
}
h1 a:hover {
text-decoration: none;
box-shadow: $blue 0 -5px 0 inset;
}
h2 a:hover {
text-decoration: none;
box-shadow: $blue 0 -4px 0 inset;
}
h3 a:hover {
text-decoration: none;
box-shadow: $blue 0 -3px 0 inset;
}
h4, h5, h6 {
a:hover {
text-decoration: none;
box-shadow: $blue 0 -1px 0 inset;
}
}
/* ==========================================================================
Heading Groups
========================================================================== */
hgroup {
@include baseline;
h1, h2, h3, h4, h5, h6 {
padding:0;
margin:0;
border:none;
margin-bottom: 5px;
a {
color: $darkgrey;
&:hover {
box-shadow: $darkgrey 0 -1px 0 inset;
}
}
// Make everything except the first heading appear smaller/thinner.
&:nth-child(n+2) {
font-size: 1.8em;
font-weight: 300;
color: $brown;
}
}
}
/* ==========================================================================
Generic Text Elements
========================================================================== */
p, ul, ol {
@include baseline;
}
ol ol,
ul ul,
ul ol,
ol ul {
margin: 0.4em 0;
}
mark {
background-color: #ffc336;
}
/* ==========================================================================
Code
========================================================================== */
.markdown,
pre,
code,
tt {
font-family: $font-family-mono;
}
code, tt {
font-size: 0.85em;
white-space: pre-wrap;
background: lighten($lightbrown, 2%);
border: 1px solid darken($lightbrown, 8%);
border-radius: 2px;
padding: 1px 3px;
}
pre {
@include baseline;
background: lighten($lightbrown, 2%);
border: 1px solid darken($lightbrown, 8%);
width: 100%;
padding: 10px;
font-family: $font-family-mono;
font-size: 0.9em;
white-space: pre;
overflow: auto;
border-radius: 3px;
code, tt {
font-size: inherit;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
background: transparent;
border: none;
padding: 0;
}
}
/* ==========================================================================
Keyboard
========================================================================== */
kbd {
display: inline-block;
margin-bottom: 0.4em;
padding: 1px 8px;
border: #ccc 1px solid;
color: $darkgrey;
text-shadow: #fff 0 1px 0;
font-size: 0.9em;
font-weight: bold;
background: #f4f4f4;
border-radius: 4px;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.2),
0 1px 0 0 #fff inset;
}
/* ==========================================================================
Links
========================================================================== */
a {
color: $blue;
text-decoration: none;
@include transition(all 0.15s ease-in-out);
&:hover {
text-decoration: underline;
}
&.highlight {
color: $orange;
font-weight: bold;
}
}
/* ==========================================================================
Horizontal Rules
========================================================================== */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid $lightbrown;
margin: 3.2em 0;
padding: 0;
}
/* ==========================================================================
Blockquotes
========================================================================== */
blockquote {
@include baseline;
padding: 0 1.6em 0 1.6em;
border-left: $lightbrown 0.6em solid;
p {
margin:0.8em 0;
font-size:1.2em;
font-weight: 300;
}
small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size:0.9em;
color: $brown;
&:before {
content: '\2014 \00A0';
}
}
cite {
font-weight:bold;
a { font-weight: normal; }
}
}
/* ==========================================================================
Definition Lists
========================================================================== */
dl {
@include baseline;
dt {
float: left;
width: 180px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
margin-bottom: 1em
}
dd {
margin-left: 200px;
margin-bottom: 1em
}
}

27
core/client/assets/sass/modules/uploader.scss
View file

@ -1,6 +1,16 @@
//
// Image Uploader
// --------------------------------------------------
/*
* Image Uploader styles
*
* Table of Contents
*
* Image Uploader
* Pre Image Uploader
*/
/* ==========================================================================
Image Uploader
========================================================================== */
.image-uploader {
@include box-sizing(border-box);
@ -74,8 +84,6 @@
margin: 0 0 0 10px;
}
input {
&.main{
position: absolute;
@ -144,7 +152,12 @@
}
}
}
} // .image-uploader
/* ==========================================================================
Pre Image Uploader
========================================================================== */
.pre-image-uploader {
@include box-sizing(border-box);
@ -201,4 +214,4 @@
}
}
}//.pre-image-uploader
} // .pre-image-uploader

45
core/client/assets/sass/modules/utility.scss Normal file
View file

@ -0,0 +1,45 @@
/*
* Utility classes that impose no visual design, only structural and semantic help
*
* Table of Contents
*
* Global font sizing & colour
* Headings
* Heading Groups
* Generic Text Elements
* Links
* Horizontal Rules
* Blockquotes
* Definition Lists
*/
/* ==========================================================================
Utility Classes
========================================================================== */
.invisible {
visibility: hidden;
}
.hidden,
.visuallyhidden,
.screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

51
core/client/assets/sass/modules/variables.scss
View file

@ -1,51 +0,0 @@
//
// Variables
// --------------------------------------------------
// Bourbon - http://bourbon.io/
@import "_bourbon";
$rounded: 2px;
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
$default-transition-duration: 0.3s;
// Breakpoint - http://breakpoint-sass.com/
@import "breakpoint";
$breakpoint-default-feature: max-width;
// Max widths
$netbook: 1000px;
$tablet: 800px;
$mobile: 400px;
// Min widths
$biggerthan-widescreen: min-width 1500px, min-width 1500px;
$biggerthan-netbook: min-width 1000px, min-width 1000px;
$biggerthan-tablet: min-width 800px, min-width 800px;
$biggerthan-mobile: min-width 401px, min-width 401px;
// Heights
$letterbox: max-height 600px, max-height 600px;
// Pixel Densities
$retina: 2 device-pixel-ratio;
// Colours
$darkgrey: #242628;
$grey: #35393b;
$midgrey: #7d878a;
$lightgrey: #e2edf2;
$brown: #aaa9a2;
$midbrown: #c0bfb6;
$lightbrown: #edece4;
$blue: #5BA4E5;
$red: #e25440;
$orange: #F2A925;
$green: #9FBB58;
// Typography
$font-family: 'Open Sans', sans-serif;
$font-family-serif: serif;
$font-family-mono: Inconsolata, monospace;

70
core/client/assets/sass/screen.scss
View file

@ -1,35 +1,65 @@
//
// Ground Zero - This is where shit begins.
// --------------------------------------------------
/*
* Ground Zero - This is where it begins.
* Every Sass file is imported here
*
* Table of Contents
*
* Variables & Mixin Libraries
* Libraries
* Modules
* Layouts
*/
// Modules - These styles are re-used in many areas, grouped by type.
@import "normalize";
@import "modules/variables";
@import "modules/mixins";
@import "modules/icons";
/* ==========================================================================
Variables & Mixins
========================================================================== */
@import "_bourbon"; // via Bower http://bourbon.io/
@import "helpers/variables";
@import "helpers/mixins";
/* ==========================================================================
Libraries
========================================================================== */
@import "normalize"; // via Bower
/* ==========================================================================
Modules
========================================================================== */
@import "modules/base";
@import "modules/layout";
@import "modules/utility";
@import "modules/animations";
@import "modules/global";
@import "modules/code";
@import "modules/forms";
@import "modules/icons";
@import "modules/buttons";
@import "modules/typography";
@import "modules/tables";
@import "modules/navs";
@import "modules/navbar";
@import "modules/forms";
@import "modules/floatingheaders";
@import "modules/modals";
@import "modules/dropdowns";
@import "modules/notifications";
@import "modules/modals";
@import "modules/objectlist";
@import "modules/rolelables";
@import "modules/uploader";
@import "modules/navbar";
@import "modules/navs";
@import "modules/nprogress";
// Layouts - Styles for specific admin screen layouts, grouped by screen.
/* ==========================================================================
Layouts
========================================================================== */
@import "layouts/auth";
@import "layouts/content";
@import "layouts/editor";
@import "layouts/auth";
@import "layouts/errors";
// Settings Layouts - Styles for the settings panes, grouped by pane.
@import "layouts/setup";
@import "layouts/settings";
@import "layouts/setup";
@import "layouts/users";

44
core/client/docs/_includes/footer.html
View file

@ -1,44 +0,0 @@
<footer class="bs-docs-footer" role="contentinfo">
<div class="container">
{% include social-buttons.html %}
<ul class="bs-docs-footer-links muted">
<li>Currently v{{ site.current_version }}</li>
<li>&middot;</li>
<li><a href="{{ site.repo }}">GitHub</a></li>
<li>&middot;</li>
<li><a href="../about/">About</a></li>
<li>&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../assets/js/docs.min.js"></script>
{% if page.slug == "customize" %}
<script src="../assets/js/customize.min.js"></script>
{% endif %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=596756540369391";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

21
core/client/docs/_includes/header.html
View file

@ -1,21 +0,0 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% if page.title == "Ghost UI" %}
{{ page.title }}
{% else %}
{{ page.title }} &middot; Ghost UI
{% endif %}
</title>
<!-- Ghost UI core CSS -->
<link href="../dist/css/ghost-ui.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- Favicons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">

40
core/client/docs/_includes/nav-main.html
View file

@ -1,40 +0,0 @@
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Ghost UI</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="../getting-started">Getting started</a>
</li>
<li{% if page.slug == "css" %} class="active"{% endif %}>
<a href="../css">CSS</a>
</li>
<li{% if page.slug == "components" %} class="active"{% endif %}>
<a href="../components">Components</a>
</li>
<li{% if page.slug == "js" %} class="active"{% endif %}>
<a href="../javascript">JavaScript</a>
</li>
<li{% if page.slug == "customize" %} class="active"{% endif %}>
<a href="../customize">Customize</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="{{ site.expo }}">Expo</a>
</li>
<li>
<a href="{{ site.blog }}">Blog</a>
</li>
</ul>
</nav>
</div>
</header>

16
core/client/docs/_includes/social-buttons.html
View file

@ -1,16 +0,0 @@
<div class="bs-docs-social">
<ul class="bs-docs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=TryGhost&amp;repo=Ghost-UI&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=TryGhost&amp;repo=Ghost-UI&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/TryGhost" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @TryGhost</a>
</li>
<li class="like-btn">
<div class="fb-like" data-href="http://www.facebook.com/TryGhostApp" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
</li>
</ul>
</div>

69
core/client/docs/_layouts/default.html
View file

@ -1,55 +1,30 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/dist/css/ghost-ui.min.css">
<!-- Fonts -->
<!-- <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" /> -->
</head>
<body>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-docs-header" id="content">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-9" role="main">
{{ content }}
</div>
<div class="col-md-3">
<div class="bs-docs-sidebar hidden-print" role="complementary">
<ul class="nav bs-docs-sidenav">
{% if page.slug == "getting-started" %}
{% include nav-getting-started.html %}
{% elsif page.slug == "css" %}
{% include nav-css.html %}
{% elsif page.slug == "components" %}
{% include nav-components.html %}
{% elsif page.slug == "js" %}
{ % include nav-javascript.html %}
{% elsif page.slug == "customize" %}
{% include nav-customize.html %}
{% elsif page.slug == "about" %}
{% include nav-about.html %}
{% elsif page.slug == "migration" %}
{% include nav-migration.html %}
{% endif %}
<nav>
<ul>
<li><a href="/">Home</a></li>
<li>
<a href="/css/">CSS</a>
<ul>
<li><a href="/css/buttons/">Buttons</a></li>
</ul>
<a class="back-to-top" href="#top">Back to top</a>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
{% include footer.html %}
</body>}}
{{content}}
</body>
</html>

18
core/client/docs/_layouts/home.html
View file

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
</head>
<body class="bs-docs-home">
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Page content of course! -->
{{ content }}
{% include footer.html %}
</body>
</html>

6
core/client/docs/assets/css/docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

1460
core/client/docs/assets/css/src/docs.css
View file

File diff suppressed because it is too large Load diff

66
core/client/docs/assets/css/src/pygments-manni.css
View file

@ -1,66 +0,0 @@
.hll { background-color: #ffffcc }
/*{ background: #f0f3f3; }*/
.c { color: #999; } /* Comment */
.err { color: #AA0000; background-color: #FFAAAA } /* Error */
.k { color: #006699; } /* Keyword */
.o { color: #555555 } /* Operator */
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #FF0000 } /* Generic.Error */
.gh { color: #003300; } /* Generic.Heading */
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.go { color: #AAAAAA } /* Generic.Output */
.gp { color: #000099; } /* Generic.Prompt */
.gs { } /* Generic.Strong */
.gu { color: #003300; } /* Generic.Subheading */
.gt { color: #99CC66 } /* Generic.Traceback */
.kc { color: #006699; } /* Keyword.Constant */
.kd { color: #006699; } /* Keyword.Declaration */
.kn { color: #006699; } /* Keyword.Namespace */
.kp { color: #006699 } /* Keyword.Pseudo */
.kr { color: #006699; } /* Keyword.Reserved */
.kt { color: #007788; } /* Keyword.Type */
.m { color: #FF6600 } /* Literal.Number */
.s { color: #d44950 } /* Literal.String */
.na { color: #4f9fcf } /* Name.Attribute */
.nb { color: #336666 } /* Name.Builtin */
.nc { color: #00AA88; } /* Name.Class */
.no { color: #336600 } /* Name.Constant */
.nd { color: #9999FF } /* Name.Decorator */
.ni { color: #999999; } /* Name.Entity */
.ne { color: #CC0000; } /* Name.Exception */
.nf { color: #CC00FF } /* Name.Function */
.nl { color: #9999FF } /* Name.Label */
.nn { color: #00CCFF; } /* Name.Namespace */
.nt { color: #2f6f9f; } /* Name.Tag */
.nv { color: #003333 } /* Name.Variable */
.ow { color: #000000; } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #FF6600 } /* Literal.Number.Float */
.mh { color: #FF6600 } /* Literal.Number.Hex */
.mi { color: #FF6600 } /* Literal.Number.Integer */
.mo { color: #FF6600 } /* Literal.Number.Oct */
.sb { color: #CC3300 } /* Literal.String.Backtick */
.sc { color: #CC3300 } /* Literal.String.Char */
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.s2 { color: #CC3300 } /* Literal.String.Double */
.se { color: #CC3300; } /* Literal.String.Escape */
.sh { color: #CC3300 } /* Literal.String.Heredoc */
.si { color: #AA0000 } /* Literal.String.Interpol */
.sx { color: #CC3300 } /* Literal.String.Other */
.sr { color: #33AAAA } /* Literal.String.Regex */
.s1 { color: #CC3300 } /* Literal.String.Single */
.ss { color: #FFCC33 } /* Literal.String.Symbol */
.bp { color: #336666 } /* Name.Builtin.Pseudo */
.vc { color: #003333 } /* Name.Variable.Class */
.vg { color: #003333 } /* Name.Variable.Global */
.vi { color: #003333 } /* Name.Variable.Instance */
.il { color: #FF6600 } /* Literal.Number.Integer.Long */
.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }

BIN
core/client/docs/assets/ico/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.1 KiB

25
core/client/docs/css/buttons.md Normal file
View file

@ -0,0 +1,25 @@
---
layout: default
title: Buttons
---
# Buttons
## Button Colours
```html
<button class="button">Button</button>
<button class="button-save">Save</button>
<button class="button-add">Add</button>
<button class="button-delete">Delete</button>
<button class="button-alt">Alt</button>
<button class="button-info">Info</button>
<button class="button-link">Link</button>
```
## Button Sizes
```html
<button class="button">Standard</button>
<button class="button large">Large</button>
```

33
core/client/docs/css/index.md Normal file
View file

@ -0,0 +1,33 @@
---
layout: default
title: CSS
---
# CSS
* [Buttons](/css/buttons/)
# Colours
<div class="darkgrey">darkgrey</div>
<div class="darkgrey-bg">Hey</div>
<div class="grey">grey</div>
<div class="grey-bg">Hey</div>
<div class="midgrey">midgrey</div>
<div class="midgrey-bg">Hey</div>
<div class="lightgrey">lightgrey</div>
<div class="lightgrey-bg">Hey</div>
<div class="brown">brown</div>
<div class="brown-bg">Hey</div>
<div class="midbrown">midbrown</div>
<div class="midbrown-bg">Hey</div>
<div class="lightbrown">lightbrown</div>
<div class="lightbrown-bg">Hey</div>
<div class="blue">blue</div>
<div class="blue-bg">Hey</div>
<div class="red">red</div>
<div class="red-bg">Hey</div>
<div class="orange">orange</div>
<div class="orange-bg">Hey</div>
<div class="green">green</div>
<div class="green-bg">Hey</div>

32
core/client/docs/dist/css/ghost-ui.min.css vendored
View file

File diff suppressed because one or more lines are too long

15
core/client/docs/index.html
View file

@ -1,15 +0,0 @@
---
layout: home
title: Ghost UI
---
<main class="bs-docs-masthead" id="content" role="main">
<div class="container">
<h1>Ghost UI</h1>
<p class="lead">The user interface framework for the Ghost blogging platform.</p>
<p class="lead">
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg">Download Ghost UI</a>
</p>
<p class="version">Currently v{{ site.current_version }}</p>
</div>
</main>

6
core/client/docs/index.md Normal file
View file

@ -0,0 +1,6 @@
---
layout: default
title: Ghost UI
---
# Ghost-UI

10
core/client/docs/robots.txt
View file

@ -1,10 +0,0 @@
---
layout: nil
---
# www.robotstxt.org/
# Allow crawling of all content
User-agent: *
Disallow:
Sitemap: {{ site.url }}/sitemap.xml

22
core/client/docs/sitemap.xml
View file

@ -1,22 +0,0 @@
---
layout: nil
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>{{ site.url }}/</loc>
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
{% for page in site.html_pages %}
{% if page.layout != "home" %}
<url>
<loc>{{ site.url }}{{ page.url }}</loc>
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
{% endif %}
{% endfor %}
</urlset>

87
setup.html
View file

@ -1,87 +0,0 @@
<!doctype html>
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ghost Admin</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta http-equiv="cleartype" content="on" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Ghost" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="/ghost/img/touch-icon-iphone.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/ghost/img/touch-icon-ipad.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/ghost/img/small.png?v=f0332a6f54" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/ghost/img/medium.png?v=f0332a6f54" />
<meta name="application-name" content="Ghost" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-square70x70logo" content="/ghost/img/small.png?v=f0332a6f54" />
<meta name="msapplication-square150x150logo" content="/ghost/img/medium.png?v=f0332a6f54" />
<meta name="msapplication-square310x310logo" content="/ghost/img/large.png?v=f0332a6f54" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
<link rel="stylesheet" href="/Users/John/Sites/Ghost-UI/dist/css/ghost-ui.css" />
</head>
<body class="ghost-setup">
<main role="main" id="main">
<aside id="notifications" class="notifications">
</aside>
<section class="setup-box js-setup-box">
<div class="vertical">
<form id="setup" class="setup-form" method="post" novalidate="novalidate">
<header>
<h1>Welcome to your new Ghost blog</h1>
<h2>Let's get a few things set up so you can get started.</h2>
</header>
<div class="form-group">
<label for="blog-title">Blog Title</label>
<input id="blog-title" type="text">
<p>What would you like to call your blog?</p>
</div>
<div class="form-group">
<label for="blog-title">Full Name</label>
<input id="blog-title" type="text">
<p>The name that you will sign your posts with</p>
</div>
<div class="form-group">
<label for="blog-title">Email Address</label>
<input id="blog-title" type="email">
<p>Used for important notifications</p>
</div>
<div class="form-group">
<label for="blog-title">Password</label>
<input id="blog-title" type="password">
<p>Must be at least 8 characters</p>
</div>
<footer>
<button class="button-add large">Ok, Let's Do This</button>
</footer>
</form>
</div>
</section>
</main>
<div id="modal-container"></div>
<div class="modal-background fade"></div>
<script src="https://newstartuptest.ghost.io/ghost/scripts/ghost.min.js"></script>
</body>
</html>