TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-11 09:53:32 +03:00
Code Issues Projects Releases Wiki Activity

Restructure .scss files, global box sizing and minor fixed from the Ember Admin rewrite

Browse Source
This commit is contained in:
Paul Adam Davis 2014-05-21 19:17:39 +02:00
parent d4655a87ec
commit 4510a8bf44
53 changed files with 2664 additions and 3309 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)

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;

124
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;
}
@ -21,7 +33,7 @@
-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,7 +94,7 @@
box-shadow: none;
@include transition(background ease 0.25s);
@include breakpoint(630px) {
@media (max-width: 630px) {
width:264px;
@include transition(none);
}
@ -92,18 +107,18 @@
}
.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;
}
@ -165,34 +180,35 @@
}
}
}
} // .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,10 +218,12 @@
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;
}
@ -217,7 +235,7 @@
}
.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;
@ -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

160
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; }
}
}//li
&:hover {
text-decoration: none;
}
} // a
} // 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;

23
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;
}
}

262
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
@ -10,10 +22,10 @@
position: relative;
width: 100%;
height: 100%;
margin:0;
padding:0;
margin: 0;
padding: 0;
@include breakpoint($tablet) {
@media (max-width: 800px) {
overflow-x: hidden;
}
}
@ -23,28 +35,29 @@
font-weight: normal;
font-size: 1.6em;
line-height: 0.8em;
margin:0 0 18px 0;
padding:0;
margin: 0 0 18px 0;
padding: 0;
border: none;
}
} // .settings
/* =============================================================================
Sidebar
============================================================================= */
//The whole left column sidebar, duh.
.settings-sidebar {
width:20%;
position:absolute;
top:0;
left:0;
bottom:0;
// The whole left column sidebar, duh.
.settings-sidebar {
width: 20%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 700;
background: #fff;
box-shadow: $lightbrown 1px 0 0;
@include breakpoint($tablet) {
width:100%;
@media (max-width: 800px) {
width: 100%;
box-shadow: none;
}
@ -52,75 +65,79 @@
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
.settings-menu {
position:absolute;
// Main settings-menu styles, apply to every item
.settings-menu {
position: absolute;
top: 0;
left:0;
bottom:0;
right:-1px;
left: 0;
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; }
border-top: none;
@media (max-width: 800px) { border-bottom: #edece4 1px solid; }
}
li {
margin-right:1px;
margin-right: 1px;
border-top: #fff 1px solid;
@include breakpoint($tablet) {
margin-right:0;
@media (max-width: 800px) {
margin-right: 0;
border-top: #edece4 1px solid;
}
a {
padding:15px 15px 15px 40px;
border-bottom:none;
@include breakpoint($netbook) { padding-left: 15px; }
@include breakpoint($tablet) {
@include icon-after($i-chevron) {float:right;margin-top:5px;};
padding: 15px 15px 15px 40px;
border-bottom: none;
@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;
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 {
@ -131,44 +148,59 @@
}
}
}//.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) }
.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
/* =============================================================================
Content
============================================================================= */
// The main content panel on the right
.settings-content {
padding:0;
position:absolute;
top:0;
right:0;
left:20%;
bottom:0;
// The main content panel on the right
.settings-content {
padding: 0;
position: absolute;
top: 0;
right: 0;
left: 20%;
bottom: 0;
background: #fff;
@include breakpoint($tablet) {
@media (max-width: 800px) {
display: none;
width: 100%;
left: 100%;
@ -181,20 +213,23 @@
}
display: none;
&.active {display:block;}
&.active {display: block;}
// TODO: Header could really be more specific (class)
> header {
position: relative;
z-index: 200;
height: 17px;
padding: 30px 220px 29px 40px;
border-bottom:$lightbrown 1px solid;
margin-bottom: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%);
@ -202,21 +237,27 @@
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;
top:0;
right:0;
border:none;
top: 0;
right: 0;
border: none;
background: transparent;
.title { display:none; }
.title {
display: none;
}
@include breakpoint(650px) {
padding-left:15px;
}
@media (max-width: 650px) {
padding-left: 15px;
.button-back {
position: fixed;
@ -232,17 +273,17 @@
}
}
}//header
} // header
.page-actions {
position:absolute;
top:20px;
right:40px;
position: absolute;
top: 20px;
right: 40px;
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;
@ -255,14 +296,14 @@
}
.button-add {
position:relative;
padding-left:50px;
position: relative;
padding-left: 50px;
@include icon($i-add, 1.4em, rgba(255,255,255,0.6)) {
position: absolute;
top:0;
padding:9px 8px 0 0;
left:9px;
bottom:0;
top: 0;
padding: 9px 8px 0 0;
left: 9px;
bottom: 0;
width: 20px;
border-right: darken($green, 8%) 1px solid;
};
@ -271,11 +312,11 @@
.content {
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
padding:40px;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 40px;
overflow: auto;
-webkit-overflow-scrolling: touch;
@ -285,19 +326,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 {
@ -307,6 +353,14 @@
color: darken($brown, 5%);
}
}//.settings-content
} // .settings-content
}//.settings
/* =============================================================================
Code Injection
============================================================================= */
.header-injection,
.footer-injection {
margin-top: 3.2em;
}

136
core/client/assets/sass/layouts/setup.scss Normal file
View File

@ -0,0 +1,136 @@
/*
* Setup screen styles
*
* Table of Contents
*
* Setup Ghost for The First Time
*/
/* ==========================================================================
Setup Ghost for The First Time
========================================================================== */
.ghost-setup {
color: $midgrey;
background: $darkgrey;
@media (max-width: 550px) {
background: darken($darkgrey, 5%);
}
main {
top: 15px;
@media (max-width: 550px) {
top: 0;
}
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
}
h1 {
margin: 0;
font-weight: 200;
font-size: 26px;
color: $lightgrey;
@media (max-width: 550px) {
font-size: 20px;
}
}
h2 {
margin: 10px 0 0 0;
padding: 0;
border: none;
font-weight: 200;
font-size: 16px;
color: $midgrey;
@media (max-width: 550px) {
font-size: 14px;
}
}
}
.setup-box {
display: table;
max-width: 500px;
height: 90%;
margin: 0 auto;
padding: 0;
}
.setup-form {
max-width: 530px;
padding: 40px;
color: lighten($midgrey, 15%);
background: darken($darkgrey, 5%);
@media (max-width: 400px) {
padding: 15px;
}
header {
margin-bottom: 45px;
@media (max-width: 550px) {
margin-bottom: 35px;
}
}
footer {
margin: 40px 0 5px 0;
@media (max-width: 550px) {
margin-top: 35px;
}
}
label {
width: 90px;
color: $lightgrey;
font-weight: 300;
@media (max-width: 550px) {
width: 100%;
}
}
.form-group {
padding-left: 110px;
@media (max-width: 550px) {
padding-left: 0;
}
}
input {
width: 300px;
padding: 7px;
border: none;
color: #fff;
background: lighten($darkgrey, 10%);
@include transition(background ease 0.25s);
@media (max-width: 550px) {
width: 100%;
}
&:focus {
border:none;
background: lighten($darkgrey, 15%);
}
}
p {
font-size: 12px;
line-height: 1.4em;
color: $midgrey;
}
.button-add {
width: 100%;
padding: 0.9em 1.8em;
font-size: 13px;
}
}

26
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 {
@ -33,7 +43,6 @@
}
.user-search-input {
@include box-sizing(border-box);
width: 0px;
padding: 0;
border: none;
@ -54,7 +63,6 @@
}
.user {
@include box-sizing(border-box);
display: block;
width: 100%;
padding: 20px;
@ -75,7 +83,6 @@
border-radius: 20px;
&.invite {
@include box-sizing(border-box);
padding-top: 8px;
text-align: center;
@include icon($i-mail, 1em, $brown);
@ -162,7 +169,9 @@
color 0.3s ease,
background 0.3s ease
);
@include breakpoint($netbook) { right: 15px;}
@media (max-width: 1000px) {
right: 15px;
}
&:hover {
color: #fff;
@ -190,7 +199,6 @@
}
.user-image {
@include box-sizing(border-box);
display: block;
position: relative;
width: 120px;
@ -242,4 +250,4 @@
margin: -30px 0 0 0;
}
} //.settings
} // .settings

58
core/client/assets/sass/modules/animations.scss
View File

@ -1,24 +1,33 @@
//
// 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; }
/* ==========================================================================
Off-Canvas
========================================================================== */
@include keyframes(off-canvas) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ==========================================================================
Fade In
TODO: Make the fadeIn keyframe name hyphenated, not camelCase
========================================================================== */
@include keyframes(fadeIn) {
from {
opacity: 0;
@ -28,3 +37,16 @@
}
}
/* ==========================================================================
Fade Out
TODO: Make the fadeIn keyframe name hyphenated, not camelCase
========================================================================== */
@include keyframes(fade-out) {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

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);
}
}

148
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,18 +28,23 @@
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;
}
@ -50,13 +58,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 +106,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 +170,7 @@ input[type="reset"] {
// Back button for pane animations
.button-back {
@extend .btn;
@extend %btn;
position: absolute;
top: 20px;
left: 20px;
@ -150,9 +206,6 @@ input[type="reset"] {
}
}
@include breakpoint($tablet) {
display: inline-block;
}
}
@ -160,18 +213,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 +240,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 +255,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 +270,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 +294,7 @@ input[type="reset"] {
// The default splitbutton
.splitbutton {
@extend .splitbtn;
@extend %splitbtn;
.options {
color:#777;
&:hover {
@ -262,36 +308,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;
}

67
core/client/assets/sass/modules/dropdowns.scss
View File

@ -1,6 +1,17 @@
//
// Dropdowns
// --------------------------------------------------
/*
* Dropdown classes, including default styles and section-specific styles
*
* Table of Contents
*
* Dropdowns
* Menu
* Post Settings
*/
/* ==========================================================================
Dropdowns
========================================================================== */
.dropdown {
@include icon-after($i-chevron-down, 8px) {
@ -15,14 +26,19 @@
}
// This is the base menu extend used for styles on interaction menus
// Default: Pop menu, chiclet bottom center.
/* ==========================================================================
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 +48,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;
}
li {overflow:hidden;} // Stop :hover shadow from overflowing
// Stop :hover shadow from overflowing
li {
overflow: hidden;
}
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;
@ -117,19 +134,20 @@
@extend .menu-right;
}
/* ==========================================================================
Post Settings
========================================================================== */
.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 {
@ -169,7 +187,9 @@
width: 200px;
margin: 0;
@include breakpoint(550px) { width: 200px; }
@media (max-width: 550px) {
width: 200px;
}
&[type="text"] {
border: none;
@ -200,6 +220,7 @@
.delete {
display: block;
padding: 10px 15px;
cursor: pointer;
@include icon($i-trash) {
position: relative;
top: -1px;

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

101
core/client/assets/sass/modules/forms.scss
View File

@ -1,6 +1,21 @@
//
// Forms
// --------------------------------------------------
/*
* Form styling, for inputs, selects, checkboxes, labels etc etc.
*
* Table of Contents
*
* Labels
* Form Wrapper
* Form Group
* Fieldsets
* Legends
* Input, textarea & select
* Checkboxes
*/
/* ==========================================================================
Labels
========================================================================== */
.label {
display: inline-block;
@ -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;
}
@ -105,12 +158,11 @@ textarea:focus {
}
select {
@include box-sizing(border-box);
width: 270px;
height: 30px;
line-height: 30px;
@include breakpoint(550px) {
@media (max-width: 550px) {
width: 100%;
}
}
@ -121,13 +173,6 @@ select {
}
}
.form-group {
position: relative;
margin: 1.5em 0;
padding-left: 140px;
@include breakpoint(550px) { padding-left: 0; }
}
/* =============================================================================
Checkboxes
@ -140,7 +185,6 @@ input[type="checkbox"] {
// Turn the label element into a fake checkbox
.checkbox {
@include box-sizing(border-box);
position: relative;
top: auto;
margin-top: 0.5em;
@ -158,8 +202,8 @@ input[type="checkbox"] {
opacity: 0;
content: "";
position: absolute;
width: 7px;
height: 3px;
width: 10px;
height: 6px;
top: 5px;
left: 4px;
border: 3px solid #fff;
@ -171,5 +215,10 @@ input[type="checkbox"] {
}
// If the checkbox is checked, show the the :after element
input[type=checkbox]:checked + .checkbox { background: $green; border: lighten($green, 10%); }
input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
input[type=checkbox]:checked + .checkbox {
background: $green;
border: lighten($green, 10%);
}
input[type=checkbox]:checked + .checkbox:after {
opacity: 1;
}

457
core/client/assets/sass/modules/global.scss
View File

@ -1,457 +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; }
/* ==========================================================================
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); }
}

277
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;
@ -150,40 +172,219 @@ $i-weather-partial: \e03a;
$i-weather-snow: \e03b;
$i-weather-cloudy: \e03c;
$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:
#button {
display: block;
width: 200px;
height: 40px;
@include icon($i-camera, 16px, #fff) {vertical-align:-10%;};
}
This would then output full CSS something like this:
#button {
display: block;
width: 200px;
height: 40px;
}
#button:before {
content: "\e02a";
size: 16px;
color: #fff;
[class*=icon-] {
&:before {
// Base
font-family: "Icons";
font-weight: normal;
font-style: normal;
vertical-align: -10%;
vertical-align: -7%;
text-transform:none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&:hover {
text-decoration:none;
}
}
*/
/* ==========================================================================
Icon Classes
========================================================================== */
.icon-ghost:before {
content: '#{$i-ghost}';
}
.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;
}
}

31
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;
@ -35,12 +43,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;
@ -52,7 +59,7 @@
pointer-events: auto;
@include breakpoint($tablet) {
@media (max-width: 800px) {
width: auto;
padding: 10px;
};
@ -61,12 +68,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 +84,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 +98,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 +142,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;
}
}
}

35
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 {
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
}
}

38
core/client/assets/sass/modules/notifications.scss
View File

@ -1,9 +1,19 @@
//
// 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 +21,7 @@
width: 300px;
}
@include breakpoint($mobile) {
@media (max-width: 400px) {
position: fixed;
top: 0;
left: 0;
@ -29,7 +39,6 @@
position: absolute;
top: 0;
left: 0;
@include box-sizing(border-box);
height: 100%;
width: 44px;
padding: 14px 15px;
@ -37,7 +46,6 @@
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;
@ -48,19 +56,23 @@
box-shadow: $shadow;
@include transform(translateZ(0));
@include breakpoint($mobile) {margin-bottom: 1px;}
@media (max-width: 400px) {
margin-bottom: 1px;
}
.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;
}
}

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 {
@ -45,3 +76,12 @@ table {
}
}
}
/* ==========================================================================
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;

69
core/client/assets/sass/screen.scss
View File

@ -1,34 +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/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>

67
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>
{{content}}
{% include footer.html %}
</body>}}
</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>

31
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>