uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/core/article.scss

@@ -0,0 +1,139 @@
+// Name:            Article
+// Description:     Defines styles for articles within your page
+//
+// Component:       `uk-article`
+//
+// Sub-objects:     `uk-article-title`
+//                  `uk-article-meta`
+//                  `uk-article-lead`
+//                  `uk-article-divider`
+//
+// Markup:
+//
+// <!-- uk-article -->
+// <div class="uk-article">
+//     <h1 class="uk-article-title"></h1>
+//     <p class="uk-article-meta"></p>
+//     <p class="uk-article-lead"></p>
+//     <p></p>
+//     <hr class="uk-article-divider">
+//     <p></p>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$article-margin-top:                             25px !default;
+
+$article-title-font-size:                        36px !default;
+$article-title-line-height:                      42px !default;
+$article-title-font-weight:                      normal !default;
+$article-title-text-transform:                   none !default;
+
+$article-meta-font-size:                         12px !default;
+$article-meta-line-height:                       18px !default;
+$article-meta-color:                             #999 !default;
+
+$article-lead-color:                             #444 !default;
+$article-lead-font-size:                         18px !default;
+$article-lead-line-height:                       24px !default;
+$article-lead-font-weight:                       normal !default;
+
+$article-divider-margin:                         25px !default;
+$article-divider-border:                         #ddd !default;
+
+
+/* ========================================================================
+   Component: Article
+ ========================================================================== */
+
+/*
+ * Micro clearfix to make articles more robust
+ */
+
+.uk-article:before,
+.uk-article:after {
+    content: "";
+    display: table;
+}
+
+.uk-article:after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-article > :last-child { margin-bottom: 0; }
+
+/*
+ * Vertical gutter for articles
+ */
+
+.uk-article + .uk-article { margin-top: $article-margin-top; }
+
+
+/* Sub-object `uk-article-title`
+ ========================================================================== */
+
+.uk-article-title {
+    font-size: $article-title-font-size;
+    line-height: $article-title-line-height;
+    font-weight: $article-title-font-weight;
+    text-transform: $article-title-text-transform;
+    @include hook-article-title();
+}
+
+.uk-article-title a {
+    color: inherit;
+    text-decoration: none;
+}
+
+
+/* Sub-object `uk-article-meta`
+ ========================================================================== */
+
+.uk-article-meta {
+    font-size: $article-meta-font-size;
+    line-height: $article-meta-line-height;
+    color: $article-meta-color;
+    @include hook-article-meta();
+}
+
+
+/* Sub-object `uk-article-lead`
+ ========================================================================== */
+
+.uk-article-lead {
+    color: $article-lead-color;
+    font-size: $article-lead-font-size;
+    line-height: $article-lead-line-height;
+    font-weight: $article-lead-font-weight;
+    @include hook-article-lead();
+}
+
+
+/* Sub-object `uk-article-divider`
+ ========================================================================== */
+
+.uk-article-divider {
+    margin-bottom: $article-divider-margin;
+    border-color: $article-divider-border;
+    @include hook-article-divider();
+}
+
+* + .uk-article-divider { margin-top: $article-divider-margin; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-article-misc();
+
+// @mixin hook-article-title(){}
+// @mixin hook-article-meta(){}
+// @mixin hook-article-lead(){}
+// @mixin hook-article-divider(){}
+// @mixin hook-article-misc(){}

data/assets/stylesheets/core/badge.scss

@@ -0,0 +1,110 @@
+// Name:            Badge
+// Description:     Defines styles for badges
+//
+// Component:       `uk-badge`
+//
+// Modifiers:       `uk-badge-notification`
+//                  `uk-badge-success`
+//                  `uk-badge-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$badge-background:                               #00a8e6 !default;
+$badge-padding-horizontal:                       5px !default;
+$badge-font-size:                                10px !default;
+$badge-font-weight:                              bold !default;
+$badge-line-height:                              14px !default;
+$badge-color:                                    #fff !default;
+$badge-text-transform:                           none !default;
+$badge-hover-color:                              #fff !default;
+
+$badge-notification-font-size:                   12px !default;
+$badge-notification-line-height:                 18px !default;
+
+$badge-success-background:                       #8cc14c !default;
+$badge-warning-background:                       #faa732 !default;
+$badge-danger-background:                        #da314b !default;
+
+
+/* ========================================================================
+   Component: Badge
+ ========================================================================== */
+
+.uk-badge {
+    display: inline-block;
+    padding: 0 $badge-padding-horizontal;
+    background: $badge-background;
+    font-size: $badge-font-size;
+    font-weight: $badge-font-weight;
+    line-height: $badge-line-height;
+    color: $badge-color;
+    text-align: center;
+    vertical-align: middle;
+    text-transform: $badge-text-transform;
+    @include hook-badge();
+}
+
+/*
+ * Keep color when badge is a link
+ */
+
+a.uk-badge:hover { color: $badge-hover-color; }
+
+
+/* Modifier: `uk-badge-notification`;
+ ========================================================================== */
+
+.uk-badge-notification {
+    box-sizing: border-box;
+    min-width: $badge-notification-line-height;
+    border-radius: 500px;
+    font-size: $badge-notification-font-size;
+    line-height: $badge-notification-line-height;
+}
+
+
+/* Color modifier
+ ========================================================================== */
+
+/*
+ * Modifier: `uk-badge-success`
+ */
+
+.uk-badge-success {
+    background-color: $badge-success-background;
+    @include hook-badge-success();
+}
+
+/*
+ * Modifier: `uk-badge-warning`
+ */
+
+.uk-badge-warning {
+    background-color: $badge-warning-background;
+    @include hook-badge-warning();
+}
+
+/*
+ * Modifier: `uk-badge-danger`
+ */
+
+.uk-badge-danger {
+    background-color: $badge-danger-background;
+    @include hook-badge-danger();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-badge-misc();
+
+// @mixin hook-badge(){}
+// @mixin hook-badge-success(){}
+// @mixin hook-badge-warning(){}
+// @mixin hook-badge-danger(){}
+// @mixin hook-badge-misc(){}

data/assets/stylesheets/core/base-noconflict.scss

@@ -0,0 +1,397 @@
+// Name:            Base (No conflict)
+// Description:     Sets default values for HTML elements
+//
+// Component:       `uk-noconflict`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$base-body-background:                           #fff !default;
+$base-body-font-family:                          "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$base-body-font-weight:                          normal !default;
+$base-body-font-size:                            14px !default;
+$base-body-line-height:                          20px !default;
+$base-body-color:                                #444 !default;
+
+$base-link-color:                                #07D !default;
+$base-link-text-decoration:                      none !default;
+$base-link-hover-color:                          #059 !default;
+$base-link-hover-text-decoration:                underline !default;
+
+$base-code-color:                                #D05 !default;
+$base-code-font-size:                            12px !default;
+$base-code-font-family:                          Consolas, monospace, serif !default;
+$base-em-color:                                  #D05 !default;
+$base-ins-background:                            #ffa !default;
+$base-ins-color:                                 #444 !default;
+$base-mark-background:                           #ffa !default;
+$base-mark-color:                                #444 !default;
+$base-quote-font-style:                          italic !default;
+
+$base-margin-vertical:                           15px !default;
+
+$base-heading-font-family:                       "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$base-heading-font-weight:                       normal !default;
+$base-heading-color:                             #444 !default;
+$base-heading-text-transform:                    none !default;
+$base-heading-margin-top:                        25px !default;
+$base-h1-font-size:                              36px !default;
+$base-h1-line-height:                            42px !default;
+$base-h2-font-size:                              24px !default;
+$base-h2-line-height:                            30px !default;
+$base-h3-font-size:                              18px !default;
+$base-h3-line-height:                            24px !default;
+$base-h4-font-size:                              16px !default;
+$base-h4-line-height:                            22px !default;
+$base-h5-font-size:                              14px !default;
+$base-h5-line-height:                            20px !default;
+$base-h6-font-size:                              12px !default;
+$base-h6-line-height:                            18px !default;
+
+$base-list-padding-left:                         30px !default;
+
+$base-hr-margin-vertical:                        $base-margin-vertical !default;
+$base-hr-border:                                 #ddd !default;
+$base-hr-border-width:                           1px !default;
+
+$base-blockquote-padding-left:                   15px !default;
+$base-blockquote-border:                         #ddd !default;
+$base-blockquote-border-width:                   5px !default;
+$base-blockquote-font-size:                      16px !default;
+$base-blockquote-line-height:                    22px !default;
+$base-blockquote-font-style:                     italic !default;
+
+$base-pre-padding:                               10px !default;
+$base-pre-background:                            #f5f5f5 !default;
+$base-pre-color:                                 #444 !default;
+$base-pre-font-size:                             12px !default;
+$base-pre-line-height:                           18px !default;
+$base-pre-font-family:                           $base-code-font-family !default;
+
+$base-selection-background:                      #39f !default;
+$base-selection-color:                           #fff !default;
+
+
+/* ========================================================================
+   Component: Base
+ ========================================================================== */
+
+html { font-size: $base-body-font-size; }
+
+.uk-noconflict {
+    background: $base-body-background;
+    font-family:  $base-body-font-family;
+    font-size: $base-body-font-size;
+    line-height: $base-body-line-height;
+    font-weight: $base-body-font-weight;
+    color: $base-body-color;
+}
+
+/* Links
+ ========================================================================== */
+
+/*
+ * Remove the gray background color from active links in IE 10.
+ */
+
+.uk-link { background: transparent; }
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+.uk-link:active,
+.uk-link:hover { outline: 0; }
+
+/*
+ * Style
+ */
+
+.uk-link {
+    color: $base-link-color;
+    text-decoration: $base-link-text-decoration;
+    cursor: pointer;
+    @include hook-base-link();
+}
+
+.uk-link:hover {
+    color: $base-link-hover-color;
+    text-decoration: $base-link-hover-text-decoration;
+    @include hook-base-link-hover();
+}
+
+
+/* Text-level semantics
+ ========================================================================== */
+
+/*
+ * 1. Address odd `em`-unit font size rendering in all browsers.
+ * 2. Consolas has a better baseline in running text compared to `Courier`
+ */
+
+.uk-noconflict :not(pre) > code,
+.uk-noconflict :not(pre) > kbd,
+.uk-noconflict :not(pre) > samp {
+    /* 1 */
+    font-size: $base-code-font-size;
+    /* 2 */
+    font-family: $base-code-font-family;
+    /* 3 */
+    color: $base-code-color;
+    white-space: nowrap;
+    @include hook-base-code();
+}
+
+/* Images
+ ========================================================================== */
+
+/*
+ * 1. Responsiveness: Sets a maximum width relative to the parent and auto scales the height
+ * 2. Corrects `max-width` behavior if padding and border are used
+ * 3. Remove border when inside `a` element in IE 8/9/10.
+ * 4. Remove the gap between images and the bottom of their containers
+ */
+
+.uk-noconflict img {
+    /* 1 */
+    max-width: 100%;
+    height: auto;
+    /* 2 */
+    box-sizing: border-box;
+    /* 3 */
+    border: 0;
+    /* 4 */
+    vertical-align: middle;
+}
+
+/*
+ * Preserve original image dimensions
+ */
+
+img.uk-img-preserve,
+.uk-img-preserve img { max-width: none; }
+
+/*
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+.uk-noconflict svg:not(:root) { overflow: hidden; }
+
+
+/* Block elements
+ ========================================================================== */
+
+/*
+ * Reset margin
+ */
+
+.uk-noconflict blockquote,
+.uk-noconflict figure { margin: 0; }
+
+/*
+ * Margins
+ */
+
+.uk-noconflict p,
+.uk-noconflict ul,
+.uk-noconflict ol,
+.uk-noconflict dl,
+.uk-noconflict blockquote,
+.uk-noconflict pre,
+.uk-noconflict address,
+.uk-noconflict fieldset,
+.uk-noconflict figure { margin: 0 0 $base-margin-vertical 0; }
+
+.uk-noconflict * + p,
+.uk-noconflict * + ul,
+.uk-noconflict * + ol,
+.uk-noconflict * + dl,
+.uk-noconflict * + blockquote,
+.uk-noconflict * + pre,
+.uk-noconflict * + address,
+.uk-noconflict * + fieldset,
+.uk-noconflict * + figure { margin-top: $base-margin-vertical; }
+
+
+/* Headings
+ ========================================================================== */
+
+.uk-noconflict h1, .uk-noconflict h2, .uk-noconflict h3, .uk-noconflict h4, .uk-noconflict h5, .uk-noconflict h6 {
+    margin: 0 0 $base-margin-vertical 0;
+    font-family:  $base-heading-font-family;
+    font-weight: $base-heading-font-weight;
+    color: $base-heading-color;
+    text-transform: $base-heading-text-transform;
+    @include hook-base-h();
+}
+
+/*
+ * Margins
+ */
+
+.uk-noconflict * + h1,
+.uk-noconflict * + h2,
+.uk-noconflict * + h3,
+.uk-noconflict * + h4,
+.uk-noconflict * + h5,
+.uk-noconflict * + h6 { margin-top: $base-heading-margin-top; }
+
+/*
+ * Sizes
+ */
+
+.uk-noconflict h1, .uk-h1 {
+    font-size: $base-h1-font-size;
+    line-height: $base-h1-line-height;
+    @include hook-base-h1();
+}
+
+.uk-noconflict h2, .uk-h2 {
+    font-size: $base-h2-font-size;
+    line-height: $base-h2-line-height;
+    @include hook-base-h2();
+}
+
+.uk-noconflict h3, .uk-h3 {
+    font-size: $base-h3-font-size;
+    line-height: $base-h3-line-height;
+    @include hook-base-h3();
+}
+
+.uk-noconflict h4, .uk-h4 {
+    font-size: $base-h4-font-size;
+    line-height: $base-h4-line-height;
+    @include hook-base-h4();
+}
+
+.uk-noconflict h5, .uk-h5 {
+    font-size: $base-h5-font-size;
+    line-height: $base-h5-line-height;
+    @include hook-base-h5();
+}
+
+.uk-noconflict h6, .uk-h6 {
+    font-size: $base-h6-font-size;
+    line-height: $base-h6-line-height;
+    @include hook-base-h6();
+}
+
+
+/* Lists
+ ========================================================================== */
+
+.uk-noconflict ul,
+.uk-noconflict ol { padding-left: $base-list-padding-left; }
+
+/*
+ * Reset margin for nested lists
+ */
+
+.uk-noconflict ul > li > ul,
+.uk-noconflict ul > li > ol,
+.uk-noconflict ol > li > ol,
+.uk-noconflict ol > li > ul { margin: 0; }
+
+
+/* Horizontal rules
+ ========================================================================== */
+
+/*
+ * 1. Address differences between Firefox and other browsers.
+ * 2. Style
+ */
+
+.uk-noconflict hr {
+    /* 1 */
+    box-sizing: content-box;
+    height: 0;
+    /* 2 */
+    margin: $base-hr-margin-vertical 0;
+    border: 0;
+    border-top: $base-hr-border-width solid $base-hr-border;
+    @include hook-base-hr();
+}
+
+
+/* Blockquotes
+ ========================================================================== */
+
+.uk-noconflict blockquote {
+    padding-left: $base-blockquote-padding-left;
+    border-left: $base-blockquote-border-width solid $base-blockquote-border;
+    font-size: $base-blockquote-font-size;
+    line-height: $base-blockquote-line-height;
+    font-style: $base-blockquote-font-style;
+    @include hook-base-blockquote();
+}
+
+
+/* Preformatted text
+ ========================================================================== */
+
+/*
+ * 1. Contain overflow in all browsers.
+ */
+
+.uk-noconflict pre {
+    padding: $base-pre-padding;
+    background: $base-pre-background;
+    font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family;
+    color: $base-pre-color;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    /* 1 */
+    overflow: auto;
+    @include hook-base-pre();
+}
+
+
+/* Iframe
+ ========================================================================== */
+
+.uk-noconflict iframe { border: 0; }
+
+
+/* WordPress Fix
+ ========================================================================== */
+
+.uk-list > li { margin: 0; }
+
+
+/* Fix displacements caused by higher specificity
+ ========================================================================== */
+
+.uk-noconflict .uk-nav,
+.uk-noconflict .uk-nav ul,
+.uk-noconflict .uk-navbar-nav,
+.uk-noconflict .uk-subnav,
+.uk-noconflict .uk-breadcrumb,
+.uk-noconflict .uk-pagination,
+.uk-noconflict .uk-tab,
+.uk-noconflict .uk-thumbnav,
+.uk-noconflict .uk-list { padding-left: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-base-misc();
+
+// @mixin hook-base-body(){}
+// @mixin hook-base-link(){}
+// @mixin hook-base-link-hover(){}
+// @mixin hook-base-code(){}
+// @mixin hook-base-h(){}
+// @mixin hook-base-h1(){}
+// @mixin hook-base-h2(){}
+// @mixin hook-base-h3(){}
+// @mixin hook-base-h4(){}
+// @mixin hook-base-h5(){}
+// @mixin hook-base-h6(){}
+// @mixin hook-base-hr(){}
+// @mixin hook-base-blockquote(){}
+// @mixin hook-base-pre(){}
+// @mixin hook-base-misc(){}