uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/core/close.scss

@@ -0,0 +1,132 @@
+// Name:            Close
+// Description:     Defines styles for a close button
+//
+// Component:       `uk-close`
+//
+// Modifiers:       `uk-close-alt`
+//
+// Uses:            Icon: FontAwesome
+//
+// Used by:         Alert
+//                  Modal
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$close-size:                                     20px !default;
+
+$close-alt-padding:                              2px !default;
+$close-alt-background:                           #eee !default;
+
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+.uk-close::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Correct inability to style clickable `input` types in iOS.
+ * 2. Remove margins in Chrome, Safari and Opera.
+ * 3. Remove borders for `button`.
+ * 4. Address `overflow` set to `hidden` in IE 8/9/10/11.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ */
+
+.uk-close {
+    /* 1 */
+    -webkit-appearance: none;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border: none;
+    /* 4 */
+    overflow: visible;
+    /* 5 */
+    font: inherit;
+    color: inherit;
+    /* 6 */
+    text-transform: none;
+    /* 7. */
+    padding: 0;
+    background: transparent;
+    /* 8 */
+    display: inline-block;
+    box-sizing: content-box;
+    width: $close-size;
+    line-height: $close-size;
+    text-align: center;
+    vertical-align: middle;
+    opacity: 0.3;
+    @include hook-close();
+}
+
+/* Icon */
+.uk-close:after {
+    display: block;
+    content: "\f00d";
+    font-family: FontAwesome;
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ * 3. Required for `a` elements
+ */
+
+.uk-close:hover,
+.uk-close:focus { // 1
+    opacity: 0.5;
+    /* 2 */
+    outline: none;
+    /* 3 */
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+
+/* Modifier
+ ========================================================================== */
+
+.uk-close-alt {
+    padding: $close-alt-padding;
+    border-radius: 50%;
+    background: $close-alt-background;
+    opacity: 1;
+    @include hook-close-alt();
+}
+
+/* Hover */
+.uk-close-alt:hover,
+.uk-close-alt:focus { opacity: 1; }
+
+/* Icon */
+.uk-close-alt:after { opacity: 0.5; }
+
+.uk-close-alt:hover:after,
+.uk-close-alt:focus:after { opacity: 0.8; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-close-misc();
+
+// @mixin hook-close(){}
+// @mixin hook-close-alt(){}
+// @mixin hook-close-misc(){}

data/assets/stylesheets/core/column.scss

@@ -0,0 +1,209 @@
+// Name:            Column
+// Description:     Provides a responsive, fluid and nestable columns for text and inline elements
+//
+// Component:       `uk-column`
+//
+// Modifiers:       `uk-column-small`
+//                  `uk-column-medium-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$column-gutter:                                    25px !default;
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] {
+    -webkit-column-gap: $column-gutter;
+    -moz-column-gap: $column-gutter;
+    column-gap: $column-gutter;
+    @include hook-column();
+}
+
+
+/* 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-small-1-2 {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-small-1-3 {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-small-1-4 {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-small-1-5 {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-small-1-6 {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-column-medium-1-2 {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-medium-1-3 {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-medium-1-4 {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-medium-1-5 {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-medium-1-6 {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-column-large-1-2 {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-large-1-3 {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-large-1-4 {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-large-1-5 {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-large-1-6 {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-column-xlarge-1-2 {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+
+    .uk-column-xlarge-1-3 {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+
+    .uk-column-xlarge-1-4 {
+        -webkit-column-count: 4;
+        -moz-column-count: 4;
+        column-count: 4;
+    }
+
+    .uk-column-xlarge-1-5 {
+        -webkit-column-count: 5;
+        -moz-column-count: 5;
+        column-count: 5;
+    }
+
+    .uk-column-xlarge-1-6 {
+        -webkit-column-count: 6;
+        -moz-column-count: 6;
+        column-count: 6;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-column-misc();
+
+// @mixin hook-column(){}
+// @mixin hook-column-misc(){}

data/assets/stylesheets/core/comment.scss

@@ -0,0 +1,172 @@
+// Name:            Comment
+// Description:     Defines styles for comment threads
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-header`
+//                  `uk-comment-avatar`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-body`
+//                  `uk-comment-list`
+//                  `uk-comment-primary`
+//
+// Markup:
+//
+// <!-- uk-comment -->
+// <article class="uk-comment">
+//     <header class="uk-comment-header">
+//         <img class="uk-comment-avatar" src="avatar.svg" width="50" height="50" alt="">
+//         <h4 class="uk-comment-title"></h4>
+//         <div class="uk-comment-meta"></div>
+//     </header>
+//     <div class="uk-comment-body">
+//         <p></p>
+//     </div>
+// </article>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$comment-header-margin-bottom:                   15px !default;
+
+$comment-avatar-margin-right:                    15px !default;
+
+$comment-title-margin-top:                       5px !default;
+$comment-title-font-size:                        16px !default;
+$comment-title-line-height:                      22px !default;
+
+$comment-meta-margin-top:                        2px !default;
+$comment-meta-color:                             #999 !default;
+$comment-meta-font-size:                         11px !default;
+$comment-meta-line-height:                       16px !default;
+
+$comment-list-margin-top:                        15px !default;
+$comment-list-padding-left:                      100px !default;
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    @include hook-comment();
+}
+
+
+/* Sub-object `uk-comment-header`
+ ========================================================================== */
+
+.uk-comment-header {
+    margin-bottom: $comment-header-margin-bottom;
+    @include hook-comment-header();
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-comment-header:before,
+.uk-comment-header:after {
+    content: "";
+    display: table;
+}
+
+.uk-comment-header:after { clear: both; }
+
+
+/* Sub-object `uk-comment-avatar`
+ ========================================================================== */
+
+.uk-comment-avatar {
+    margin-right: $comment-avatar-margin-right;
+    float: left;
+    @include hook-comment-avatar();
+}
+
+
+/* Sub-object `uk-comment-title`
+ ========================================================================== */
+
+.uk-comment-title {
+    margin: $comment-title-margin-top 0 0 0;
+    font-size: $comment-title-font-size;
+    line-height: $comment-title-line-height;
+    @include hook-comment-title();
+}
+
+
+/* Sub-object `uk-comment-meta`
+ ========================================================================== */
+
+.uk-comment-meta {
+    margin: $comment-meta-margin-top 0 0 0;
+    font-size: $comment-meta-font-size;
+    line-height: $comment-meta-line-height;
+    color: $comment-meta-color;
+    @include hook-comment-meta();
+}
+
+
+/* Sub-object `uk-comment-body`
+ ========================================================================== */
+
+.uk-comment-body {
+    @include hook-comment-body();
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-comment-body > :last-child { margin-bottom: 0; }
+
+
+/* Sub-object `uk-comment-list`
+ ========================================================================== */
+
+.uk-comment-list {
+    padding: 0;
+    list-style: none;
+}
+
+.uk-comment-list .uk-comment + ul {
+    margin: $comment-list-margin-top 0 0 0;
+    list-style: none;
+}
+
+.uk-comment-list > li:nth-child(n+2),
+.uk-comment-list .uk-comment + ul > li:nth-child(n+2) { margin-top: $comment-list-margin-top; }
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-comment-list .uk-comment + ul { padding-left: $comment-list-padding-left; }
+
+}
+
+
+/* Modifier `uk-comment-primary`
+ ========================================================================== */
+
+.uk-comment-primary {
+    @include hook-comment-primary();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-comment-misc();
+
+// @mixin hook-comment(){}
+// @mixin hook-comment-header(){}
+// @mixin hook-comment-avatar(){}
+// @mixin hook-comment-title(){}
+// @mixin hook-comment-meta(){}
+// @mixin hook-comment-body(){}
+// @mixin hook-comment-primary(){}
+// @mixin hook-comment-misc(){}