uikit3-rails 0.1.0

data/assets/stylesheets/components/print.less

@@ -0,0 +1,61 @@
+// Name:            Print
+// Description:     Optimize page for printing
+//
+// Adapted from http://github.com/h5bp/html5-boilerplate
+//
+// Modifications:   Removed link `href` and `title` related rules
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Print
+ ========================================================================== */
+
+@media print {
+
+    *,
+    *::before,
+    *::after {
+        background: transparent !important;
+        color: black !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited { text-decoration: underline; }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead { display: table-header-group; }
+
+    tr,
+    img { page-break-inside: avoid; }
+
+    img { max-width: 100% !important; }
+
+    @page { margin: 0.5cm; }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 { page-break-after: avoid; }
+
+   .hook-print;
+
+}
+
+// Hooks
+// ========================================================================
+
+.hook-print() {}

data/assets/stylesheets/components/progress.less

@@ -0,0 +1,102 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@progress-height:                               15px;
+@progress-margin-vertical:                      @global-margin;
+@progress-background:                           @global-muted-background;
+
+@progress-bar-background:                       @global-primary-background;
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Remove default style
+ * 2. Behave like a block element
+ * 3. Remove borders in Firefox and Edge
+ * 4. Set background color for progress container in Firefox, IE11 and Edge
+ * 5. Style
+ */
+
+.uk-progress {
+    /* 1 */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    /* 2 */
+    display: block;
+    width: 100%;
+    /* 3 */
+    border: 0;
+    /* 4 */
+    background-color: @progress-background;
+    /* 5 */
+    margin-bottom: @progress-margin-vertical;
+    height: @progress-height;
+    .hook-progress;
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress { margin-top: @progress-margin-vertical; }
+
+/*
+ * Remove animated circles for indeterminate state in IE11 and Edge
+ */
+
+.uk-progress:indeterminate { color: transparent; }
+
+/*
+ * Progress container
+ * 2. Remove progress bar for indeterminate state in Firefox
+ */
+
+.uk-progress::-webkit-progress-bar {
+  background-color: @progress-background;
+  .hook-progress;
+}
+
+/* 2 */
+.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
+
+/*
+ * Progress bar
+ * 1. Remove right border in IE11 and Edge
+ */
+
+.uk-progress::-webkit-progress-value {
+    background-color: @progress-bar-background;
+    transition: width 0.6s ease;
+    .hook-progress-bar;
+}
+
+.uk-progress::-moz-progress-bar {
+    background-color: @progress-bar-background;
+    .hook-progress-bar;
+}
+
+.uk-progress::-ms-fill {
+    background-color: @progress-bar-background;
+    transition: width 0.6s ease;
+    /* 1 */
+    border: 0;
+    .hook-progress-bar;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-progress-misc;
+
+.hook-progress() {}
+.hook-progress-bar() {}
+.hook-progress-misc() {}

data/assets/stylesheets/components/search.less

@@ -0,0 +1,442 @@
+// Name:            Search
+// Description:     Component to create the search
+//
+// Component:       `uk-search`
+//
+// Sub-objects:     `uk-search-input`
+//                  `uk-search-toggle`
+//
+// Adopted:         `uk-search-icon`
+//
+// Modifier:        `uk-search-default`
+//                  `uk-search-navbar`
+//                  `uk-search-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@search-color:                                      @global-color;
+@search-placeholder-color:                          @global-muted-color;
+
+@search-icon-color:                                 @global-muted-color;
+
+@search-default-width:                              180px;
+@search-default-height:                             @global-control-height;
+@search-default-padding-horizontal:                 6px;
+@search-default-background:                         @global-muted-background;
+@search-default-focus-background:                   @search-default-background;
+
+@search-default-icon-width:                         @global-control-height;
+
+@search-navbar-width:                               400px;
+@search-navbar-height:                              40px;
+@search-navbar-background:                          transparent;
+@search-navbar-font-size:                           @global-large-font-size;
+
+@search-navbar-icon-width:                          40px;
+
+@search-large-width:                                500px;
+@search-large-height:                               80px;
+@search-large-background:                           transparent;
+@search-large-font-size:                            @global-xxlarge-font-size;
+
+@search-large-icon-width:                           80px;
+
+@search-toggle-color:                               @global-muted-color;
+@search-toggle-hover-color:                         @global-color;
+
+@internal-search-default-image:                     "../../images/components/search-default.svg";
+@internal-search-navbar-image:                      "../../images/components/search-navbar.svg";
+@internal-search-large-image:                       "../../images/components/search-large.svg";
+
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Reset `form`
+ */
+
+.uk-search {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+    /* 4 */
+    margin: 0;
+}
+
+
+/* Input
+ ========================================================================== */
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+
+.uk-search-input::-webkit-search-cancel-button,
+.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-search-input::-moz-placeholder { opacity: 1; }
+
+/*
+ * 1. Define consistent box sizing.
+ * 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
+ * 5. Show the overflow in Edge.
+ * 6. Remove default style in iOS.
+ * 7. Vertical alignment
+ * 8. Take the full container width
+ * 9. Style
+ */
+
+.uk-search-input {
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    font: inherit;
+    /* 5 */
+    overflow: visible;
+    /* 6 */
+    -webkit-appearance: none;
+    /* 7 */
+    vertical-align: middle;
+    /* 8 */
+    width: 100%;
+    /* 9 */
+    border: none;
+    color: @search-color;
+}
+
+.uk-search-input:focus { outline: 0; }
+
+/* Placeholder */
+.uk-search-input:-ms-input-placeholder { color: @search-placeholder-color !important; }
+.uk-search-input::-moz-placeholder { color: @search-placeholder-color; }
+.uk-search-input::-webkit-input-placeholder { color: @search-placeholder-color; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-search-icon::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-search-default-image); }
+
+/*
+ * Adopts `uk-icon`
+ * Required for `button`
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Address `overflow` set to `hidden` in IE.
+ * 4. Correct `font` properties and `color` not being inherited for `button`.
+ * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 6. Remove default `button` padding and background color
+ * 7. Required for `button`.
+ */
+
+.uk-search-icon {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    overflow: visible;
+    /* 4 */
+    font: inherit;
+    color: inherit;
+    /* 5 */
+    text-transform: none;
+    /* 6. */
+    padding: 0;
+    background-color: transparent;
+    /* 7 */
+    cursor: pointer;
+}
+
+/*
+ * Remove the inner border and padding in Firefox. Required for `button`.
+ */
+
+.uk-search-icon::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Remove default focus style
+ */
+
+.uk-search-icon:focus { outline: none; }
+
+/*
+ * Position above input
+ * 1. Set position
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+
+.uk-search .uk-search-icon {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    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;
+    /* 3 */
+    color: @search-icon-color;
+}
+
+/*
+ * Required for `a`.
+ */
+
+.uk-search .uk-search-icon:hover { color: @search-icon-color; }
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+
+.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; }
+
+/*
+ * Position modifier
+ */
+
+.uk-search .uk-search-icon-flip {
+    right: 0;
+    left: auto;
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-search-default { width: @search-default-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-default .uk-search-input {
+    height: @search-default-height;
+    padding-left: @search-default-padding-horizontal;
+    padding-right: @search-default-padding-horizontal;
+    background: @search-default-background;
+    .hook-search-default-input;
+}
+
+/* Focus */
+.uk-search-default .uk-search-input:focus {
+    background-color: @search-default-focus-background;
+    .hook-search-default-input-focus;
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-default .uk-search-icon { width: @search-default-icon-width; }
+
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: (@search-default-icon-width); }
+.uk-search-default .uk-search-icon-flip + .uk-search-input { padding-right: (@search-default-icon-width); }
+
+
+/* Navbar modifier
+ ========================================================================== */
+
+.uk-search-navbar { width: @search-navbar-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-navbar .uk-search-input {
+    height: @search-navbar-height;
+    background: @search-navbar-background;
+    font-size: @search-navbar-font-size;
+    .hook-search-navbar-input;
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-navbar .uk-search-icon::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-search-navbar-image); }
+
+.uk-search-navbar .uk-search-icon { width: @search-navbar-icon-width; }
+
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: (@search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon-flip + .uk-search-input { padding-right: (@search-navbar-icon-width); }
+
+
+/* Large modifier
+ ========================================================================== */
+
+.uk-search-large { width: @search-large-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-large .uk-search-input {
+    height: @search-large-height;
+    background: @search-large-background;
+    font-size: @search-large-font-size;
+    .hook-search-large-input;
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-large .uk-search-icon::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-search-large-image); }
+
+.uk-search-large .uk-search-icon { width: @search-large-icon-width; }
+
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) + .uk-search-input { padding-left: (@search-large-icon-width); }
+.uk-search-large .uk-search-icon-flip + .uk-search-input { padding-right: (@search-large-icon-width); }
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-search-toggle {
+    color: @search-toggle-color;
+    .hook-search-toggle;
+}
+
+/* Hover + Focus */
+.uk-search-toggle:hover,
+.uk-search-toggle:focus {
+    color: @search-toggle-hover-color;
+    .hook-search-toggle-hover;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-search-misc;
+
+.hook-search-default-input() {}
+.hook-search-default-input-focus() {}
+.hook-search-navbar-input() {}
+.hook-search-large-input() {}
+
+.hook-search-toggle() {}
+.hook-search-toggle-hover() {}
+
+.hook-search-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-search-color:                         @inverse-global-color;
+@inverse-search-placeholder-color:             @inverse-global-muted-color;
+
+@inverse-search-icon-color:                    @inverse-global-muted-color;
+
+@inverse-search-default-background:            @inverse-global-muted-background;
+@inverse-search-default-focus-background:      @inverse-search-default-background;
+
+@inverse-search-navbar-background:             transparent;
+
+@inverse-search-large-background:              transparent;
+
+@inverse-search-toggle-color:                  @inverse-global-muted-color;
+@inverse-search-toggle-hover-color:            @inverse-global-color;
+
+.hook-inverse() {
+
+    //
+    // Input
+    //
+
+    .uk-search-input { color: @inverse-search-color; }
+
+    .uk-search-input:-ms-input-placeholder { color: @inverse-search-placeholder-color !important; }
+    .uk-search-input::-moz-placeholder { color: @inverse-search-placeholder-color; }
+    .uk-search-input::-webkit-input-placeholder { color: @inverse-search-placeholder-color; }
+
+
+    //
+    // Icon
+    //
+
+    .uk-search .uk-search-icon { color: @inverse-search-icon-color; }
+
+    .uk-search .uk-search-icon:hover { color: @inverse-search-icon-color; }
+
+    //
+    // Style modifier
+    //
+
+    .uk-search-default .uk-search-input {
+        background-color: @inverse-search-default-background;
+        .hook-inverse-search-default-input;
+    }
+    .uk-search-default .uk-search-input:focus {
+        background-color: @inverse-search-default-background;
+        .hook-inverse-search-default-input-focus;
+    }
+
+    .uk-search-navbar .uk-search-input {
+        background-color: @inverse-search-navbar-background;
+        .hook-inverse-search-navbar-input;
+    }
+
+    .uk-search-large .uk-search-input {
+        background-color: @inverse-search-large-background;
+        .hook-inverse-search-large-input;
+    }
+
+    //
+    // Toggle
+    //
+
+    .uk-search-toggle {
+        color: @inverse-search-toggle-color;
+        .hook-inverse-search-toggle;
+    }
+
+    .uk-search-toggle:hover,
+    .uk-search-toggle:focus {
+        color: @inverse-search-toggle-hover-color;
+        .hook-inverse-search-toggle-hover;
+    }
+
+}
+
+.hook-inverse-search-default-input() {}
+.hook-inverse-search-default-input-focus() {}
+.hook-inverse-search-navbar-input() {}
+.hook-inverse-search-large-input() {}
+.hook-inverse-search-toggle() {}
+.hook-inverse-search-toggle-hover() {}