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, 328 insertions, 0 deletions

diff --git a/scss/uikit/components/search.scss b/scss/uikit/components/search.scss
new file mode 100644
index 00000000..a61002f5
--- /dev/null
+++ b/scss/uikit/components/search.scss
@@ -0,0 +1,328 @@
+// Name:            Search
+// Description:     Component to create the search
+//
+// Component:       `uk-search`
+//
+// Sub-objects:     `uk-search-input`
+//                  `uk-search-toggle`
+//
+// Adopted:         `uk-search-icon`
+//
+// Modifier:        `uk-search-default`
+//                  `uk-search-navbar`
+//                  `uk-search-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$search-color:                                       $global-color !default;
+$search-placeholder-color:                           $global-muted-color !default;
+
+$search-icon-color:                                  $global-muted-color !default;
+
+$search-default-width:                               180px !default;
+$search-default-height:                              $global-control-height !default;
+$search-default-padding-horizontal:                  6px !default;
+$search-default-background:                          $global-muted-background !default;
+$search-default-focus-background:                    $search-default-background !default;
+
+$search-default-icon-width:                          $global-control-height !default;
+
+$search-navbar-width:                                400px !default;
+$search-navbar-height:                               40px !default;
+$search-navbar-background:                           transparent !default;
+$search-navbar-font-size:                            $global-large-font-size !default;
+
+$search-navbar-icon-width:                           40px !default;
+
+$search-large-width:                                 500px !default;
+$search-large-height:                                80px !default;
+$search-large-background:                            transparent !default;
+$search-large-font-size:                             $global-xxlarge-font-size !default;
+
+$search-large-icon-width:                            80px !default;
+
+$search-toggle-color:                                $global-muted-color !default;
+$search-toggle-hover-color:                          $global-color !default;
+
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Reset `form`
+ */
+
+.uk-search {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+    /* 4 */
+    margin: 0;
+}
+
+
+/* Input
+ ========================================================================== */
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+
+.uk-search-input::-webkit-search-cancel-button,
+.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-search-input::-moz-placeholder { opacity: 1; }
+
+/*
+ * 1. Define consistent box sizing.
+ * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+ * 3. Remove `border-radius` in iOS.
+ * 4. Change font properties to `inherit` in all browsers
+ * 5. Show the overflow in Edge.
+ * 6. Remove default style in iOS.
+ * 7. Vertical alignment
+ * 8. Take the full container width
+ * 9. Style
+ */
+
+.uk-search-input {
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    font: inherit;
+    /* 5 */
+    overflow: visible;
+    /* 6 */
+    -webkit-appearance: none;
+    /* 7 */
+    vertical-align: middle;
+    /* 8 */
+    width: 100%;
+    /* 9 */
+    border: none;
+    color: $search-color;
+    @if(mixin-exists(hook-search-input)) {@include hook-search-input();}
+}
+
+.uk-search-input:focus { outline: none; }
+
+/* Placeholder */
+.uk-search-input:-ms-input-placeholder { color: $search-placeholder-color !important; }
+.uk-search-input::placeholder { color: $search-placeholder-color; }
+
+
+/* Icon (Adopts `uk-icon`)
+ ========================================================================== */
+
+/*
+ * Remove default focus style
+ */
+
+.uk-search-icon:focus { outline: none; }
+
+/*
+ * Position above input
+ * 1. Set position
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+
+.uk-search .uk-search-icon {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    /* 3 */
+    color: $search-icon-color;
+}
+
+/*
+ * Required for `a`.
+ */
+
+.uk-search .uk-search-icon:hover { color: $search-icon-color; }
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+
+.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; }
+
+/*
+ * Position modifier
+ */
+
+.uk-search .uk-search-icon-flip {
+    right: 0;
+    left: auto;
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-search-default { width: $search-default-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-default .uk-search-input {
+    height: $search-default-height;
+    padding-left: $search-default-padding-horizontal;
+    padding-right: $search-default-padding-horizontal;
+    background: $search-default-background;
+    @if(mixin-exists(hook-search-default-input)) {@include hook-search-default-input();}
+}
+
+/* Focus */
+.uk-search-default .uk-search-input:focus {
+    background-color: $search-default-focus-background;
+    @if(mixin-exists(hook-search-default-input-focus)) {@include hook-search-default-input-focus();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-default .uk-search-icon { width: $search-default-icon-width; }
+
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width); }
+
+
+/* Navbar modifier
+ ========================================================================== */
+
+.uk-search-navbar { width: $search-navbar-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-navbar .uk-search-input {
+    height: $search-navbar-height;
+    background: $search-navbar-background;
+    font-size: $search-navbar-font-size;
+    @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; }
+
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width); }
+
+
+/* Large modifier
+ ========================================================================== */
+
+.uk-search-large { width: $search-large-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-large .uk-search-input {
+    height: $search-large-height;
+    background: $search-large-background;
+    font-size: $search-large-font-size;
+    @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-large .uk-search-icon { width: $search-large-icon-width; }
+
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width); }
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-search-toggle {
+    color: $search-toggle-color;
+    @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();}
+}
+
+/* Hover + Focus */
+.uk-search-toggle:hover,
+.uk-search-toggle:focus {
+    color: $search-toggle-hover-color;
+    @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
+
+// @mixin hook-search-input(){}
+// @mixin hook-search-default-input(){}
+// @mixin hook-search-default-input-focus(){}
+// @mixin hook-search-navbar-input(){}
+// @mixin hook-search-large-input(){}
+
+// @mixin hook-search-toggle(){}
+// @mixin hook-search-toggle-hover(){}
+
+// @mixin hook-search-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-search-color:                          $inverse-global-color !default;
+$inverse-search-placeholder-color:              $inverse-global-muted-color !default;
+
+$inverse-search-icon-color:                     $inverse-global-muted-color !default;
+
+$inverse-search-default-background:             $inverse-global-muted-background !default;
+$inverse-search-default-focus-background:       $inverse-search-default-background !default;
+
+$inverse-search-navbar-background:              transparent !default;
+
+$inverse-search-large-background:               transparent !default;
+
+$inverse-search-toggle-color:                   $inverse-global-muted-color !default;
+$inverse-search-toggle-hover-color:             $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-search-default-input(){}
+// @mixin hook-inverse-search-default-input-focus(){}
+// @mixin hook-inverse-search-navbar-input(){}
+// @mixin hook-inverse-search-large-input(){}
+// @mixin hook-inverse-search-toggle(){}
+// @mixin hook-inverse-search-toggle-hover(){}