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