Ghost/core/client/assets/sass/layouts/manage.scss

258 lines
6.3 KiB
SCSS
Raw Normal View History

2013-05-11 20:44:25 +04:00
/*
* These styles control elements specific to the mage posts screen
* used for previewing and reading existing content in Ghost.
*
* Table of Contents:
*
* Manage
* Preview
*
*/
/* =============================================================================
Manage
============================================================================= */
.manage {
.content-view-container {
position: relative;
height: 100%;
width: 100%;
@include breakpoint($tablet) {
overflow-x: hidden;
}
}
2013-05-11 20:44:25 +04:00
.content-list {
@include box-sizing(border-box);
width: 35%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
left:0;
border-right:$lightbrown 2px solid;
background: #fff;
2013-05-24 14:07:34 +04:00
box-shadow: $shadow;
2013-05-11 20:44:25 +04:00
@include breakpoint($tablet) {
width:auto;
right:0;
z-index: 500;
border:none;
}
.content-filter {
position:relative;
z-index: 300;
> a {
padding: 5px;
margin-left:-5px;
}
.menu-drop {
display: block;
}
2013-05-11 20:44:25 +04:00
}
.button-add {
@include icon($i-add);
position:absolute;
top:10px;
right:15px;
z-index: 700;
color: #fff;
padding-left:5px;
}
.content-list-content {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow: auto;
padding-top: 40px;
}
.entry-title {
font-size: 1.4em;
line-height:1.1em;
margin-bottom:0.5em;
font-weight: normal;
}
.views {
@include icon($i-stats, 10px, $brown);
float:right;
text-align: right;
margin-left:15px;
@include breakpoint($tablet) {
float:none;
}
}
.featured .date {
@include icon($i-featured, 11px) {
margin-right:12px;
vertical-align: 0;
};
}
ol {
list-style: none;
padding:0;
margin:0;
border-top: $lightbrown 1px solid;
li {
margin:0;
padding: 0;
border-bottom: $lightbrown 1px solid;
position:relative;
a {
display:block;
padding:20px 15px;
color: $brown;
@include breakpoint($mobile) { padding:15px; }
@include breakpoint($tablet) { padding-right: 40px; }
@include icon-after($i-chevron) {
position:absolute;
top:50%;
margin-top:-6px;
right:15px;
}
@include breakpoint($biggerthan-tablet) { &::after {display: none} }
&:hover { text-decoration: none; }
}
}//li
li.active {
@include breakpoint($biggerthan-tablet) {
// only apply active styles on larger devices
border-bottom: lighten($midgrey, 40%) 1px solid;
background: lighten($midgrey, 45%);
box-shadow:
2013-05-11 20:44:25 +04:00
lighten($midgrey, 40%) 0 -1px 0, // top border
rgba(0,0,0,0.06) 7px 0 0 inset, // big left border
lighten($midgrey, 40%) 1px 0 0 inset; // small left border
2013-05-11 20:44:25 +04:00
a:hover {
box-shadow: rgba(0,0,0,0.1) 7px 0 0 inset;
2013-05-11 20:44:25 +04:00
@include transition(all 0.4s ease);
}
.entry-title { font-weight: bold; }
.entry-meta { color: $darkgrey; }
.views {
@include icon($i-stats, 10px, $darkgrey);
color: $darkgrey;
font-weight: normal;
}
}
}//li.active
}
}//.content-list
/* =============================================================================
Preview
============================================================================= */
.content-preview {
@include box-sizing(border-box);
width: 65%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
right:0;
border-left:$lightbrown 2px solid;
background: #fff;
2013-05-24 14:07:34 +04:00
box-shadow: $shadow;
@include breakpoint($tablet) {
2013-05-11 20:44:25 +04:00
width: auto;
left: 100%;
right: -100%;
margin-left: 15px;
2013-05-11 20:44:25 +04:00
}
.unfeatured {
@include icon($i-unfeatured, 14px);
vertical-align: -6%;
margin: 0 7px 0 -5px;
padding: 5px;
}
.featured {
@include icon($i-featured, 14px);
vertical-align: -6%;
margin: 0 7px 0 -5px;
padding: 5px;
}
.normal {
text-transform: none;
margin:0 3px;
}
.content-preview-content {
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow: auto;
padding: 80px 40px;
word-break: break-word;
hyphens: auto;
2013-05-11 20:44:25 +04:00
.wrapper {
max-width: 700px;
margin:0 auto;
}
}
.post-controls {
float:right;
position: relative;
ul {
position: absolute;
top:15px;
right:-15px;
}
}
.post-edit {
@include icon($i-edit, 14px);
margin-right:7px;
padding: 5px;
}
.post-settings {
@include icon($i-settings, 14px);
padding: 5px;
margin-right: -5px;
}
img {
width:100%;
height:auto;
}
}//.preview-post
}//.manage