infusion/src/framework/preferences/css/stylus/FullPreviewPrefsEditor.styl

Infusion is an application framework for developing flexible stuff with JavaScript

// UI Option styles for full page layout with preview

.fl-prefsEditor-fullPreview {
    min-width: 800px;

    ul li {
        clear: left;
    }

    .fl-prefsEditor-fullPreview-adjusters {
        width: 60%;
    }

    .fl-prefsEditor-fullPreview-previewContainer {
        width: 35%;
    }

    // Control section headers
    h2 {
        border-top: 2px solid #dddddd;
        margin-bottom: 20px;
    }

    .fl-prefsEditor-category {
        padding-bottom: 20px;
    }

    // Controls
    ul {
        margin-left: 0px;

        li {
            list-style: none;
            width: 100%;
        }
    }

    // Slider
    .fl-slider {
        float:left;
    }

    // Text controls
    label {
        display: block;
        width: 16em;
    }

    // Layout and link controls
    .fl-prefsEditor-layout li, .fl-prefsEditor-links li {
        padding-bottom: 10px;
    }

    // Preview Area
    .fl-prefsEditor-preview iframe {
        height: 480px;
        width: 100%;
        border: 2px solid #d7d7d7;
    }

    .fl-prefsEditor-preview h2 {
        font-weight: lighter;
        font-size: 1.8em;
        color: #4D4D4D;
        padding: 18px 0px 0px 0px;
    }
}

.fl-prefsEditor .fl-inputs {
    float: left;
}

.fl-prefsEditor input[type="text"] {
    width: 2em;
}