uikit-rails 0.0.2 → 1.0.1

data/assets/stylesheets/core/cover.scss

@@ -0,0 +1,70 @@
+// Name:            Cover
+// Description:     Defines styles for images and videos to cover their container in a centered position
+//
+// Component:       `uk-cover-*`
+//
+// Used by:         Slideshow
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+
+/*
+ * Background image always covers and centers its element
+ */
+
+.uk-cover-background {
+    background-position: 50% 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+/*
+ * Emulates image cover, works with video and image elements
+ * 1. Parent container which clips resized object
+ * 2. Resizes the object to always covers its container
+ * 3. Reset the responsive image CSS
+ * 4. Center object
+ */
+
+/* 1 */
+.uk-cover { overflow: hidden; }
+
+.uk-cover-object {
+    /* 2 */
+    width: auto;
+    height: auto;
+    min-width: 100%;
+    min-height: 100%;
+    /* 3 */
+    max-width: none;
+    /* 4 */
+    position: relative;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+
+/*
+ * To center iframes use `data-uk-cover` JavaScript
+ */
+
+[data-uk-cover] {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-cover-misc();
+
+// @mixin hook-cover-misc(){}

data/assets/stylesheets/core/description-list.scss

@@ -0,0 +1,71 @@
+// Name:            Description list
+// Description:     Defines styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-horizontal`
+//                  `uk-description-list-line`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$description-list-horizontal-width:              160px !default;
+$description-list-horizontal-margin-left:        180px !default;
+
+$description-list-line-margin-top:               5px !default;
+$description-list-line-border-width:             1px !default;
+$description-list-line-border:                   #ddd !default;
+$description-list-line-color:                    #999 !default;
+
+$description-list-line-font-weight:              normal !default;
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+
+/* Modifier: `uk-description-list-horizontal`
+ ========================================================================== */
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-description-list-horizontal { overflow: hidden; }
+
+    .uk-description-list-horizontal > dt {
+        width: $description-list-horizontal-width;
+        float: left;
+        clear: both;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .uk-description-list-horizontal > dd { margin-left: $description-list-horizontal-margin-left; }
+}
+
+
+/* Modifier: `uk-description-list-line`
+ ========================================================================== */
+
+.uk-description-list-line > dt { font-weight: $description-list-line-font-weight; }
+
+.uk-description-list-line > dt:nth-child(n+2) {
+    margin-top: $description-list-line-margin-top;
+    padding-top: $description-list-line-margin-top;
+    border-top: $description-list-line-border-width solid $description-list-line-border;
+}
+
+.uk-description-list-line > dd { color: $description-list-line-color; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-description-list-misc();
+
+// @mixin hook-description-list-misc(){}

data/assets/stylesheets/core/dropdown.scss

@@ -0,0 +1,280 @@
+// Name:            Dropdown
+// Description:     Defines styles for a toggleable dropdown
+//
+// Component:       `uk-dropdown`
+//
+// Sub-objects:     `uk-dropdown-overlay`
+//
+// Modifiers:       `uk-dropdown-blank`
+//                  `uk-dropdown-top`
+//                  `uk-dropdown-bottom`
+//                  `uk-dropdown-left`
+//                  `uk-dropdown-right`
+//                  `uk-dropdown-justify`
+//                  `uk-dropdown-grid`
+//                  `uk-dropdown-width-2`
+//                  `uk-dropdown-width-3`
+//                  `uk-dropdown-width-4`
+//                  `uk-dropdown-width-5`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-small`
+//                  `uk-dropdown-navbar`
+//                  `uk-dropdown-scrollable`
+//
+// States:          `uk-open`
+//
+// Uses:            Animation
+//                  Grid: `uk-width-*`
+//                  Panel: `uk-panel`
+//                  Nav: `uk-nav`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dropdown-z-index:                               970 !default;
+$dropdown-width:                                 200px !default;
+$dropdown-margin-top:                            5px !default;
+$dropdown-padding:                               15px !default;
+$dropdown-background:                            #f5f5f5 !default;
+$dropdown-color:                                 #444 !default;
+$dropdown-font-size:                             1rem !default;
+$dropdown-animation:                             uk-fade !default;
+
+$dropdown-divider-border-width:                  1px !default;
+$dropdown-divider-border:                        #ddd !default;
+
+$dropdown-small-padding:                         5px !default;
+
+$dropdown-navbar-margin:                         0 !default;
+$dropdown-navbar-background:                     #f5f5f5 !default;
+$dropdown-navbar-color:                          #444 !default;
+$dropdown-navbar-animation:                      uk-slide-top-fixed !default;
+
+$dropdown-scrollable-height:                     200px !default;
+
+
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Box-sizing is needed for `uk-dropdown-justify`
+ * 4. Set width
+ */
+
+.uk-dropdown,
+.uk-dropdown-blank {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $dropdown-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    /* 4 */
+    width: $dropdown-width;
+}
+
+/*
+ * Dropdown style
+ * 1. Reset button group whitespace hack
+ */
+
+.uk-dropdown {
+    padding: $dropdown-padding;
+    background: $dropdown-background;
+    color: $dropdown-color;
+    /* 1 */
+    font-size: $dropdown-font-size;
+    vertical-align: top;
+    @include hook-dropdown();
+}
+
+/*
+ * 1. Show dropdown
+ * 2. Set animation
+ * 3. Needed for scale animation
+ */
+
+.uk-open > .uk-dropdown,
+.uk-open > .uk-dropdown-blank {
+    /* 1 */
+    display: block;
+    /* 2 */
+    -webkit-animation: $dropdown-animation 0.2s ease-in-out;
+    animation: $dropdown-animation 0.2s ease-in-out;
+    /* 3 */
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+}
+
+/* Alignment modifiers
+ ========================================================================== */
+
+/*
+ * Modifier
+ */
+
+.uk-dropdown-top { margin-top: (-1 * $dropdown-margin-top); }
+.uk-dropdown-bottom { margin-top: $dropdown-margin-top; }
+.uk-dropdown-left { margin-left: (-1 * $dropdown-margin-top); }
+.uk-dropdown-right { margin-left: $dropdown-margin-top; }
+
+
+/* Nav in dropdown
+ ========================================================================== */
+
+.uk-dropdown .uk-nav { margin: 0 (-$dropdown-padding); }
+
+
+/* Grid and panel in dropdown
+ ========================================================================== */
+
+/*
+* Vertical gutter
+*/
+
+/*
+ * Grid
+ * Higher specificity to override large gutter
+ */
+
+.uk-grid .uk-dropdown-grid + .uk-dropdown-grid { margin-top: $dropdown-padding; }
+
+/* Panels */
+.uk-dropdown-grid > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: $dropdown-padding; }
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    /*
+     * Horizontal gutter
+     */
+
+    .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid {
+        margin-left: -$dropdown-padding ;
+        margin-right: -$dropdown-padding;
+    }
+
+    .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-'] {
+        padding-left: $dropdown-padding;
+        padding-right: $dropdown-padding;
+    }
+
+    /*
+     * Column divider
+     */
+
+    .uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { border-left: $dropdown-divider-border-width solid $dropdown-divider-border; }
+
+    /*
+     * Width multiplier for dropdown columns
+     */
+
+    .uk-dropdown-width-2:not(.uk-dropdown-stack) { width: ($dropdown-width * 2); }
+    .uk-dropdown-width-3:not(.uk-dropdown-stack) { width: ($dropdown-width * 3); }
+    .uk-dropdown-width-4:not(.uk-dropdown-stack) { width: ($dropdown-width * 4); }
+    .uk-dropdown-width-5:not(.uk-dropdown-stack) { width: ($dropdown-width * 5); }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    /*
+     * Stack columns and take full width
+     */
+
+    .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; }
+
+    /*
+     * Vertical gutter
+     */
+
+    .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: $dropdown-padding; }
+
+}
+
+/*
+* Stack grid columns
+*/
+
+.uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-'] { width: 100%; }
+
+.uk-dropdown-stack > .uk-dropdown-grid > [class*='uk-width-']:nth-child(n+2) { margin-top: $dropdown-padding; }
+
+
+
+/* Modifier `uk-dropdown-small`
+ ========================================================================== */
+
+/*
+ * Set min-width and text expands dropdown if needed
+ */
+
+.uk-dropdown-small {
+    min-width: 150px;
+    width: auto;
+    padding: $dropdown-small-padding;
+    white-space: nowrap;
+}
+
+/*
+ * Nav in dropdown
+ */
+
+.uk-dropdown-small .uk-nav { margin: 0 (-$dropdown-small-padding); }
+
+
+/* Modifier: `uk-dropdown-navbar`
+ ========================================================================== */
+
+.uk-dropdown-navbar {
+    margin-top: $dropdown-navbar-margin;
+    background: $dropdown-navbar-background;
+    color: $dropdown-navbar-color;
+    @include hook-dropdown-navbar();
+}
+
+.uk-open > .uk-dropdown-navbar {
+    -webkit-animation: $dropdown-navbar-animation 0.2s ease-in-out;
+    animation: $dropdown-navbar-animation 0.2s ease-in-out;
+}
+
+
+/* Modifier `uk-dropdown-scrollable`
+ ========================================================================== */
+
+/*
+ * Usefull for long lists
+ */
+
+.uk-dropdown-scrollable {
+    overflow-y: auto;
+    max-height: $dropdown-scrollable-height;
+}
+
+
+/* Sub-object: `uk-dropdown-overlay`
+ ========================================================================== */
+
+.uk-dropdown-overlay {
+    @include hook-dropdown-overlay();
+}
+
+
+
+// Hooks
+// ========================================================================
+
+@include hook-dropdown-misc();
+
+// @mixin hook-dropdown(){}
+// @mixin hook-dropdown-navbar(){}
+// @mixin hook-dropdown-overlay(){}
+// @mixin hook-dropdown-misc(){}

data/assets/stylesheets/core/flex.scss

@@ -0,0 +1,320 @@
+// Name:            Flex
+// Description:     Defines styles to create layouts with flexbox
+//
+// Component:       `uk-flex-*`
+//
+// Used by:         Caption
+//
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.uk-flex-inline {
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+/*
+ * Fixes initial flex-shrink value in IE10
+ */
+
+.uk-flex > *,
+.uk-flex-inline > * { -ms-flex-negative: 1; }
+
+
+/* Alignment
+ ========================================================================== */
+
+/*
+ * Vertical alignment
+ * Default value is `stretch`
+ */
+
+// .uk-flex-stretch { align-items: stretch; }
+
+.uk-flex-top {
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.uk-flex-middle {
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.uk-flex-bottom {
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+/*
+ * Horizontal alignment
+ * Default value is `flex-start`
+ */
+
+// .uk-flex-left { justify-content: flex-start; }
+
+.uk-flex-center {
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.uk-flex-right {
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.uk-flex-space-between {
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.uk-flex-space-around {
+    -ms-flex-pack: distribute;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+
+/* Direction
+ ========================================================================== */
+
+// .uk-flex-row { flex-direction: row; }
+
+.uk-flex-row-reverse {
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.uk-flex-column {
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.uk-flex-column-reverse {
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+
+/* Wrap
+ ========================================================================== */
+
+// Default
+.uk-flex-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.uk-flex-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.uk-flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+/*
+ * Horizontal alignment
+ * Default value is `stretch`
+ */
+
+// .uk-flex-wrap-stretch { align-content: stretch; }
+
+.uk-flex-wrap-top {
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.uk-flex-wrap-middle {
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.uk-flex-wrap-bottom {
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.uk-flex-wrap-space-between {
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.uk-flex-wrap-space-around {
+    -ms-flex-line-pack: distribute;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+
+/* Item ordering
+ ========================================================================== */
+
+/*
+ * Default is 0
+ */
+
+.uk-flex-order-first {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+}
+
+.uk-flex-order-last {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+}
+
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-order-first-small {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-order-last-small {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-order-first-medium {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-order-last-medium {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-order-first-large {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-order-last-large {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-order-first-xlarge {
+        -ms-flex-order: -1;
+        -webkit-order: -1;
+        order: -1;
+    }
+
+    .uk-flex-order-last-xlarge {
+        -ms-flex-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+}
+
+
+
+/* Item dimensions
+ ========================================================================== */
+
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-item-none {
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+}
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ * 1. Fixes flex-shrink value in IE10
+ */
+
+.uk-flex-item-auto {
+    -ms-flex: auto;
+    -webkit-flex: auto;
+    flex: auto;
+    /* 1 */
+    -ms-flex-negative: 1;
+}
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-item-1 {
+    -ms-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-flex-misc();
+
+// @mixin hook-flex-misc(){}