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

Infusion is an application framework for developing flexible stuff with JavaScript

/* General Preferences Editor styles, used for all layouts */

// Helpers
@import "utils/Helpers"
@import "utils/Themes"

@font-face {
    font-family: 'PrefsFramework-Icons';
    src: url('../fonts/PrefsFramework-Icons.woff');
}

.fl-prefsEditor {
    font-family: "Myriad Pro", Helvetica, Arial, sans-serif;

    // Controls
    .fl-prefsEditor-panels {
        margin-left: 0;
        padding: 0;
        li {
            list-style: none;
        }
    }

    label {
        font-size: 1.2em;
    }

    input {
        &[type="text"] {
            width:2em;
            font-size: 1em;
        }

        // Check boxes
        &[type="checkbox"] {
            margin-right:10px;
            border: 1px solid black;
        }
    }

    // Fieldset (remove default browser visual styling)
    fieldset {
        border: 0 transparent;
        margin: 0;
        padding: 0;
    }

    // Legend
    legend {
        padding: 0;
        margin: 0 0 1em 0;
        display: block;
    }

    // Drop downs
    select {
        border: 2px solid #ebebeb;
    }

    select {
        &#textFont {
            margin: 0 auto;
            display: block;
            font-weight:bold;
            option {
                &.times {
                    font-family: "Times New Roman";
                }
                &.comic {
                    font-family: "Comic Sans MS";
                }
                &.arial {
                    font-family: Arial;
                }
                &.verdana {
                    font-family: Verdana;
                }
            }
        }

        &#theme {
            font-weight:bold;
            text-transform: uppercase;

            option.fl-prefsEditor-default-theme {
                color: #000 !important;
                background-color: #efefef !important;
            }
        }
    }

    // Text and display controls
    .fl-prefsEditor-text {
        label {
            display: block;
        }

        .fl-inputs {
            font-size: 1em;
        }
    }

    .fl-prefsEditor-layout div,
    .fl-prefsEditor-links div {
        margin-left: 25px;
    }

    .fl-inputs div[class*='fl-icon-'] {
        font-size: 1.5em;
        margin-top: -0.15em;
    }

    // Theme radio buttons
    .fl-choices {
        display: flex;
        justify-content: center;

        .fl-choice {
            input.fl-hidden-accessible {
                // These overrides to the default behaviour of .fl-hidden-accessible are required to keep the
                // radio button hidden from view, accessible and allow the input to be scrolled into view when tab
                // focused. Using position fixed or absolute does not scroll the input into view when focused.
                // See: FLUID-6228 ( https://issues.fluidproject.org/browse/FLUID-6228 )
                position: relative;

                // position behind label
                z-index: -2;
                top: 1rem;
                left: 1rem;
            }
            label {
                margin-right: 5px;
                border: 1px solid black;
                border-radius: 5px;
                height: 2.5em;
                width: 2.5em;
                text-align: center;
                vertical-align: middle;
                display: inline-block;
                line-height: 2.2em !important;
                padding: 2px;
            }
            &:last-child label {
                margin-right: 0;
            }
            .fl-preview-A {
                font-size: 1.7em;
                letter-spacing: normal // prevents the preview content from shifting when letter-spacing is set
            }

            // Pseudo content to prevent AT from reading display 'a'
            .fl-preview-A:before {
                content: "a";
            }

            input:focus ~ label {
                outline: 2px solid black;
            }
        }
    }

    // Stepper
    // Custom styling for the textfield stepper when used in the prefs framework

    .fl-textfieldStepper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fl-textfieldStepper-focusContainer {
        padding: 0.2em;
    }

    .fl-textfieldStepper *:focus {
        outline: none;
    }

    .fl-textfieldStepper-focus {
        outline: solid 0.2em #000000;
    }

    /* height and width specified in ems instead of rems
       to respond to emphasize links preferences */
    .fl-textfieldStepper .fl-textfieldStepper-textField {
        margin: 0 0.5em;
        width: 4em;
        height: 2em;
        text-align: center;
    }

    .fl-textfieldStepper .fl-textfieldStepper-button {
        border: 2px solid #000000;
        border-radius: 0.4rem;
        background-color: #FFFFFF;
        height: 2.4375em;
        width: 2.4375em;
    }

    .fl-textfieldStepper .fl-textfieldStepper-button:disabled {
        opacity: 0.3;
    }

    // ON/OFF Switch
    .fl-prefsEditor-onoff {
        @import "../../../../components/switch/css/stylus/Switch.styl"
    }

    // Font Icons
    .fl-icon-indicator, .fl-icon-crossout, .fl-icon-big-a, .fl-icon-small-a, .fl-icon-line-space-expanded,
    .fl-icon-line-space-condensed, .fl-icon-contrast, .fl-icon-undo, .fl-icon-line-space, .fl-icon-inputs,
    .fl-icon-simplify, .fl-icon-font, .fl-icon-size, .fl-icon-text-to-speech, .fl-icon-toc, .fl-icon-letter-space,
    .fl-icon-letter-space-expanded, .fl-icon-letter-space-condensed, .fl-icon-captions, .fl-icon-word-space,
    .fl-icon-word-space-condensed, .fl-icon-word-space-expanded, .fl-icon-syllabification {
        font-family: 'PrefsFramework-Icons';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        margin-right: 0.3em;
        font-size: 1.5em;
    }

    // control icons

    .fl-icon-crossout:before, .fl-choice .fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout:before {
        content: "\e004";
    }
    .fl-icon-big-a:before {
        content: "\e006";
    }
    .fl-icon-small-a:before {
        content: "\e007";
    }
    .fl-icon-letter-space-expanded:before {
        content: "\e000";
    }
    .fl-icon-letter-space-condensed:before {
        content: "\e001";
    }
    .fl-icon-line-space-expanded:before {
        content: "\e009";
    }
    .fl-icon-line-space-condensed:before {
        content: "\e00a";
    }
    .fl-icon-indicator:before, .fl-choice input:checked + div:before {
        content: "\e003";
    }

    .fl-choice {
        .fl-indicator {
            font-family: 'PrefsFramework-Icons' !important;
            margin-top: -1.5em;
            height: 1em;
            width: calc(100% - 5px); // deduct the right margin from the calculation
            text-align: center;
            font-size: 1.25em;
        }
        &:last-child .fl-indicator {
            width: 100%;
        }

        .fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout {
            font-family: 'PrefsFramework-Icons' !important;
            background-color: transparent !important;
            margin-top: -1.05em;
            font-size: 2.2em;
        }

        label.fl-theme-prefsEditor-default,
        label.fl-theme-prefsEditor-default span,
        label.fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout {
            background-color: #FFFFFF !important;
            border-color: #433F3D !important;
            color: #433F3D !important;
        }
    }

    // header icons
    .fl-icon-letter-space:before {
        content: "\e002";
    }
    .fl-icon-contrast:before {
        content: "\e005";
    }
    .fl-icon-line-space:before {
        content: "\e00b";
    }
    .fl-icon-inputs:before {
        content: "\e00c";
    }
    .fl-icon-simplify:before {
        content: "\e00d";
    }
    .fl-icon-settings:before {
        content: "\e00e";
    }
    .fl-icon-font:before {
        content: "\e00f";
    }
    .fl-icon-size:before {
        content: "\e010";
    }
    .fl-icon-text-to-speech:before {
        content: "\e011";
    }
    .fl-icon-toc:before {
        content: "\e012";
    }
    .fl-icon-captions:before {
        content: "\e013";
    }
    .fl-icon-word-space:before {
        content: "\e014";
    }
    .fl-icon-word-space-condensed:before {
        content: "\e015";
    }
    .fl-icon-word-space-expanded:before {
        content: "\e016";
    }
    .fl-icon-syllabification:before {
        content: "\e017";
    }
}
// Theming
build-themes-prefsEditor(themes);