uikit3-rails 0.1.0

data/assets/stylesheets/components/drop.less

@@ -0,0 +1,74 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-top-*`
+//                  `uk-drop-bottom-*`
+//                  `uk-drop-left-*`
+//                  `uk-drop-right-*`
+//                  `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-open`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@drop-z-index:                              @global-z-index + 20;
+@drop-width:                                300px;
+@drop-margin:                               @global-margin;
+
+
+/* ========================================================================
+   Component: Drop
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ */
+
+.uk-drop {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @drop-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    width: @drop-width;
+}
+
+/* Show */
+.uk-drop.uk-open { display: block; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-drop-top'] { margin-top: -@drop-margin; }
+[class*='uk-drop-bottom'] { margin-top: @drop-margin; }
+[class*='uk-drop-left'] { margin-left: -@drop-margin; }
+[class*='uk-drop-right'] { margin-left: @drop-margin; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-drop-misc;
+
+.hook-drop-misc() {}

data/assets/stylesheets/components/dropdown.less

@@ -0,0 +1,150 @@
+// Name:            Dropdown
+// Description:     Component to create dropdown menus
+//
+// Component:       `uk-dropdown`
+//
+// Adopted:         `uk-dropdown-nav`
+//
+// Modifiers:       `uk-dropdown-top-*`
+//                  `uk-dropdown-bottom-*`
+//                  `uk-dropdown-left-*`
+//                  `uk-dropdown-right-*`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-grid`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@dropdown-z-index:                              @global-z-index + 20;
+@dropdown-min-width:                            200px;
+@dropdown-padding:                              15px;
+@dropdown-background:                           @global-muted-background;
+@dropdown-color:                                @global-color;
+@dropdown-margin:                               @global-small-margin;
+
+@dropdown-nav-item-color:                       @global-muted-color;
+@dropdown-nav-item-hover-color:                 @global-color;
+@dropdown-nav-header-color:                     @global-emphasis-color;
+@dropdown-nav-divider-border-width:             @global-border-width;
+@dropdown-nav-divider-border:                   @global-border;
+@dropdown-nav-sublist-item-color:               @global-muted-color;
+@dropdown-nav-sublist-item-hover-color:         @global-color;
+
+
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ * 4. Style
+ */
+
+.uk-dropdown {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @dropdown-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    min-width: @dropdown-min-width;
+    /* 4 */
+    padding: @dropdown-padding;
+    background: @dropdown-background;
+    color: @dropdown-color;
+    .hook-dropdown;
+}
+
+/* Show */
+.uk-dropdown.uk-open { display: block; }
+
+
+/* Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+
+.uk-dropdown-nav {
+    white-space: nowrap;
+    .hook-dropdown-nav;
+}
+
+/*
+ * Items
+ */
+
+.uk-dropdown-nav > li > a {
+    color: @dropdown-nav-item-color;
+    .hook-dropdown-nav-item;
+}
+
+/* Hover + Focus + Active */
+.uk-dropdown-nav > li > a:hover,
+.uk-dropdown-nav > li > a:focus,
+.uk-dropdown-nav > li.uk-active > a {
+    color: @dropdown-nav-item-hover-color;
+    .hook-dropdown-nav-item-hover;
+}
+
+/*
+ * Header
+ */
+
+.uk-dropdown-nav .uk-nav-header {
+    color: @dropdown-nav-header-color;
+    .hook-dropdown-nav-header;
+}
+
+/*
+ * Divider
+ */
+
+.uk-dropdown-nav .uk-nav-divider {
+    border-top: @dropdown-nav-divider-border-width solid @dropdown-nav-divider-border;
+    .hook-dropdown-nav-divider;
+}
+
+/*
+ * Sublists
+ */
+
+.uk-dropdown-nav .uk-nav-sub a { color: @dropdown-nav-sublist-item-color; }
+
+.uk-dropdown-nav .uk-nav-sub a:hover,
+.uk-dropdown-nav .uk-nav-sub a:focus { color: @dropdown-nav-sublist-item-hover-color; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-dropdown-top'] { margin-top: -@dropdown-margin; }
+[class*='uk-dropdown-bottom'] { margin-top: @dropdown-margin; }
+[class*='uk-dropdown-left'] { margin-left: -@dropdown-margin; }
+[class*='uk-dropdown-right'] { margin-left: @dropdown-margin; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; }
+
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropdown-misc;
+
+.hook-dropdown() {}
+.hook-dropdown-nav() {}
+.hook-dropdown-nav-item() {}
+.hook-dropdown-nav-item-hover() {}
+.hook-dropdown-nav-header() {}
+.hook-dropdown-nav-divider() {}
+.hook-dropdown-misc() {}

data/assets/stylesheets/components/flex.less

@@ -0,0 +1,335 @@
+// Name:            Flex
+// Description:     Utilities for layouts based on flexbox
+//
+// Component:       `uk-flex-*`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.uk-flex-inline {
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution
+ */
+
+.uk-flex::before,
+.uk-flex::after,
+.uk-flex-inline::before,
+.uk-flex-inline::after { display: none; }
+
+
+/* Alignment
+ ========================================================================== */
+
+/*
+ * Align items along the main axis of the current line of the flex container
+ * Row: Horizontal
+ */
+
+// Default
+.uk-flex-left {
+    -ms-flex-pack: start;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
+
+.uk-flex-center {
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.uk-flex-right {
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.uk-flex-between {
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.uk-flex-around {
+    -ms-flex-pack: distribute;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+/*
+ * Align items in the cross axis of the current line of the flex container
+ * Row: Vertical
+ */
+
+// Default
+.uk-flex-stretch {
+    -ms-flex-align: stretch;
+    -webkit-align-items: stretch;
+    align-items: stretch;
+}
+
+.uk-flex-top {
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.uk-flex-middle {
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.uk-flex-bottom {
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+
+/* Direction
+ ========================================================================== */
+
+// Default
+.uk-flex-row {
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.uk-flex-row-reverse {
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.uk-flex-column {
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.uk-flex-column-reverse {
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+
+/* Wrap
+ ========================================================================== */
+
+// Default
+.uk-flex-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.uk-flex-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.uk-flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+/*
+ * Aligns items within the flex container when there is extra space in the cross-axis
+ * Only works if there is more than one line of flex items
+ */
+
+// Default
+.uk-flex-wrap-stretch {
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.uk-flex-wrap-top {
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.uk-flex-wrap-middle {
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.uk-flex-wrap-bottom {
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.uk-flex-wrap-between {
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.uk-flex-wrap-around {
+    -ms-flex-line-pack: distribute;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+
+/* Item ordering
+ ========================================================================== */
+
+/*
+ * Default is 0
+ */
+
+.uk-flex-first {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+}
+
+.uk-flex-last {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+}
+
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-flex-first\@s {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-last\@s {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-flex-first\@m {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-last\@m {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-flex-first\@l {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-last\@l {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-flex-first\@xl {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-last\@xl {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+
+/* Item dimensions
+ ========================================================================== */
+
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-none {
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+}
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ */
+
+.uk-flex-auto {
+    -ms-flex: auto;
+    -webkit-flex: auto;
+    flex: auto;
+}
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-1 {
+    -ms-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-flex-misc;
+
+.hook-flex-misc() {}