uikit3-rails 0.1.0

data/assets/stylesheets/components/switcher.less

@@ -0,0 +1,47 @@
+// Name:            Switcher
+// Description:     Component to navigate through different content panes
+//
+// Component:       `uk-switcher`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Switcher
+ ========================================================================== */
+
+/*
+ * Reset lists
+ */
+
+.uk-switcher {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Hide not active items
+ */
+
+.uk-switcher > :not(.uk-active) { display: none; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-switcher > * > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-switcher-misc;
+
+.hook-switcher-misc() {}

data/assets/stylesheets/components/tab.less

@@ -0,0 +1,226 @@
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@tab-margin-horizontal:                  20px;
+
+@tab-item-padding-horizontal:            10px;
+@tab-item-padding-vertical:              5px;
+@tab-item-color:                         @global-muted-color;
+@tab-item-hover-color:                   @global-color;
+@tab-item-hover-text-decoration:         none;
+@tab-item-active-color:                  @global-emphasis-color;
+@tab-item-disabled-color:                @global-muted-color;
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset lists
+ */
+
+.uk-tab {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /* 1 */
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 2 */
+    margin-left: -@tab-margin-horizontal;
+    /* 3 */
+    padding: 0;
+    list-style: none;
+    .hook-tab;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-tab > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: @tab-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center text if a width is set
+ * 2. Style
+ */
+
+.uk-tab > * > a {
+    /* 1 */
+    display: block;
+    text-align: center;
+    /* 2 */
+    padding: @tab-item-padding-vertical @tab-item-padding-horizontal;
+    color: @tab-item-color;
+    .hook-tab-item;
+}
+
+/* Hover + Focus */
+.uk-tab > * > a:hover,
+.uk-tab > * > a:focus {
+    color: @tab-item-hover-color;
+    text-decoration: @tab-item-hover-text-decoration;
+    .hook-tab-item-hover;
+}
+
+/* Active */
+.uk-tab > .uk-active > a {
+    color: @tab-item-active-color;
+    .hook-tab-item-active;
+}
+
+/* Disabled */
+.uk-tab > .uk-disabled > a {
+    color: @tab-item-disabled-color;
+    .hook-tab-item-disabled;
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom
+ */
+
+.uk-tab-bottom {
+    .hook-tab-bottom;
+}
+
+.uk-tab-bottom > * > a {
+    .hook-tab-bottom-item;
+}
+
+/*
+ * Left + Right
+ * 1. Reset Gutter
+ */
+
+.uk-tab-left,
+.uk-tab-right {
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    /* 1 */
+    margin-left: 0;
+}
+
+/* 1 */
+.uk-tab-left > *,
+.uk-tab-right > * { padding-left: 0; }
+
+.uk-tab-left {
+    .hook-tab-left;
+}
+
+.uk-tab-right {
+    .hook-tab-right;
+}
+
+.uk-tab-left > * > a {
+    text-align: right;
+    .hook-tab-left-item;
+}
+
+.uk-tab-right > * > a {
+    text-align: left;
+    .hook-tab-right-item;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-tab-misc;
+
+.hook-tab() {}
+.hook-tab-item() {}
+.hook-tab-item-hover() {}
+.hook-tab-item-active() {}
+.hook-tab-item-disabled() {}
+.hook-tab-bottom() {}
+.hook-tab-bottom-item() {}
+.hook-tab-left() {}
+.hook-tab-left-item() {}
+.hook-tab-right() {}
+.hook-tab-right-item() {}
+.hook-tab-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-tab-item-color:                       @inverse-global-muted-color;
+@inverse-tab-item-hover-color:                 @inverse-global-color;
+@inverse-tab-item-active-color:                @inverse-global-emphasis-color;
+@inverse-tab-item-disabled-color:              @inverse-global-muted-color;
+
+.hook-inverse() {
+
+    .uk-tab {
+        .hook-inverse-tab;
+    }
+
+    .uk-tab > * > a {
+        color: @inverse-tab-item-color;
+        .hook-inverse-tab-item;
+    }
+
+    .uk-tab > * > a:hover,
+    .uk-tab > * > a:focus{
+        color: @inverse-tab-item-hover-color;
+        .hook-inverse-tab-item-hover;
+    }
+
+    .uk-tab > .uk-active > a {
+        color: @inverse-tab-item-active-color;
+        .hook-inverse-tab-item-active;
+    }
+
+    .uk-tab > .uk-disabled > a {
+        color: @inverse-tab-item-disabled-color;
+        .hook-inverse-tab-item-disabled;
+    }
+
+}
+
+.hook-inverse-tab() {}
+.hook-inverse-tab-item() {}
+.hook-inverse-tab-item-hover() {}
+.hook-inverse-tab-item-active() {}
+.hook-inverse-tab-item-disabled() {}

data/assets/stylesheets/components/table.less

@@ -0,0 +1,207 @@
+// Name:            Table
+// Description:     Styles for tables
+//
+// Component:       `uk-table`
+//
+// Modifiers:       `uk-table-middle`
+//                  `uk-table-striped`
+//                  `uk-table-small`
+//                  `uk-table-hover`
+//                  `uk-table-shrink`
+//                  `uk-table-expand`
+//                  `uk-table-link`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@table-margin-vertical:                         @global-margin;
+
+@table-cell-padding-vertical:                   16px;
+@table-cell-padding-horizontal:                 12px;
+
+@table-header-cell-font-size:                   @global-font-size;
+@table-header-cell-font-weight:                 bold;
+@table-header-cell-color:                       @global-color;
+
+@table-footer-font-size:                        @global-small-font-size;
+
+@table-caption-font-size:                       @global-small-font-size;
+@table-caption-color:                           @global-muted-color;
+
+@table-row-active-background:                   #ffd;
+
+@table-striped-row-background:                  @global-muted-background;
+
+@table-hover-row-background:                    @table-row-active-background;
+
+@table-small-cell-padding-vertical:             10px;
+@table-small-cell-padding-horizontal:           12px;
+
+@table-expand-min-width:                        300px;
+
+
+/* ========================================================================
+   Component: Table
+ ========================================================================== */
+
+/*
+ * 1. Remove most spacing between table cells.
+ * 2. Behave like a block element
+ * 3. Style
+ */
+
+.uk-table {
+    /* 1 */
+    border-collapse: collapse;
+    border-spacing: 0;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    margin-bottom: @table-margin-vertical;
+}
+
+/* Add margin if adjacent element */
+* + .uk-table { margin-top: @table-margin-vertical; }
+
+
+/* Header cell
+ ========================================================================== */
+
+/*
+ * 1. Style
+ */
+
+.uk-table th {
+    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
+    text-align: left;
+    vertical-align: bottom;
+    /* 1 */
+    font-size: @table-header-cell-font-size;
+    font-weight: @table-header-cell-font-weight;
+    color: @table-header-cell-color;
+    .hook-table-header-cell;
+}
+
+
+/* Cell
+ ========================================================================== */
+
+.uk-table td {
+    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
+    vertical-align: top;
+    .hook-table-cell;
+}
+
+
+/* Footer
+ ========================================================================== */
+
+.uk-table tfoot {
+    font-size: @table-footer-font-size;
+    .hook-table-footer;
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-table caption {
+    font-size: @table-caption-font-size;
+    text-align: left;
+    color: @table-caption-color;
+    .hook-table-caption;
+}
+
+
+/* Row
+ ========================================================================== */
+
+.uk-table > tr.uk-active,
+.uk-table tbody tr.uk-active {
+    background: @table-row-active-background;
+    .hook-table-row-active;
+}
+
+
+/* Alignment modifier
+ ========================================================================== */
+
+.uk-table-middle,
+.uk-table-middle td { vertical-align: middle !important; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Striped
+ */
+
+.uk-table-striped > tr:nth-of-type(odd),
+.uk-table-striped tbody tr:nth-of-type(odd) {
+    background: @table-striped-row-background;
+    .hook-table-striped;
+}
+
+/*
+ * Hover
+ */
+
+.uk-table-hover > tr:hover,
+.uk-table-hover tbody tr:hover {
+    background: @table-hover-row-background;
+    .hook-table-hover;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-table-small th,
+.uk-table-small td {
+    padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal;
+    .hook-table-small;
+}
+
+
+/* Cell size modifier
+ ========================================================================== */
+
+.uk-table-shrink { width: 1px; }
+.uk-table-expand { min-width: @table-expand-min-width; }
+
+
+/* Cell link modifier
+ ========================================================================== */
+
+.uk-table-link { padding: 0 !important; }
+
+.uk-table-link > a {
+    display: block;
+    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
+}
+
+.uk-table-small .uk-table-link > a { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-table-misc;
+
+.hook-table() {}
+.hook-table-header-cell() {}
+.hook-table-cell() {}
+.hook-table-footer() {}
+.hook-table-caption() {}
+.hook-table-row-active() {}
+.hook-table-striped() {}
+.hook-table-small() {}
+.hook-table-hover() {}
+.hook-table-small() {}
+.hook-table-misc() {}