rails-uikit-sass 2.27.2

data/vendor/assets/stylesheets/core/navbar.scss

@@ -0,0 +1,325 @@
+// Name:            Navbar
+// Description:     Defines styles for the navigation bar
+//
+// Component:       `uk-navbar`
+//
+// Sub-objects:     `uk-navbar-nav`
+//                  `uk-navbar-nav-subtitle`
+//                  `uk-navbar-content`
+//                  `uk-navbar-brand`
+//                  `uk-navbar-toggle`
+//                  `uk-navbar-toggle-alt`
+//                  `uk-navbar-center`
+//                  `uk-navbar-flip`
+//
+// Modifiers:       `uk-navbar-attached`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//
+// Used by:         Dropdown
+//
+// Markup:
+//
+// <!-- uk-navbar -->
+// <nav class="uk-navbar">
+//     <ul class="uk-navbar-nav">
+//         <li class="uk-active"><a href=""></a></li>
+//         <li><a href=""></a></li>
+//     </ul>
+// </nav>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$navbar-background:                              #eee !default;
+$navbar-color:                                   #444 !default;
+$navbar-link-color:                              #07D !default;
+$navbar-link-hover-color:                        #059 !default;
+
+$navbar-nav-height:                              40px !default;
+$navbar-nav-line-height:                         $navbar-nav-height !default;
+$navbar-nav-padding-horizontal:                  15px !default;
+$navbar-nav-color:                               #444 !default;
+$navbar-nav-font-size:                           14px !default;
+$navbar-nav-font-weight:                         normal !default;
+$navbar-nav-font-family:                         "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$navbar-nav-hover-background:                    #f5f5f5 !default;
+$navbar-nav-hover-color:                         #444 !default;
+$navbar-nav-onclick-background:                  #ddd !default;
+$navbar-nav-onclick-color:                       #444 !default;
+$navbar-nav-active-background:                   #f5f5f5 !default;
+$navbar-nav-active-color:                        #444 !default;
+$navbar-nav-subtitle-font-size:                  10px !default;
+$navbar-nav-subtitle-offset:                     2px !default;
+
+$navbar-brand-font-size:                         18px !default;
+$navbar-brand-color:                             #444 !default;
+$navbar-brand-hover-color:                       #444 !default;
+
+$navbar-toggle-font-size:                        18px !default;
+$navbar-toggle-color:                            #444 !default;
+$navbar-toggle-hover-color:                      #444 !default;
+$navbar-toggle-icon:                             "\f0c9" !default;
+$navbar-toggle-icon-alt:                         "\f002" !default;
+
+
+/* ========================================================================
+   Component: Navbar
+ ========================================================================== */
+
+.uk-navbar {
+    background: $navbar-background;
+    color: $navbar-color;
+    @include hook-navbar();
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-navbar:before,
+.uk-navbar:after {
+    content: "";
+    display: table;
+}
+
+.uk-navbar:after { clear: both; }
+
+
+/* Sub-object: `uk-navbar-nav`
+ ========================================================================== */
+
+.uk-navbar-nav {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    float: left;
+}
+
+/*
+ * 1. Create position context for dropdowns
+ */
+
+.uk-navbar-nav > li {
+    float: left;
+    /* 1 */
+    position: relative;
+}
+
+/*
+ * 1. Dimensions
+ * 2. Style
+ */
+
+.uk-navbar-nav > li > a {
+    display: block;
+    box-sizing: border-box;
+    text-decoration: none;
+    /* 1 */
+    height: $navbar-nav-height;
+    padding: 0 $navbar-nav-padding-horizontal;
+    line-height: $navbar-nav-line-height;
+    /* 2 */
+    color: $navbar-nav-color;
+    font-size: $navbar-nav-font-size;
+    font-family: $navbar-nav-font-family;
+    font-weight: $navbar-nav-font-weight;
+    @include hook-navbar-nav();
+}
+
+/* Appear not as link */
+.uk-navbar-nav > li > a[href='#'] { cursor: text; }
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Also apply if dropdown is opened
+ * 3. Remove default focus style
+ */
+
+.uk-navbar-nav > li:hover > a,
+.uk-navbar-nav > li > a:focus, // 1
+.uk-navbar-nav > li.uk-open > a { // 2
+    background-color: $navbar-nav-hover-background;
+    color: $navbar-nav-hover-color;
+    /* 3 */
+    outline: none;
+    @include hook-navbar-nav-hover();
+}
+
+/* OnClick */
+.uk-navbar-nav > li > a:active {
+    background-color: $navbar-nav-onclick-background;
+    color: $navbar-nav-onclick-color;
+    @include hook-navbar-nav-onclick();
+}
+
+/* Active */
+.uk-navbar-nav > li.uk-active > a {
+    background-color: $navbar-nav-active-background;
+    color: $navbar-nav-active-color;
+    @include hook-navbar-nav-active();
+}
+
+
+/* Sub-objects: `uk-navbar-nav-subtitle`
+ ========================================================================== */
+
+.uk-navbar-nav .uk-navbar-nav-subtitle { line-height: $navbar-nav-line-height - $navbar-nav-subtitle-font-size - $navbar-nav-subtitle-offset; }
+
+.uk-navbar-nav-subtitle > div {
+    margin-top: (($navbar-nav-line-height - $navbar-nav-subtitle-font-size - $navbar-nav-font-size) / -2) + $navbar-nav-subtitle-offset;
+    font-size: $navbar-nav-subtitle-font-size;
+    line-height: $navbar-nav-subtitle-font-size + $navbar-nav-subtitle-offset;
+}
+
+
+/* Sub-objects: `uk-navbar-content`, `uk-navbar-brand`, `uk-navbar-toggle`
+ ========================================================================== */
+
+/*
+ * Imitate navbar items
+ */
+
+.uk-navbar-content,
+.uk-navbar-brand,
+.uk-navbar-toggle {
+    box-sizing: border-box;
+    display: block;
+    height: $navbar-nav-height;
+    padding: 0 $navbar-nav-padding-horizontal;
+    float: left;
+    @include hook-navbar-content();
+}
+
+/*
+ * Helper to center all child elements vertically
+ */
+
+.uk-navbar-content:before,
+.uk-navbar-brand:before,
+.uk-navbar-toggle:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+
+/* Sub-objects: `uk-navbar-content`
+ ========================================================================== */
+
+/*
+ * Better sibling spacing
+ */
+
+.uk-navbar-content + .uk-navbar-content:not(.uk-navbar-center) { padding-left: 0; }
+
+/*
+ * Link colors
+ */
+
+.uk-navbar-content > a:not([class]) { color: $navbar-link-color; }
+.uk-navbar-content > a:not([class]):hover { color: $navbar-link-hover-color; }
+
+
+/* Sub-objects: `uk-navbar-brand`
+ ========================================================================== */
+
+.uk-navbar-brand {
+    font-size: $navbar-brand-font-size;
+    color: $navbar-brand-color;
+    text-decoration: none;
+}
+
+/*
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-navbar-brand:hover,
+.uk-navbar-brand:focus { // 1
+    color: $navbar-brand-hover-color;
+    text-decoration: none;
+    /* 2 */
+    outline: none;
+}
+
+
+/* Sub-object: `uk-navbar-toggle`
+ ========================================================================== */
+
+.uk-navbar-toggle {
+    font-size: $navbar-toggle-font-size;
+    color: $navbar-toggle-color;
+    text-decoration: none;
+}
+
+/*
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-navbar-toggle:hover,
+.uk-navbar-toggle:focus { // 1
+    color: $navbar-toggle-hover-color;
+    text-decoration: none;
+    /* 2 */
+    outline: none;
+}
+
+/*
+ * 1. Center icon vertically
+ */
+
+.uk-navbar-toggle:after {
+    content: $navbar-toggle-icon;
+    font-family: FontAwesome;
+    /* 1 */
+    vertical-align: middle;
+}
+
+.uk-navbar-toggle-alt:after { content: $navbar-toggle-icon-alt; }
+
+
+/* Sub-object: `uk-navbar-center`
+ ========================================================================== */
+
+/*
+ * The element with this class needs to be last child in the navbar
+ * 1. This hack is needed because other float elements shift centered text
+ */
+
+.uk-navbar-center {
+    float: none;
+    text-align: center;
+    /* 1 */
+    max-width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+/* Sub-object: `uk-navbar-flip`
+ ========================================================================== */
+
+.uk-navbar-flip { float: right; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-navbar-misc();
+
+// @mixin hook-navbar(){}
+// @mixin hook-navbar-nav(){}
+// @mixin hook-navbar-nav-hover(){}
+// @mixin hook-navbar-nav-onclick(){}
+// @mixin hook-navbar-nav-active(){}
+// @mixin hook-navbar-content(){}
+// @mixin hook-navbar-misc(){}

data/vendor/assets/stylesheets/core/offcanvas.scss

@@ -0,0 +1,203 @@
+// Name:            Off-canvas
+// Description:     Defines styles for an off-canvas sidebar that slides in and out of the page
+//
+// Component:       `uk-offcanvas`
+//
+// Sub-objects:     `uk-offcanvas-page`
+//                  `uk-offcanvas-bar`
+//                  `uk-offcanvas-close`
+//
+// Modifiers:       `uk-offcanvas-bar-flip`
+//
+// States:          `uk-active`
+//
+// Uses:            Panel: `uk-panel`
+//
+// Markup:
+//
+// <!-- uk-offcanvas -->
+// <a href="#offcanvas" data-uk-offcanvas>Open</a>
+// <div id="offcanvas" class="uk-offcanvas">
+//     <div class="uk-offcanvas-bar"></div>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$offcanvas-z-index:                              1000 !default;
+$offcanvas-background:                           rgba(0,0,0,0.1) !default;
+
+$offcanvas-bar-width:                            270px !default;
+$offcanvas-bar-background:                       #333 !default;
+
+$offcanvas-panel-margin:                         20px 15px !default;
+$offcanvas-panel-color:                          #777 !default;
+$offcanvas-panel-link-color:                     #ccc !default;
+$offcanvas-panel-link-hover-color:               #fff !default;
+$offcanvas-panel-title-color:                    $offcanvas-panel-link-color !default;
+
+
+/* ========================================================================
+   Component: Off-canvas
+ ========================================================================== */
+
+/*
+ * This is the offcanvas overlay and bar container
+ * 1. Hide by default
+ * 2. Set fixed position
+ * 3. Deactivate browser touch actions in IE11
+ * 4. Mask the background page
+ */
+
+.uk-offcanvas {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $offcanvas-z-index;
+    /* 3 */
+    touch-action: none;
+    /* 4 */
+    background: $offcanvas-background;
+    @include hook-offcanvas();
+}
+
+.uk-offcanvas.uk-active { display: block; }
+
+
+/* Sub-object `uk-offcanvas-page`
+ ========================================================================== */
+
+/*
+ * Prepares the whole HTML page to slide-out
+ * 1. Fix the main page and disallow scrolling
+ * 2. Side-out transition
+ * 3. Needed for the transition to work instead of just letting it pop to the side
+ */
+
+.uk-offcanvas-page {
+    /* 1 */
+    position: fixed;
+    /* 2 */
+    -webkit-transition: margin-left 0.3s ease-in-out;
+    transition: margin-left 0.3s ease-in-out;
+    /* 3 */
+    margin-left: 0;
+}
+
+
+/* Sub-object `uk-offcanvas-bar`
+ ========================================================================== */
+
+/*
+ * This is the offcanvas bar
+ * 1. Set fixed position
+ * 2. Size and style
+ * 3. Allow scrolling
+ * 4. Side-out transition
+ * 5. Deactivate scroll chaining in IE11
+ */
+
+.uk-offcanvas-bar {
+    /* 1 */
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    z-index: $offcanvas-z-index + 1;
+    /* 2 */
+    width: $offcanvas-bar-width;
+    max-width: 100%;
+    background: $offcanvas-bar-background;
+    /* 3 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 4 */
+    -webkit-transition: -webkit-transform 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
+    /* 5 */
+    -ms-scroll-chaining: none;
+    @include hook-offcanvas-bar();
+}
+
+.uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+}
+
+/* Modifier `uk-offcanvas-bar-flip`
+ ========================================================================== */
+
+.uk-offcanvas-bar-flip {
+    left: auto;
+    right: 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+/* Offcanvase modes
+ ========================================================================== */
+.uk-offcanvas-bar[mode='none'] {
+    -webkit-transition: none;
+    transition: none;
+}
+
+.uk-offcanvas-bar[mode='reveal']{
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+    clip: rect(0, 0, 100vh, 0);
+    -webkit-transition: -webkit-transform 0.3s ease-in-out, clip 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out, clip 0.3s ease-in-out;
+}
+
+.uk-offcanvas-bar-flip[mode='reveal']{
+    clip: none;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+.uk-offcanvas-bar-flip[mode='reveal'] > * {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    -webkit-transition: -webkit-transform 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
+}
+
+.uk-offcanvas.uk-active .uk-offcanvas-bar-flip[mode='reveal'].uk-offcanvas-bar-show > * {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+}
+
+/* Panel in offcanvas
+ ========================================================================== */
+
+.uk-offcanvas .uk-panel {
+    margin: $offcanvas-panel-margin;
+    color: $offcanvas-panel-color;
+    @include hook-offcanvas-panel();
+}
+
+.uk-offcanvas .uk-panel-title { color: $offcanvas-panel-title-color; }
+
+.uk-offcanvas .uk-panel a:not([class]) { color: $offcanvas-panel-link-color; }
+.uk-offcanvas .uk-panel a:not([class]):hover { color: $offcanvas-panel-link-hover-color; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-offcanvas-misc();
+
+// @mixin hook-offcanvas(){}
+// @mixin hook-offcanvas-bar(){}
+// @mixin hook-offcanvas-panel(){}
+// @mixin hook-offcanvas-misc(){}