uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/components/nestable.scss

@@ -0,0 +1,229 @@
+// Name:            Nestable
+// Description:     Defines styles for nestable lists
+//
+// Component:       `uk-nestable`
+//
+// Sub-objects:     `uk-nestable-list`
+//                  `uk-nestable-item`
+//                  `uk-nestable-handle`
+//                  `uk-nestable-moving`
+//                  `uk-nestable-toggle`
+//                  `uk-nestable-panel`
+//
+// Modifier:        `uk-nestable-dragged`
+//                  `uk-nestable-placeholder`
+//
+// States:          `uk-parent`
+//                  `uk-collapsed`
+//
+// Markup:
+//
+// <!-- uk-nestable -->
+// <ul class="uk-nestable" data-uk-nestable>
+//     <li></li>
+//     <li></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$nestable-padding-left:                          40px !default;
+
+$nestable-item-margin:                           10px !default;
+
+$nestable-dragged-z-index:                       1050 !default;
+
+$nestable-placeholder-border:                    #ddd !default;
+
+$nestable-empty-height:                          30px !default;
+
+$nestable-toggle-icon:                           "\f147" !default;
+$nestable-toggle-collapsed-icon:                 "\f196" !default;
+
+$nestable-panel-padding:                         5px !default;
+$nestable-panel-background:                      #f5f5f5 !default;
+
+
+/* ========================================================================
+   Component: Nestable
+ ========================================================================== */
+
+.uk-nestable {
+    padding: 0;
+    list-style: none;
+    @include hook-nestable();
+}
+
+/*
+ * Disables the default callout shown when you touch and hold a touch target
+ * Currently only works in Webkit
+ */
+
+.uk-nestable a,
+.uk-nestable img { -webkit-touch-callout: none; }
+
+
+/* Sub-object `uk-nestable-list`
+ ========================================================================== */
+
+.uk-nestable-list {
+    margin: 0;
+    padding-left: $nestable-padding-left;
+    list-style: none;
+}
+
+
+/* Sub-modifier `uk-nestable-item`
+ ========================================================================== */
+
+/*
+ * 1. Deactivate browser touch actions in IE11
+ */
+
+.uk-nestable-item {
+    /* 1 */
+    touch-action: none;
+    @include hook-nestable-item();
+}
+
+.uk-nestable-item + .uk-nestable-item { margin-top: $nestable-item-margin; }
+
+.uk-nestable-list:not(.uk-nestable-dragged) > .uk-nestable-item:first-child { margin-top: $nestable-item-margin; }
+
+
+/* Sub-modifier `uk-nestable-dragged`
+ ========================================================================== */
+
+/*
+ * 1. Reset style
+ */
+
+.uk-nestable-dragged {
+    position: absolute;
+    z-index: $nestable-dragged-z-index;
+    pointer-events: none;
+    /* 1 */
+    padding-left: 0;
+    @include hook-nestable-dragged();
+}
+
+
+/* Sub-modifier `uk-nestable-placeholder`
+ ========================================================================== */
+
+.uk-nestable-placeholder { position: relative; }
+
+.uk-nestable-placeholder > * { opacity: 0; }
+
+.uk-nestable-placeholder:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 1px dashed $nestable-placeholder-border;
+    opacity: 1;
+    @include hook-nestable-placeholder();
+}
+
+
+/* Empty List
+ ========================================================================== */
+
+.uk-nestable-empty {
+    min-height: $nestable-empty-height;
+    @include hook-nestable-empty();
+}
+
+
+/* Sub-object `uk-nestable-handle`
+ ========================================================================== */
+
+/*
+ * Deactivate browser touch actions in IE11
+ */
+
+.uk-nestable-handle { touch-action: none; }
+
+/* Hover */
+.uk-nestable-handle:hover { cursor: move; }
+
+
+/* Sub-object `uk-nestable-moving`
+ ========================================================================== */
+
+.uk-nestable-moving,
+/* Needed if moving over links or buttons */
+.uk-nestable-moving * { cursor: move; }
+
+
+/* [data-nestable-action='toggle']
+ ========================================================================== */
+
+/*
+ * 1. Makes text unselectable. Happens if double clicked by mistake
+ */
+
+[data-nestable-action='toggle'] {
+    cursor: pointer;
+    /* 1 */
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+
+/* Sub-object `.uk-nestable-toggle`
+ ========================================================================== */
+
+.uk-nestable-toggle {
+    display: inline-block;
+    visibility: hidden;
+    @include hook-nestable-toggle();
+}
+
+.uk-nestable-toggle:after {
+    content: $nestable-toggle-icon;
+    font-family: FontAwesome;
+}
+
+.uk-parent > :not(.uk-nestable-list) .uk-nestable-toggle { visibility: visible; }
+
+/*
+ * Collapsed
+ */
+
+.uk-collapsed .uk-nestable-list { display: none; }
+
+.uk-collapsed .uk-nestable-toggle:after { content: $nestable-toggle-collapsed-icon; }
+
+
+/* Sub-object `uk-nestable-panel`
+ ========================================================================== */
+
+.uk-nestable-panel {
+    padding: $nestable-panel-padding;
+    background: $nestable-panel-background;
+    @include hook-nestable-panel();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-nestable-misc();
+
+// @mixin hook-nestable(){}
+// @mixin hook-nestable-item(){}
+// @mixin hook-nestable-dragged(){}
+// @mixin hook-nestable-placeholder(){}
+// @mixin hook-nestable-empty(){}
+// @mixin hook-nestable-handle(){}
+// @mixin hook-nestable-toggle(){}
+// @mixin hook-nestable-panel(){}
+// @mixin hook-nestable-misc(){}

data/assets/stylesheets/components/notify.scss

@@ -0,0 +1,190 @@
+// Name:            Notify
+// Description:     Defines styles for toggleable notifications
+//
+// Component:       `uk-notify`
+//
+// Sub-objects:     `uk-notify-message`
+//
+// Modifiers:       `uk-notify-top-center`
+//                  `uk-notify-top-right`
+//                  `uk-notify-bottom-left`
+//                  `uk-notify-bottom-center`
+//                  `uk-notify-bottom-right`
+//                  `uk-notify-message-primary`
+//                  `uk-notify-message-success`
+//                  `uk-notify-message-warning`
+//                  `uk-notify-message-danger`
+//
+// Uses:            Close: `uk-close`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$notify-position:                                10px !default;
+$notify-z-index:                                 1040 !default;
+$notify-width:                                   350px !default;
+
+$notify-message-margin-bottom:                   10px !default;
+$notify-message-padding:                         15px !default;
+$notify-message-background:                      #444 !default;
+$notify-message-color:                           #fff !default;
+$notify-message-font-size:                       16px !default;
+$notify-message-line-height:                     22px !default;
+
+$notify-message-primary-background:              #ebf7fd !default;
+$notify-message-primary-color:                   #2d7091 !default;
+
+$notify-message-success-background:              #f2fae3 !default;
+$notify-message-success-color:                   #659f13 !default;
+
+$notify-message-warning-background:              #fffceb !default;
+$notify-message-warning-color:                   #e28327 !default;
+
+$notify-message-danger-background:               #fff1f0 !default;
+$notify-message-danger-color:                    #d85030 !default;
+
+
+/* ========================================================================
+   Component: Notify
+ ========================================================================== */
+
+/*
+ * Message container for positioning
+ */
+
+.uk-notify {
+    position: fixed;
+    top: $notify-position;
+    left: $notify-position;
+    z-index: $notify-z-index;
+    box-sizing: border-box;
+    width: $notify-width;
+    @include hook-notify();
+}
+
+
+/* Position modifiers
+========================================================================== */
+
+.uk-notify-top-right,
+.uk-notify-bottom-right  {
+    left: auto;
+    right: $notify-position;
+}
+
+.uk-notify-top-center,
+.uk-notify-bottom-center {
+    left: 50%;
+    margin-left: ($notify-width / -2);
+}
+
+.uk-notify-bottom-left,
+.uk-notify-bottom-right,
+.uk-notify-bottom-center {
+    top: auto;
+    bottom: $notify-position;
+}
+
+
+/* Responsiveness
+========================================================================== */
+
+/* Phones portrait and smaller */
+@media (max-width: $breakpoint-mini-max) {
+
+    /*
+     * Fit in small screen
+     */
+
+    .uk-notify {
+        left: 10px;
+        right: 10px;
+        width: auto;
+        margin: 0;
+    }
+
+}
+
+
+/* Sub-object: `uk-notify-message`
+========================================================================== */
+
+.uk-notify-message {
+    position: relative;
+    margin-bottom: $notify-message-margin-bottom;
+    padding: $notify-message-padding;
+    background: $notify-message-background;
+    color: $notify-message-color;
+    font-size: $notify-message-font-size;
+    line-height: $notify-message-line-height;
+    cursor: pointer;
+    @include hook-notify-message();
+}
+
+
+/* Close in notify
+ ========================================================================== */
+
+.uk-notify-message > .uk-close {
+    visibility: hidden;
+    float: right;
+}
+
+.uk-notify-message:hover > .uk-close { visibility: visible; }
+
+
+/* Modifier: `uk-alert-info`
+ ========================================================================== */
+
+.uk-notify-message-primary {
+    background: $notify-message-primary-background;
+    color: $notify-message-primary-color;
+    @include hook-notify-message-primary();
+}
+
+
+/* Modifier: `uk-alert-success`
+ ========================================================================== */
+
+.uk-notify-message-success {
+    background: $notify-message-success-background;
+    color: $notify-message-success-color;
+    @include hook-notify-message-success();
+}
+
+
+/* Modifier: `uk-notify-message-warning`
+ ========================================================================== */
+
+.uk-notify-message-warning {
+    background: $notify-message-warning-background;
+    color: $notify-message-warning-color;
+    @include hook-notify-message-warning();
+}
+
+
+/* Modifier: `uk-notify-message-danger`
+ ========================================================================== */
+
+.uk-notify-message-danger {
+    background: $notify-message-danger-background;
+    color: $notify-message-danger-color;
+    @include hook-notify-message-danger();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-notify-misc();
+
+// @mixin hook-notify(){}
+// @mixin hook-notify-message(){}
+// @mixin hook-notify-message-primary(){}
+// @mixin hook-notify-message-success(){}
+// @mixin hook-notify-message-warning(){}
+// @mixin hook-notify-message-danger(){}
+// @mixin hook-notify-misc(){}

data/assets/stylesheets/components/placeholder.scss

@@ -0,0 +1,66 @@
+// Name:            Placeholder
+// Description:     Defines styles for placeholder boxes
+//
+// Component:       `uk-placeholder`
+//
+// Modifiers:       `uk-placeholder-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$placeholder-margin-vertical:                    15px !default;
+$placeholder-padding:                            20px !default;
+$placeholder-border:                             #ddd !default;
+$placeholder-background:                         #fafafa !default;
+$placeholder-color:                              #444 !default;
+
+$placeholder-large-padding-vertical:             80px !default;
+
+
+/* ========================================================================
+   Component: Placeholder
+ ========================================================================== */
+
+.uk-placeholder {
+    margin-bottom: $placeholder-margin-vertical;
+    padding: $placeholder-padding;
+    border: 1px dashed $placeholder-border;
+    background: $placeholder-background;
+    color: $placeholder-color;
+    @include hook-placeholder();
+}
+
+/*
+ * Add margin if adjacent element
+ */
+
+* + .uk-placeholder { margin-top: $placeholder-margin-vertical; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-placeholder > :last-child { margin-bottom: 0; }
+
+
+/* Modifier: `uk-placeholder-large`
+ ========================================================================== */
+
+.uk-placeholder-large {
+    padding-top: $placeholder-large-padding-vertical;
+    padding-bottom: $placeholder-large-padding-vertical;
+    @include hook-placeholder-large();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-placeholder-misc();
+
+// @mixin hook-placeholder(){}
+// @mixin hook-placeholder-large(){}
+// @mixin hook-placeholder-misc(){}