uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/components/slidenav.scss

@@ -0,0 +1,183 @@
+// Name:            Slidenav
+// Description:     Defines styles for a previous/next navigation between slides
+//
+// Component:       `uk-slidenav`
+//
+// Modifiers:       `uk-slidenav-previous`
+//                  `uk-slidenav-next`
+//                  `uk-slidenav-contrast`
+//
+// Sub-objects:     `uk-slidenav-position`
+//
+// Uses:            Icon: FontAwesome
+//
+// Markup:
+//
+// <!-- uk-slidenav -->
+// <a href="" class="uk-slidenav uk-slidenav-previous"></a>
+// <a href="" class="uk-slidenav uk-slidenav-next"></a>
+//
+// <!-- uk-slidenav-position -->
+// <div class="uk-slidenav-position">
+//     <img src="" alt="">
+//     <a href="" class="uk-slidenav uk-slidenav-previous"></a>
+//     <a href="" class="uk-slidenav uk-slidenav-next"></a>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$slidenav-width:                                 60px !default;
+$slidenav-height:                                $slidenav-width !default;
+$slidenav-color:                                 rgba(50,50,50,0.4) !default;
+$slidenav-font-size:                             60px !default;
+$slidenav-line-height:                           $slidenav-height !default;
+$slidenav-previous-icon:                         "\f104" !default;
+$slidenav-next-icon:                             "\f105" !default;
+
+$slidenav-hover-color:                           rgba(50,50,50,0.7) !default;
+
+$slidenav-active-color:                          rgba(50,50,50,0.9) !default;
+
+$slidenav-position-previous:                     20px !default;
+$slidenav-position-next:                         $slidenav-position-previous !default;
+
+$slidenav-contrast-color:                        rgba(255,255,255,0.5) !default;
+$slidenav-contrast-hover-color:                  rgba(255,255,255,0.7) !default;
+$slidenav-contrast-active-color:                 rgba(255,255,255,0.9) !default;
+
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+
+/*
+ * 1. Required for `a` elements
+ * 2. Dimension
+ * 3. Style
+ */
+
+.uk-slidenav {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    box-sizing: border-box;
+    width: $slidenav-width;
+    height: $slidenav-height;
+    /* 3 */
+    line-height: $slidenav-line-height;
+    color: $slidenav-color;
+    font-size: $slidenav-font-size;
+    text-align: center;
+    @include hook-slidenav();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ * 3. Required for `a` elements
+ * 4. Style
+ */
+
+.uk-slidenav:hover,
+.uk-slidenav:focus { // 1
+    /* 2 */
+    outline: none;
+    /* 3 */
+    text-decoration: none;
+    /* 4 */
+    color: $slidenav-hover-color;
+    cursor: pointer;
+    @include hook-slidenav-hover();
+}
+
+/* Active */
+.uk-slidenav:active {
+    color: $slidenav-active-color;
+    @include hook-slidenav-active();
+}
+
+/*
+ * Icons
+ */
+
+.uk-slidenav-previous:before {
+    content: $slidenav-previous-icon;
+    font-family: FontAwesome;
+}
+
+.uk-slidenav-next:before {
+    content: $slidenav-next-icon;
+    font-family: FontAwesome;
+}
+
+
+/* Sub-object: `uk-slidenav-position`
+ ========================================================================== */
+
+/*
+ * Create position context
+ */
+
+.uk-slidenav-position { position: relative; }
+
+/*
+ * Center vertically
+ */
+
+.uk-slidenav-position .uk-slidenav {
+    display: none;
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    margin-top: -($slidenav-height / 2);
+}
+
+.uk-slidenav-position:hover .uk-slidenav { display: block; }
+
+.uk-slidenav-position .uk-slidenav-previous { left: $slidenav-position-previous; }
+.uk-slidenav-position .uk-slidenav-next { right: $slidenav-position-next; }
+
+
+/* Modifier: `uk-slidenav-contrast`
+ ========================================================================== */
+
+.uk-slidenav-contrast {
+    color: $slidenav-contrast-color;
+    @include hook-slidenav-contrast();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ */
+
+.uk-slidenav-contrast:hover,
+.uk-slidenav-contrast:focus { // 1
+    color: $slidenav-contrast-hover-color;
+    @include hook-slidenav-contrast-hover();
+}
+
+/* Active */
+.uk-slidenav-contrast:active {
+    color: $slidenav-contrast-active-color;
+    @include hook-slidenav-contrast-active();
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-slidenav-misc();
+
+// @mixin hook-slidenav(){}
+// @mixin hook-slidenav-hover(){}
+// @mixin hook-slidenav-active(){}
+// @mixin hook-slidenav-contrast(){}
+// @mixin hook-slidenav-contrast-hover(){}
+// @mixin hook-slidenav-contrast-active(){}
+// @mixin hook-slidenav-misc(){}

data/assets/stylesheets/components/slider.scss

@@ -0,0 +1,131 @@
+// Name:            Slider
+// Description:     Defines styles for a horizontal slider
+//
+// Component:       `uk-slider`
+//
+// Sub-objects:     `uk-slider-container`
+//
+// Modifier:        `uk-slider-fullscreen`
+//
+// States:          `uk-drag`
+//
+// Markup:
+//
+// <!-- uk-slider -->
+// <div data-uk-slider>
+//     <div class="uk-slider-container">
+//         <ul class="uk-slider">
+//             <li></li>
+//             <li></li>
+//         </ul>
+//     </div>
+// </div>
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Slider
+ ========================================================================== */
+
+/*
+ * 1. Create position context
+ * 2. Create stacking context to prevent z-index issues with other components
+ * 3. Deactivate browser history navigation in IE11
+ */
+
+.uk-slider {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    z-index: 0;
+    /* 3 */
+    touch-action: pan-y;
+}
+
+/*
+ * 1. Reset list style without interfering with grid
+ */
+
+.uk-slider:not(.uk-grid) {
+    /* 1 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Sub-object item
+ * 1. Position items above each other
+ */
+
+.uk-slider > * {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/*
+ * Clip child elements
+ */
+
+.uk-slider-container { overflow: hidden; }
+
+/*
+ * Dragged
+ */
+
+.uk-slider:not(.uk-drag) {
+    -webkit-transition: -webkit-transform 200ms linear;
+    transition: transform 200ms linear;
+}
+
+/*
+ * 1. Makes text unselectable
+ */
+
+.uk-slider.uk-drag {
+    cursor: col-resize;
+    /* 1 */
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/*
+ * 1. Prevents images and links from being dragged (default browser behavior)
+ * 2. Disables the default callout shown when you touch and hold a touch target
+ * Currently only works in Webkit
+ */
+
+.uk-slider a,
+.uk-slider img {
+    /* 1 */
+    -webkit-user-drag: none;
+    user-drag: none;
+    /* 2 */
+    -webkit-touch-callout: none;
+}
+
+/*
+ * 1. Prevents images and links from being dragged in Firefox
+ */
+
+.uk-slider img { pointer-events: none; }
+
+
+/* Modifier: `uk-slider-fullscreen`
+ ========================================================================== */
+
+.uk-slider-fullscreen,
+.uk-slider-fullscreen > li { height: 100vh; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-slider-misc();
+
+// @mixin hook-slider-misc(){}

data/assets/stylesheets/components/slideshow.scss

@@ -0,0 +1,208 @@
+// Name:            Slideshow
+// Description:     Defines styles for a slideshow
+//
+// Component:       `uk-slideshow`
+//
+// Modifier:        `uk-slideshow-fullscreen`
+//
+// Sub-modifier:    `uk-slideshow-fade-out`
+//                  `uk-slideshow-scroll-forward-in`
+//                  `uk-slideshow-scroll-forward-out`
+//                  `uk-slideshow-scroll-backward-in`
+//                  `uk-slideshow-scroll-backward-out`
+//                  `uk-slideshow-scale-out`
+//                  `uk-slideshow-swipe-forward-in`
+//                  `uk-slideshow-swipe-forward-out`
+//                  `uk-slideshow-swipe-backward-in`
+//                  `uk-slideshow-swipe-backward-out`
+//
+// States:          `uk-active`
+//
+// Uses:            Cover (JS)
+//
+// Markup:
+//
+// <!-- uk-slideshow -->
+// <ul class="uk-slideshow" data-uk-slideshow>
+//     <li><img src="" width="" height="" alt=""></li>
+// </ul>
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Slideshow
+ ========================================================================== */
+
+/*
+ * 1. Create position context
+ * 2. Create stacking context to prevent z-index issues with other components
+ * 3. Set width because child elements are positioned absolute. Height is set via JS
+ * 4. Reset list style
+ * 5. Clip child elements
+ * 6. Deactivate browser history navigation in IE11
+ */
+
+.uk-slideshow {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    z-index: 0;
+    /* 3 */
+    width: 100%;
+    /* 4 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 5 */
+    overflow: hidden;
+    /* 6 */
+    touch-action: pan-y;
+}
+
+/*
+ * Sub-object item
+ * 1. Position items above each other
+ * 2. Expand to parent container width
+ * 3. Hide by default
+ */
+
+.uk-slideshow > li {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    opacity: 0;
+}
+
+/*
+ * Active
+ * 1. Stack at first
+ * 2. Show slide
+ */
+
+.uk-slideshow > .uk-active {
+    /* 1 */
+    z-index: 10;
+    /* 2 */
+    opacity: 1;
+}
+
+/*
+ * Hide default images which is only relevant to keep existing proportions
+ */
+
+.uk-slideshow > li > img { visibility: hidden; }
+
+/*
+ * Pointer for controls
+ */
+
+[data-uk-slideshow-slide] { cursor: pointer; }
+
+
+/* Modifier: `uk-slideshow-fullscreen`
+ ========================================================================== */
+
+.uk-slideshow-fullscreen,
+.uk-slideshow-fullscreen > li { height: 100vh; }
+
+
+/* Animations
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+ .uk-slideshow-fade-in {
+     -webkit-animation: uk-fade 0.5s linear;
+     animation: uk-fade 0.5s linear;
+ }
+
+.uk-slideshow-fade-out {
+    -webkit-animation: uk-fade 0.5s linear reverse;
+    animation: uk-fade 0.5s linear reverse;
+}
+
+/*
+ * Scroll
+ */
+
+.uk-slideshow-scroll-forward-in {
+    -webkit-animation: uk-slide-right 0.5s ease-in-out;
+    animation: uk-slide-right 0.5s ease-in-out;
+}
+
+.uk-slideshow-scroll-forward-out {
+    -webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
+    animation: uk-slide-left 0.5s ease-in-out reverse;
+}
+
+.uk-slideshow-scroll-backward-in {
+    -webkit-animation: uk-slide-left 0.5s ease-in-out;
+    animation: uk-slide-left 0.5s ease-in-out;
+}
+
+.uk-slideshow-scroll-backward-out {
+    -webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
+    animation: uk-slide-right 0.5s ease-in-out reverse;
+}
+
+/*
+ * Scale
+ */
+
+.uk-slideshow-scale-out {
+    -webkit-animation: uk-fade-scale-15 0.5s ease-in-out reverse;
+    animation: uk-fade-scale-15 0.5s ease-in-out reverse;
+}
+
+/*
+ * Swipe
+ */
+
+.uk-slideshow-swipe-forward-in {
+    -webkit-animation: uk-slide-left-33 0.5s ease-in-out;
+    animation: uk-slide-left-33 0.5s ease-in-out;
+}
+
+.uk-slideshow-swipe-forward-out {
+    -webkit-animation: uk-slide-left 0.5s ease-in-out reverse;
+    animation: uk-slide-left 0.5s ease-in-out reverse;
+}
+
+.uk-slideshow-swipe-backward-in {
+    -webkit-animation: uk-slide-right-33 0.5s ease-in-out;
+    animation: uk-slide-right-33 0.5s ease-in-out;
+}
+
+.uk-slideshow-swipe-backward-out {
+    -webkit-animation: uk-slide-right 0.5s ease-in-out reverse;
+    animation: uk-slide-right 0.5s ease-in-out reverse;
+}
+
+.uk-slideshow-swipe-forward-in:before,
+.uk-slideshow-swipe-backward-in:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0,0,0,0.6);
+    -webkit-animation: uk-fade 0.5s ease-in-out reverse;
+    animation: uk-fade 0.5s ease-in-out reverse;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-slideshow-misc();
+
+// @mixin hook-slideshow-misc(){}