1 files changed, 145 insertions, 0 deletions
diff --git a/scss/uikit/components/transition.scss b/scss/uikit/components/transition.scss
new file mode 100644
index 00000000..c9992743
--- /dev/null
+++ b/scss/uikit/components/transition.scss
@@ -0,0 +1,145 @@
+// Name:            Transition
+// Description:     Utilities for transitions
+//
+// Component:       `uk-transition-*`
+//
+// Modifiers:       `uk-transition-fade`
+//                  `uk-transition-scale-up`
+//                  `uk-transition-scale-down`
+//                  `uk-transition-slide-top-*`
+//                  `uk-transition-slide-bottom-*`
+//                  `uk-transition-slide-left-*`
+//                  `uk-transition-slide-right-*`
+//                  `uk-transition-opaque`
+//                  `uk-transition-slow`
+//
+// Sub-objects:     `uk-transition-toggle`,
+//                  `uk-transition-active`
+//
+// States:          `uk-hover`
+//                  `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$transition-duration:                            0.3s !default;
+
+$transition-scale:                               1.1 !default;
+
+$transition-slide-small-translate:               10px !default;
+$transition-slide-medium-translate:              50px !default;
+
+$transition-slow-duration:                       0.7s !default;
+
+
+/* ========================================================================
+   Component: Transition
+ ========================================================================== */
+
+/*
+ * Using multiple selectors to exclude `uk-transition-toggle`
+ * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`
+ *       Just put the transition in an extra `div`
+ */
+
+.uk-transition-fade,
+[class*='uk-transition-scale'],
+[class*='uk-transition-slide'] {
+    transition: $transition-duration ease-out;
+    transition-property: opacity, transform, filter;
+}
+
+.uk-transition-toggle:focus { outline: none; }
+
+/*
+ * Fade
+ */
+
+.uk-transition-fade { opacity: 0; }
+
+/* Show */
+.uk-transition-toggle:hover [class*='uk-transition-fade'],
+.uk-transition-toggle.uk-hover [class*='uk-transition-fade'],
+.uk-transition-toggle:focus [class*='uk-transition-fade'],
+.uk-transition-active.uk-active [class*='uk-transition-fade'] { opacity: 1; }
+
+/*
+ * Scale
+ * Note: Using `scale3d` for better image rendering
+ */
+
+[class*='uk-transition-scale'] { opacity: 0; }
+
+.uk-transition-scale-up { transform: scale3d(1,1,1); }
+
+.uk-transition-scale-down { transform: scale3d($transition-scale,$transition-scale,1); }
+
+/* Show */
+.uk-transition-toggle:hover .uk-transition-scale-up,
+.uk-transition-toggle.uk-hover .uk-transition-scale-up,
+.uk-transition-toggle:focus .uk-transition-scale-up,
+.uk-transition-active.uk-active .uk-transition-scale-up {
+    opacity: 1;
+    transform: scale3d($transition-scale,$transition-scale,1);
+}
+
+.uk-transition-toggle:hover .uk-transition-scale-down,
+.uk-transition-toggle.uk-hover .uk-transition-scale-down,
+.uk-transition-toggle:focus .uk-transition-scale-down,
+.uk-transition-active.uk-active .uk-transition-scale-down {
+    opacity: 1;
+    transform: scale3d(1,1,1);
+}
+
+/*
+ * Slide
+ */
+
+[class*='uk-transition-slide'] { opacity: 0; }
+
+.uk-transition-slide-top { transform: translateY(-100%); }
+.uk-transition-slide-bottom { transform: translateY(100%); }
+.uk-transition-slide-left { transform: translateX(-100%); }
+.uk-transition-slide-right { transform: translateX(100%); }
+
+.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); }
+.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); }
+.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); }
+.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); }
+
+.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); }
+.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); }
+.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); }
+.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); }
+
+/* Show */
+.uk-transition-toggle:hover [class*='uk-transition-slide'],
+.uk-transition-toggle.uk-hover [class*='uk-transition-slide'],
+.uk-transition-toggle:focus [class*='uk-transition-slide'],
+.uk-transition-active.uk-active [class*='uk-transition-slide'] {
+    opacity: 1;
+    transform: translateX(0) translateY(0);
+}
+
+
+/* Opacity modifier
+========================================================================== */
+
+.uk-transition-opaque { opacity: 1; }
+
+
+/* Duration modifiers
+========================================================================== */
+
+.uk-transition-slow { transition-duration: $transition-slow-duration; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-transition-misc)) {@include hook-transition-misc();}
+
+// @mixin hook-transition-misc(){}