ghost/core/client/assets/sass/layouts/setup.scss

// ------------------------------------------------------------
// Setup
//
// Styles for the Tag Management screen
// Slug: /ghost/setup/
//
// * Page
// * Wrapper
// * Form
// ------------------------------------------------------------


//
// Page
// --------------------------------------------------
// Applied to the <body> element

.ghost-setup {
    color: $midgrey;
    background: $darkgrey;

    @media (max-width: 550px) {
        background: darken($darkgrey, 5%);
    }

    main {
        padding-top: 15px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        @media (max-width: 550px) {
            top: 0;
        }
    }
}


//
// Wrapper
// --------------------------------------------------
// Centered in the middle of the screen

.setup-box {
    display: table;
    max-width: 500px;
    height: 90%;
    margin: 0 auto;
    padding: 0;
}


//
// Form
// --------------------------------------------------

.setup-form {
    max-width: 530px;
    padding: 40px;
    color: lighten($midgrey, 15%);
    border-radius: 2px;

    @media (max-width: 400px) {
        padding: 15px;
    }

    @media (min-width: 551px) {
        background: darken($darkgrey, 5%);
    }

    header {
        margin-bottom: 30px;
    }

    label {
        color: $lightgrey;
        font-weight: 300;

        @media (max-width: 550px) {
            width: 100%;
        }
    }

    .form-group input {
        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: 400px) {
            font-size: 18px;
        }

        @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;

        @media (max-width: 400px) {
            font-size: 12px;
        }

        @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;
    }
}//.setup-form
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`// ------------------------------------------------------------`
Setup 2014-07-30 02:46:18 -05:00			`// Setup`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`//`
			`// Styles for the Tag Management screen`
About Ghost screen 2014-07-30 02:51:37 -05:00			`// Slug: /ghost/setup/`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`//`
			`// * Page`
			`// * Wrapper`
			`// * Form`
			`// ------------------------------------------------------------`


			`//`
			`// Page`
About Ghost screen 2014-07-30 02:51:37 -05:00			`// --------------------------------------------------`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`// Applied to the <body> element`
Setup 2014-07-30 02:46:18 -05:00
			`.ghost-setup {`
			`color: $midgrey;`
			`background: $darkgrey;`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00
Setup 2014-07-30 02:46:18 -05:00			`@media (max-width: 550px) {`
			`background: darken($darkgrey, 5%);`
			`}`

			`main {`
Fix notifications being cur off on auth/setup screens 2014-09-27 04:44:54 -05:00			`padding-top: 15px;`
Allow scroll on setup form 2014-09-27 04:44:27 -05:00			`overflow: auto;`
			`-webkit-overflow-scrolling: touch;`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00
Setup 2014-07-30 02:46:18 -05:00			`@media (max-width: 550px) {`
			`top: 0;`
			`}`
			`}`
			`}`

Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00
			`//`
			`// Wrapper`
			`// --------------------------------------------------`
			`// Centered in the middle of the screen`

Setup 2014-07-30 02:46:18 -05:00			`.setup-box {`
			`display: table;`
			`max-width: 500px;`
			`height: 90%;`
			`margin: 0 auto;`
			`padding: 0;`
			`}`

Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00
			`//`
			`// Form`
			`// --------------------------------------------------`

Setup 2014-07-30 02:46:18 -05:00			`.setup-form {`
			`max-width: 530px;`
			`padding: 40px;`
			`color: lighten($midgrey, 15%);`
			`border-radius: 2px;`

			`@media (max-width: 400px) {`
			`padding: 15px;`
			`}`

Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`@media (min-width: 551px) {`
			`background: darken($darkgrey, 5%);`
			`}`

Setup 2014-07-30 02:46:18 -05:00			`header {`
			`margin-bottom: 30px;`
			`}`

			`label {`
			`color: $lightgrey;`
			`font-weight: 300;`

			`@media (max-width: 550px) {`
			`width: 100%;`
			`}`
			`}`

Refactor auth CSS This means signing screen icons now depend on new markup 2014-08-19 09:25:24 -05:00			`.form-group input {`
Setup 2014-07-30 02:46:18 -05:00			`padding: 7px;`
			`border: none;`
			`color: #fff;`
			`background: lighten($darkgrey, 10%);`
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-26 05:56:02 -05:00			`transition: background 0.25s ease;`
Setup 2014-07-30 02:46:18 -05:00
			`&: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;`
Refactor auth CSS This means signing screen icons now depend on new markup 2014-08-19 09:25:24 -05:00			`letter-spacing: 0;`
Setup 2014-07-30 02:46:18 -05:00			`color: $lightgrey;`

Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`@media (max-width: 400px) {`
			`font-size: 18px;`
			`}`

Setup 2014-07-30 02:46:18 -05:00			`@media (max-width: 550px) {`
			`font-size: 20px;`
			`}`
			`}`

			`h2 {`
			`margin: 6px 0 0 0;`
			`padding: 0;`
			`border: none;`
			`font-weight: 200;`
			`font-size: 16px;`
Refactor auth CSS This means signing screen icons now depend on new markup 2014-08-19 09:25:24 -05:00			`letter-spacing: 0;`
Setup 2014-07-30 02:46:18 -05:00			`color: $midgrey;`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00
			`@media (max-width: 400px) {`
			`font-size: 12px;`
			`}`
Setup 2014-07-30 02:46:18 -05:00
			`@media (max-width: 550px) {`
			`font-size: 14px;`
			`}`
			`}`

			`p {`
			`font-size: 12px;`
			`line-height: 1.4em;`
			`color: $midgrey;`
			`}`

			`footer {`
			`margin: 30px 0 5px 0;`
			`}`

Convert old button override styles to new classes (and some cleanup) 2014-08-06 06:36:35 -05:00			`.btn-green {`
Setup 2014-07-30 02:46:18 -05:00			`width: 100%;`
			`padding: 0.9em 1.8em;`
			`font-size: 13px;`
			`}`
Cleanup layout Sass Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible 2014-11-21 20:06:18 -05:00			`}//.setup-form`