1 files changed, 223 insertions, 0 deletions
diff --git a/scss/uikit/components/icon.scss b/scss/uikit/components/icon.scss
new file mode 100644
index 00000000..2ff70ecf
--- /dev/null
+++ b/scss/uikit/components/icon.scss
@@ -0,0 +1,223 @@
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$icon-image-size:                                20px !default;
+
+$icon-link-color:                                $global-muted-color !default;
+$icon-link-hover-color:                          $global-color !default;
+$icon-link-active-color:                         darken($global-color, 5%) !default;
+
+$icon-button-size:                               36px !default;
+$icon-button-border-radius:                      500px !default;
+$icon-button-background:                         $global-muted-background !default;
+$icon-button-color:                              $global-muted-color !default;
+
+$icon-button-hover-background:                   darken($icon-button-background, 5%) !default;
+$icon-button-hover-color:                        $global-color !default;
+
+$icon-button-active-background:                  darken($icon-button-background, 10%) !default;
+$icon-button-active-color:                       $global-color !default;
+
+
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+
+/*
+ * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 10. Let the container fit the height of the icon
+ */
+
+.uk-icon {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    overflow: visible;
+    /* 5 */
+    font: inherit;
+    color: inherit;
+    /* 6 */
+    text-transform: none;
+    /* 7. */
+    padding: 0;
+    background-color: transparent;
+    /* 8 */
+    display: inline-block;
+    /* 9 */
+    fill: currentcolor;
+    /* 10 */
+    line-height: 0;
+}
+
+/* Required for `button`. */
+button.uk-icon:not(:disabled) { cursor: pointer; }
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-icon::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ * 1. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+
+ */
+
+.uk-icon [fill*='#']:not(.uk-preserve),
+.uk-icon [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 1
+.uk-icon [stroke*='#']:not(.uk-preserve),
+.uk-icon [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 1
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-icon > * { transform: translate(0,0); }
+
+
+/* Image modifier
+ ========================================================================== */
+
+/*
+ * Display images in icon dimensions
+ */
+
+.uk-icon-image {
+    width: $icon-image-size;
+    height: $icon-image-size;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Link
+ */
+
+.uk-icon-link {
+    color: $icon-link-color;
+    @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
+}
+
+.uk-icon-link:hover,
+.uk-icon-link:focus {
+    color: $icon-link-hover-color;
+    outline: none;
+    @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+    color: $icon-link-active-color;
+    @if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-icon-button {
+    box-sizing: border-box;
+    width: $icon-button-size;
+    height: $icon-button-size;
+    border-radius: $icon-button-border-radius;
+    background: $icon-button-background;
+    color: $icon-button-color;
+    vertical-align: middle;
+    /* 1 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();}
+}
+
+/* Hover + Focus */
+.uk-icon-button:hover,
+.uk-icon-button:focus {
+    background-color: $icon-button-hover-background;
+    color: $icon-button-hover-color;
+    outline: none;
+    @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+    background-color: $icon-button-active-background;
+    color: $icon-button-active-color;
+    @if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
+
+// @mixin hook-icon-link(){}
+// @mixin hook-icon-link-hover(){}
+// @mixin hook-icon-link-active(){}
+// @mixin hook-icon-button(){}
+// @mixin hook-icon-button-hover(){}
+// @mixin hook-icon-button-active(){}
+// @mixin hook-icon-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-icon-link-color:                       $inverse-global-muted-color !default;
+$inverse-icon-link-hover-color:                 $inverse-global-color !default;
+$inverse-icon-link-active-color:                $inverse-global-color !default;
+$inverse-icon-button-background:                $inverse-global-muted-background !default;
+$inverse-icon-button-color:                     $inverse-global-muted-color !default;
+$inverse-icon-button-hover-background:          darken($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-color:               $inverse-global-color !default;
+$inverse-icon-button-active-background:         darken($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-color:              $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-icon-link(){}
+// @mixin hook-inverse-icon-link-hover(){}
+// @mixin hook-inverse-icon-link-active(){}
+// @mixin hook-inverse-icon-button(){}
+// @mixin hook-inverse-icon-button-hover(){}
+// @mixin hook-inverse-icon-button-active(){}