uikit-sass-rails 1.0.0 → 1.1.0

data/vendor/assets/stylesheets/uikit/uikit.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
  ========================================================================== */
 
@@ -2685,30 +2678,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'
@@ -3455,10 +3437,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;
@@ -3723,6 +3713,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
@@ -3767,8 +3766,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`
@@ -5659,6 +5658,14 @@ select.uk-form-width-mini {
   text-transform: none;
 }
 
+/*
+ * Keep color when badge is a link
+ */
+
+a.uk-badge:hover {
+  color: #ffffff;
+}
+
 /* Modifier: `uk-badge-notification`;
  ========================================================================== */
 
@@ -5784,20 +5791,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;
@@ -6195,6 +6204,7 @@ a.uk-thumbnail {
 
 /*
  * Fade
+ * Higher specificity (!important) needed because of reverse modifier
  */
 
 .uk-animation-fade {
@@ -6202,46 +6212,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;
 }
 
 /*
@@ -6253,19 +6272,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;
@@ -6286,40 +6356,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;
@@ -6328,10 +6483,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;
@@ -6341,69 +6496,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);
   }
 }
@@ -6411,26 +6568,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);
   }
 }
@@ -6438,19 +6591,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% {
@@ -6521,8 +6762,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% {
@@ -6549,7 +6793,7 @@ a.uk-thumbnail {
 
 
 /*
- * Slide bottom fixed
+ * Bottom fixed
  */
 @-webkit-keyframes uk-slide-bottom-fixed {
   0% {
@@ -6575,29 +6819,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
  ========================================================================== */
@@ -6798,7 +7019,7 @@ a.uk-thumbnail {
 
 .uk-dropdown-scrollable {
   overflow-y: auto;
-  height: 200px;
+  max-height: 200px;
 }
 
 /* ========================================================================
@@ -6811,7 +7032,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 {
@@ -6833,8 +7053,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;
   }
@@ -7524,19 +7742,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 {
@@ -7758,6 +7996,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
  ========================================================================== */
 /*