rails-uikit-sass 2.27.2

data/vendor/assets/stylesheets/components/progress.scss

@@ -0,0 +1,173 @@
+// Name:            Progress
+// Description:     Defines styles for progress bars
+//
+// Component:       `uk-progress`
+//
+// Sub-objects:     `uk-progress-bar`
+//
+// Modifiers:       `uk-progress-mini`
+//                  `uk-progress-small`
+//                  `uk-progress-success`
+//                  `uk-progress-warning`
+//                  `uk-progress-danger`
+//                  `uk-progress-striped`
+//
+// Markup:
+//
+// <!-- uk-progress -->
+// <div class="uk-progress">
+//     <div class="uk-progress-bar" style="width: 40%;"></div>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$progress-height:                                20px !default;
+$progress-mini-height:                           6px !default;
+$progress-small-height:                          12px !default;
+
+$progress-margin-vertical:                       15px !default;
+$progress-background:                            #eee !default;
+
+$progress-bar-background:                        #00a8e6 !default;
+$progress-bar-font-size:                         12px !default;
+$progress-bar-color:                             #fff !default;
+
+$progress-bar-success-background:                #8cc14c !default;
+$progress-bar-warning-background:                #faa732 !default;
+$progress-bar-danger-background:                 #da314b !default;
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Clearing
+ * 2. Vertical alignment if text is used
+ */
+
+.uk-progress {
+    box-sizing: border-box;
+    height: $progress-height;
+    margin-bottom: $progress-margin-vertical;
+    background: $progress-background;
+    /* 1 */
+    overflow: hidden;
+    /* 2 */
+    line-height: $progress-height;
+    @include hook-progress();
+}
+
+/*
+ * Add margin if adjacent element
+ */
+
+* + .uk-progress { margin-top: $progress-margin-vertical; }
+
+
+/* Sub-object: `uk-progress-bar`
+ ========================================================================== */
+
+/*
+ * 1. Transition
+ * 2. Needed for text
+ */
+
+.uk-progress-bar {
+    width: 0;
+    height: 100%;
+    background: $progress-bar-background;
+    float: left;
+    /* 1 */
+    -webkit-transition: width 0.6s ease;
+    transition: width 0.6s ease;
+    /* 2 */
+    font-size: $progress-bar-font-size;
+    color: $progress-bar-color;
+    text-align: center;
+    @include hook-progress-bar();
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/* Mini */
+.uk-progress-mini {
+    height: $progress-mini-height;
+    @include hook-progress-mini();
+}
+
+
+/* Small */
+.uk-progress-small {
+    height: $progress-small-height;
+    @include hook-progress-small();
+}
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-progress-success .uk-progress-bar {
+    background-color: $progress-bar-success-background;
+    @include hook-progress-bar-success();
+}
+
+.uk-progress-warning .uk-progress-bar {
+    background-color: $progress-bar-warning-background;
+    @include hook-progress-bar-warning();
+}
+
+.uk-progress-danger .uk-progress-bar {
+    background-color: $progress-bar-danger-background;
+    @include hook-progress-bar-danger();
+}
+
+
+/* Modifier: `uk-progress-striped`
+ ========================================================================== */
+
+.uk-progress-striped .uk-progress-bar {
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 30px 30px;
+}
+
+/*
+ * Animation
+ */
+
+.uk-progress-striped.uk-active .uk-progress-bar {
+    -webkit-animation: uk-progress-bar-stripes 2s linear infinite;
+    animation: uk-progress-bar-stripes 2s linear infinite;
+}
+
+@-webkit-keyframes uk-progress-bar-stripes {
+    0% { background-position: 0 0;}
+    100% { background-position: 30px 0; }
+}
+
+@keyframes uk-progress-bar-stripes {
+    0% { background-position: 0 0;}
+    100% { background-position: 30px 0; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-progress-misc();
+
+// @mixin hook-progress(){}
+// @mixin hook-progress-bar(){}
+// @mixin hook-progress-mini(){}
+// @mixin hook-progress-small(){}
+// @mixin hook-progress-bar-success(){}
+// @mixin hook-progress-bar-warning(){}
+// @mixin hook-progress-bar-danger(){}
+// @mixin hook-progress-misc(){}

data/vendor/assets/stylesheets/components/search.scss

@@ -0,0 +1,309 @@
+// Name:            Search
+// Description:     Defines a search component
+//
+// Component:       `uk-search`
+//
+// Sub-objects:     `uk-search-field`
+//
+// Modifier:        (Nav) `uk-nav-search`
+//                  (Dropdown) `uk-dropdown-search`
+//
+// States:          `uk-active`
+//                  `uk-loading`
+//
+// Uses:            Animation
+//                  Icon: FontAwesome
+//                  Navbar: `uk-navbar-flip`
+//
+// Used by:         Off-canvas
+//
+// Markup:
+//
+// <!-- uk-search -->
+// <form class="uk-search" data-uk-search>
+//     <input class="uk-search-field" type="search" placeholder="">
+// </form>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$search-width:                                   120px !default;
+$search-focus-width:                             180px !default;
+$search-height:                                  30px !default;
+$search-padding:                                 30px !default;
+$search-border:                                  rgba(0,0,0,0) !default;
+$search-border-width:                            1px !default;
+$search-background:                              rgba(0,0,0,0) !default;
+$search-color:                                   #444 !default;
+$search-placeholder-color:                       #999 !default;
+
+$search-icon:                                    "\f002" !default;
+$search-icon-size:                               14px !default;
+$search-icon-color:                              rgba(0,0,0,0.2) !default;
+
+// Dropdown modifier
+$dropdown-search-width:                          300px !default;
+$dropdown-search-margin-top:                     0 !default;
+$dropdown-search-background:                     #f5f5f5 !default;
+$dropdown-search-color:                          #444 !default;
+$dropdown-search-animation:                      uk-slide-top-fixed !default;
+$dropdown-search-navbar-margin-top:              5px !default;
+$dropdown-search-navbar-margin-right:            -15px !default;
+
+// Nav modifier
+$nav-search-color:                               #444 !default;
+$nav-search-active-background:                   #00a8e6 !default;
+$nav-search-active-color:                        #fff !default;
+$nav-search-header-color:                        #999 !default;
+$nav-search-divider-border:                      #ddd !default;
+$nav-search-divider-border-width:                1px !default;
+$nav-search-nested-color:                        #07D !default;
+$nav-search-nested-hover-color:                  #059 !default;
+
+// Search in offcanvas
+$offcanvas-search-margin:                        20px 15px !default;
+$offcanvas-search-background:                    #1a1a1a !default;
+$offcanvas-search-border:                        rgba(0,0,0,0) !default;
+$offcanvas-search-color:                         #ccc !default;
+$offcanvas-search-placeholder-color:             #777 !default;
+$offcanvas-search-icon-color:                    #777 !default;
+
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+
+/*
+ * 1. Create position context for dropdowns
+ * 2. Needed for `form` element
+ */
+
+.uk-search {
+    display: inline-block;
+    /* 1 */
+    position: relative;
+    /* 2 */
+    margin: 0;
+    @include hook-search();
+}
+
+/*
+ * Icon
+ */
+
+.uk-search:before {
+    content: $search-icon;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $search-padding;
+    line-height: $search-height;
+    text-align: center;
+    font-family: FontAwesome;
+    font-size: $search-icon-size;
+    color: $search-icon-color;
+    @include hook-search-icon();
+}
+
+
+/* Sub-object `uk-search-field`
+ ========================================================================== */
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+.uk-search-field::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
+ */
+
+.uk-search-field::-webkit-search-cancel-button,
+.uk-search-field::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Removes cancel button in IE10
+ */
+
+.uk-search-field::-ms-clear { display: none; }
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-search-field::-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. Correct `font` properties and `color` not being inherited.
+ * 5. Remove default style in iOS.
+ * 6. Style
+ */
+
+.uk-search-field {
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    font: inherit;
+    color: $search-color;
+    /* 5 */
+    -webkit-appearance: none;
+    /* 6 */
+    width: $search-width;
+    height: $search-height;
+    padding: 0 0 0 $search-padding;
+    border: $search-border-width solid $search-border;
+    background: $search-background;
+    -webkit-transition: all 0.2s linear;
+    transition: all 0.2s linear;
+    vertical-align: middle;
+    @include hook-search-field();
+}
+
+/* Placeholder */
+.uk-search-field:-ms-input-placeholder { color: $search-placeholder-color !important; }
+.uk-search-field::-moz-placeholder { color: $search-placeholder-color; }
+.uk-search-field::-webkit-input-placeholder { color: $search-placeholder-color; }
+
+/* Focus */
+.uk-search-field:focus {
+    outline: 0;
+    @include hook-search-field-focus();
+}
+
+/* Focus + Active */
+.uk-search-field:focus,
+.uk-search.uk-active .uk-search-field { width: $search-focus-width; }
+
+
+/* Dropdown modifier: `uk-dropdown-search`
+ ========================================================================== */
+
+.uk-dropdown-search {
+    width: $dropdown-search-width;
+    margin-top: $dropdown-search-margin-top;
+    background: $dropdown-search-background;
+    color: $dropdown-search-color;
+    @include hook-dropdown-search();
+}
+
+.uk-open > .uk-dropdown-search {
+    -webkit-animation: $dropdown-search-animation 0.2s ease-in-out;
+    animation: $dropdown-search-animation 0.2s ease-in-out;
+}
+
+/*
+ * Dependency `uk-navbar-flip`
+ */
+
+.uk-navbar-flip .uk-dropdown-search {
+    margin-top: $dropdown-search-navbar-margin-top;
+    margin-right: $dropdown-search-navbar-margin-right;
+}
+
+
+/* Nav modifier `uk-nav-search`
+ ========================================================================== */
+
+/*
+ * Items
+ */
+
+.uk-nav-search > li > a {
+    color: $nav-search-color;
+    @include hook-nav-search();
+}
+
+/*
+ * Active
+ * 1. Remove default focus style
+ */
+
+.uk-nav-search > li.uk-active > a {
+    background: $nav-search-active-background;
+    color: $nav-search-active-color;
+    /* 1 */
+    outline: none;
+    @include hook-nav-search-active();
+}
+
+/*
+ * Sub-object: `uk-nav-header`
+ */
+
+.uk-nav-search .uk-nav-header {
+    color: $nav-search-header-color;
+    @include hook-nav-search-header();
+}
+
+/*
+ * Sub-object: `uk-nav-divider`
+ */
+
+.uk-nav-search .uk-nav-divider {
+    border-top: $nav-search-divider-border-width solid $nav-search-divider-border;
+    @include hook-nav-search-divider();
+}
+
+/*
+ * Nested items
+ */
+
+.uk-nav-search ul a { color: $nav-search-nested-color; }
+.uk-nav-search ul a:hover { color: $nav-search-nested-hover-color; }
+
+
+/* Search in offcanvas
+ ========================================================================== */
+
+.uk-offcanvas .uk-search {
+    display: block;
+    margin: $offcanvas-search-margin;
+}
+
+.uk-offcanvas .uk-search:before { color: $offcanvas-search-icon-color; }
+
+.uk-offcanvas .uk-search-field {
+    width: 100%;
+    border-color: $offcanvas-search-border;
+    background: $offcanvas-search-background;
+    color: $offcanvas-search-color;
+    @include hook-offcanvas-search-field();
+}
+
+.uk-offcanvas .uk-search-field:-ms-input-placeholder { color: $offcanvas-search-placeholder-color !important; }
+.uk-offcanvas .uk-search-field::-moz-placeholder { color: $offcanvas-search-placeholder-color; }
+.uk-offcanvas .uk-search-field::-webkit-input-placeholder { color: $offcanvas-search-placeholder-color; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-search-misc();
+
+// @mixin hook-search(){}
+// @mixin hook-search-icon(){}
+// @mixin hook-search-field(){}
+// @mixin hook-search-field-focus(){}
+
+// @mixin hook-dropdown-search(){}
+// @mixin hook-nav-search(){}
+// @mixin hook-nav-search-active(){}
+// @mixin hook-nav-search-header(){}
+// @mixin hook-nav-search-divider(){}
+// @mixin hook-offcanvas-search-field(){}
+
+// @mixin hook-search-misc(){}