uikit3-rails 0.1.0

data/assets/stylesheets/components/form.less

@@ -0,0 +1,836 @@
+// 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:                       6px;
+@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-large-height:                             @global-control-large-height;
+@form-small-line-height:                        @form-small-height;
+@form-large-line-height:                        @form-large-height;
+@form-small-font-size:                          @global-small-font-size;
+@form-large-font-size:                          @global-medium-font-size;
+
+@form-danger-color:                             @global-danger-background;
+@form-success-color:                            @global-success-background;
+
+@form-width-xsmall:                             40px;
+@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-disabled-icon-color:               @global-muted-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:                               30px;
+@form-icon-font-size:                           @global-font-size;
+@form-icon-color:                               @global-muted-color;
+@form-icon-hover-color:                         @global-color;
+
+@internal-form-select-image:                     "../../images/backgrounds/form-select.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.
+ */
+
+.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; }
+
+/*
+ * Remove the padding in IE 10-.
+ */
+
+.uk-radio,
+.uk-checkbox { padding: 0; }
+
+/*
+ * 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 an `a` element to look like a `input` or `select` element
+ * 2. Make sure line-height is not larger than height
+ *    Also needed to center the text vertically if `a` element is used
+ */
+
+.uk-input,
+.uk-select:not([multiple]):not([size]) {
+    height: @form-height;
+    vertical-align: middle;
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    line-height: @form-line-height;
+    .hook-form-single-line;
+}
+
+/*
+ * 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;
+}
+
+/* Focus */
+.uk-input:focus,
+.uk-select:focus,
+.uk-textarea:focus {
+    outline: 0;
+    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::-moz-placeholder { color: @form-placeholder-color; }
+.uk-input::-webkit-input-placeholder { color: @form-placeholder-color; }
+
+.uk-textarea:-ms-input-placeholder { color: @form-placeholder-color !important; }
+.uk-textarea::-moz-placeholder { color: @form-placeholder-color; }
+.uk-textarea::-webkit-input-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;
+    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;
+    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
+ */
+
+.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; }
+
+/*
+ * Disabled
+ */
+
+.uk-select:not([multiple]):not([size]):disabled { .svg-fill(@internal-form-select-image, "#000", @form-select-disabled-icon-color); }
+
+
+/* Radio and checkbox
+ * Note: Only works in Chrome, Safari, Opera and Edge
+ ========================================================================== */
+
+/*
+ * 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;
+    /* 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: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    -webkit-align-items: 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; }
+
+/*
+ * Position modifier
+ */
+
+.uk-form-icon-flip {
+    right: 0;
+    left: auto;
+}
+
+.uk-form-icon-flip + .uk-input { padding-right: @form-icon-width; }
+
+
+// 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-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%);
+
+.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::-moz-placeholder { color: @inverse-form-placeholder-color; }
+    .uk-input::-webkit-input-placeholder { color: @inverse-form-placeholder-color; }
+
+    .uk-textarea:-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
+    .uk-textarea::-moz-placeholder { color: @inverse-form-placeholder-color; }
+    .uk-textarea::-webkit-input-placeholder { color: @inverse-form-placeholder-color; }
+
+    //
+    // Radio and checkbox
+    //
+
+    .uk-select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-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;
+    }
+
+}
+
+.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() {}