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

/*
 * These styles control elements specific to the settings screen
 * used for configuring your Ghost install.
 *
 * Table of Contents:
 * 
 * Settings
 *
 */


/* =============================================================================
   Settings
   ============================================================================= */

.settings {
    // The main white bg for the page
    .wrapper {
        background: #fff;
        box-shadow: $shadow;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:0;
        padding:0;
    }

    .title {
        text-transform: uppercase;
        font-weight: normal;
        font-size: 1.6em;
        line-height: 0.8em;
        margin:0 0 18px 0;
        padding:0;
        border: none;
    }


/* =============================================================================
   Sidebar
   ============================================================================= */

    //The whole left column sidebar, duh.
    .settings-sidebar {
        width:20%;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        z-index: 700;
        box-shadow: $lightbrown 1px 0 0;
        @include breakpoint($tablet) {
            width:100%;
            box-shadow: none;
        }

        > header {
            height: 17px;
            padding: 30px 15px 30px 40px;
            margin-bottom: 0;
            border-bottom: none;
            box-shadow: #edece4 0 -1px 0 inset;
            @include breakpoint($netbook) {
                padding-left: 15px;
            };
        }
    }//.settings-sidebar

    //Main settings-menu styles, apply to every item
    .settings-menu {
        position:absolute;
        top: 77px; //30px + 17px title + 30px
        left:0;
        bottom:0;
        right:-1px;
        overflow: auto;
        @include breakpoint($tablet) { right:0; };

        ul {
            border-top:none;
            @include breakpoint($tablet) { border-bottom: #edece4 1px solid; }
        }

        li {
            margin-right:1px;
            border-top: #fff 1px solid;
            @include breakpoint($tablet) {
                margin-right:0;
                border-top: #edece4 1px solid;
            }

            a {
                padding:15px 15px 15px 40px;
                border-bottom:none;
                @include breakpoint($netbook) { padding-left: 15px; }
                @include breakpoint($tablet) {
                    @include icon-after($i-chevron) {float:right;margin-top:5px;};
                }
            }

            &:first-child { border-top: none; }
            &:first-child.active { border-top:none; }

            &.active {
                @include breakpoint($biggerthan-tablet) {
                    // only apply active styles on larger devices

                    margin-right:0;
                    position:relative;
                    z-index: 300;
                    border-top: #edece4 1px solid;
                    box-shadow:
                        #fff 1px 0 0,
                        #edece4 0 1px 0;
                    @include transition;

                    a {
                        color: $darkgrey;
                        font-weight: bold;
                        background: #fff;

                    }

                }
            }//.active

        }//li

        // Give all icons some space
        li a:before {
            margin-right: 20px;
            @include breakpoint($netbook) {
                margin-right: 15px;
            }
        }

        // Add the icons for specific menu items
        .general a { @include icon($i-settings) }
        .publishing a { @include icon($i-content) }
        .services a { @include icon($i-services) }
        .users a { @include icon($i-users) }
        .appearance a { @include icon($i-appearance) }
        .plugins a { @include icon($i-plugins) }

    }//.settings-menu


/* =============================================================================
   Content
   ============================================================================= */

    // The main content panel on the right
    .settings-content {
        padding:0;
        position:absolute;
        top:0;
        right:0;
        left:20%;
        bottom:0;
        @include breakpoint($tablet) { display: none; }

        display: none;
        &.active {display:block;}

        > header {
            height: 17px;
            padding: 30px 220px 29px 40px;
            border-bottom:$lightbrown 1px solid;
            margin-bottom:40px;
            text-transform: none;
            font-weight: normal;
            line-height: inherit;
            color: inherit;
            @include breakpoint($netbook) { padding-left:15px; }
            @include breakpoint($letterbox) {
                height: auto;
                padding: 5px;
                position: absolute;
                top:0;
                right:0;
                border:none;

                .title { display:none; }
            }

        }//header

        .page-actions {
            position:absolute;
            top:20px;
            right:40px;
            z-index: 700;
            font-size: 1em;
            @include breakpoint($netbook) { right:15px; }

            .button-add {
                position:relative;
                padding-left:50px;
                @include icon($i-add, 1.4em, rgba(255,255,255,0.6)) {
                    position: absolute;
                    top:0;
                    padding:9px 8px 0 0;
                    left:9px;
                    bottom:0;
                    width: 20px;
                    border-right: darken($green, 8%) 1px solid;
                };
            }
        }

        .content {
            position: absolute;
            top:77px; //30px + 17px title + 30px
            right:0;
            left:0;
            bottom:0;
            padding:40px;
            overflow:auto;

            @include breakpoint($netbook) { padding-left:15px; }
            @include breakpoint($letterbox) { top: 0; }
        }


        .user-group-header {
            margin-bottom: 0px;
            padding-bottom: 20px;
            border: 0 none;
            border-bottom: 1px solid darken($lightbrown, 10%);

            h3 {
                display: inline-block;
                margin: 0;
                color: $midbrown;
                font-weight: normal;
                font-size: 1.1em;
                line-height: 1em;
            }

        }

        .user-search {
            display: inline-block;
            float: right;

            label { margin: 0}

            &:hover .user-search-input, .user-search-input:focus {
                width: 260px;
                padding: 0 10px;
            }

            .user-search-input {
                @include box-sizing(border-box);
                width: 0px;
                padding: 0;
                border: none;
                border-bottom: lighten($lightbrown, 2%) 1px solid;
                @include transition(width 0.2s ease-in-out);
                box-shadow: none;
            }

            .search-icon {
                @include icon($i-search, 1em, $midbrown);
            }
        }

        .users {
            padding: 0px;
            margin-top: 0px;
            list-style: none;
        }

        .user {
            @include box-sizing(border-box);
            display: block;
            width: 100%;
            padding: 20px;
            border: 0 none;
            border-top: 1px solid $lightgrey;

            &:first-child {
                border: none;
            }

            .user-image {
                display: inline-block;
                width: 40px;
                height: 40px;
                margin-right: 17px;
                vertical-align: middle;
                background-color: $lightbrown;
                border-radius: 20px;

                &.invite {
                    @include box-sizing(border-box);
                    padding-top: 8px;
                    text-align: center;
                    @include icon($i-mail, 1em, $brown);
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                }
            }

            .user-meta {
                display: inline-block;
                vertical-align: middle;

                .user-name {
                    margin: 0;
                    margin-top: 0.4em;
                    font-weight: 400;
                    font-size: 1.2em;
                    line-height: 1em;
                }

                .user-last-seen {
                    line-height: 1em;
                }
            }
        }

        .user-role {
            padding: 2px 8px;
            float: right;
            font-size: 0.8em;
            color: #fff;
            text-transform: uppercase;

            &.admin {
                background-color: #DE523A;
            }
            &.editor {
                background-color: #4A8CBD;
            }
        }
    }//.settings-content

}//.settings