mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
Converting all SASS to 4 space standard.
New standard - ALL .scss files are now indented 4 spaces, no tabs. I want to keep this *consistent* because it has been getting incredibly messy. This applies to all native Ghost sass - 3rd party files (normalize, typeplate, bourbon, breakpoint, etc) are not included. /cc @matthojo @erisds
This commit is contained in:
John O'Nolan
parent
cf927f57ee
commit
3b6b5a085d
@ -86,6 +86,7 @@ For more in depth information please read the official [Ghost Coding Standards](
|
|||||||
### HTML & CSS
|
### HTML & CSS
|
||||||
|
|
||||||
- Two spaces for HTML indentation. Never tabs.
|
- Two spaces for HTML indentation. Never tabs.
|
||||||
|
- Four spaces for SASS indentation. Never tabs.
|
||||||
- Double quotes only, never single quotes.
|
- Double quotes only, never single quotes.
|
||||||
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
|
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
|
||||||
- Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/).
|
- Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/).
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -18,213 +18,213 @@
|
|||||||
|
|
||||||
.editor {
|
.editor {
|
||||||
|
|
||||||
// The main post title
|
// The main post title
|
||||||
.entry-title {
|
.entry-title {
|
||||||
@extend %box;
|
@extend %box;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
position:relative;
|
position:relative;
|
||||||
|
|
||||||
@include breakpoint($mobile) {
|
@include breakpoint($mobile) {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-container {
|
.entry-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The two content panel wrappers, positioned left/right
|
// The two content panel wrappers, positioned left/right
|
||||||
.entry-markdown { left:0; border-right:$lightbrown 2px solid; }
|
.entry-markdown { left:0; border-right:$lightbrown 2px solid; }
|
||||||
.entry-preview { right:0; border-left:$lightbrown 2px solid; }
|
.entry-preview { right:0; border-left:$lightbrown 2px solid; }
|
||||||
|
|
||||||
// The visual styles for both panels
|
// The visual styles for both panels
|
||||||
.entry-markdown, .entry-preview {
|
.entry-markdown, .entry-preview {
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
width: 50%;
|
width: 50%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:40px; // height of the publish bar
|
bottom:40px; // height of the publish bar
|
||||||
top:69px; // height of the post title + margin
|
top:69px; // height of the post title + margin
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: $shadow;
|
box-shadow: $shadow;
|
||||||
|
|
||||||
@include breakpoint($mobile) {
|
@include breakpoint($mobile) {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert all content areas to small boxes
|
// Convert all content areas to small boxes
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
top:109px;
|
top:109px;
|
||||||
left:0;
|
left:0;
|
||||||
right:0;
|
right:0;
|
||||||
width:100%;
|
width:100%;
|
||||||
border:none;
|
border:none;
|
||||||
z-index:100;
|
z-index:100;
|
||||||
min-height:380px;
|
min-height:380px;
|
||||||
.markdown, .entry-preview-content {
|
.markdown, .entry-preview-content {
|
||||||
height:50px;
|
height:50px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.floatingheader {
|
.floatingheader {
|
||||||
|
|
||||||
// Turn headers into tabs which act as links
|
// Turn headers into tabs which act as links
|
||||||
// both headers set to grey/inactive colour
|
// both headers set to grey/inactive colour
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
width:50%;
|
width:50%;
|
||||||
border-right:$lightbrown 2px solid;
|
border-right:$lightbrown 2px solid;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
background:$brown;
|
background:$brown;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:-40px;
|
top:-40px;
|
||||||
left:0;
|
left:0;
|
||||||
box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
|
box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color:#fff;
|
color:#fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $brown;
|
color: $brown;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-help {
|
.markdown-help {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
right: -5px;
|
right: -5px;
|
||||||
@include icon($i-question, '', lighten($brown, 15%));
|
@include icon($i-question, '', lighten($brown, 15%));
|
||||||
float:right;
|
float:right;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include icon($i-question, '', $brown);
|
@include icon($i-question, '', $brown);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-word-count {
|
.entry-word-count {
|
||||||
float:right;
|
float:right;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Give the tab with the .active class the highest z-index
|
// Give the tab with the .active class the highest z-index
|
||||||
&.active {
|
&.active {
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Restore the normal height of the .active tab (inactive tab stays small, hidden behind)
|
// Restore the normal height of the .active tab (inactive tab stays small, hidden behind)
|
||||||
&.active .markdown,
|
&.active .markdown,
|
||||||
&.active .entry-preview-content {
|
&.active .entry-preview-content {
|
||||||
height:auto;
|
height:auto;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
|
// Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
|
||||||
&.active header {
|
&.active header {
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
cursor:auto;
|
cursor:auto;
|
||||||
color: $brown;
|
color: $brown;
|
||||||
background:#fff;
|
background:#fff;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
a {
|
a {
|
||||||
color: $brown;
|
color: $brown;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide markdown icon + wordcount when we hit mobile
|
// Hide markdown icon + wordcount when we hit mobile
|
||||||
@include breakpoint($mobile) {
|
@include breakpoint($mobile) {
|
||||||
.markdown-help,
|
.markdown-help,
|
||||||
.entry-word-count {
|
.entry-word-count {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-markdown-content {
|
.entry-markdown-content {
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
border: 0;
|
border: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right:0;
|
right:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
left:0;
|
left:0;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
height: auto;
|
height: auto;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
right:0;
|
right:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
font-family: $font-family-mono;
|
font-family: $font-family-mono;
|
||||||
font-size:1.1em;
|
font-size:1.1em;
|
||||||
line-height:1.2em;
|
line-height:1.2em;
|
||||||
color: lighten($darkgrey, 30%);
|
color: lighten($darkgrey, 30%);
|
||||||
|
|
||||||
.CodeMirror-focused,
|
.CodeMirror-focused,
|
||||||
.CodeMirror-selected {
|
.CodeMirror-selected {
|
||||||
color: $darkgrey;
|
color: $darkgrey;
|
||||||
background: lighten($blue, 20%);
|
background: lighten($blue, 20%);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: $darkgrey;
|
color: $darkgrey;
|
||||||
background: lighten($blue, 20%);
|
background: lighten($blue, 20%);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeMirror-lines {
|
.CodeMirror-lines {
|
||||||
padding: 65px 0 40px 0; /* Vertical padding around content */
|
padding: 65px 0 40px 0; /* Vertical padding around content */
|
||||||
@include breakpoint($netbook) {padding-top: 25px;}
|
@include breakpoint($netbook) {padding-top: 25px;}
|
||||||
@include breakpoint($mobile) {padding: 15px 0;}
|
@include breakpoint($mobile) {padding: 15px 0;}
|
||||||
}
|
}
|
||||||
.CodeMirror pre {
|
.CodeMirror pre {
|
||||||
padding: 0 40px; /* Horizontal padding of content */
|
padding: 0 40px; /* Horizontal padding of content */
|
||||||
@include breakpoint($mobile) {padding: 0 15px;}
|
@include breakpoint($mobile) {padding: 0 15px;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-header {
|
.cm-header {
|
||||||
color:#000;
|
color:#000;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-string,
|
.cm-string,
|
||||||
.cm-link,
|
.cm-link,
|
||||||
.cm-comment,
|
.cm-comment,
|
||||||
.cm-quote,
|
.cm-quote,
|
||||||
@ -234,60 +234,60 @@
|
|||||||
.cm-number,
|
.cm-number,
|
||||||
.cm-atom {color:#000;}
|
.cm-atom {color:#000;}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-preview {
|
.entry-preview {
|
||||||
// Align the tab of entry-preview on the right
|
// Align the tab of entry-preview on the right
|
||||||
.floatingheader {
|
.floatingheader {
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
right:0;
|
right:0;
|
||||||
left:auto;
|
left:auto;
|
||||||
border-right:none;
|
border-right:none;
|
||||||
border-left:$lightbrown 2px solid;
|
border-left:$lightbrown 2px solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-preview-content {
|
.entry-preview-content {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
right:0;
|
right:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
left:0;
|
left:0;
|
||||||
padding: 60px 40px 40px 40px;
|
padding: 60px 40px 40px 40px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
// Breaking for long words in preview region
|
// Breaking for long words in preview region
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
|
|
||||||
// Tweak padding for smaller screens
|
// Tweak padding for smaller screens
|
||||||
@include breakpoint($netbook) {padding-top: 20px;}
|
@include breakpoint($netbook) {padding-top: 20px;}
|
||||||
@include breakpoint($mobile) {padding: 15px;}
|
@include breakpoint($mobile) {padding: 15px;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Special case, when scrolling, add shadows to content headers.
|
// Special case, when scrolling, add shadows to content headers.
|
||||||
.scrolling {
|
.scrolling {
|
||||||
|
|
||||||
.floatingheader {
|
.floatingheader {
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
@include breakpoint($netbook) {display:none;}
|
@include breakpoint($netbook) {display:none;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.CodeMirror-scroll,
|
.CodeMirror-scroll,
|
||||||
.entry-preview-content {
|
.entry-preview-content {
|
||||||
@include breakpoint($netbook) {
|
@include breakpoint($netbook) {
|
||||||
box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
|
box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}//.editor
|
}//.editor
|
||||||
|
|
||||||
@ -300,57 +300,57 @@
|
|||||||
// TODO: These should just be defaults, overridden by editor.hbs in theme dir
|
// TODO: These should just be defaults, overridden by editor.hbs in theme dir
|
||||||
.entry-preview-content,
|
.entry-preview-content,
|
||||||
.content-preview-content {
|
.content-preview-content {
|
||||||
font-size:1.15em;
|
font-size:1.15em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin: 1.2em 0 1.6em;
|
margin: 1.2em 0 1.6em;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top:0;
|
margin-top:0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
}
|
}
|
||||||
.btn {
|
.btn {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $grey;
|
color: $grey;
|
||||||
}
|
}
|
||||||
.img-placeholder {
|
.img-placeholder {
|
||||||
border: 5px dashed $grey;
|
border: 5px dashed $grey;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
position: relative;
|
position: relative;
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -15px;
|
margin-top: -15px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
&.image-edit {
|
&.image-edit {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -360,17 +360,17 @@
|
|||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
body.zen {
|
body.zen {
|
||||||
background: lighten($lightbrown, 3%);
|
background: lighten($lightbrown, 3%);
|
||||||
#usermenu {display:none;}
|
#usermenu {display:none;}
|
||||||
#global-header, #publish-bar {
|
#global-header, #publish-bar {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
height:0;
|
height:0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@include transition(all 0.5s ease-out);
|
@include transition(all 0.5s ease-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {top: 15px;@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);}
|
.entry-markdown, .entry-preview {bottom:0;@include transition(all 0.5s ease-out);}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -380,121 +380,121 @@ body.zen {
|
|||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
#publish-bar {
|
#publish-bar {
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
height:40px;
|
height:40px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $midgrey;
|
color: $midgrey;
|
||||||
background: darken($darkgrey, 4%);
|
background: darken($darkgrey, 4%);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left:0;
|
left:0;
|
||||||
right:0;
|
right:0;
|
||||||
z-index:900;
|
z-index:900;
|
||||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
|
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
|
||||||
|
|
||||||
@include breakpoint($netbook) {font-weight:normal;}
|
@include breakpoint($netbook) {font-weight:normal;}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
border-top:rgba(255,255,255,0.4) 1px solid;
|
border-top:rgba(255,255,255,0.4) 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-link { border-top: none; }
|
.button-link { border-top: none; }
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
width:30px;
|
width:30px;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-top:5px;
|
margin-top:5px;
|
||||||
box-shadow: rgba(255,255,255,0.4) 0 1px 0 inset;
|
box-shadow: rgba(255,255,255,0.4) 0 1px 0 inset;
|
||||||
|
|
||||||
&.up:hover {
|
&.up:hover {
|
||||||
@include icon($i-chevron-down) {
|
@include icon($i-chevron-down) {
|
||||||
margin-top:-5px;
|
margin-top:-5px;
|
||||||
@include transform(rotate(540deg));
|
@include transform(rotate(540deg));
|
||||||
@include transition(transform 0.6s ease);
|
@include transition(transform 0.6s ease);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitbutton-save{
|
.splitbutton-save{
|
||||||
.button-save{
|
.button-save{
|
||||||
@include transition(width 0.25s ease);
|
@include transition(width 0.25s ease);
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-options{
|
.editor-options{
|
||||||
@extend %menu;
|
@extend %menu;
|
||||||
@extend %menu-right;
|
@extend %menu-right;
|
||||||
bottom: 140%;
|
bottom: 140%;
|
||||||
right: -3%;
|
right: -3%;
|
||||||
|
|
||||||
a{
|
a{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#entry-categories {
|
#entry-categories {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
right: 165px;
|
right: 165px;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
padding: 10px 0 0 0;
|
padding: 10px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-label {
|
.category-label {
|
||||||
display: block;
|
display: block;
|
||||||
float:left;
|
float:left;
|
||||||
@include icon($i-tag);
|
@include icon($i-tag);
|
||||||
padding:1px 8px 0 8px;
|
padding:1px 8px 0 8px;
|
||||||
@include transition;
|
@include transition;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
color: $lightgrey;
|
color: $lightgrey;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-input {
|
.category-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: $lightgrey;
|
color: $lightgrey;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:focus {outline:none;}
|
&:focus {outline:none;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.category {
|
.category {
|
||||||
@include icon-after($i-x, 8px, $darkgrey) {
|
@include icon-after($i-x, 8px, $darkgrey) {
|
||||||
margin-left:4px;
|
margin-left:4px;
|
||||||
vertical-align:5%;
|
vertical-align:5%;
|
||||||
text-shadow: rgba(255,255,255,0.15) 0 1px 0;
|
text-shadow: rgba(255,255,255,0.15) 0 1px 0;
|
||||||
@include transition;
|
@include transition;
|
||||||
}
|
}
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
color: $lightgrey;
|
color: $lightgrey;
|
||||||
background: lighten($grey, 15%);
|
background: lighten($grey, 15%);
|
||||||
border-radius: $rounded;
|
border-radius: $rounded;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
rgba(255,255,255,0.2) 0 1px 0 inset,
|
rgba(255,255,255,0.2) 0 1px 0 inset,
|
||||||
#000 0 1px 3px;
|
#000 0 1px 3px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
|
@include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestions {
|
.suggestions {
|
||||||
@ -516,28 +516,28 @@ body.zen {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#entry-settings {
|
#entry-settings {
|
||||||
@include icon($i-settings, 1.1em){vertical-align:0;};
|
@include icon($i-settings, 1.1em){vertical-align:0;};
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
color: $midgrey;
|
color: $midgrey;
|
||||||
@include transition;
|
@include transition;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $lightgrey;
|
color: $lightgrey;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#entry-settings-menu {
|
#entry-settings-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:50px;
|
bottom:50px;
|
||||||
right:-5px;
|
right:-5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#entry-actions {
|
#entry-actions {
|
||||||
margin-right:6px;
|
margin-right:6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#entry-actions-menu {
|
#entry-actions-menu {
|
||||||
|
|||||||
@ -12,20 +12,20 @@
|
|||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
@-webkit-keyframes off-canvas {
|
@-webkit-keyframes off-canvas {
|
||||||
0% { left:0; }
|
0% { left:0; }
|
||||||
100% { left:300px; }
|
100% { left:300px; }
|
||||||
}
|
}
|
||||||
@-moz-keyframes off-canvas {
|
@-moz-keyframes off-canvas {
|
||||||
0% { opacity: 0; }
|
0% { opacity: 0; }
|
||||||
100% { opacity: 1; }
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
@-o-keyframes off-canvas {
|
@-o-keyframes off-canvas {
|
||||||
0% { opacity: 0; }
|
0% { opacity: 0; }
|
||||||
100% { opacity: 1; }
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
@keyframes off-canvas {
|
@keyframes off-canvas {
|
||||||
0% { opacity: 0; }
|
0% { opacity: 0; }
|
||||||
100% { opacity: 1; }
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@include keyframes(fadeIn) {
|
@include keyframes(fadeIn) {
|
||||||
|
|||||||
@ -18,14 +18,14 @@
|
|||||||
/* Generated by icomoon.co */
|
/* Generated by icomoon.co */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Icons';
|
font-family: 'Icons';
|
||||||
src:url('../fonts/icons.eot');
|
src:url('../fonts/icons.eot');
|
||||||
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
|
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
|
||||||
url('../fonts/icons.woff') format('woff'),
|
url('../fonts/icons.woff') format('woff'),
|
||||||
url('../fonts/icons.ttf') format('truetype'),
|
url('../fonts/icons.ttf') format('truetype'),
|
||||||
url('../fonts/icons.svg#icons') format('svg');
|
url('../fonts/icons.svg#icons') format('svg');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -40,14 +40,14 @@
|
|||||||
|
|
||||||
%icon:before,
|
%icon:before,
|
||||||
%icon:after {
|
%icon:after {
|
||||||
font-family: "Icons";
|
font-family: "Icons";
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
vertical-align: -7%;
|
vertical-align: -7%;
|
||||||
text-transform:none;
|
text-transform:none;
|
||||||
speak: none;
|
speak: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -110,54 +110,54 @@
|
|||||||
$i: \e018;
|
$i: \e018;
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
$i-ghost: \e000;
|
$i-ghost: \e000;
|
||||||
$i-chevron-down: \e001;
|
$i-chevron-down: \e001;
|
||||||
$i-users: \e002;
|
$i-users: \e002;
|
||||||
$i-tag: \e003;
|
$i-tag: \e003;
|
||||||
$i-tablet: \e004;
|
$i-tablet: \e004;
|
||||||
$i-menu: \e005;
|
$i-menu: \e005;
|
||||||
$i-settings: \e006;
|
$i-settings: \e006;
|
||||||
$i-search: \e007;
|
$i-search: \e007;
|
||||||
$i-search-left: \e008;
|
$i-search-left: \e008;
|
||||||
$i-rss: \e009;
|
$i-rss: \e009;
|
||||||
$i-preview: \e00a;
|
$i-preview: \e00a;
|
||||||
$i-plugins: \e00b;
|
$i-plugins: \e00b;
|
||||||
$i-pin: \e00c;
|
$i-pin: \e00c;
|
||||||
$i-pc: \e00d;
|
$i-pc: \e00d;
|
||||||
$i-pacman: \e00e;
|
$i-pacman: \e00e;
|
||||||
$i-edit: \e00f;
|
$i-edit: \e00f;
|
||||||
$i-mobile: \e010;
|
$i-mobile: \e010;
|
||||||
$i-image: \e011;
|
$i-image: \e011;
|
||||||
$i-mail: \e012;
|
$i-mail: \e012;
|
||||||
$i-list: \e013;
|
$i-list: \e013;
|
||||||
$i-info: \e014;
|
$i-info: \e014;
|
||||||
$i-home: \e015;
|
$i-home: \e015;
|
||||||
$i-grid: \e016;
|
$i-grid: \e016;
|
||||||
$i-fullscreen: \e017;
|
$i-fullscreen: \e017;
|
||||||
$i-question: \e018;
|
$i-question: \e018;
|
||||||
$i-external: \e019;
|
$i-external: \e019;
|
||||||
$i-error: \e01a;
|
$i-error: \e01a;
|
||||||
$i-comments: \e01b;
|
$i-comments: \e01b;
|
||||||
$i-close: \e01c;
|
$i-close: \e01c;
|
||||||
$i-chevron: \e01d;
|
$i-chevron: \e01d;
|
||||||
$i-calendar: \e01e;
|
$i-calendar: \e01e;
|
||||||
$i-archive: \e01f;
|
$i-archive: \e01f;
|
||||||
$i-services: \e020;
|
$i-services: \e020;
|
||||||
$i-appearance: \e021;
|
$i-appearance: \e021;
|
||||||
$i-video: \e022;
|
$i-video: \e022;
|
||||||
$i-remove: \e023;
|
$i-remove: \e023;
|
||||||
$i-reply: \e024;
|
$i-reply: \e024;
|
||||||
$i-stats: \e025;
|
$i-stats: \e025;
|
||||||
$i-featured: \e026;
|
$i-featured: \e026;
|
||||||
$i-unfeatured: \e027;
|
$i-unfeatured: \e027;
|
||||||
$i-clock: \e028;
|
$i-clock: \e028;
|
||||||
$i-settings2: \e029;
|
$i-settings2: \e029;
|
||||||
$i-camera: \e02a;
|
$i-camera: \e02a;
|
||||||
$i-power: \e02b;
|
$i-power: \e02b;
|
||||||
$i-lock: \e02c;
|
$i-lock: \e02c;
|
||||||
$i-content: \e02d;
|
$i-content: \e02d;
|
||||||
$i-user: \e02e;
|
$i-user: \e02e;
|
||||||
$i-support: \e02f;
|
$i-support: \e02f;
|
||||||
$i-success: \e030;
|
$i-success: \e030;
|
||||||
$i-notification: \e031;
|
$i-notification: \e031;
|
||||||
$i-add: \e032;
|
$i-add: \e032;
|
||||||
@ -181,32 +181,32 @@ To create a button with a label that is prefixed with a camera icon, we might
|
|||||||
write our Sass something like this:
|
write our Sass something like this:
|
||||||
|
|
||||||
#button {
|
#button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@include icon($i-camera, 16px, #fff) {vertical-align:-10%;};
|
@include icon($i-camera, 16px, #fff) {vertical-align:-10%;};
|
||||||
}
|
}
|
||||||
|
|
||||||
Thi would then output full CSS something like this:
|
Thi would then output full CSS something like this:
|
||||||
|
|
||||||
#button {
|
#button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button:before {
|
#button:before {
|
||||||
content: "\e02a";
|
content: "\e02a";
|
||||||
size: 16px;
|
size: 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: "Icons";
|
font-family: "Icons";
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
vertical-align: -10%;
|
vertical-align: -10%;
|
||||||
text-transform:none;
|
text-transform:none;
|
||||||
speak: none;
|
speak: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -85,19 +85,19 @@ $green: #9FBB58;
|
|||||||
|
|
||||||
@mixin gradient($color1: #aaa, $color2: none) {
|
@mixin gradient($color1: #aaa, $color2: none) {
|
||||||
|
|
||||||
@if $color2 == 'none' {
|
@if $color2 == 'none' {
|
||||||
background-color: lighten($color1, 10%);
|
background-color: lighten($color1, 10%);
|
||||||
background-image: -webkit-linear-gradient(bottom, $color1, 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: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%));
|
||||||
background-image: -ms-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%));
|
background-image: linear-gradient(bottom, $color1, lighten($color1, 10%));
|
||||||
} @else {
|
} @else {
|
||||||
background-color: $color2;
|
background-color: $color2;
|
||||||
background-image: -webkit-linear-gradient(bottom, $color1, $color2);
|
background-image: -webkit-linear-gradient(bottom, $color1, $color2);
|
||||||
background-image: -moz-linear-gradient(bottom, $color1, $color2);
|
background-image: -moz-linear-gradient(bottom, $color1, $color2);
|
||||||
background-image: -ms-linear-gradient(bottom, $color1, $color2);
|
background-image: -ms-linear-gradient(bottom, $color1, $color2);
|
||||||
background-image: linear-gradient(to top, $color1, $color2);
|
background-image: linear-gradient(to top, $color1, $color2);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,19 +105,19 @@ $green: #9FBB58;
|
|||||||
|
|
||||||
@mixin inversegradient($color1: #aaa, $color2: none) {
|
@mixin inversegradient($color1: #aaa, $color2: none) {
|
||||||
|
|
||||||
@if $color2 == 'none' {
|
@if $color2 == 'none' {
|
||||||
background-color: $color1;
|
background-color: $color1;
|
||||||
background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
||||||
background-image: -moz-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: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
||||||
background-image: linear-gradient(bottom, lighten($color1, 10%), $color1);
|
background-image: linear-gradient(bottom, lighten($color1, 10%), $color1);
|
||||||
} @else {
|
} @else {
|
||||||
background-color: $color1;
|
background-color: $color1;
|
||||||
background-image: -webkit-linear-gradient(bottom, $color2, $color1);
|
background-image: -webkit-linear-gradient(bottom, $color2, $color1);
|
||||||
background-image: -moz-linear-gradient(bottom, $color2, $color1);
|
background-image: -moz-linear-gradient(bottom, $color2, $color1);
|
||||||
background-image: -ms-linear-gradient(bottom, $color2, $color1);
|
background-image: -ms-linear-gradient(bottom, $color2, $color1);
|
||||||
background-image: linear-gradient(to top, $color2, $color1);
|
background-image: linear-gradient(to top, $color2, $color1);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -132,9 +132,9 @@ $green: #9FBB58;
|
|||||||
|
|
||||||
//Does this really need to be a mixin?
|
//Does this really need to be a mixin?
|
||||||
@mixin hidden {
|
@mixin hidden {
|
||||||
text-indent: -9999px;
|
text-indent: -9999px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -143,41 +143,41 @@ $green: #9FBB58;
|
|||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
%box, .box {
|
%box, .box {
|
||||||
padding: 15px;
|
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;
|
margin-bottom: 15px;
|
||||||
text-transform: uppercase;
|
background: #fff;
|
||||||
font-size:0.85em;
|
position: relative;
|
||||||
color: $brown;
|
box-shadow: $shadow;
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
header {
|
||||||
height:14px;
|
height:14px;
|
||||||
border-top: 1px solid $lightbrown;
|
border-bottom: 1px solid $lightbrown;
|
||||||
padding-top: 10px;
|
padding-bottom: 15px;
|
||||||
margin-top:15px;
|
margin-bottom: 15px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size:0.85em;
|
font-size:0.85em;
|
||||||
color: $brown;
|
color: $brown;
|
||||||
}
|
}
|
||||||
|
|
||||||
header a,
|
footer {
|
||||||
footer a {
|
height:14px;
|
||||||
color:$brown;
|
border-top: 1px solid $lightbrown;
|
||||||
|
padding-top: 10px;
|
||||||
&:hover {
|
margin-top:15px;
|
||||||
color:$darkgrey;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
font-size:0.85em;
|
||||||
|
color: $brown;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a,
|
||||||
|
footer a {
|
||||||
|
color:$brown;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color:$darkgrey;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =============================================================================
|
/* =============================================================================
|
||||||
|
|||||||
@ -7,26 +7,26 @@
|
|||||||
Modules - These styles are re-used in many areas, and are grouped by type.
|
Modules - These styles are re-used in many areas, and are grouped by type.
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@import "modules/mixins";
|
@import "modules/mixins";
|
||||||
/* Sass variables like colours, font sizes, basic styles. */
|
/* Sass variables like colours, font sizes, basic styles. */
|
||||||
|
|
||||||
@import "modules/normalize";
|
@import "modules/normalize";
|
||||||
/* Browser cross compatibility normalisation*/
|
/* Browser cross compatibility normalisation*/
|
||||||
|
|
||||||
@import "modules/typeplate";
|
@import "modules/typeplate";
|
||||||
/* All the styles controlling the typographic styles. */
|
/* All the styles controlling the typographic styles. */
|
||||||
|
|
||||||
@import "modules/icons";
|
@import "modules/icons";
|
||||||
/* All the styles controlling icons. */
|
/* All the styles controlling icons. */
|
||||||
|
|
||||||
@import "modules/animations";
|
@import "modules/animations";
|
||||||
/* Keyframe animations. */
|
/* Keyframe animations. */
|
||||||
|
|
||||||
@import "modules/global";
|
@import "modules/global";
|
||||||
/* Global elements for the UI, like the header and footer. */
|
/* Global elements for the UI, like the header and footer. */
|
||||||
|
|
||||||
@import "modules/forms";
|
@import "modules/forms";
|
||||||
/* All the styles controlling forms and form fields. */
|
/* All the styles controlling forms and form fields. */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -34,20 +34,20 @@
|
|||||||
Layouts - Styles for specific admin screen layouts, grouped by screen.
|
Layouts - Styles for specific admin screen layouts, grouped by screen.
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@import "layouts/dashboard";
|
@import "layouts/dashboard";
|
||||||
/* The default admin page, the dashboard. */
|
/* The default admin page, the dashboard. */
|
||||||
|
|
||||||
@import "layouts/manage";
|
@import "layouts/manage";
|
||||||
/* The manage posts screen. */
|
/* The manage posts screen. */
|
||||||
|
|
||||||
@import "layouts/editor";
|
@import "layouts/editor";
|
||||||
/* The write/edit post screen. */
|
/* The write/edit post screen. */
|
||||||
|
|
||||||
@import "layouts/settings";
|
@import "layouts/settings";
|
||||||
/* The settings screen. */
|
/* The settings screen. */
|
||||||
|
|
||||||
@import "layouts/login";
|
@import "layouts/login";
|
||||||
/* The settings screen. */
|
/* The settings screen. */
|
||||||
|
|
||||||
@import "layouts/errors";
|
@import "layouts/errors";
|
||||||
/* The errors screens. */
|
/* The error screens. */
|
||||||
Loading…
Reference in New Issue
Block a user