Move from CSS to SCSS (#86)

* Rewrite existing style.css with sass

* Add "uses-rst" class for pages that use rendered RST

This replaces the previous method of just listing
every page in the sass

* Remove old debug print

* Mixins and error pages

* Newly built CSS

* Add SASS cache to .gitignore

* New error SASS

* Slight changes to error template

* Add UIKit SCSS to repo

This includes the LICENSE and our customizations, which
makes life way easier for contributors

* Reorganize sass folder; your watchers can avoid uikit now

* Sass folder should be called scss

* Change variable names

* [SCSS] Linting

* Fix scss_lint gem name [ci skip]

* [SCSS] Now you can compile with just Python!

* Temporary hack to make the wiki editor taller

* [SCSS] @jchristgit

* [SCSS.py] Require specification of include dir to simplify the SCSS imports

* [SCSS] All inline styles have been removed

* [SCSS] Update UIKit theme to import from our variables

* [SCSS] Remove extra newlines in errors/_common.scss

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(){}