uikit-sass-rails 1.0.0 → 1.1.0

data/vendor/assets/stylesheets/uikit/addons/uikit.gradient.addons.scss

@@ -1,4 +1,4 @@
-/*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 
 /* ========================================================================
    Component: Dotnav
@@ -153,21 +153,21 @@
  ========================================================================== */
 /*
  * 1. Container width fits its content
- * 2. Corrects max-width behavior (3.) if padding and border are used
- * 3. Responsive behavior
- * 4. Create position context for dropdowns
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ * 4. Corrects `max-width` behavior if padding and border are used
  */
 
 .uk-slidenav-position {
   /* 1 */
   display: inline-block;
   /* 2 */
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+  position: relative;
   /* 3 */
   max-width: 100%;
   /* 4 */
-  position: relative;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   .uk-slidenav {
     display: none;
     position: absolute;
@@ -307,10 +307,18 @@
 /* ========================================================================
    Component: Form password
  ========================================================================== */
+/*
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ */
 
 .uk-form-password {
-  position: relative;
+  /* 1 */
   display: inline-block;
+  /* 2 */
+  position: relative;
+  /* 3 */
   max-width: 100%;
 }
 
@@ -410,16 +418,21 @@
    Component: Autocomplete
  ========================================================================== */
 /*
- * 1. Behave like form elements
- * 2. Create position context for dropdowns
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ * 4. Remove the gap between the container and its child element
  */
 
 .uk-autocomplete {
   /* 1 */
   display: inline-block;
-  vertical-align: middle;
   /* 2 */
   position: relative;
+  /* 3 */
+  max-width: 100%;
+  /* 4 */
+  vertical-align: middle;
 }
 
 /* Nav modifier `uk-nav-autocomplete`
@@ -467,11 +480,20 @@
    Component: Datepicker
  ========================================================================== */
 /*
- * Reset dropdown width
+ * 1. Reset dropdown width
+ * 2. Set animation
+ * 3. Needed for scale animation
  */
 
 .uk-datepicker {
+  /* 1 */
   width: auto;
+  /* 2 */
+  -webkit-animation: uk-fade 0.2s ease-in-out;
+  animation: uk-fade 0.2s ease-in-out;
+  /* 3 */
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
 }
 
 /* Sub-object: `uk-datepicker-nav`
@@ -804,6 +826,7 @@ a.uk-datepicker-table-muted {
   box-sizing: border-box;
   padding: 20px;
   overflow-y: scroll;
+  position: relative;
 }
 
 /*
@@ -830,6 +853,17 @@ a.uk-datepicker-table-muted {
   }
 }
 
+/* Sub-object `uk-htmleditor-iframe`
+ ========================================================================== */
+
+.uk-htmleditor-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 /* CodeMirror modifications
  ========================================================================== */
 
@@ -1176,7 +1210,7 @@ a.uk-datepicker-table-muted {
 .uk-search-field {
   width: 120px;
   height: 30px;
-  padding: 0 30px;
+  padding: 0 0 0 30px;
   border: 1px solid rgba(0, 0, 0, 0);
   background: rgba(0, 0, 0, 0);
   color: #444444;
@@ -1220,53 +1254,6 @@ input.uk-search-field {
   width: 180px;
 }
 
-/* Sub-object `uk-search-close`
- ========================================================================== */
-/*
- * 1. Required for `button` elements
- * 2. Needed for Safari
- */
-
-.uk-search-close {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 30px;
-  line-height: 30px;
-  text-align: center;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.2);
-  /* 1. */
-  padding: 0;
-  border: 0;
-  -webkit-appearance: none;
-  /* 2. */
-  background: transparent;
-}
-
-.uk-loading > .uk-search-close, .uk-active > .uk-search-close {
-  display: block;
-}
-
-/*
- * Icon
- */
-
-.uk-search-close:after {
-  display: block;
-  content: "\f00d";
-  font-family: FontAwesome;
-}
-
-/* Loading icon */
-
-.uk-loading > .uk-search-close:after {
-  content: "\f110";
-  -webkit-animation: uk-spin 2s infinite linear;
-  animation: uk-spin 2s infinite linear;
-}
-
 /* Dropdown modifier: `uk-dropdown-search`
  ========================================================================== */
 
@@ -1428,11 +1415,31 @@ input.uk-search-field {
 /* ========================================================================
    Component: Sticky
  ========================================================================== */
+/*
+ * 1. More robust if padding and border are used
+ */
 
-.uk-sticky {
-  z-index: 980;
+[data-uk-sticky] {
+  &.uk-active {
+    z-index: 980;
+    /* 1 */
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  &[class*='uk-animation-'] {
+    -webkit-animation-duration: 0.15s;
+    animation-duration: 0.15s;
+  }
+  &.uk-animation-reverse {
+    -webkit-animation-duration: 0.04s;
+    animation-duration: 0.04s;
+  }
 }
 
+/*
+ * Faster animations
+ */
+
 /* ========================================================================
    Component: Upload
  ========================================================================== */
@@ -1442,4 +1449,110 @@ input.uk-search-field {
 
 .uk-dragover {
   box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
+}
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+/* Alignment
+ ========================================================================== */
+/*
+ * Vertical alignment
+ * Default value is `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-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;
+}
+
+/* ========================================================================
+   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%);
 }

data/vendor/assets/stylesheets/uikit/uikit.almost-flat.scss

@@ -1,4 +1,4 @@
-/*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 
 /* ========================================================================
    Component: Normalize
@@ -488,25 +488,24 @@ dfn[title] {
 /* Embedded content
  ========================================================================== */
 /*
- * 1. Corrects max-width behavior (2.) if padding and border are used
- * 2. Responsiveness: Sets a maximum width relative to the parent and auto scales the height
+ * 1. Responsiveness: Sets a maximum width relative to the parent and auto scales the height
+ * 2. Corrects `max-width` behavior if padding and border are used
  * 3. Remove the gap between images and the bottom of their containers
  */
 
 img {
   /* 1 */
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  /* 2 */
   max-width: 100%;
   height: auto;
+  /* 2 */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   /* 3 */
   vertical-align: middle;
 }
 
 /*
  * Preserve original image dimensions
- * 1. Fix Google maps automatically via URL detection
  */
 
 .uk-img-preserve {
@@ -516,12 +515,6 @@ img {
   }
 }
 
-img {
-  &[src*="maps.gstatic.com"], &[src*="googleapis.com"] {
-    max-width: none;
-  }
-}
-
 /* Spacing for block elements
  ========================================================================== */
 
@@ -2842,30 +2835,19 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
 
 /* Modifier: 'tab-responsive'
  ========================================================================== */
-/*
- * Hidden by default
- */
 
-.uk-tab-responsive {
-  display: none;
-  > a:before {
-    content: "\f0c9\00a0";
-    font-family: FontAwesome;
-  }
+.uk-tab > li.uk-tab-responsive > a {
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Phone landscape and smaller */
-@media (max-width: 767px) {
-  [data-uk-tab] > li {
-    display: none;
-    &.uk-tab-responsive {
-      display: block;
-      > a {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
+/*
+ * Icon
+ */
+
+.uk-tab-responsive > a:before {
+  content: "\f0c9\00a0";
+  font-family: FontAwesome;
 }
 
 /* Modifier: 'tab-center'
@@ -3645,10 +3627,18 @@ select.uk-form-width-mini {
 
 /* Sub-object: `uk-form-icon`
  ========================================================================== */
+/*
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ */
 
 .uk-form-icon {
-  position: relative;
+  /* 1 */
   display: inline-block;
+  /* 2 */
+  position: relative;
+  /* 3 */
   max-width: 100%;
   > [class*='uk-icon-'] {
     position: absolute;
@@ -3996,6 +3986,15 @@ select.uk-form-width-mini {
 /* ========================================================================
    Component: Icon
  ========================================================================== */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url("../fonts/fontawesome-webfont.eot");
+  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
 /*
  * 1. Allow margin
  * 2. Prevent inherit font style
@@ -4040,8 +4039,8 @@ select.uk-form-width-mini {
 
 .uk-icon-spin {
   display: inline-block;
-  -webkit-animation: uk-spin 2s infinite linear;
-  animation: uk-spin 2s infinite linear;
+  -webkit-animation: uk-rotate 2s infinite linear;
+  animation: uk-rotate 2s infinite linear;
 }
 
 /* Modifier: `uk-icon-button`
@@ -5939,6 +5938,14 @@ select.uk-form-width-mini {
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 
+/*
+ * Keep color when badge is a link
+ */
+
+a.uk-badge:hover {
+  color: #ffffff;
+}
+
 /* Modifier: `uk-badge-notification`;
  ========================================================================== */
 
@@ -6070,20 +6077,22 @@ select.uk-form-width-mini {
    Component: Thumbnail
  ========================================================================== */
 /*
- * 1. Corrects max-width behavior (2.) if padding and border are used
+ * 1. Container width fits its content
  * 2. Responsive behavior
- * 3. Required for `figure` element
- * 4. Style
+ * 3. Corrects `max-width` behavior sed
+ * 4. Required for `figure` element
+ * 5. Style
  */
 
 .uk-thumbnail {
-  display: inline-block;
   /* 1 */
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+  display: inline-block;
   /* 2 */
   max-width: 100%;
   /* 3 */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  /* 3 */
   margin: 0;
   /* 4 */
   padding: 4px;
@@ -6493,6 +6502,7 @@ a.uk-thumbnail {
 
 /*
  * Fade
+ * Higher specificity (!important) needed because of reverse modifier
  */
 
 .uk-animation-fade {
@@ -6500,46 +6510,55 @@ a.uk-thumbnail {
   animation-name: uk-fade;
   -webkit-animation-duration: 0.8s;
   animation-duration: 0.8s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
+  -webkit-animation-timing-function: linear !important;
+  animation-timing-function: linear !important;
 }
 
 /*
- * Scale
+ * Fade with scale
  */
 
 .uk-animation-scale-up {
-  -webkit-animation-name: uk-scale-up;
-  animation-name: uk-scale-up;
+  -webkit-animation-name: uk-fade-scale-02;
+  animation-name: uk-fade-scale-02;
 }
 
 .uk-animation-scale-down {
-  -webkit-animation-name: uk-scale-down;
-  animation-name: uk-scale-down;
+  -webkit-animation-name: uk-fade-scale-18;
+  animation-name: uk-fade-scale-18;
 }
 
 /*
- * Slide
+ * Fade with slide
  */
 
 .uk-animation-slide-top {
-  -webkit-animation-name: uk-slide-top;
-  animation-name: uk-slide-top;
+  -webkit-animation-name: uk-fade-top;
+  animation-name: uk-fade-top;
 }
 
 .uk-animation-slide-bottom {
-  -webkit-animation-name: uk-slide-bottom;
-  animation-name: uk-slide-bottom;
+  -webkit-animation-name: uk-fade-bottom;
+  animation-name: uk-fade-bottom;
 }
 
 .uk-animation-slide-left {
-  -webkit-animation-name: uk-slide-left;
-  animation-name: uk-slide-left;
+  -webkit-animation-name: uk-fade-left;
+  animation-name: uk-fade-left;
 }
 
 .uk-animation-slide-right {
-  -webkit-animation-name: uk-slide-right;
-  animation-name: uk-slide-right;
+  -webkit-animation-name: uk-fade-right;
+  animation-name: uk-fade-right;
+}
+
+/*
+ * Scale
+ */
+
+.uk-animation-scale {
+  -webkit-animation-name: uk-scale-12;
+  animation-name: uk-scale-12;
 }
 
 /*
@@ -6551,19 +6570,70 @@ a.uk-thumbnail {
   animation-name: uk-shake;
 }
 
-/* Modifiers
+/* Direction modifiers
  ========================================================================== */
 
 .uk-animation-reverse {
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+/* Duration modifiers
+========================================================================== */
+
+.uk-animation-10 {
+  -webkit-animation-duration: 10s;
+  animation-duration: 10s;
+}
+
+/* Origin modifiers
+========================================================================== */
+
+.uk-animation-top-left {
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+.uk-animation-top-center {
+  -webkit-transform-origin: 50% 0;
+  transform-origin: 50% 0;
+}
+
+.uk-animation-top-right {
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+}
+
+.uk-animation-middle-left {
+  -webkit-transform-origin: 0 50%;
+  transform-origin: 0 50%;
 }
 
-/* Keyframes
+.uk-animation-middle-right {
+  -webkit-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+
+.uk-animation-bottom-left {
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+}
+
+.uk-animation-bottom-center {
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+
+.uk-animation-bottom-right {
+  -webkit-transform-origin: 100% 100%;
+  transform-origin: 100% 100%;
+}
+
+/* Keyframes: Fade
+ * Used by dropdown, datepicker and slideshow component
  ========================================================================== */
-/*
- * Fade
- */
 @-webkit-keyframes uk-fade {
   0% {
     opacity: 0;
@@ -6584,40 +6654,125 @@ a.uk-thumbnail {
 }
 
 
+/* Keyframes: Fade with slide
+ ========================================================================== */
 /*
- * Scale up
+ * Top
  */
-@-webkit-keyframes uk-scale-up {
+@-webkit-keyframes uk-fade-top {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0.2);
+    -webkit-transform: translateY(-100%);
   }
   100% {
     opacity: 1;
-    -webkit-transform: scale(1);
+    -webkit-transform: translateY(0);
   }
 }
 
 
-@keyframes uk-scale-up {
+@keyframes uk-fade-top {
   0% {
     opacity: 0;
-    transform: scale(0.2);
+    transform: translateY(-100%);
   }
   100% {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
   }
 }
 
 
 /*
- * Scale down
+ * Bottom
  */
-@-webkit-keyframes uk-scale-down {
+@-webkit-keyframes uk-fade-bottom {
   0% {
     opacity: 0;
-    -webkit-transform: scale(1.8);
+    -webkit-transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+
+
+@keyframes uk-fade-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+/*
+ * Left
+ */
+@-webkit-keyframes uk-fade-left {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+}
+
+
+@keyframes uk-fade-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+
+/*
+ * Right
+ */
+@-webkit-keyframes uk-fade-right {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+}
+
+
+@keyframes uk-fade-right {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+
+/* Keyframes: Fade with scale
+ ========================================================================== */
+/*
+ * Scale by 0.2
+ */
+@-webkit-keyframes uk-fade-scale-02 {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.2);
   }
   100% {
     opacity: 1;
@@ -6626,10 +6781,10 @@ a.uk-thumbnail {
 }
 
 
-@keyframes uk-scale-down {
+@keyframes uk-fade-scale-02 {
   0% {
     opacity: 0;
-    transform: scale(1.8);
+    transform: scale(0.2);
   }
   100% {
     opacity: 1;
@@ -6639,69 +6794,71 @@ a.uk-thumbnail {
 
 
 /*
- * Slide top
+ * Scale by 1.5
+ * Used by slideshow component
  */
-@-webkit-keyframes uk-slide-top {
+@-webkit-keyframes uk-fade-scale-15 {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(-100%);
+    -webkit-transform: scale(1.5);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
+    -webkit-transform: scale(1);
   }
 }
 
 
-@keyframes uk-slide-top {
+@keyframes uk-fade-scale-15 {
   0% {
     opacity: 0;
-    transform: translateY(-100%);
+    transform: scale(1.5);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: scale(1);
   }
 }
 
 
 /*
- * Slide bottom
+ * Scale by 1.8
  */
-@-webkit-keyframes uk-slide-bottom {
+@-webkit-keyframes uk-fade-scale-18 {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(100%);
+    -webkit-transform: scale(1.8);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
+    -webkit-transform: scale(1);
   }
 }
 
 
-@keyframes uk-slide-bottom {
+@keyframes uk-fade-scale-18 {
   0% {
     opacity: 0;
-    transform: translateY(100%);
+    transform: scale(1.8);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: scale(1);
   }
 }
 
 
+/* Keyframes: Slide
+ * Used by slideshow component
+ ========================================================================== */
 /*
- * Slide left
+ * Left
  */
 @-webkit-keyframes uk-slide-left {
   0% {
-    opacity: 0;
     -webkit-transform: translateX(-100%);
   }
   100% {
-    opacity: 1;
     -webkit-transform: translateX(0);
   }
 }
@@ -6709,26 +6866,22 @@ a.uk-thumbnail {
 
 @keyframes uk-slide-left {
   0% {
-    opacity: 0;
     transform: translateX(-100%);
   }
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 
 /*
- * Slide right
+ * Right
  */
 @-webkit-keyframes uk-slide-right {
   0% {
-    opacity: 0;
     -webkit-transform: translateX(100%);
   }
   100% {
-    opacity: 1;
     -webkit-transform: translateX(0);
   }
 }
@@ -6736,19 +6889,107 @@ a.uk-thumbnail {
 
 @keyframes uk-slide-right {
   0% {
-    opacity: 0;
     transform: translateX(100%);
   }
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 
 /*
- * Shake
+ * Left third
  */
+@-webkit-keyframes uk-slide-left-33 {
+  0% {
+    -webkit-transform: translateX(33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+  }
+}
+
+
+@keyframes uk-slide-left-33 {
+  0% {
+    transform: translateX(33%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+
+/*
+ * Right third
+ */
+@-webkit-keyframes uk-slide-right-33 {
+  0% {
+    -webkit-transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+  }
+}
+
+
+@keyframes uk-slide-right-33 {
+  0% {
+    transform: translateX(-33%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+
+/* Keyframes: Scale
+ ========================================================================== */
+@-webkit-keyframes uk-scale-12 {
+  0% {
+    -webkit-transform: scale(1.2);
+  }
+  100% {
+    -webkit-transform: scale(1);
+  }
+}
+
+
+@keyframes uk-scale-12 {
+  0% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+/* Keyframes: Rotate
+ * Used by icon and search component
+ ========================================================================== */
+@-webkit-keyframes uk-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+
+
+@keyframes uk-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+
+/* Keyframes: Shake
+ ========================================================================== */
 @-webkit-keyframes uk-shake {
   0%,
   100% {
@@ -6819,8 +7060,11 @@ a.uk-thumbnail {
 }
 
 
+/* Keyframes: Fade with slide fixed
+ * Used by dropdown and search component
+ ========================================================================== */
 /*
- * Slide top fixed
+ * Top fixed
  */
 @-webkit-keyframes uk-slide-top-fixed {
   0% {
@@ -6847,7 +7091,7 @@ a.uk-thumbnail {
 
 
 /*
- * Slide bottom fixed
+ * Bottom fixed
  */
 @-webkit-keyframes uk-slide-bottom-fixed {
   0% {
@@ -6873,29 +7117,6 @@ a.uk-thumbnail {
 }
 
 
-/*
- * Spin
- */
-@-webkit-keyframes uk-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-  }
-}
-
-
-@keyframes uk-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
-}
-
-
 /* ========================================================================
    Component: Dropdown
  ========================================================================== */
@@ -7101,7 +7322,7 @@ a.uk-thumbnail {
 
 .uk-dropdown-scrollable {
   overflow-y: auto;
-  height: 200px;
+  max-height: 200px;
 }
 
 .uk-dropdown-navbar.uk-dropdown-flip {
@@ -7118,7 +7339,6 @@ a.uk-thumbnail {
  * 3. Allow scrolling for the modal dialog
  * 4. Mask the background page
  * 5. Fade-in transition
- * 6. Fix transition in Webkit
  */
 
 .uk-modal {
@@ -7140,8 +7360,6 @@ a.uk-thumbnail {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
-  /* 6 */
-  -webkit-transform: translateZ(0);
   &.uk-open {
     opacity: 1;
   }
@@ -7856,19 +8074,39 @@ a.uk-thumbnail {
   vertical-align: bottom;
 }
 
+/* Height
+ ========================================================================== */
 /*
- *  This helper class is very useful to extend the `html` and `body` element to the full height of the page.
+ * More robust if padding and border are used
+ */
+
+[class*='uk-height'] {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/*
+ * Useful to extend the `html` and `body` element to the full height of the page.
  */
 
 .uk-height-1-1 {
   height: 100%;
 }
 
+/*
+ * Useful to create image teasers
+ */
+
+.uk-height-viewport {
+  height: 100vh;
+  min-height: 600px;
+}
+
 /* Responsive objects
  * Note: Images are already responsive by default, see Base component
  ========================================================================== */
 /*
- * 1. Corrects max-width/max-height behavior if padding and border are used
+ * 1. Corrects `max-width` and `max-height` behavior if padding and border are used
  */
 
 .uk-responsive-width, .uk-responsive-height {
@@ -8091,6 +8329,25 @@ a.uk-thumbnail {
   }
 }
 
+/* Position
+ ========================================================================== */
+
+.uk-position-absolute {
+  position: absolute !important;
+}
+
+.uk-position-relative {
+  position: relative !important;
+}
+
+.uk-position-cover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 /* Display
  ========================================================================== */
 /*