Ghost/ghost/admin/assets/sass/layouts/setup.scss
Paul Adam Davis 8e7b8f8bfa Swap out Ruby Sass for Node Sass
- Uses Node Bourbon https://www.npmjs.org/package/node-bourbon
- Produces source maps
- Removed all ruby dependencie

History:
- Remove bourbon from package and cleanup grunt tasks
- Un-bourbon keyframe animations
- Un-bourbon transitions
- Un-bourbon box-sizing
- Un-bourbon font-feature-settings
- Import bourbon clearfix mixin
- Un-bourbon linear gradients
- Un-bourbon input types
- Un-bourbon positions
- Un-bourbon transforms
- Un-bourbon notification animations
- Un-bourbon uploader box-sizing
- Un-bourbon border-radius
- Un-bourbon splitbutton transitions
- Add triangle mixin
- Un-bourbon default container positioning
- Un-bourbon flexbox properties
- Fix triangle mixin - It now has the same output as the Bourbon mixin
- Add autoprefixer
- Correct global default font size
- Remove unwanted prefixes - Because, y'know, autoprefixer
- Output from node sass migration - Includes all the files we usually have, plus source maps
2014-08-30 14:13:36 +01:00

120 lines
2.3 KiB
SCSS

//
// Setup
// --------------------------------------------------
// Slug: /ghost/setup/
// --------------------------------------------------
// These styles cover /ghost/setup/ which is the first
// screen that appears on a new Ghost install
.ghost-setup {
color: $midgrey;
background: $darkgrey;
@media (max-width: 550px) {
background: darken($darkgrey, 5%);
}
main {
top: 15px;
@media (max-width: 550px) {
top: 0;
}
}
}
// The wrapper to center the form in all ways
.setup-box {
display: table;
max-width: 500px;
height: 90%;
margin: 0 auto;
padding: 0;
}
// The form itself with the dark background
.setup-form {
max-width: 530px;
padding: 40px;
color: lighten($midgrey, 15%);
background: darken($darkgrey, 5%);
border-radius: 2px;
@media (max-width: 400px) {
padding: 15px;
}
header {
margin-bottom: 30px;
}
label {
// width: 90px;
color: $lightgrey;
font-weight: 300;
@media (max-width: 550px) {
width: 100%;
}
}
.form-group input {
// width: 300px;
padding: 7px;
border: none;
color: #fff;
background: lighten($darkgrey, 10%);
transition: background 0.25s ease;
&:focus {
border:none;
background: lighten($darkgrey, 15%);
}
}
// Chrome auto-fill style
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
}
h1 {
margin: 0;
font-weight: 200;
font-size: 26px;
letter-spacing: 0;
color: $lightgrey;
@media (max-width: 550px) {
font-size: 20px;
}
}
h2 {
margin: 6px 0 0 0;
padding: 0;
border: none;
font-weight: 200;
font-size: 16px;
letter-spacing: 0;
color: $midgrey;
white-space: nowrap;
@media (max-width: 550px) {
font-size: 14px;
}
}
p {
font-size: 12px;
line-height: 1.4em;
color: $midgrey;
}
footer {
margin: 30px 0 5px 0;
}
.btn-green {
width: 100%;
padding: 0.9em 1.8em;
font-size: 13px;
}
}