WebStackPage.github.io/assets/js/uikit/less/form.less

// Name:            Form
// Description:     Defines styles for forms
//
// Component:       `uk-form`
//
// Sub-objects:     `uk-form-row`
//                  `uk-form-help-inline`
//                  `uk-form-help-block`
//                  `uk-form-label`
//                  `uk-form-controls`
//                  `uk-form-controls-condensed`
//                  `uk-form-icon`
//
// Modifiers:       `uk-form-stacked`
//                  `uk-form-horizontal`
//
// Sub-modifiers:   `uk-form-danger`
//                  `uk-form-success`
//                  `uk-form-small`
//                  `uk-form-large`
//                  `uk-form-blank`
//                  `uk-form-width-mini`
//                  `uk-form-width-small`
//                  `uk-form-width-medium`
//                  `uk-form-width-large`
//                  `uk-form-controls-text`
//
// Markup:
//
// <!-- uk-form -->
// <form class="uk-form">
//     <div class="uk-form-row">
//         <label class="uk-form-label" for="form-input-1"></label>
//         <div class="uk-form-controls">
//             <input type="text" id="form-input-1" placeholder="Text">
//         </div>
//     </div>
// </form>
//
// ========================================================================


// Variables
// ========================================================================

@form-height:                                   30px;
@form-padding:                                  4px 6px;
@form-border:                                   #ddd;
@form-border-width:                             1px;
@form-background:                               #fff;
@form-color:                                    #444;

@form-focus-border:                             #99baca;
@form-focus-background:                         #f5fbfe;
@form-focus-color:                              #444;

@form-disabled-border:                          #ddd;
@form-disabled-background:                      #f5f5f5;
@form-disabled-color:                           #999;

@form-placeholder-color:                        #999;

@form-gutter:                                   15px;

@form-legend-border:                            #ddd;
@form-legend-border-width:                      1px;
@form-legend-font-size:                         18px;
@form-legend-line-height:                       30px;

@form-small-height:                             25px;
@form-large-height:                             40px;
@form-small-padding:                            3px 3px;
@form-large-padding:                            8px 6px;
@form-small-font-size:                          12px;
@form-large-font-size:                          16px;

@form-danger-border:                            #dc8d99;
@form-danger-background:                        #fff7f8;
@form-danger-color:                             #c91032;

@form-success-border:                           #8ec73b;
@form-success-background:                       #fafff2;
@form-success-color:                            #539022;

@form-blank-border:                             #ddd;
@form-blank-border-style:                       dashed;

@form-mini-width:                               40px;
@form-small-width:                              130px;
@form-medium-width:                             200px;
@form-large-width:                              500px;

@form-help-inline-margin-left:                  10px;
@form-help-block-margin-top:                    5px;

@form-controls-condensed-margin-vertical:       5px;

@form-stacked-margin-bottom:                    5px;
@form-stacked-font-weight:                      bold;

@form-horizontal-label-width:                   200px;
@form-horizontal-label-margin-top:              5px;
@form-horizontal-controls-margin-left:          215px;
@form-horizontal-controls-text-padding-top:     5px;

@form-icon-width:                               30px;
@form-icon-font-size:                           14px;
@form-icon-color:                               #999;


/* ========================================================================
   Component: Form
 ========================================================================== */

/*
 * 1. Define consistent box sizing.
 *    Default is `content-box` with following exceptions set to `border-box`
 *    `button`, `select`, `input[type="checkbox"]` and `input[type="radio"]`
 *    `input[type="search"]` in Chrome, Safari and Opera
 *    `input[type="color"]` in Firefox
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Correct `font` properties and `color` not being inherited.
 */

.uk-form input,
.uk-form select,
.uk-form textarea {
    /* 1 */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* 2 */
    margin: 0;
    /* 3 */
    border-radius: 0;
    /* 4 */
    font: inherit;
    color: inherit;
}

/*
 * Address inconsistent `text-transform` inheritance which is only inherit in Firefox
 */

.uk-form select { text-transform: none; }

/*
 * 1. Correct `font` properties not being inherited.
 * 2. Don't inherit the `font-weight` and use `bold` instead.
 * NOTE: Both declarations don't work in Chrome, Safari and Opera.
 */

.uk-form optgroup {
    /* 1 */
    font: inherit;
    /* 2 */
    font-weight: bold;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

.uk-form input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * Removes excess padding in IE 8/9/10.
 */

.uk-form input[type="checkbox"],
.uk-form input[type="radio"] { padding: 0; }

/*
 * Improves consistency of cursor style for clickable elements
 */

.uk-form input[type="checkbox"]:not(:disabled),
.uk-form input[type="radio"]:not(:disabled) { cursor: pointer; }

/*
 * Remove default style in iOS.
 */

.uk-form textarea,
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"],
.uk-form input[type="url"],
.uk-form input[type="search"],
.uk-form input[type="tel"],
.uk-form input[type="number"],
.uk-form input[type="datetime"] { -webkit-appearance: none; }

/*
 * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
 */

.uk-form input[type="search"]::-webkit-search-cancel-button,
.uk-form input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

.uk-form input[type="number"]::-webkit-inner-spin-button,
.uk-form input[type="number"]::-webkit-outer-spin-button { height: auto; }

/*
 * Define consistent border, margin, and padding.
 */

.uk-form fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/*
 * 1. Remove default vertical scrollbar in IE 8/9/10/11.
 * 2. Improve readability and alignment in all browsers.
 */

.uk-form textarea {
    /* 1 */
    overflow: auto;
    /* 2 */
    vertical-align: top;
}

/*
 * Removes placeholder transparency in Firefox.
 */

.uk-form ::-moz-placeholder { opacity: 1; }

/*
 * Removes `box-shadow` for invalid controls in Firefox.
 */

.uk-form :invalid { box-shadow: none; }

/*
 * Vertical alignment
 */

.uk-form input:not([type="radio"]):not([type="checkbox"]),
.uk-form select { vertical-align: middle; }


/* Style
 ========================================================================== */

/*
 * Remove margin from the last-child
 */

.uk-form > :last-child { margin-bottom: 0; }

/*
 * Controls
 * Except for `range`, `radio`, `checkbox`, `file`, `submit`, `reset`, `button` and `image`
 * 1. Must be `height` because `min-height` is not working in OSX
 * 2. Responsiveness: Sets a maximum width relative to the parent to scale on narrower viewports
 * 3. Vertical `padding` needed for `select` elements in Firefox
 * 4. Style
 */

.uk-form select,
.uk-form textarea,
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="datetime"],
.uk-form input[type="datetime-local"],
.uk-form input[type="date"],
.uk-form input[type="month"],
.uk-form input[type="time"],
.uk-form input[type="week"],
.uk-form input[type="number"],
.uk-form input[type="email"],
.uk-form input[type="url"],
.uk-form input[type="search"],
.uk-form input[type="tel"],
.uk-form input[type="color"] {
    /* 1 */
    height: @form-height;
    /* 2 */
    max-width: 100%;
    /* 3 */
    padding: @form-padding;
    /* 4 */
    border: @form-border-width solid @form-border;
    background: @form-background;
    color: @form-color;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    .hook-form;

    // Focus state
    &:focus {
        border-color: @form-focus-border;
        outline: 0;
        background: @form-focus-background;
        color: @form-focus-color;
        .hook-form-focus;
    }

    // Disabled state
    &:disabled {
        border-color: @form-disabled-border;
        background-color: @form-disabled-background;
        color: @form-disabled-color;
        .hook-form-disabled;
    }
}

/*
 * Placeholder
 */

.uk-form :-ms-input-placeholder { color: @form-placeholder-color !important; }
.uk-form ::-moz-placeholder { color: @form-placeholder-color; }
.uk-form ::-webkit-input-placeholder { color: @form-placeholder-color; }

.uk-form :disabled:-ms-input-placeholder { color: @form-disabled-color !important; }
.uk-form :disabled::-moz-placeholder { color: @form-disabled-color; }
.uk-form :disabled::-webkit-input-placeholder { color: @form-disabled-color; }

/*
 * Legend
 * 1. Behave like block element
 * 2. Correct `color` not being inherited in IE 8/9/10/11.
 * 3. Remove padding
 * 4. `margin-bottom` is not working in Safari and Opera.
 *    Using `padding` and :after instead to create the border
 * 5. Style
 */

.uk-form legend {
    /* 1 */
    width: 100%;
    /* 2 */
    border: 0;
    /* 3 */
    padding: 0;
    /* 4 */
    padding-bottom: @form-gutter;
    /* 5 */
    font-size: @form-legend-font-size;
    line-height: @form-legend-line-height;
    .hook-form-legend;
}

/* 4 */
.uk-form legend:after {
    content: "";
    display: block;
    border-bottom: @form-legend-border-width solid @form-legend-border;
}


/* Size modifiers
 * Higher specificity needed to override defaults
 ========================================================================== */

select.uk-form-small,
textarea.uk-form-small,
input[type].uk-form-small,
input:not([type]).uk-form-small {
    height: @form-small-height;
    padding: @form-small-padding;
    font-size: @form-small-font-size;
}

select.uk-form-large,
textarea.uk-form-large,
input[type].uk-form-large,
input:not([type]).uk-form-large  {
    height: @form-large-height;
    padding: @form-large-padding;
    font-size: @form-large-font-size;
}


/* Reset height
 * Must be after size modifiers
 ========================================================================== */

.uk-form textarea,
.uk-form select[multiple],
.uk-form select[size] { height: auto; }


/* Validation states
 * Using !important to keep the selector simple
 ========================================================================== */

/*
 * Error state
 */

.uk-form-danger {
    border-color: @form-danger-border !important;
    background: @form-danger-background !important;
    color: @form-danger-color !important;
    .hook-form-danger;
}

/*
 * Success state
 */

.uk-form-success  {
    border-color: @form-success-border !important;
    background: @form-success-background !important;
    color: @form-success-color !important;
    .hook-form-success;
}


/* Style modifiers
 * Using !important to keep the selector simple
 ========================================================================== */

/*
 * Blank form
 */

.uk-form-blank {
    border-color: transparent !important;
    border-style: @form-blank-border-style !important;
    background: none !important;
    .hook-form-blank;
}

.uk-form-blank:focus {
    border-color: @form-blank-border !important;
    .hook-form-blank-focus;
}


/* Size sub-modifiers
 ========================================================================== */

/*
 * Fixed widths
 * Different widths for mini sized `input` and `select` elements
 */

input.uk-form-width-mini { width: @form-mini-width; }
select.uk-form-width-mini { width: (@form-mini-width + 25px); }
.uk-form-width-small { width: @form-small-width; }
.uk-form-width-medium { width: @form-medium-width; }
.uk-form-width-large { width: @form-large-width; }


/* Sub-objects: `uk-form-row`
 * Groups labels and controls in rows
 ========================================================================== */

/*
 * Micro clearfix
 * Needed for `uk-form-horizontal` modifier
 */

.uk-form-row:before,
.uk-form-row:after {
    content: " ";
    display: table;
}

.uk-form-row:after { clear: both; }

/*
 * Vertical gutter
 */

.uk-form-row + .uk-form-row { margin-top: @form-gutter; }


/* Help text
 * Sub-object: `uk-form-help-inline`, `uk-form-help-block`
 ========================================================================== */

.uk-form-help-inline {
    display: inline-block;
    margin: 0 0 0 @form-help-inline-margin-left;
}

.uk-form-help-block { margin: @form-help-block-margin-top 0 0 0; }


/* Controls content
 * Sub-object: `uk-form-controls`, `uk-form-controls-condensed`
 ========================================================================== */

/*
 * Remove margins
 */

.uk-form-controls > :first-child { margin-top: 0; }
.uk-form-controls > :last-child { margin-bottom: 0; }

/*
 * Group controls and text into blocks with a small spacing between blocks
 */

.uk-form-controls-condensed { margin: @form-controls-condensed-margin-vertical 0; }


/* Modifier: `uk-form-stacked`
 * Requires sub-object: `uk-form-label`
 ========================================================================== */

.uk-form-stacked .uk-form-label {
    display: block;
    margin-bottom: @form-stacked-margin-bottom;
    font-weight: @form-stacked-font-weight;
    .hook-form-stacked-label;
}


/* Modifier: `uk-form-horizontal`
 * Requires sub-objects: `uk-form-label`, `uk-form-controls`
 ========================================================================== */

/* Tablet portrait and smaller */
@media (max-width: @breakpoint-medium-max) {

    /* Behave like `uk-form-stacked` */
    .uk-form-horizontal .uk-form-label {
        display: block;
        margin-bottom: @form-stacked-margin-bottom;
        font-weight: @form-stacked-font-weight;
        .hook-form-stacked-label;
    }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .uk-form-horizontal .uk-form-label {
        width: @form-horizontal-label-width;
        margin-top: @form-horizontal-label-margin-top;
        float: left;
        .hook-form-horizontal-label;
    }

    .uk-form-horizontal .uk-form-controls { margin-left: @form-horizontal-controls-margin-left; }

    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
    .uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }

}


/* Sub-object: `uk-form-icon`
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Prevent `inline-block` consequences
 */

.uk-form-icon {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
}

/*
 * 1. Make form element clickable through icon
 */

.uk-form-icon > [class*='uk-icon-'] {
    position: absolute;
    top: 50%;
    width: @form-icon-width;
    margin-top: round(@form-icon-font-size / -2);
    font-size: @form-icon-font-size;
    color: @form-icon-color;
    text-align: center;
    /* 1 */
    pointer-events: none;
}

.uk-form-icon:not(.uk-form-icon-flip) > input { padding-left: @form-icon-width !important; }

/*
 * Sub-modifier: `uk-form-icon-flip`
 */

.uk-form-icon-flip > [class*='uk-icon-'] { right: 0; }
.uk-form-icon-flip > input { padding-right: @form-icon-width !important; }


// Hooks
// ========================================================================

.hook-form-misc;

.hook-form() {}
.hook-form-focus() {}
.hook-form-disabled() {}
.hook-form-legend() {}
.hook-form-danger() {}
.hook-form-success() {}
.hook-form-blank() {}
.hook-form-blank-focus() {}
.hook-form-stacked-label() {}
.hook-form-horizontal-label() {}
.hook-form-misc() {}