form-runner-base.less

// Copyright (C) 2010 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference) "form-runner-common";

.orbeon {

    -webkit-text-size-adjust: 100%; // Prevent font scaling in landscape while allowing user zoom

    .navbar .navbar-inner .container {
        .fr-status-icons {
            display: block;
            float: right;
            i { margin-left: 5px; }
        }

        .badge { margin-left: 5px; }

        img { margin-right: 15px; }
        h1 { margin-left: 0; }
    }

    .fr-body {
        display: block;
    }

    // ***** Utilities *************************************************************************************************
    .fr-clear { clear: both }

    .fr-clear-container {
        .clearfix()
    }

    // ***** Portlet reset *********************************************************************************************

    // From YUI font.css, but applied to portlet body only
    .orbeon-portlet-body {
        font: 13px/1.231 arial,helvetica,clean,sans-serif;
    }

    // ***** XForms Controls *******************************************************************************************

    .xforms-noscript {
        // NOTE: In noscript mode, help appears last in a control for accessibility reasons
        .xforms-help {
            display: block;
            margin: 0 0 0 .5em;
        }

        // Noscript help section
        .xforms-help-panel {
            display: block;
            width: auto;
            padding: 0 1em;

            .xforms-help-group { margin: 0 0 .5em }
            .xforms-label { display: inline }
            .xforms-help { display: none }
        }

        .fr-help-back { margin-left: .5em }

        .fr-mode-view, .fr-mode-pdf, .fr-mode-email {
            .xforms-help {
                display: none;
            }
        }
    }

    // Hide alerts by default
    // NOTE: Include active alerts because Form Runner only shows active alerts for visited controls
    .xforms-alert, .xforms-alert.xforms-active {
        display: none;
    }

    // Show active alerts for visited controls only
    // Cover case of nested alert and case of external alert
    .xforms-visited > .xforms-alert.xforms-active:not(:empty),
    .xforms-visited.xforms-alert.xforms-active:not(:empty) {
        display: block;
        clear: both;

        margin-top: .2em;
        margin-left: 0;// used to have margin here but with new colors no margin seems better
        height: auto;
        width: auto;// width: 100%;
        padding: 1px;

        // override xforms.css
        font-weight: normal;
        font-size: inherit;
        text-indent: 0;
        background-image: none;
        white-space: normal;// allow for multiline alert messages

        > ul {
            margin-bottom: 0;
            list-style-type: square;
        }
    }

    // Show hints inline (they are hidden by default in xforms.less)...
    // NOTE: `.xforms-hint-appearance-inline` is for backward compatibility only and replaced with `.xforms-hint-appearance-full`.
    .xforms-hint-appearance-full, .xforms-hint-appearance-inline {
        .xforms-hint {
            display: block;
            width: 100%;
            clear: both;
        }

        // ...except for grid headings for input fields if there is a local `minimal` appearance
        .fr-grid-lhh-for-xforms-input .xforms-hint.xforms-hint-appearance-minimal {
            display: none;
        }

        // ...and except for radio buttons/checkboxes, where hints cannot be inline and show on mouseover
        .xforms-items .xforms-hint {
            display: none;
        }
    }

    // ...and except for grid headings for input fields if there is a global `minimal` appearance but no `full` local appearance
    .xforms-hint-appearance-minimal .fr-grid-lhh-for-xforms-input .xforms-hint:not(.xforms-hint-appearance-full) {
        display: none;
    }

    // Make sure text in trigger does not wrap (leads to non-native widget being used on Firefox)
    .xforms-trigger button, .xforms-trigger input {
        white-space: nowrap;
    }

    // Allow output to wrap (like .xforms-field)
    .xforms-output output {
        word-wrap: break-word;
        white-space: normal;
    }

    // Updates to Bootstrap btn-link
    button.btn-link {
        text-decoration: underline;
        font-size: inherit;
        padding: 0 0 2px 0;
    }

    // Upload control information
    .xforms-upload-info {
        display: block;
        width: 100%;
        padding: 2px 2px 2px 18px;
        background: url( images/silk/attach.png ) no-repeat left center;
        .box-sizing(border-box);
    }

    .xforms-help-panel-message {
        padding: .5em 0;
        margin-bottom: .5em;
        border-bottom: 2px solid @frBorderColor;
    }

    // We don't like the "spinners" to increment/decrement numbers
    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    // For checkboxes and radio buttons, unlike what is done by default by Bootstrap, we don't want the "white"
    // area to the right of the label text to be clickable. Otherwise users might select a radio or checkbox by
    // mistake, while they intended to click on the background of the page. This means that the <label> should
    // only extend as far to the right as necessary for the text of the label, but not always all the way to the
    // right of the space available to the control.

    .xforms-select1-appearance-full,
    .xforms-select-appearance-full  {
        .xforms-selected,
        .xforms-deselected {
            display: block;
        }
        label.radio,
        label.checkbox {
            display: inline-block;
            padding-left: 0;
        }
        input[type="radio"],
        input[type="checkbox"] {
            margin-left: 0;
        }
        label.radio > span,
        label.checkbox > span {
            display: block;
            margin-left: 20px;
        }
    }

    .fr-mode-new, .fr-mode-edit, .fr-mode-test, .xforms-dialog {
        .xforms-readonly {
            label.radio, label.checkbox, .xforms-label {
                color: @grayLight;
            }
        }
    }

    // ***** General Layout ********************************************************************************************

    // Language and mode selectors
    .fr-language-choice, .fr-noscript-choice, .fr-goto-content, .fr-status-icons {
        margin-right: 10px;

        .xforms-label {
            display: inline;
            margin-right: 5px;
        }
    }

    // Enable noscript icon when in noscript mode
    .fr-noscript-icon { display: none }
    .xforms-noscript .fr-noscript-icon { display: inline }

    // Messages
    .fr-message-success {
        display: block;
        .box-sizing(border-box);
        width: 100%;
    }

    // Explanation message if present
    .fr-explanation { padding: 10px }

    // Button bar

    .fr-buttons {
        display: block;
        text-align: right;
        font-size: 0; // Removes space between buttons, see http://stackoverflow.com/a/19038859/5295

        .fr-buttons-message div { display: inline }

        // Space between the image and the text in a button, only for the buttons bar
        //   (not other buttons in the form which might contain just an image)
        .xforms-trigger button img { margin-right: 10px }

        .xforms-trigger button, .xforms-trigger input {
            width:         9.5em;
            margin-left:   4px;
            margin-bottom: 4px;
        }

        // Special sizing for expand/collapse/refresh buttons
        .fr-collapse-all-button.xforms-trigger button, .fr-expand-all-button.xforms-trigger button, .fr-refresh-button.xforms-trigger button {
            min-width: 2em;
            width: 2em;
            padding: 0;
        }

        // Special sizing for new expand/collapse/refresh buttons
        .fr-collapse-all-button.xforms-trigger button, .fr-expand-all-button.xforms-trigger button, .fr-refresh-button.xforms-trigger button {
            min-width: 2em;
            width: 2em;
            padding: 3px;
        }
    }

    // ***** Dialogs ***************************************************************************************************

    // Dialogs
    .xforms-dialog {
        // Keep the dialog fairly narrow to increase legibility, but allow it to be narrower on phones
        max-width: 500px;
        // YUI puts a left: 10px, so add a corresponding margin on the right side
        margin-right: 10px;

        .bd p {
            margin: .5em 0 .5em 0
        }

        .fr-dialog-icon {
            float: left;
            margin-right: 2em;
            margin-left: 1em;
            padding-bottom: 1em
        }

        .fr-dialog-buttons {
            text-align: right;
            padding: 10px 5px 0 5px;     // dialog bd already has padding so no padding-bottom
            margin-top: 5px;             // so that content above doesn't touch us
            border-top: 2px solid @frBorderColor;
            clear: both
        }
    }

    .fr-captcha {
        display: block;                             // By default captcha is inline
        .fr-border();
        text-align: right;

        .xbl-fr-recaptcha, .xbl-fr-simple-captcha {
            display: inline-block;

            & > .xforms-label, & > .xforms-alert {
                display: none;
            }
        }

        .xbl-fr-recaptcha {
            display: inline-block;

            // Override clean theme
            #recaptcha_response_field {
                font-size: @frFontSize;
            }

            .recaptchatable {
                border: none !important;
                .recaptcha_image_cell {
                    background-color: transparent !important;
                }
            }
        }
    }

    #fr-view {

        margin-bottom: 10px;    // otherwise buttons at the bottom touch the viewport

        .fr-grid .fr-grid-tr .fr-grid-td {

            // Custom control widths
            .fr-width-2em     input.xforms-input-input, .fr-width-2em select      { width: 2em }
            .fr-width-3em     input.xforms-input-input, .fr-width-3em select      { width: 3em }
            .fr-width-4em     input.xforms-input-input, .fr-width-4em select      { width: 4em }
            .fr-width-5em     input.xforms-input-input, .fr-width-5em select      { width: 5em }
            .fr-width-7em     input.xforms-input-input, .fr-width-7em select      { width: 7em }
            .fr-width-10em    input.xforms-input-input, .fr-width-10em select     { width: 10em }
            .fr-width-12em    input.xforms-input-input, .fr-width-12em select     { width: 12em }
            .fr-width-15em    input.xforms-input-input, .fr-width-15em select     { width: 15em }
            .fr-width-100pc   input.xforms-input-input, .fr-width-100pc select    { width: 100% }

            .fr-width-2digits input.xforms-input-input, .fr-width-2digits select  { width: 29px; .xforms-mobile& { width: 32px } }
            .fr-width-4digits input.xforms-input-input, .fr-width-4digits select  { width: 43px; .xforms-mobile& { width: 54px } }
        }

        .xforms-help-popover {
            // Reset to Form Runner default, as those properties as otherwise influenced by the place where the popover
            // is used, e.g. they won't be correct when the popover is for a section title
            font-size:   @frFontSize;
            line-height: @baseLineHeight;
        }
    }

    // ***** View, PDF, email ******************************************************************************************

    // Textarea in output mode can contain line breaks so try to keep them
    .xforms-textarea pre {
        font-family: @sansFontFamily;   // use regular font, not monospaced font
        white-space: -moz-pre-wrap;
        white-space: pre-wrap;

        word-wrap: break-word; // called `overflow-wrap` as of 2013 (http://www.w3.org/TR/css3-text/#overflow-wrap-property)
        word-break: normal;    // Bootstrap overrides word-break (`word-break` is generally used for for CJK)
    }

    .xforms-form { // make rule a bit stronger to make sure hints are hidden
        .fr-mode-view, .fr-mode-pdf, .fr-mode-email {
            .xforms-hint, .xforms-help, .xforms-alert {
                display: none;
            }

            // For those controls that still have a display: block in view mode, make sure there is no top margin
            .fr-grid-td .xforms-control,
                .fr-grid-td .fr-component-group {
                margin-top: 0;
            }

            .fr-repeat-multiple-rows {
                .fr-grid-master-row { display: none }       // Hide the top header row, as we don't need the space for the *add* icon in view mode
                border-top: none;                           // Avoid double border at the top
            }
        }
    }

    // Allow wrapping of input fields content in view/pdf modes
    // https://github.com/orbeon/orbeon-forms/issues/1822
    .fr-mode-view, .fr-mode-pdf, .fr-mode-email {
        .xforms-field {
            white-space: normal;
            word-wrap: break-word;
            min-height: @controlsHeight;
            height: auto;
        }
    }
}

@media print {

    .orbeon #xforms-form { // make contained rules strong
        .fr-status-icons,                                              // no status icons
        .xforms-upload-remove,                                         // upload remove button
        .xbl-fr-attachment .xforms-output-appearance-xxforms-download, // no download link
        .xforms-help,                                                  // no help
        .xforms-hint,                                                  // no hints
        .fr-buttons                                                    // no buttons at bottom
        { display: none }

        // Remove background attachment image
        .xforms-upload-info { background: transparent none repeat scroll 0 0; padding-left: 2px }

        // Since only value is shown, no need for special height
        select[multiple], .xforms-select1-appearance-compact select, .xforms-select-appearance-compact select {
            height: auto;
        }

        // See https://github.com/orbeon/orbeon-forms/issues/872
        .fr-grid .xforms-output.xforms-mediatype-image img {
            -fs-fit-images-to-width: 100%;
        }
    }

    .navbar img {
        position: running(logo);
    }

    .fr-header-title {
        position: running(header-title);
    }

    .fr-footer-title {
        position: running(footer-title);
    }

    .fr-header-title, .fr-footer-title {
        div {
            max-height: 26px;
            overflow: hidden;
            text-overflow: ellipsis // not supported by Flying Saucer yet but would be nice
        }
    }

    // Flying Saucer doesn't handle these by default
    ol[type=i] {
        list-style-type: lower-roman;
    }

    ol[type=I] {
        list-style-type: upper-roman;
    }

    ol[type=a] {
        list-style-type: lower-alpha;
    }

    ol[type=A] {
        list-style-type: upper-alpha;
    }

    ol[type='1'] {
        list-style-type: decimal;
    }
}

@page {
    @top-left {
        content: element(logo);
        border-bottom: 1px solid gray;
        padding-bottom: 10px;
        vertical-align: bottom;
    }

    @top-center {
        content: element(header-title);
        border-bottom: 1px solid gray;
        padding-bottom: 10px;
        vertical-align: bottom;
        width: 100%;
    }

    @top-right {
        border-bottom: 1px solid gray;
        padding-bottom: 10px;
        vertical-align: bottom;
    }

    @bottom-left {
        content: element(footer-title);
        border-top: 1px solid gray;
        padding-top: 10px;
        margin-top: 0;
        vertical-align: top;
        font-size: 14px;
        padding-right: 10px;
        line-height: 26px;
    }
    @bottom-center {
        content: counter(page) " / " counter(pages);
        border-top: 1px solid gray;
        padding-top: 10px;
        margin-top: 0;
        vertical-align: top;
        font-size: 14px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 26px;
        white-space: nowrap;
    }

    @bottom-right {
        border-top: 1px solid gray;
        padding-top: 10px;
        vertical-align: top;
    }
}