uikit3-rails 0.1.0

data/assets/stylesheets/components/column.less

@@ -0,0 +1,285 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@column-gutter:                                 @global-gutter;
+@column-gutter-l:                               @global-medium-gutter;
+
+@column-divider-rule-color:                     @global-border;
+@column-divider-rule-width:                     1px;
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] {
+    -webkit-column-gap: @column-gutter;
+    -moz-column-gap: @column-gutter;
+    column-gap: @column-gutter;
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    [class*='uk-column-'] {
+        -webkit-column-gap: @column-gutter-l;
+        -moz-column-gap: @column-gutter-l;
+        column-gap: @column-gutter-l;
+    }
+
+}
+
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+
+[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+
+
+/* Divider
+ ========================================================================== */
+
+/*
+ * 1. Double the column gap
+ */
+
+.uk-column-divider {
+    -webkit-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
+    -moz-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
+    column-rule: @column-divider-rule-width solid @column-divider-rule-color;
+    /* 1 */
+    -webkit-column-gap: (@column-gutter * 2);
+    -moz-column-gap: (@column-gutter * 2);
+    column-gap: (@column-gutter * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-column-divider {
+        -webkit-column-gap: (@column-gutter-l * 2);
+        -moz-column-gap: (@column-gutter-l * 2);
+        column-gap: (@column-gutter-l * 2);
+    }
+
+}
+
+
+/* Width modifiers
+ ========================================================================== */
+
+.uk-column-1-2 {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+}
+
+.uk-column-1-3 {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+}
+
+.uk-column-1-4 {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+}
+
+.uk-column-1-5 {
+    -webkit-column-count: 5;
+    -moz-column-count: 5;
+    column-count: 5;
+}
+
+.uk-column-1-6 {
+    -webkit-column-count: 6;
+    -moz-column-count: 6;
+    column-count: 6;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-column-1-2\@s {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-1-3\@s {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-1-4\@s {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-1-5\@s {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-1-6\@s {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-column-1-2\@m {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-1-3\@m {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-1-4\@m {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-1-5\@m {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-1-6\@m {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-column-1-2\@l {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-1-3\@l {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-1-4\@l {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-1-5\@l {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-1-6\@l {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-column-1-2\@xl {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-1-3\@xl {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-1-4\@xl {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-1-5\@xl {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-1-6\@xl {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+}
+
+
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+
+.uk-column-span {
+    -webkit-column-span: all;
+    -moz-column-span: all;
+    column-span: all;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-column-misc;
+
+.hook-column-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-column-divider-rule-color:                    @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-column-divider {
+        -webkit-column-rule-color: @inverse-column-divider-rule-color;
+        -moz-column-rule-color: @inverse-column-divider-rule-color;
+        column-rule-color: @inverse-column-divider-rule-color;
+    }
+
+}

data/assets/stylesheets/components/comment.less

@@ -0,0 +1,171 @@
+// Name:            Comment
+// Description:     Component to create nested comments
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-body`
+//                  `uk-comment-header`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-avatar`
+//                  `uk-comment-list`
+//
+// Modifier:        `uk-comment-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@comment-header-margin-bottom:                  @global-margin;
+
+@comment-title-font-size:                       @global-medium-font-size;
+@comment-title-line-height:                     1.4;
+
+@comment-meta-font-size:                        @global-small-font-size;
+@comment-meta-line-height:                      1.4;
+@comment-meta-color:                            @global-muted-color;
+
+@comment-list-margin-top:                       @global-large-margin;
+@comment-list-padding-left:                     30px;
+@comment-list-padding-left-m:                   100px;
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    .hook-comment;
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-comment-body {
+    .hook-comment-body;
+}
+
+.uk-comment-header {
+    margin-bottom: @comment-header-margin-bottom;
+    .hook-comment-header;
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-comment-body::before,
+.uk-comment-body::after,
+.uk-comment-header::before,
+.uk-comment-header::after {
+    content: "";
+    display: table;
+}
+
+.uk-comment-body::after,
+.uk-comment-header::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-comment-body > :last-child,
+.uk-comment-header > :last-child { margin-bottom: 0; }
+
+
+/* Title
+ ========================================================================== */
+
+.uk-comment-title {
+    font-size: @comment-title-font-size;
+    line-height: @comment-title-line-height;
+    .hook-comment-title;
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-comment-meta {
+    font-size: @comment-meta-font-size;
+    line-height: @comment-meta-line-height;
+    color: @comment-meta-color;
+    .hook-comment-meta;
+}
+
+
+/* Avatar
+ ========================================================================== */
+
+.uk-comment-avatar {
+    .hook-comment-avatar;
+}
+
+
+/* List
+ ========================================================================== */
+
+.uk-comment-list {
+    padding: 0;
+    list-style: none;
+}
+
+/* Adjacent siblings */
+.uk-comment-list > :nth-child(n+2) {
+    margin-top: @comment-list-margin-top;
+    .hook-comment-list-adjacent;
+}
+
+/*
+ * Sublists
+ * Note: General sibling selector allows reply block between comment and sublist
+ */
+
+.uk-comment-list .uk-comment ~ ul {
+    margin: @comment-list-margin-top 0 0 0;
+    padding-left: @comment-list-padding-left;
+    list-style: none;
+    .hook-comment-list-sub;
+}
+
+/* Tablet and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-comment-list .uk-comment ~ ul { padding-left: @comment-list-padding-left-m; }
+
+}
+
+/* Adjacent siblings */
+.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
+    margin-top: @comment-list-margin-top;
+    .hook-comment-list-sub-adjacent;
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-comment-primary {
+    .hook-comment-primary;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-comment-misc;
+
+.hook-comment() {}
+.hook-comment-body() {}
+.hook-comment-header() {}
+.hook-comment-title() {}
+.hook-comment-meta() {}
+.hook-comment-avatar() {}
+.hook-comment-list-adjacent() {}
+.hook-comment-list-sub() {}
+.hook-comment-list-sub-adjacent() {}
+.hook-comment-primary() {}
+.hook-comment-misc() {}