Blame | Last modification | View Log | Download
// Name: Form// Description: Styles for forms//// Component: `uk-form-*`// `uk-input`// `uk-select`// `uk-textarea`// `uk-radio`// `uk-checkbox`// `uk-legend`// `uk-fieldset`//// Sub-objects: `uk-form-custom`// `uk-form-stacked`// `uk-form-horizontal`// `uk-form-label`// `uk-form-controls`// `uk-form-icon`// `uk-form-icon-flip`//// Modifiers: `uk-form-small`// `uk-form-large`// `uk-form-danger`// `uk-form-success`// `uk-form-blank`// `uk-form-width-xsmall`// `uk-form-width-small`// `uk-form-width-medium`// `uk-form-width-large`// `uk-form-controls-text`//// ========================================================================// Variables// ========================================================================@form-height: @global-control-height;@form-line-height: @form-height;@form-padding-horizontal: 10px;@form-padding-vertical: 4px;@form-background: @global-muted-background;@form-color: @global-color;@form-focus-background: @global-muted-background;@form-focus-color: @global-color;@form-disabled-background: @global-muted-background;@form-disabled-color: @global-muted-color;@form-placeholder-color: @global-muted-color;@form-small-height: @global-control-small-height;@form-small-padding-horizontal: 8px;@form-small-line-height: @form-small-height;@form-small-font-size: @global-small-font-size;@form-large-height: @global-control-large-height;@form-large-padding-horizontal: 12px;@form-large-line-height: @form-large-height;@form-large-font-size: @global-medium-font-size;@form-danger-color: @global-danger-background;@form-success-color: @global-success-background;@form-width-xsmall: 50px;@form-width-small: 130px;@form-width-medium: 200px;@form-width-large: 500px;@form-select-padding-right: 20px;@form-select-icon-color: @global-color;@form-select-option-color: #444;@form-select-disabled-icon-color: @global-muted-color;@form-datalist-padding-right: 20px;@form-datalist-icon-color: @global-color;@form-radio-size: 16px;@form-radio-margin-top: -4px;@form-radio-background: darken(@global-muted-background, 5%);@form-radio-checked-background: @global-primary-background;@form-radio-checked-icon-color: @global-inverse-color;@form-radio-checked-focus-background: darken(@global-primary-background, 10%);@form-radio-disabled-background: @global-muted-background;@form-radio-disabled-icon-color: @global-muted-color;@form-legend-font-size: @global-large-font-size;@form-legend-line-height: 1.4;@form-stacked-margin-bottom: @global-small-margin;@form-horizontal-label-width: 200px;@form-horizontal-label-margin-top: 7px;@form-horizontal-controls-margin-left: 215px;@form-horizontal-controls-text-padding-top: 7px;@form-icon-width: @form-height;@form-icon-color: @global-muted-color;@form-icon-hover-color: @global-color;@internal-form-select-image: "../../images/backgrounds/form-select.svg";@internal-form-datalist-image: "../../images/backgrounds/form-datalist.svg";@internal-form-radio-image: "../../images/backgrounds/form-radio.svg";@internal-form-checkbox-image: "../../images/backgrounds/form-checkbox.svg";@internal-form-checkbox-indeterminate-image: "../../images/backgrounds/form-checkbox-indeterminate.svg";/* ========================================================================Component: Form========================================================================== *//** 1. Define consistent box sizing.* Default is `content-box` with following exceptions set to `border-box`* `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. Change font properties to `inherit` in all browsers.*/.uk-input,.uk-select,.uk-textarea,.uk-radio,.uk-checkbox {/* 1 */box-sizing: border-box;/* 2 */margin: 0;/* 3 */border-radius: 0;/* 4 */font: inherit;}/** Show the overflow in Edge.*/.uk-input { overflow: visible; }/** Remove the inheritance of text transform in Firefox.*/.uk-select { text-transform: none; }/** 1. Change font properties to `inherit` in all browsers* 2. Don't inherit the `font-weight` and use `bold` instead.* NOTE: Both declarations don't work in Chrome, Safari and Opera.*/.uk-select optgroup {/* 1 */font: inherit;/* 2 */font-weight: bold;}/** Remove the default vertical scrollbar in IE 10+.*/.uk-textarea { overflow: auto; }/** Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.*/.uk-input[type="search"]::-webkit-search-cancel-button,.uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }/** Correct the cursor style of increment and decrement buttons in Chrome.*/.uk-input[type="number"]::-webkit-inner-spin-button,.uk-input[type="number"]::-webkit-outer-spin-button { height: auto; }/** Removes placeholder transparency in Firefox.*/.uk-input::-moz-placeholder,.uk-textarea::-moz-placeholder { opacity: 1; }/** Improves consistency of cursor style for clickable elements*/.uk-radio:not(:disabled),.uk-checkbox:not(:disabled) { cursor: pointer; }/** Define consistent border, margin, and padding.*/.uk-fieldset {border: none;margin: 0;padding: 0;}/* Input, select and textarea* Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`,`time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`* Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`========================================================================== *//** Remove default style in iOS.*/.uk-input,.uk-textarea { -webkit-appearance: none; }/** 1. Prevent content overflow if a fixed width is used* 2. Take the full width* 3. Reset default* 4. Style*/.uk-input,.uk-select,.uk-textarea {/* 1 */max-width: 100%;/* 2 */width: 100%;/* 3 */border: 0 none;/* 4 */padding: 0 @form-padding-horizontal;background: @form-background;color: @form-color;.hook-form;}/** Single-line* 1. Allow any element to look like an `input` or `select` element* 2. Make sure line-height is not larger than height* Also needed to center the text vertically*/.uk-input,.uk-select:not([multiple]):not([size]) {height: @form-height;vertical-align: middle;/* 1 */display: inline-block;.hook-form-single-line;}/* 2 */.uk-input:not(input),.uk-select:not(select) { line-height: @form-line-height; }/** Multi-line*/.uk-select[multiple],.uk-select[size],.uk-textarea {padding-top: @form-padding-vertical;padding-bottom: @form-padding-vertical;vertical-align: top;.hook-form-multi-line;}.uk-select[multiple],.uk-select[size] { resize: vertical; }/* Focus */.uk-input:focus,.uk-select:focus,.uk-textarea:focus {outline: none;background-color: @form-focus-background;color: @form-focus-color;.hook-form-focus;}/* Disabled */.uk-input:disabled,.uk-select:disabled,.uk-textarea:disabled {background-color: @form-disabled-background;color: @form-disabled-color;.hook-form-disabled;}/** Placeholder*/.uk-input::-ms-input-placeholder { color: @form-placeholder-color !important; }.uk-input::placeholder { color: @form-placeholder-color; }.uk-textarea::-ms-input-placeholder { color: @form-placeholder-color !important; }.uk-textarea::placeholder { color: @form-placeholder-color; }/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)========================================================================== *//** Small*/.uk-form-small { font-size: @form-small-font-size; }.uk-form-small:not(textarea):not([multiple]):not([size]) {height: @form-small-height;padding-left: @form-small-padding-horizontal;padding-right: @form-small-padding-horizontal;}.uk-form-small:not(select):not(input):not(textarea) { line-height: @form-small-line-height; }/** Large*/.uk-form-large { font-size: @form-large-font-size; }.uk-form-large:not(textarea):not([multiple]):not([size]) {height: @form-large-height;padding-left: @form-large-padding-horizontal;padding-right: @form-large-padding-horizontal;}.uk-form-large:not(select):not(input):not(textarea) { line-height: @form-large-line-height; }/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)========================================================================== *//** Error*/.uk-form-danger,.uk-form-danger:focus {color: @form-danger-color;.hook-form-danger;}/** Success*/.uk-form-success,.uk-form-success:focus {color: @form-success-color;.hook-form-success;}/** Blank*/.uk-form-blank {background: none;.hook-form-blank;}.uk-form-blank:focus {.hook-form-blank-focus;}/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`)========================================================================== *//** Fixed widths* Different widths for mini sized `input` and `select` elements*/input.uk-form-width-xsmall { width: @form-width-xsmall; }select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }.uk-form-width-small { width: @form-width-small; }.uk-form-width-medium { width: @form-width-medium; }.uk-form-width-large { width: @form-width-large; }/* Select========================================================================== *//** 1. Remove default style. Also works in Firefox* 2. Style* 3. Remove default style in IE 10/11* 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.*/.uk-select:not([multiple]):not([size]) {/* 1 */-webkit-appearance: none;-moz-appearance: none;/* 2 */padding-right: @form-select-padding-right;.svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);background-repeat: no-repeat;background-position: 100% 50%;}/* 3 */.uk-select:not([multiple]):not([size])::-ms-expand { display: none; }/* 4 */.uk-select:not([multiple]):not([size]) option { color: @form-select-option-color; }/** Disabled*/.uk-select:not([multiple]):not([size]):disabled { .svg-fill(@internal-form-select-image, "#000", @form-select-disabled-icon-color); }/* Datalist========================================================================== *//** 1. Remove default style in Chrome*/.uk-input[list] {padding-right: @form-datalist-padding-right;background-repeat: no-repeat;background-position: 100% 50%;}.uk-input[list]:hover,.uk-input[list]:focus { .svg-fill(@internal-form-datalist-image, "#000", @form-datalist-icon-color); }/* 1 */.uk-input[list]::-webkit-calendar-picker-indicator { display: none; }/* Radio and checkbox* Note: Does not work in IE11========================================================================== *//** 1. Style* 2. Make box more robust so it clips the child element* 3. Vertical alignment* 4. Remove default style* 5. Fix black background on iOS* 6. Center icons*/.uk-radio,.uk-checkbox {/* 1 */display: inline-block;height: @form-radio-size;width: @form-radio-size;/* 2 */overflow: hidden;/* 3 */margin-top: @form-radio-margin-top;vertical-align: middle;/* 4 */-webkit-appearance: none;-moz-appearance: none;/* 5 */background-color: @form-radio-background;/* 6 */background-repeat: no-repeat;background-position: 50% 50%;.hook-form-radio;}.uk-radio { border-radius: 50%; }/* Focus */.uk-radio:focus,.uk-checkbox:focus {outline: none;.hook-form-radio-focus;}/** Checked*/.uk-radio:checked,.uk-checkbox:checked,.uk-checkbox:indeterminate {background-color: @form-radio-checked-background;.hook-form-radio-checked;}/* Focus */.uk-radio:checked:focus,.uk-checkbox:checked:focus,.uk-checkbox:indeterminate:focus {background-color: @form-radio-checked-focus-background;.hook-form-radio-checked-focus;}/** Icons*/.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-checked-icon-color); }.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color); }.uk-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-checked-icon-color); }/** Disabled*/.uk-radio:disabled,.uk-checkbox:disabled {background-color: @form-radio-disabled-background;.hook-form-radio-disabled;}.uk-radio:disabled:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-disabled-icon-color); }.uk-checkbox:disabled:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-disabled-icon-color); }.uk-checkbox:disabled:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-disabled-icon-color); }/* Legend========================================================================== *//** Legend* 1. Behave like block element* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove padding so people aren't caught out if they zero out fieldsets.* 4. Style*/.uk-legend {/* 1 */width: 100%;/* 2 */color: inherit;/* 3 */padding: 0;/* 4 */font-size: @form-legend-font-size;line-height: @form-legend-line-height;.hook-form-legend;}/* Custom controls========================================================================== *//** 1. Container fits its content* 2. Create position context* 3. Prevent content overflow* 4. Behave like most inline-block elements*/.uk-form-custom {/* 1 */display: inline-block;/* 2 */position: relative;/* 3 */max-width: 100%;/* 4 */vertical-align: middle;}/** 1. Position and resize the form control to always cover its container* 2. Required for Firefox for positioning to the left* 3. Required for Webkit to make `height` work* 4. Hide controle and show cursor* 5. Needed for the cursor* 6. Clip height caused by 5. Needed for Webkit only*/.uk-form-custom select,.uk-form-custom input[type="file"] {/* 1 */position: absolute;top: 0;z-index: 1;width: 100%;height: 100%;/* 2 */left: 0;/* 3 */-webkit-appearance: none;/* 4 */opacity: 0;cursor: pointer;}.uk-form-custom input[type="file"] {/* 5 */font-size: 500px;/* 6 */overflow: hidden;}/* Label========================================================================== */.uk-form-label {.hook-form-label;}/* Layout========================================================================== *//** Stacked*/.uk-form-stacked .uk-form-label {display: block;margin-bottom: @form-stacked-margin-bottom;.hook-form-stacked-label;}/** Horizontal*//* Tablet portrait and smaller */@media (max-width: @breakpoint-small-max) {/* Behave like `uk-form-stacked` */.uk-form-horizontal .uk-form-label {display: block;margin-bottom: @form-stacked-margin-bottom;.hook-form-stacked-label;}}/* Tablet landscape and bigger */@media (min-width: @breakpoint-medium) {.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; }}/* Icons========================================================================== *//** 1. Set position* 2. Set width* 3. Center icon vertically and horizontally* 4. Style*/.uk-form-icon {/* 1 */position: absolute;top: 0;bottom: 0;left: 0;/* 2 */width: @form-icon-width;/* 3 */display: inline-flex;justify-content: center;align-items: center;/* 4 */color: @form-icon-color;}/** Required for `a`.*/.uk-form-icon:hover { color: @form-icon-hover-color; }/** Make `input` element clickable through icon, e.g. if it's a `span`*/.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; }/** Input padding*/.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-left: @form-icon-width !important; }/** Position modifier*/.uk-form-icon-flip {right: 0;left: auto;}.uk-form-icon-flip ~ .uk-input { padding-right: @form-icon-width !important; }// Hooks// ========================================================================.hook-form-misc;.hook-form() {}.hook-form-single-line() {}.hook-form-multi-line() {}.hook-form-focus() {}.hook-form-disabled() {}.hook-form-danger() {}.hook-form-success() {}.hook-form-blank() {}.hook-form-blank-focus() {}.hook-form-radio() {}.hook-form-radio-focus() {}.hook-form-radio-checked() {}.hook-form-radio-checked-focus() {}.hook-form-radio-disabled() {}.hook-form-legend() {}.hook-form-label() {}.hook-form-stacked-label() {}.hook-form-horizontal-label() {}.hook-form-misc() {}// Inverse// ========================================================================@inverse-form-background: @inverse-global-muted-background;@inverse-form-color: @inverse-global-color;@inverse-form-focus-background: @inverse-global-muted-background;@inverse-form-focus-color: @inverse-global-color;@inverse-form-placeholder-color: @inverse-global-muted-color;@inverse-form-select-icon-color: @inverse-global-color;@inverse-form-datalist-icon-color: @inverse-global-color;@inverse-form-radio-background: darken(@inverse-global-muted-background, 5%);@inverse-form-radio-checked-background: @inverse-global-primary-background;@inverse-form-radio-checked-icon-color: @inverse-global-inverse-color;@inverse-form-radio-checked-focus-background: darken(@inverse-global-primary-background, 10%);@inverse-form-icon-color: @inverse-global-muted-color;@inverse-form-icon-hover-color: @inverse-global-color;.hook-inverse() {.uk-input,.uk-select,.uk-textarea {background-color: @inverse-form-background;color: @inverse-form-color;background-clip: padding-box;.hook-inverse-form;&:focus {background-color: @inverse-form-focus-background;color: @inverse-form-focus-color;.hook-inverse-form-focus;}}//// Placeholder//.uk-input::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }.uk-input::placeholder { color: @inverse-form-placeholder-color; }.uk-textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }.uk-textarea::placeholder { color: @inverse-form-placeholder-color; }//// Select//.uk-select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-icon-color); }//// Datalist//.uk-input[list]:hover,.uk-input[list]:focus { .svg-fill(@internal-form-datalist-image, "#000", @inverse-form-datalist-icon-color); }//// Radio and checkbox//.uk-radio,.uk-checkbox {background-color: @inverse-form-radio-background;.hook-inverse-form-radio;}// Focus.uk-radio:focus,.uk-checkbox:focus {.hook-inverse-form-radio-focus;}// Checked.uk-radio:checked,.uk-checkbox:checked,.uk-checkbox:indeterminate {background-color: @inverse-form-radio-checked-background;.hook-inverse-form-radio-checked;}// Focus.uk-radio:checked:focus,.uk-checkbox:checked:focus,.uk-checkbox:indeterminate:focus {background-color: @inverse-form-radio-checked-focus-background;.hook-inverse-form-radio-checked-focus;}// Icon.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @inverse-form-radio-checked-icon-color); }.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color); }.uk-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @inverse-form-radio-checked-icon-color); }// Label.uk-form-label {.hook-inverse-form-label;}// Icon.uk-form-icon { color: @inverse-form-icon-color; }.uk-form-icon:hover { color: @inverse-form-icon-hover-color; }}.hook-inverse-form() {}.hook-inverse-form-focus() {}.hook-inverse-form-radio() {}.hook-inverse-form-radio-focus() {}.hook-inverse-form-radio-checked() {}.hook-inverse-form-radio-checked-focus() {}.hook-inverse-form-label() {}