uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/core/print.scss

@@ -0,0 +1,59 @@
+// 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 {
+
+    * {
+        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; }
+   
+   @include hook-print();
+
+}
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-print(){}

data/assets/stylesheets/core/subnav.scss

@@ -0,0 +1,213 @@
+// Name:            Subnav
+// Description:     Defines styles for the sub navigation
+//
+// Component:       `uk-subnav`
+//
+// Modifiers:       `uk-subnav-line`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//
+// Markup:
+//
+// <!-- uk-subnav -->
+// <ul class="uk-subnav">
+//     <li><a href=""></a></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$subnav-margin-horizontal:                       10px !default;
+$subnav-margin-vertical:                         $subnav-margin-horizontal !default;
+
+$subnav-color:                                   #444 !default;
+$subnav-hover-color:                             #07D !default;
+$subnav-hover-text-decoration:                   none !default;
+$subnav-active-color:                            #07D !default;
+
+$subnav-line-border-height:                      10px !default;
+$subnav-line-border:                             #ddd !default;
+$subnav-line-border-width:                       1px !default;
+
+$subnav-pill-padding-vertical:                   3px !default;
+$subnav-pill-padding-horizontal:                 9px !default;
+$subnav-pill-hover-background:                   #eee !default;
+$subnav-pill-hover-color:                        #444 !default;
+$subnav-pill-active-background:                  #00a8e6 !default;
+$subnav-pill-active-color:                       #fff !default;
+
+$subnav-disabled-color:                          #999 !default;
+
+
+/* ========================================================================
+   Component: Subnav
+ ========================================================================== */
+
+/*
+ * 1. Gutter
+ * 2. Remove default list style
+ */
+
+.uk-subnav {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 1 */
+    margin-left: -$subnav-margin-horizontal;
+    margin-top: -$subnav-margin-vertical;
+    /* 2 */
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
+ * 3. Create position context for dropdowns
+ */
+
+.uk-subnav > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: $subnav-margin-horizontal;
+    margin-top: $subnav-margin-vertical;
+    /* 3 */
+    position: relative;
+}
+
+/*
+ * DEPRECATED IE9 Support
+ */
+
+.uk-subnav:before,
+.uk-subnav:after {
+    content: "";
+    display: block;
+    overflow: hidden;
+}
+
+.uk-subnav:after { clear: both; }
+
+.uk-subnav > * { float: left; }
+
+
+/* Items
+ ========================================================================== */
+
+.uk-subnav > * > * {
+    display: inline-block;
+    color: $subnav-color;
+    @include hook-subnav();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ */
+
+.uk-subnav > * > :hover,
+.uk-subnav > * > :focus { // 1
+    color: $subnav-hover-color;
+    text-decoration: $subnav-hover-text-decoration;
+    @include hook-subnav-hover();
+}
+
+/*
+ * Active
+ */
+
+.uk-subnav > .uk-active > * {
+    color: $subnav-active-color;
+    @include hook-subnav-active();
+}
+
+
+/* Modifier: 'subnav-line'
+ ========================================================================== */
+
+.uk-subnav-line > :before {
+    content: "";
+    display: inline-block;
+    height: $subnav-line-border-height;
+    vertical-align: middle;
+}
+
+.uk-subnav-line > :nth-child(n+2):before {
+    margin-right: $subnav-margin-horizontal;
+    border-left: $subnav-line-border-width solid $subnav-line-border;
+    @include hook-subnav-line-divider();
+}
+
+
+/* Modifier: 'subnav-pill'
+ ========================================================================== */
+
+.uk-subnav-pill > * > * {
+    padding: $subnav-pill-padding-vertical $subnav-pill-padding-horizontal;
+    @include hook-subnav-pill();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-subnav-pill > * > :hover,
+.uk-subnav-pill > * > :focus { // 1
+    background: $subnav-pill-hover-background;
+    color: $subnav-pill-hover-color;
+    text-decoration: none;
+    /* 2 */
+    outline: none;
+    @include hook-subnav-pill-hover();
+}
+
+/*
+ * Active
+ * `li` needed for higher specificity to override hover
+ */
+
+.uk-subnav-pill > .uk-active > * {
+    background: $subnav-pill-active-background;
+    color: $subnav-pill-active-color;
+    @include hook-subnav-pill-active();
+}
+
+
+/* Disabled state
+ ========================================================================== */
+
+.uk-subnav > .uk-disabled > * {
+    background: none;
+    color: $subnav-disabled-color;
+    text-decoration: none;
+    cursor: text;
+    @include hook-subnav-disabled();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-subnav-misc();
+
+// @mixin hook-subnav(){}
+// @mixin hook-subnav-hover(){}
+// @mixin hook-subnav-active(){}
+// @mixin hook-subnav-line-divider(){}
+// @mixin hook-subnav-pill(){}
+// @mixin hook-subnav-pill-hover(){}
+// @mixin hook-subnav-pill-active(){}
+// @mixin hook-subnav-disabled(){}
+// @mixin hook-subnav-misc(){}

data/assets/stylesheets/core/switcher.scss

@@ -0,0 +1,38 @@
+// Name:            Switcher
+// Description:     Defines styles for the switcher
+//
+// Component:       `uk-switcher`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Switcher
+ ========================================================================== */
+
+/*
+ * 1. Deactivate browser history navigation in IE11
+ */
+.uk-switcher {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 1 */
+    touch-action: cross-slide-y pinch-zoom double-tap-zoom;
+}
+
+/*
+ * Items
+ */
+
+.uk-switcher > :not(.uk-active) { display: none; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-switcher-misc();
+
+// @mixin hook-switcher-misc(){}

data/assets/stylesheets/core/tab.scss

@@ -0,0 +1,368 @@
+// Name:            Tab
+// Description:     Defines styles for a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-flip`
+//                  `uk-tab-center`
+//                  `uk-tab-grid`
+//                  `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//                  `uk-tab-responsive`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// Markup:
+//
+// <!-- uk-tab -->
+// <ul class="uk-tab" data-uk-tab>
+//     <li class="uk-active"><a href=""></a></li>
+//     <li><a href=""></a></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$tab-border:                                     #ddd !default;
+$tab-border-width:                               1px !default;
+$tab-padding-horizontal:                         12px !default;
+$tab-padding-vertical:                           8px !default;
+$tab-padding-top:                                $tab-padding-vertical !default;
+$tab-padding-bottom:                             $tab-padding-vertical !default;
+$tab-margin-horizontal:                          5px !default;
+$tab-margin-vertical:                            5px !default;
+$tab-color:                                      #07D !default;
+$tab-hover-border:                               #f5f5f5 !default;
+$tab-hover-background:                           #f5f5f5 !default;
+$tab-hover-color:                                #059 !default;
+$tab-active-border:                              #ddd !default;
+$tab-active-background:                          #fff !default;
+$tab-active-color:                               #444 !default;
+$tab-disabled-color:                             #999 !default;
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+.uk-tab {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: $tab-border-width solid $tab-border;
+}
+
+/*
+ * Micro clearfix on the deepest container
+ */
+
+.uk-tab:before,
+.uk-tab:after {
+    content: "";
+    display: table;
+}
+
+.uk-tab:after { clear: both; }
+
+/*
+ * Items
+ * 1. Create position context for dropdowns
+ */
+
+.uk-tab > li {
+    margin-bottom: -$tab-border-width;
+    float: left;
+    /* 1 */
+    position: relative;
+}
+
+.uk-tab > li > a {
+    display: block;
+    padding: $tab-padding-top $tab-padding-horizontal $tab-padding-bottom $tab-padding-horizontal;
+    border: $tab-border-width solid transparent;
+    border-bottom-width: 0;
+    color: $tab-color;
+    text-decoration: none;
+    @include hook-tab();
+}
+
+.uk-tab > li:nth-child(n+2) > a { margin-left: $tab-margin-horizontal; }
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Also apply if dropdown is opened
+ * 3. Remove default focus style
+ */
+
+.uk-tab > li > a:hover,
+.uk-tab > li > a:focus, // 1
+.uk-tab > li.uk-open > a { // 2
+    border-color: $tab-hover-border;
+    background: $tab-hover-background;
+    color: $tab-hover-color;
+    /* 2 */
+    outline: none;
+    @include hook-tab-hover();
+}
+
+.uk-tab > li:not(.uk-active) > a:hover,
+.uk-tab > li:not(.uk-active) > a:focus,
+.uk-tab > li.uk-open:not(.uk-active) > a {
+    margin-bottom: $tab-border-width;
+    padding-bottom: $tab-padding-bottom - $tab-border-width;
+}
+
+/* Active */
+.uk-tab > li.uk-active > a {
+    border-color: $tab-active-border;
+    border-bottom-color: transparent;
+    background: $tab-active-background;
+    color: $tab-active-color;
+    @include hook-tab-active();
+}
+
+/* Disabled */
+.uk-tab > li.uk-disabled > a {
+    color: $tab-disabled-color;
+    cursor: text;
+    @include hook-tab-disabled();
+}
+
+.uk-tab > li.uk-disabled > a:hover,
+.uk-tab > li.uk-disabled > a:focus,
+.uk-tab > li.uk-disabled.uk-active > a {
+    background: none;
+    border-color: transparent;
+}
+
+
+/* Modifier: 'tab-flip'
+ ========================================================================== */
+
+.uk-tab-flip > li { float: right; }
+
+.uk-tab-flip > li:nth-child(n+2) > a {
+    margin-left: 0;
+    margin-right: $tab-margin-horizontal;
+}
+
+
+/* Modifier: 'tab-responsive'
+ ========================================================================== */
+
+.uk-tab > li.uk-tab-responsive > a {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/*
+ * Icon
+ */
+
+.uk-tab-responsive > a:before {
+    content: "\f0c9\00a0";
+    font-family: FontAwesome;
+}
+
+
+/* Modifier: 'tab-center'
+ ========================================================================== */
+
+.uk-tab-center { border-bottom: $tab-border-width solid $tab-border; }
+
+.uk-tab-center-bottom {
+    border-bottom: none;
+    border-top: $tab-border-width solid $tab-border;
+}
+
+.uk-tab-center:before,
+.uk-tab-center:after {
+    content: "";
+    display: table;
+}
+
+.uk-tab-center:after { clear: both; }
+
+
+/*
+ * 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs
+ */
+
+.uk-tab-center .uk-tab {
+    position: relative;
+    right: 50%;
+    border: none;
+    float: right;
+}
+
+.uk-tab-center .uk-tab > li {
+    position: relative;
+    right: -50%;
+}
+
+.uk-tab-center .uk-tab > li > a { text-align: center; }
+
+
+/* Modifier: 'tab-bottom'
+ ========================================================================== */
+
+.uk-tab-bottom {
+    border-top: $tab-border-width solid $tab-border;
+    border-bottom: none;
+}
+
+.uk-tab-bottom > li {
+    margin-top: -$tab-border-width;
+    margin-bottom: 0;
+}
+
+.uk-tab-bottom > li > a {
+    padding-top: $tab-padding-bottom;
+    padding-bottom: $tab-padding-top;
+    border-bottom-width: $tab-border-width;
+    border-top-width: 0;
+}
+
+.uk-tab-bottom > li:not(.uk-active) > a:hover,
+.uk-tab-bottom > li:not(.uk-active) > a:focus,
+.uk-tab-bottom > li.uk-open:not(.uk-active) > a {
+    margin-bottom: 0;
+    margin-top: $tab-border-width;
+    padding-bottom: $tab-padding-top;
+    padding-top: $tab-padding-bottom - $tab-border-width;
+}
+
+.uk-tab-bottom > li.uk-active > a {
+    border-top-color: transparent;
+    border-bottom-color: $tab-active-border;
+}
+
+
+/* Modifier: 'tab-grid'
+ ========================================================================== */
+
+/*
+ * 1. Create position context to prevent hidden border because of negative `z-index`
+ */
+
+.uk-tab-grid {
+    margin-left: -$tab-margin-horizontal;
+    border-bottom: none;
+    /* 1 */
+    position: relative;
+    z-index: 0;
+}
+
+.uk-tab-grid:before {
+    display: block;
+    position: absolute;
+    left: $tab-margin-horizontal;
+    right: 0;
+    bottom: -$tab-border-width;
+    border-top: $tab-border-width solid $tab-border;
+    /* 1 */
+    z-index: -1;
+}
+
+.uk-tab-grid > li:first-child > a { margin-left: $tab-margin-horizontal; }
+
+.uk-tab-grid > li > a { text-align: center; }
+
+/*
+ * If `uk-tab-bottom`
+ */
+
+.uk-tab-grid.uk-tab-bottom { border-top: none; }
+.uk-tab-grid.uk-tab-bottom:before {
+    top: -$tab-border-width;
+    bottom: auto;
+}
+
+
+/* Modifier: 'tab-left', 'tab-right'
+ ========================================================================== */
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-tab-left,
+    .uk-tab-right { border-bottom: none; }
+
+    .uk-tab-left > li,
+    .uk-tab-right > li {
+        margin-bottom: 0;
+        float: none;
+    }
+
+    .uk-tab-left > li > a,
+    .uk-tab-right > li > a {
+        padding-top: $tab-padding-vertical;
+        padding-bottom: $tab-padding-vertical;
+    }
+
+    .uk-tab-left > li:nth-child(n+2) > a,
+    .uk-tab-right > li:nth-child(n+2) > a {
+        margin-left: 0;
+        margin-top: $tab-margin-vertical;
+    }
+
+    .uk-tab-left > li.uk-active > a,
+    .uk-tab-right > li.uk-active > a { border-color: $tab-active-border; }
+
+    /*
+     * Modifier: 'tab-left'
+     */
+
+    .uk-tab-left { border-right: $tab-border-width solid $tab-border; }
+    .uk-tab-left > li { margin-right: -$tab-border-width; }
+    .uk-tab-left > li > a {
+        border-bottom-width: $tab-border-width;
+        border-right-width: 0;
+    }
+    .uk-tab-left > li:not(.uk-active) > a:hover,
+    .uk-tab-left > li:not(.uk-active) > a:focus {
+        margin-bottom: 0;
+        margin-right: $tab-border-width;
+        padding-bottom: $tab-padding-vertical;
+        padding-right: $tab-padding-horizontal - $tab-border-width;
+    }
+    .uk-tab-left > li.uk-active > a { border-right-color: transparent; }
+
+    /*
+     * Modifier: 'tab-right'
+     */
+
+    .uk-tab-right { border-left: $tab-border-width solid $tab-border; }
+    .uk-tab-right > li { margin-left: -$tab-border-width; }
+    .uk-tab-right > li > a {
+        border-bottom-width: $tab-border-width;
+        border-left-width: 0;
+    }
+    .uk-tab-right > li:not(.uk-active) > a:hover,
+    .uk-tab-right > li:not(.uk-active) > a:focus {
+        margin-bottom: 0;
+        margin-left: $tab-border-width;
+        padding-bottom: $tab-padding-vertical;
+        padding-left: $tab-padding-horizontal - $tab-border-width;
+    }
+    .uk-tab-right > li.uk-active > a { border-left-color: transparent; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-tab-misc();
+
+// @mixin hook-tab(){}
+// @mixin hook-tab-hover(){}
+// @mixin hook-tab-active(){}
+// @mixin hook-tab-disabled(){}
+// @mixin hook-tab-misc(){}