uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/components/form-advanced.scss

@@ -0,0 +1,128 @@
+// Name:            Form advanced
+// Description:     Custom appearance of radio and checkbox buttons
+//
+// Component:       `uk-form`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$form-advanced-size:                           14px !default;
+$form-advanced-border:                         #aaa !default;
+$form-advanced-border-width:                   1px !default;
+$form-advanced-margin-top:                     -4px !default;
+$form-advanced-color:                          transparent !default;
+
+$form-advanced-checked-color:                  #00a8e6 !default;
+
+$form-advanced-radio-size:                     8px !default;
+
+$form-advanced-checkbox-icon:                  "\f00c" !default;
+$form-advanced-checkbox-indeterminate-icon:    "\f068" !default;
+$form-advanced-checkbox-font-size:             12px !default;
+
+$form-advanced-disabled-border:                #ddd !default;
+$form-advanced-disabled-color:                 #aaa !default;
+
+
+/* ========================================================================
+   Component: Form advanced
+   Note: Only works in Webkit at the moment
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Makes box more robust so it clips the child element
+ * 3. Vertical alignment
+ * 4. Remove default style
+ * 5. Fix black background on iOS
+ */
+
+
+.uk-form input[type="radio"],
+.uk-form input[type="checkbox"] {
+    /* 1 */
+    display: inline-block;
+    height: $form-advanced-size;
+    width: $form-advanced-size;
+    border: $form-advanced-border-width solid $form-advanced-border;
+    /* 2 */
+    overflow: hidden;
+    /* 3 */
+    margin-top: $form-advanced-margin-top;
+    vertical-align: middle;
+    /* 4 */
+    -webkit-appearance: none;
+    outline: 0;
+    /* 5 */
+    background: $form-advanced-color;
+    @include hook-form-advanced();
+}
+
+/* Radio */
+.uk-form input[type="radio"] { border-radius: 50%; }
+
+/*
+ * Checked
+ */
+
+.uk-form input[type=radio]:before,
+.uk-form input[type=checkbox]:before {
+    display: block;
+    @include hook-form-advanced-checked();
+}
+
+/* Radio */
+.uk-form input[type=radio]:checked:before {
+    content: '';
+    width: $form-advanced-radio-size;
+    height: $form-advanced-radio-size;
+    margin: (($form-advanced-size - (2 * $form-advanced-border-width) - $form-advanced-radio-size) / 2) auto 0;
+    border-radius: 50%;
+    background: $form-advanced-checked-color;
+    @include hook-form-advanced-radio();
+}
+
+/* Checkbox */
+.uk-form input[type=checkbox]:checked:before,
+.uk-form input[type=checkbox]:indeterminate:before {
+    content: $form-advanced-checkbox-icon;
+    font-family: FontAwesome;
+    font-size: $form-advanced-checkbox-font-size;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    line-height: $form-advanced-size - (2 * $form-advanced-border-width);
+    color: $form-advanced-checked-color;
+    @include hook-form-advanced-checkbox();
+}
+
+.uk-form input[type=checkbox]:indeterminate:before { content: $form-advanced-checkbox-indeterminate-icon; }
+
+/*
+ * Disabled
+ */
+
+.uk-form input[type=radio]:disabled,
+.uk-form input[type=checkbox]:disabled {
+    border-color: $form-advanced-disabled-border;
+    @include hook-form-advanced-disabled();
+}
+
+.uk-form input[type=radio]:disabled:checked:before { background-color: $form-advanced-disabled-color; }
+.uk-form input[type=checkbox]:disabled:checked:before,
+.uk-form input[type=checkbox]:disabled:indeterminate:before { color: $form-advanced-disabled-color; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-form-advanced-misc();
+
+// @mixin hook-form-advanced(){}
+// @mixin hook-form-advanced-checked(){}
+// @mixin hook-form-advanced-radio(){}
+// @mixin hook-form-advanced-checkbox(){}
+// @mixin hook-form-advanced-disabled(){}
+// @mixin hook-form-advanced-misc(){}

data/assets/stylesheets/components/form-file.scss

@@ -0,0 +1,63 @@
+// Name:            Form file
+// Description:     Extends form component
+//
+// Component:       `uk-form`
+//
+// Sub-objects:     `uk-form-file`
+//
+// Markup:
+//
+// <!-- uk-form-file -->
+// <div class="uk-form-file">
+//     <button class="uk-button"></button>
+//     <input type="file">
+// </div>
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Form file
+ ========================================================================== */
+
+/*
+ * 1. Behave like form elements
+ * 2. Create position context for dropdowns
+ * 3. Clip content
+ */
+
+.uk-form-file {
+    /* 1 */
+    display: inline-block;
+    vertical-align: middle;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    overflow: hidden;
+}
+
+/*
+ * 1. Required for Firefox
+ * 2. Expand height and required for the cursor
+ */
+
+.uk-form-file input[type="file"] {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+    /* 1 */
+    left: 0;
+    /* 2 */
+    font-size: 500px;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-form-file-misc();
+
+// @mixin hook-form-file-misc(){}

data/assets/stylesheets/components/form-password.scss

@@ -0,0 +1,74 @@
+// Name:            Form password
+// Description:     Extends form component
+//
+// Component:       `uk-form`
+//
+// Sub-objects:     `uk-form-password`
+//
+// Markup:
+//
+// <!-- uk-form-password -->
+// <form class="uk-form">
+//     <div class="uk-form-password">
+//         <input type="password">
+//         <a href="" class="uk-form-password-toggle" data-uk-form-password></a>
+//     </div>
+// </form>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$form-password-font-size:                        13px !default;
+$form-password-line-height:                      $form-password-font-size !default;
+$form-password-color:                            #999 !default;
+$form-password-hover-color:                      #999 !default;
+$form-password-padding:                          50px !default;
+
+
+/* ========================================================================
+   Component: Form password
+ ========================================================================== */
+
+/*
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ */
+
+.uk-form-password {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+}
+
+.uk-form-password-toggle {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -(floor($form-password-line-height/2));
+    font-size: $form-password-font-size;
+    line-height: $form-password-line-height;
+    color: $form-password-color;
+}
+
+.uk-form-password-toggle:hover {
+    color: $form-password-hover-color;
+    text-decoration: none;
+}
+
+.uk-form-password > input { padding-right: $form-password-padding !important; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-form-password-misc();
+
+// @mixin hook-form-password-misc(){}

data/assets/stylesheets/components/form-select.scss

@@ -0,0 +1,66 @@
+// Name:            Form select
+// Description:     Extends form component
+//
+// Component:       `uk-form`
+//
+// Sub-objects:     `uk-form-select`
+//
+// Markup:
+//
+// <!-- uk-form-select -->
+// <div class="uk-form-select" data-uk-form-select>
+//     <span></span>
+//     <select>
+//         <option value=""></option>
+//     </select>
+// </div>
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Form select
+ ========================================================================== */
+
+/*
+ * 1. Behave like form elements
+ * 2. Create position context for dropdowns
+ * 3. Clip content
+ */
+
+.uk-form-select {
+    /* 1 */
+    display: inline-block;
+    vertical-align: middle;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    overflow: hidden;
+}
+
+/*
+ * 1. Required for Firefox
+ * 1. Required for Webkit to make `height` work
+ */
+
+.uk-form-select select {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    /* 1 */
+    left: 0;
+    /* 2 */
+    -webkit-appearance: none;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-form-select-misc();
+
+// @mixin hook-form-select-misc(){}

data/assets/stylesheets/components/htmleditor.scss

@@ -0,0 +1,269 @@
+// Name:            HTML editor
+// Description:     Defines styles for an HTML editor
+//
+// Component:       `uk-htmleditor`
+//
+// Sub-objects:     `uk-htmleditor-navbar`
+//                  `uk-htmleditor-navbar-nav`
+//                  `uk-htmleditor-navbar-flip`
+//                  `uk-htmleditor-button-code
+//                  `uk-htmleditor-button-preview`
+//                  `uk-htmleditor-content`
+//                  `uk-htmleditor-code`
+//                  `uk-htmleditor-preview`
+//                  `uk-htmleditor-iframe`
+//
+// Modifier:        `uk-htmleditor-fullscreen`
+//                  `[data-mode='tab']`
+//                  `[data-mode='split']`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$htmleditor-navbar-background:                   #eee !default;
+
+$htmleditor-navbar-nav-height:                   40px !default;
+$htmleditor-navbar-nav-padding-horizontal:       15px !default;
+$htmleditor-navbar-nav-line-height:              $htmleditor-navbar-nav-height !default;
+$htmleditor-navbar-nav-color:                    #444 !default;
+
+$htmleditor-navbar-nav-hover-background:         #f5f5f5 !default;
+$htmleditor-navbar-nav-hover-color:              #444 !default;
+$htmleditor-navbar-nav-onclick-background:       #ddd !default;
+$htmleditor-navbar-nav-onclick-color:            #444 !default;
+$htmleditor-navbar-nav-active-background:        #f5f5f5 !default;
+$htmleditor-navbar-nav-active-color:             #444 !default;
+
+$htmleditor-content-border:                      #ddd !default;
+$htmleditor-content-background:                  #fff !default;
+$htmleditor-content-padding:                     20px !default;
+$htmleditor-content-split-border:                #eee !default;
+
+$htmleditor-fullscreen-z-index:                  990 !default;
+$htmleditor-fullscreen-content-top:              $htmleditor-navbar-nav-height !default;
+$htmleditor-fullscreen-icon-resize:              "\f066" !default;
+
+
+/* ========================================================================
+   Component: HTML editor
+ ========================================================================== */
+
+.uk-htmleditor {
+    @include hook-htmleditor();
+}
+
+
+/* Sub-object `uk-htmleditor-navbar`
+ ========================================================================== */
+
+.uk-htmleditor-navbar {
+    background: $htmleditor-navbar-background;
+    @include hook-htmleditor-navbar();
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-htmleditor-navbar:before,
+.uk-htmleditor-navbar:after {
+    content: "";
+    display: table;
+}
+
+.uk-htmleditor-navbar:after { clear: both; }
+
+
+/* Sub-object `uk-htmleditor-navbar-nav`
+ ========================================================================== */
+
+.uk-htmleditor-navbar-nav {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    float: left;
+}
+
+.uk-htmleditor-navbar-nav > li { float: left; }
+
+/*
+ * 1. Dimensions
+ * 2. Style
+ */
+
+.uk-htmleditor-navbar-nav > li > a {
+    display: block;
+    box-sizing: border-box;
+    text-decoration: none;
+    /* 1 */
+    height: $htmleditor-navbar-nav-height;
+    padding: 0 $htmleditor-navbar-nav-padding-horizontal;
+    line-height: $htmleditor-navbar-nav-line-height;
+    /* 2 */
+    color: $htmleditor-navbar-nav-color;
+    font-size: 11px;
+    cursor: pointer;
+    @include hook-htmleditor-navbar-nav();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-htmleditor-navbar-nav > li:hover > a,
+.uk-htmleditor-navbar-nav > li > a:focus { // 1
+    background-color: $htmleditor-navbar-nav-hover-background;
+    color: $htmleditor-navbar-nav-hover-color;
+    outline: none; /* 2 */
+    @include hook-htmleditor-navbar-nav-hover();
+}
+
+/* OnClick */
+.uk-htmleditor-navbar-nav > li > a:active {
+    background-color: $htmleditor-navbar-nav-onclick-background;
+    color: $htmleditor-navbar-nav-onclick-color;
+    @include hook-htmleditor-navbar-nav-onclick();
+}
+
+/* Active */
+.uk-htmleditor-navbar-nav > li.uk-active > a {
+    background-color: $htmleditor-navbar-nav-active-background;
+    color: $htmleditor-navbar-nav-active-color;
+    @include hook-htmleditor-navbar-nav-active();
+}
+
+
+/* Sub-object: `uk-htmleditor-navbar-flip`
+ ========================================================================== */
+
+ .uk-htmleditor-navbar-flip { float: right; }
+
+
+/* Sub-object for special buttons
+ ========================================================================== */
+
+[data-mode='split'] .uk-htmleditor-button-code,
+[data-mode='split'] .uk-htmleditor-button-preview { display: none; }
+
+
+/* Sub-object `uk-htmleditor-content`
+ ========================================================================== */
+
+.uk-htmleditor-content {
+    border-left: 1px solid $htmleditor-content-border;
+    border-right: 1px solid $htmleditor-content-border;
+    border-bottom: 1px solid $htmleditor-content-border;
+    background: $htmleditor-content-background;
+    @include hook-htmleditor-content();
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-htmleditor-content:before,
+.uk-htmleditor-content:after {
+    content: "";
+    display: table;
+}
+
+.uk-htmleditor-content:after { clear: both; }
+
+
+/* Modifier `uk-htmleditor-fullscreen`
+ ========================================================================== */
+
+.uk-htmleditor-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $htmleditor-fullscreen-z-index;
+}
+
+.uk-htmleditor-fullscreen .uk-htmleditor-content {
+    position: absolute;
+    top: $htmleditor-fullscreen-content-top;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+
+.uk-htmleditor-fullscreen .uk-icon-expand:before { content: $htmleditor-fullscreen-icon-resize; }
+
+
+/* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
+ ========================================================================== */
+
+.uk-htmleditor-code,
+.uk-htmleditor-preview { box-sizing: border-box; }
+
+.uk-htmleditor-preview {
+    padding: $htmleditor-content-padding;
+    overflow-y: scroll;
+    position: relative;
+}
+
+/*
+ * Tab view
+ */
+
+[data-mode='tab'][data-active-tab='code'] .uk-htmleditor-preview,
+[data-mode='tab'][data-active-tab='preview'] .uk-htmleditor-code { display: none; }
+
+/*
+ * Split view
+ */
+
+[data-mode='split'] .uk-htmleditor-code,
+[data-mode='split'] .uk-htmleditor-preview {
+    float: left;
+    width: 50%;
+}
+
+[data-mode='split'] .uk-htmleditor-code { border-right: 1px solid $htmleditor-content-split-border; }
+
+
+/* Sub-object `uk-htmleditor-iframe`
+ ========================================================================== */
+
+.uk-htmleditor-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+
+/* CodeMirror modifications
+ ========================================================================== */
+
+.uk-htmleditor .CodeMirror {
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-htmleditor-misc();
+
+// @mixin hook-htmleditor(){}
+// @mixin hook-htmleditor-navbar(){}
+// @mixin hook-htmleditor-navbar-nav(){}
+// @mixin hook-htmleditor-navbar-nav-hover(){}
+// @mixin hook-htmleditor-navbar-nav-onclick(){}
+// @mixin hook-htmleditor-navbar-nav-active(){}
+// @mixin hook-htmleditor-content(){}
+// @mixin hook-htmleditor-misc(){}