wikimedia/mediawiki-core

/*!
 * MediaWiki Widgets – PHP DateInputWidget styles.
 *
 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */
@import 'mediawiki.skin.variables.less';

// Variables taken from OOUI's WikimediaUI theme
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875 / 1em; // equals `14px` at browser default of `16px`
@ooui-unit: em;

@padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
@padding-horizontal-input-text: 8px;
@padding-vertical-base: 6px;

// `line-height` has to be relative/in `em` to enable user override in browser settings.
@line-height-widget-base: unit( 18 / @ooui-font-size-browser / @ooui-font-size-base, @ooui-unit ); // equals `18px` at base `font-size: 14px;

.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
    margin-right: @spacing;

    &:last-child {
        margin-right: @cancelled-spacing;
    }
}

// DateInputWidget rules
.mw-widget-dateInputWidget {
    &.oo-ui-textInputWidget {
        display: inline-block;
        max-width: 21em;
        // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`

        .oo-ui-labelElement-label {
            line-height: @line-height-widget-base;
        }
    }

    // Note that this block applies to both the PHP widget and the JS widget
    &-handle,
    &.oo-ui-textInputWidget input {
        display: inline-block;
        position: relative;
        cursor: pointer;
        /**
         * Ensures non-infused and infused widget have the same height.
         * Equal to line height + top padding + bottom padding
         */
        max-height: 2.458em;
    }

    // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
    &-handle {
        background-color: @background-color-base;
        color: @color-emphasized;
        box-sizing: border-box;
        width: 100%;
        border: @border-base;
        border-radius: @border-radius-base;
        padding: @padding-input-text;
        line-height: @line-height-widget-base;
    }

    &.oo-ui-widget-enabled {
        .mw-widget-dateInputWidget-handle {
            // `transparent` necessary for smooth transition
            box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
            transition-property: border-color, box-shadow;
            transition-duration: @transition-duration-medium;

            &:hover {
                border-color: @border-color-input--hover;
            }

            &:focus {
                outline: @outline-base--focus;
                border-color: @border-color-progressive--focus;
                box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
            }

            & > .oo-ui-labelElement-label {
                cursor: pointer;
            }
        }
    }

    &-active {
        &.oo-ui-textInputWidget input {
            cursor: text;
        }
    }
}