uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/components/sortable.scss

@@ -0,0 +1,122 @@
+// Name:            Sortable
+// Description:     Defines styles for sortable grids and lists
+//
+// Component:       `uk-sortable`
+//
+// Sub-objects:     `uk-sortable-handle`
+//                  `uk-sortable-moving`
+//
+// Modifier:        `uk-sortable-dragged`
+//                  `uk-sortable-placeholder`
+//
+// Markup:
+//
+// <!-- uk-sortable -->
+// <ul class="uk-sortable" data-uk-sortable>
+//     <li></li>
+//     <li></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$sortable-dragged-z-index:                       1050 !default;
+
+$sortable-placeholder-opacity:                   0 !default;
+
+$sortable-empty-height:                          30px !default;
+
+
+/* ========================================================================
+   Component: Sortable
+ ========================================================================== */
+
+.uk-sortable {
+    position: relative;
+    @include hook-sortable();
+}
+
+/*
+ * Deactivate browser touch actions in IE11
+ */
+
+.uk-sortable > * { touch-action: none; }
+
+/*
+ * Disables the default callout shown when you touch and hold a touch target
+ * Currently only works in Webkit
+ */
+
+.uk-sortable a,
+.uk-sortable img { -webkit-touch-callout: none; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-sortable > :last-child { margin-bottom: 0; }
+
+
+/* Sub-modifier `uk-sortable-dragged`
+ ========================================================================== */
+
+.uk-sortable-dragged {
+    position: absolute;
+    z-index: $sortable-dragged-z-index;
+    pointer-events: none;
+    @include hook-sortable-dragged();
+}
+
+
+/* Sub-modifier `uk-sortable-placeholder`
+ ========================================================================== */
+
+.uk-sortable-placeholder {
+    opacity: $sortable-placeholder-opacity;
+    @include hook-sortable-placeholder();
+}
+
+
+/* Empty List
+ ========================================================================== */
+
+.uk-sortable-empty {
+    min-height: $sortable-empty-height;
+    @include hook-sortable-empty();
+}
+
+
+/* Sub-object `uk-sortable-handle`
+ ========================================================================== */
+
+/*
+ * Deactivate browser touch actions in IE11
+ */
+
+.uk-sortable-handle { touch-action: none; }
+
+/* Hover */
+.uk-sortable-handle:hover { cursor: move; }
+
+
+/* Sub-object `uk-sortable-moving`
+ ========================================================================== */
+
+.uk-sortable-moving,
+/* Needed if moving over links or buttons */
+.uk-sortable-moving * { cursor: move; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-sortable-misc();
+
+// @mixin hook-sortable(){}
+// @mixin hook-sortable-dragged(){}
+// @mixin hook-sortable-placeholder(){}
+// @mixin hook-sortable-empty(){}
+// @mixin hook-sortable-misc(){}

data/assets/stylesheets/components/sticky.scss

@@ -0,0 +1,64 @@
+// Name:            Sticky
+// Description:     Make elements remain at the top of the viewport
+//
+// Component:       `data-uk-sticky`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$sticky-z-index:                                 980 !default;
+
+$sticky-animation-duration:                      0.2s !default;
+$sticky-reverse-animation-duration:              0.2s !default;
+
+
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+
+/*
+ * 1. More robust if padding and border are used
+ */
+
+[data-uk-sticky].uk-active {
+   z-index: $sticky-z-index;
+   /* 1 */
+   box-sizing: border-box;
+}
+
+/*
+ * 1. Resolve frame-rate issues on devices with lower frame-rates. Forces hardware acceleration
+ */
+
+.uk-sticky-placeholder > * {
+    /* 1 */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+/*
+ * Faster animations
+ */
+
+[data-uk-sticky][class*='uk-animation-'] {
+    -webkit-animation-duration: $sticky-animation-duration;
+    animation-duration: $sticky-animation-duration;
+}
+
+[data-uk-sticky].uk-animation-reverse {
+    -webkit-animation-duration: $sticky-reverse-animation-duration;
+    animation-duration: $sticky-reverse-animation-duration;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-sticky-misc();
+
+// @mixin hook-sticky-misc(){}

data/assets/stylesheets/components/tooltip.scss

@@ -0,0 +1,177 @@
+// Name:            Tooltip
+// Description:     Defines styles for tooltips
+//
+// Component:       `uk-tooltip`
+//
+// Modifiers        `uk-tooltip-top`
+//                  `uk-tooltip-top-left`
+//                  `uk-tooltip-top-right`
+//                  `uk-tooltip-bottom`
+//                  `uk-tooltip-bottom-left`
+//                  `uk-tooltip-bottom-right`
+//                  `uk-tooltip-left`
+//                  `uk-tooltip-right`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$tooltip-z-index:                                1030 !default;
+$tooltip-max-width:                              200px !default;
+$tooltip-padding-vertical:                       5px !default;
+$tooltip-padding-horizontal:                     8px !default;
+$tooltip-background:                             #333 !default;
+$tooltip-triangle-size:                          5px !default;
+
+$tooltip-color:                                  rgba(255,255,255,0.7) !default;
+$tooltip-font-size:                              12px !default;
+$tooltip-line-height:                            18px !default;
+
+$tooltip-offset-horizontal:                      10px !default;
+
+
+/* ========================================================================
+   Component: Tooltip
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set fixed position
+ * 3. Set dimensions
+ * 4. Set style
+ */
+
+.uk-tooltip {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $tooltip-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
+    /* 4 */
+    background: $tooltip-background;
+    color: $tooltip-color;
+    font-size: $tooltip-font-size;
+    line-height: $tooltip-line-height;
+    @include hook-tooltip();
+}
+
+
+/* Triangle
+ ========================================================================== */
+
+/*
+ * 1. Dashed is less antialised than solid
+ */
+
+.uk-tooltip:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    /* 1 */
+    border: $tooltip-triangle-size dashed $tooltip-background;
+}
+
+
+/* Direction modifiers
+ ========================================================================== */
+
+/*
+ * Top
+ */
+
+.uk-tooltip-top:after,
+.uk-tooltip-top-left:after,
+.uk-tooltip-top-right:after {
+    bottom: -$tooltip-triangle-size;
+    border-top-style: solid;
+    border-bottom: none;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-top-color: $tooltip-background;
+}
+
+/*
+ * Bottom
+ */
+
+.uk-tooltip-bottom:after,
+.uk-tooltip-bottom-left:after,
+.uk-tooltip-bottom-right:after {
+    top: -$tooltip-triangle-size;
+    border-bottom-style: solid;
+    border-top: none;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: $tooltip-background;
+}
+
+/*
+ * Top/Bottom center
+ */
+
+.uk-tooltip-top:after,
+.uk-tooltip-bottom:after {
+    left: 50%;
+    margin-left: -$tooltip-triangle-size;
+}
+
+/*
+ * Top/Bottom left
+ */
+
+.uk-tooltip-top-left:after,
+.uk-tooltip-bottom-left:after { left: $tooltip-offset-horizontal; }
+
+/*
+ * Top/Bottom right
+ */
+
+.uk-tooltip-top-right:after,
+.uk-tooltip-bottom-right:after { right: $tooltip-offset-horizontal; }
+
+/*
+ * Left
+ */
+
+.uk-tooltip-left:after {
+    right: -$tooltip-triangle-size;
+    top: 50%;
+    margin-top: -$tooltip-triangle-size;
+    border-left-style: solid;
+    border-right: none;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: $tooltip-background;
+}
+
+/*
+ * Right
+ */
+
+.uk-tooltip-right:after {
+    left: -$tooltip-triangle-size;
+    top: 50%;
+    margin-top: -$tooltip-triangle-size;
+    border-right-style: solid;
+    border-left: none;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-right-color: $tooltip-background;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-tooltip-misc();
+
+// @mixin hook-tooltip(){}
+// @mixin hook-tooltip-misc(){}

data/assets/stylesheets/components/upload.scss

@@ -0,0 +1,34 @@
+// Name:            Upload
+// Description:     Provides a dragover state for uploads
+//
+// Component:       `uk-upload`
+//
+// States:          `uk-dragover`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$uk-upload-dragover-box-shadow:                  rgba(100,100,100,0.3) !default;
+$uk-upload-dragover-box-shadow-blur:             20px !default;
+
+
+/* ========================================================================
+   Component: Upload
+ ========================================================================== */
+
+/*
+ * Create a box-shadow when dragging a file over the upload area
+ */
+
+.uk-dragover { box-shadow: 0 0 $uk-upload-dragover-box-shadow-blur $uk-upload-dragover-box-shadow; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-upload-misc();
+
+// @mixin hook-upload-misc(){}

data/assets/stylesheets/core/alert.scss

@@ -0,0 +1,141 @@
+// Name:            Alert
+// Description:     Defines styles for alert messages
+//
+// Component:       `uk-alert`
+//
+// Sub-objects:     `uk-alert-close`
+//
+// Modifiers:       `uk-alert-success`
+//                  `uk-alert-warning`
+//                  `uk-alert-danger`
+//                  `uk-alert-large`
+//
+// Uses:            Close: `uk-close`
+//
+// Markup:
+//
+// <!-- uk-alert -->
+// <div class="uk-alert" data-uk-alert>
+//     <a href="#" class="uk-alert-close uk-close"></a>
+//     <p></p>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$alert-margin-vertical:                          15px !default;
+$alert-padding:                                  10px !default;
+$alert-background:                               #ebf7fd !default;
+$alert-color:                                    #2d7091 !default;
+
+$alert-success-background:                       #f2fae3 !default;
+$alert-success-color:                            #659f13 !default;
+
+$alert-warning-background:                       #fffceb !default;
+$alert-warning-color:                            #e28327 !default;
+
+$alert-danger-background:                        #fff1f0 !default;
+$alert-danger-color:                             #d85030 !default;
+
+$alert-large-padding:                            20px !default;
+
+
+/* ========================================================================
+   Component: Alert
+ ========================================================================== */
+
+.uk-alert {
+    margin-bottom: $alert-margin-vertical;
+    padding: $alert-padding;
+    background: $alert-background;
+    color: $alert-color;
+    @include hook-alert();
+}
+
+/*
+ * Add margin if adjacent element
+ */
+
+* + .uk-alert { margin-top: $alert-margin-vertical; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-alert > :last-child { margin-bottom: 0; }
+
+/*
+ * Keep color for headings if the default heading color is changed
+ */
+
+.uk-alert h1,
+.uk-alert h2,
+.uk-alert h3,
+.uk-alert h4,
+.uk-alert h5,
+.uk-alert h6 { color: inherit; }
+
+
+/* Close in alert
+ ========================================================================== */
+
+.uk-alert > .uk-close:first-child { float: right; }
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-alert > .uk-close:first-child + * { margin-top: 0; }
+
+
+/* Modifier: `uk-alert-success`
+ ========================================================================== */
+
+.uk-alert-success {
+    background: $alert-success-background;
+    color: $alert-success-color;
+    @include hook-alert-success();
+}
+
+
+/* Modifier: `uk-alert-warning`
+ ========================================================================== */
+
+.uk-alert-warning {
+    background: $alert-warning-background;
+    color: $alert-warning-color;
+    @include hook-alert-warning();
+}
+
+
+/* Modifier: `uk-alert-danger`
+ ========================================================================== */
+
+.uk-alert-danger {
+    background: $alert-danger-background;
+    color: $alert-danger-color;
+    @include hook-alert-danger();
+}
+
+
+/* Modifier: `uk-alert-large`
+ ========================================================================== */
+
+.uk-alert-large { padding: $alert-large-padding; }
+
+.uk-alert-large > .uk-close:first-child { margin: -10px -10px 0 0; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-alert-misc();
+
+// @mixin hook-alert(){}
+// @mixin hook-alert-success(){}
+// @mixin hook-alert-warning(){}
+// @mixin hook-alert-danger(){}
+// @mixin hook-alert-misc(){}