blazer-rails 0.1.0

data/vendor/assets/components/uikit/less/core/form.less

@@ -0,0 +1,629 @@
+// 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:                             #d85030;
+
+@form-success-border:                           #8ec73b;
+@form-success-background:                       #fafff2;
+@form-success-color:                            #659f13;
+
+@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 */
+    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 0.2s linear;
+    -webkit-transition-property: border, background, color, box-shadow, padding;
+    transition: all 0.2s linear;
+    transition-property: border, background, color, box-shadow, padding;
+    .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;
+}
+
+/*
+ * 1. Fixes IE9
+ */
+
+.uk-form legend:after {
+    content: "";
+    display: block;
+    border-bottom: @form-legend-border-width solid @form-legend-border;
+    /* 1 */
+    width: 100%;
+}
+
+
+/* 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() {}