Ghost/ghost/admin/assets/sass/layouts/settings.scss

315 lines
6.5 KiB
SCSS
Raw Normal View History

2014-07-30 14:39:38 +04:00
//
// Settings
// --------------------------------------------------
// Slug: /ghost/settings/
// --------------------------------------------------
//
// Sidebar
// --------------------------------------------------
2014-08-16 20:39:52 +04:00
// Main settings-menu styles, apply to every item
.settings-menu {
width: 25%;
position: fixed;
top: 60px;
2014-07-30 14:39:38 +04:00
left: 0;
bottom: 0;
z-index: 700;
background: #fff;
box-shadow: $lightbrown 1px 0 0;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
2014-07-30 14:39:38 +04:00
width: 100%;
}
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
top: 44px;
2014-07-30 14:39:38 +04:00
}
ul {
2014-08-06 20:46:43 +04:00
list-style: none;
margin: 0;
padding: 0;
2014-07-30 14:39:38 +04:00
border-top: none;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) { border-bottom: #edece4 1px solid; }
2014-07-30 14:39:38 +04:00
}
li {
border-top: #fff 1px solid;
position: relative;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
2014-07-30 14:39:38 +04:00
margin-right: 0;
border-top: #edece4 1px solid;
}
// The icon
&:before {
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
transition: color 0.1s;
color: $brown;
@media (max-width: 900px) {
left: 15px;
}
}
&:hover:before {
color: $darkgrey;
}
2014-07-30 14:39:38 +04:00
a {
2014-08-06 20:46:43 +04:00
display: block;
border-bottom: $lightbrown 1px solid;
padding: 15px 15px 15px 60px;
2014-07-30 14:39:38 +04:00
border-bottom: none;
2014-08-06 20:46:43 +04:00
color: $brown;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
padding-left: 45px;
2014-07-30 14:39:38 +04:00
@include icon-after($i-chevron) {
float: right;
margin-top: 5px;
2014-08-06 20:46:43 +04:00
}
2014-07-30 14:39:38 +04:00
}
2014-08-06 20:46:43 +04:00
&:hover,
&:focus {
color: $darkgrey;
background: $lightbrown;
text-decoration: none;
}
2014-08-14 20:56:23 +04:00
2014-08-06 20:46:43 +04:00
// Make space for icons
&:before {
margin-right: 20px;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
2014-08-06 20:46:43 +04:00
margin-right: 15px;
}
}
2014-07-30 14:39:38 +04:00
}
&.active {
2014-08-16 20:39:52 +04:00
@media (min-width: 900px) {
2014-07-30 14:39:38 +04:00
// only apply active styles on larger devices
// The icon
&:before {
color: $darkgrey;
}
2014-07-30 14:39:38 +04:00
margin-right: 0;
position: relative;
z-index: 300;
border-top: #edece4 1px solid;
box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
transition: all 0.15s ease-out 0s;
2014-07-30 14:39:38 +04:00
a {
color: $darkgrey;
font-weight: bold;
background: #fff;
&:focus {
background: $lightbrown;
}
}
}
} // .active
2014-08-06 20:46:43 +04:00
&:first-of-type {
border-top: none;
2014-07-30 14:39:38 +04:00
}
2014-08-06 20:46:43 +04:00
&:first-of-type.active {
border-top: none;
}
} // li
2014-07-30 14:39:38 +04:00
} // .settings-menu
//
// Content
// --------------------------------------------------
// The main content panel on the right
.settings-content {
2014-08-16 20:39:52 +04:00
margin-left: 25%;
@media (max-width: 800px) {
&.fade-in {
animation: none;
}
}
2014-07-30 14:39:38 +04:00
.settings-general img {
max-width: 100%;
max-height: 400px;
display: block;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
.content {
padding: 40px;
@media (max-width: 900px) {
2014-07-30 14:39:38 +04:00
padding-left: 15px;
2014-08-16 20:39:52 +04:00
padding-right: 15px;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
@media (max-width: 550px) {
padding-top: 15px;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
} // .content
2014-07-30 14:39:38 +04:00
.word-count {
float: right;
font-weight: bold;
}
2014-08-16 20:39:52 +04:00
} // .settings-content
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
// This is the header for /ghost/settings/view/
// It's black and fixed position at the top of the screen
.settings-view-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3000;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: #242628;
overflow: hidden;
.btn-back {
position: absolute;
top: 4px;
left: 4px;
color: #fff;
background: transparent;
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
.btn {
vertical-align: top;
line-height: 1.45;
}
2014-07-30 14:39:38 +04:00
.page-actions {
position: absolute;
2014-08-16 20:39:52 +04:00
top: 4px;
right: 4px;
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
// Desktop
// On larger viewports, make it look like a simple heading
@media (min-width: 900px) {
position: static;
height: auto;
padding: 30px 40px;
text-align: left;
line-height: 1.15em;
background: none;
.btn-back {
display: none;
vertical-align: middle;
color: #666;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
.btn {
vertical-align: middle;
line-height: 1.428571429;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
.page-title {
display: inline;
2014-07-30 14:39:38 +04:00
padding: 0;
2014-08-16 20:39:52 +04:00
font-size: 2.6rem;
line-height: 1.3;
overflow: visible;
color: $darkgrey;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
.page-actions {
position: static;
float: right;
2014-07-30 14:39:38 +04:00
}
}
2014-08-16 20:39:52 +04:00
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
// This is the header for /ghost/settings/view/subview/
// It's black and fixed position at the top of the screen
.settings-subview-header {
@include clearfix;
2014-08-16 20:39:52 +04:00
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3000;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: #242628;
.btn-back {
position: absolute;
top: 4px;
left: 4px;
color: #fff;
background: transparent;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
.btn {
vertical-align: top;
line-height: 1.45;
2014-08-14 20:56:23 +04:00
}
2014-08-16 20:39:52 +04:00
.page-actions {
position: absolute;
top: 4px;
right: 4px;
2014-07-30 14:39:38 +04:00
}
2014-08-16 20:39:52 +04:00
// Desktop
// On larger viewports, make it look like a simple heading
@media (min-width: 900px) {
position: static;
height: auto;
padding: 30px 40px;
line-height: 1.15em;
background: none;
.btn-back {
position: static;
float:left;
color: #666;
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
.btn {
vertical-align: middle;
line-height: 1.428571429;
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
.page-title {
display: inline;
padding: 0;
font-size: 2.6rem;
line-height: 1.3;
overflow: visible;
color: $darkgrey;
}
2014-07-30 14:39:38 +04:00
2014-08-16 20:39:52 +04:00
.page-actions {
position: static;
float: right;
}
}
2014-07-30 14:39:38 +04:00
}