uikit-sass-rails 1.0.0

data/vendor/assets/stylesheets/uikit/addons/uikit.gradient.addons.scss

@@ -0,0 +1,1445 @@
+/*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+/*
+ * 1. Remove default list style
+ * 2. Remove whitespace between child elements when using `inline-block`
+ */
+
+.uk-dotnav {
+  /* 1 */
+  padding: 0;
+  list-style: none;
+  /* 2 */
+  font-size: 0.001px;
+  > li {
+    display: inline-block;
+    /* 1 */
+    font-size: 1rem;
+    /* 2 */
+    vertical-align: top;
+    &:nth-child(n+2) {
+      margin-left: 15px;
+    }
+    > a {
+      display: inline-block;
+      -moz-box-sizing: content-box;
+      box-sizing: content-box;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: rgba(50, 50, 50, 0.1);
+      /* 1 */
+      vertical-align: top;
+      /* 2 */
+      overflow: hidden;
+      text-indent: -999%;
+      -webkit-transition: all 0.2s ease-in-out;
+      transition: all 0.2s ease-in-out;
+      &:hover, &:focus {
+        background: rgba(50, 50, 50, 0.4);
+        /* 2 */
+        outline: none;
+      }
+      &:active {
+        background: rgba(50, 50, 50, 0.6);
+      }
+    }
+    &.uk-active > a {
+      background: rgba(50, 50, 50, 0.4);
+      -webkit-transform: scale(1.3);
+      transform: scale(1.3);
+    }
+  }
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * 1. Reset whitespace hack
+ * 2. Remove the gap at the bottom of it container
+ */
+
+/*
+ * Items
+ * 1. Remove the gap at the bottom of it container
+ * 2. Hide text if present
+ */
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+/* OnClick */
+
+/* Active */
+
+/* Modifier: 'dotnav-vertical'
+ ========================================================================== */
+
+.uk-dotnav-vertical > li {
+  display: block;
+  &:nth-child(n+2) {
+    margin-left: 0;
+    margin-top: 15px;
+  }
+}
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+/*
+ * 1. Required for `a` elements
+ * 2. Dimension
+ * 3. Style
+ */
+
+.uk-slidenav {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+  /* 3 */
+  line-height: 60px;
+  color: rgba(50, 50, 50, 0.4);
+  font-size: 60px;
+  text-align: center;
+  &:hover, &:focus {
+    /* 2 */
+    outline: none;
+    /* 3 */
+    text-decoration: none;
+    /* 4 */
+    color: rgba(50, 50, 50, 0.7);
+    cursor: pointer;
+  }
+  &:active {
+    color: rgba(50, 50, 50, 0.9);
+  }
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ * 3. Required for `a` elements
+ * 4. Style
+ */
+
+/* Active */
+
+/*
+ * Icons
+ */
+
+.uk-slidenav-previous:before {
+  content: "\f104";
+  font-family: FontAwesome;
+}
+
+.uk-slidenav-next:before {
+  content: "\f105";
+  font-family: FontAwesome;
+}
+
+/* Sub-object: `uk-slidenav-position`
+ ========================================================================== */
+/*
+ * 1. Container width fits its content
+ * 2. Corrects max-width behavior (3.) if padding and border are used
+ * 3. Responsive behavior
+ * 4. Create position context for dropdowns
+ */
+
+.uk-slidenav-position {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  /* 3 */
+  max-width: 100%;
+  /* 4 */
+  position: relative;
+  .uk-slidenav {
+    display: none;
+    position: absolute;
+    top: 50%;
+    margin-top: -30px;
+  }
+  &:hover .uk-slidenav {
+    display: block;
+  }
+  .uk-slidenav-previous {
+    left: 20px;
+  }
+  .uk-slidenav-next {
+    right: 20px;
+  }
+}
+
+/*
+ * Center vertically
+ */
+
+/* ========================================================================
+   Component: Form advanced
+   Note: Only works in Webkit at the moment
+ ========================================================================== */
+/*
+ * 1. Style
+ * 2. Makes box more robust so it clips the child element
+ * 3. Vertical alignment
+ * 4. Remove default style
+ * 5. Fix black background on iOS
+ */
+
+.uk-form input {
+  &[type="radio"], &[type="checkbox"] {
+    /* 1 */
+    display: inline-block;
+    height: 14px;
+    width: 14px;
+    border: 1px solid #aaaaaa;
+    /* 2 */
+    overflow: hidden;
+    /* 3 */
+    margin-top: -4px;
+    vertical-align: middle;
+    /* 4 */
+    -webkit-appearance: none;
+    outline: 0;
+    /* 5 */
+    background: transparent;
+  }
+  &[type="radio"] {
+    border-radius: 50%;
+  }
+  &[type=checkbox]:checked:before {
+    display: block;
+  }
+  &[type=radio]:checked:before {
+    display: block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin: 2px auto 0;
+    border-radius: 50%;
+    background: #00a8e6;
+  }
+  &[type=checkbox]:checked:before {
+    content: "\f00c";
+    font-family: FontAwesome;
+    font-size: 12px;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    line-height: 12px;
+    color: #00a8e6;
+  }
+  &[type=radio]:disabled, &[type=checkbox]:disabled {
+    border-color: #dddddd;
+  }
+  &[type=radio]:disabled:checked:before {
+    background-color: #aaaaaa;
+  }
+  &[type=checkbox]:disabled:checked:before {
+    color: #aaaaaa;
+  }
+}
+
+/* Radio */
+
+/*
+ * Checked
+ */
+
+/* Radio */
+
+/* Checkbox */
+
+/*
+ * Disabled
+ */
+
+/* ========================================================================
+   Component: Form file
+ ========================================================================== */
+/*
+ * 1. Behave like form elements
+ * 2. Create position context for dropdowns
+ * 3. Clip content
+ */
+
+.uk-form-file {
+  /* 1 */
+  display: inline-block;
+  vertical-align: middle;
+  /* 2 */
+  position: relative;
+  /* 3 */
+  overflow: hidden;
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+    /* 1 */
+    left: 0;
+    /* 2 */
+    font-size: 500px;
+  }
+}
+
+/*
+ * 1. Required for Firefox
+ * 2. Expand height and required for the cursor
+ */
+
+/* ========================================================================
+   Component: Form password
+ ========================================================================== */
+
+.uk-form-password {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.uk-form-password-toggle {
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -6px;
+  font-size: 13px;
+  line-height: 13px;
+  color: #999999;
+  &:hover {
+    color: #999999;
+    text-decoration: none;
+  }
+}
+
+.uk-form-password > input {
+  padding-right: 50px !important;
+}
+
+/* ========================================================================
+   Component: Form select
+ ========================================================================== */
+/*
+ * 1. Behave like form elements
+ * 2. Create position context for dropdowns
+ * 3. Clip content
+ */
+
+.uk-form-select {
+  /* 1 */
+  display: inline-block;
+  vertical-align: middle;
+  /* 2 */
+  position: relative;
+  /* 3 */
+  overflow: hidden;
+  select {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    /* 1 */
+    left: 0;
+    /* 2 */
+    -webkit-appearance: none;
+  }
+}
+
+/*
+ * 1. Required for Firefox
+ * 1. Required for Webkit to make `height` work
+ */
+
+/* ========================================================================
+   Component: Placeholder
+ ========================================================================== */
+
+.uk-placeholder {
+  margin-bottom: 15px;
+  padding: 20px;
+  border: 1px dashed #dddddd;
+  background: #fafafa;
+  color: #444444;
+}
+
+/*
+ * Add margin if adjacent element
+ */
+
+* + .uk-placeholder {
+  margin-top: 15px;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-placeholder > :last-child {
+  margin-bottom: 0;
+}
+
+/* Modifier: `uk-placeholder-large`
+ ========================================================================== */
+
+.uk-placeholder-large {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+/* ========================================================================
+   Component: Autocomplete
+ ========================================================================== */
+/*
+ * 1. Behave like form elements
+ * 2. Create position context for dropdowns
+ */
+
+.uk-autocomplete {
+  /* 1 */
+  display: inline-block;
+  vertical-align: middle;
+  /* 2 */
+  position: relative;
+}
+
+/* Nav modifier `uk-nav-autocomplete`
+ ========================================================================== */
+/*
+ * Items
+ */
+
+.uk-nav-autocomplete {
+  > li {
+    > a {
+      color: #444444;
+    }
+    &.uk-active > a {
+      background: #009dd8;
+      color: #ffffff;
+      /* 1 */
+      outline: none;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+  .uk-nav-header {
+    color: #999999;
+  }
+  .uk-nav-divider {
+    border-top: 1px solid #dddddd;
+  }
+}
+
+/*
+ * Active
+ * 1. Remove default focus style
+ */
+
+/*
+ * Sub-object: `uk-nav-header`
+ */
+
+/*
+ * Sub-object: `uk-nav-divider`
+ */
+
+/* ========================================================================
+   Component: Datepicker
+ ========================================================================== */
+/*
+ * Reset dropdown width
+ */
+
+.uk-datepicker {
+  width: auto;
+}
+
+/* Sub-object: `uk-datepicker-nav`
+========================================================================== */
+
+.uk-datepicker-nav {
+  margin-bottom: 15px;
+  text-align: center;
+  line-height: 20px;
+  &:before {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+  a {
+    color: #444444;
+    text-decoration: none;
+    &:hover {
+      color: #444444;
+    }
+  }
+}
+
+/*
+ * Micro clearfix
+ */
+
+/*
+ * Previous and next navigation
+ */
+
+.uk-datepicker-previous {
+  float: left;
+}
+
+.uk-datepicker-next {
+  float: right;
+}
+
+.uk-datepicker-previous:after, .uk-datepicker-next:after {
+  width: 20px;
+  font-family: FontAwesome;
+}
+
+.uk-datepicker-previous:after {
+  content: "\f053";
+}
+
+.uk-datepicker-next:after {
+  content: "\f054";
+}
+
+/* Sub-object: `uk-datepicker-heading`
+========================================================================== */
+/* Sub-object: `uk-datepicker-table`
+========================================================================== */
+/* Block element behavior */
+
+.uk-datepicker-table {
+  width: 100%;
+  th, td {
+    padding: 2px;
+  }
+  th {
+    font-size: 12px;
+  }
+  a {
+    display: block;
+    width: 26px;
+    line-height: 24px;
+    text-align: center;
+    color: #444444;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-origin: border-box;
+  }
+}
+
+/*
+ * Item
+ */
+
+/*
+ * Sub-object: `uk-datepicker-table-muted`
+ */
+
+a.uk-datepicker-table-muted {
+  color: #999999;
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-datepicker-table a {
+  &:hover, &:focus {
+    background-color: #fafafa;
+    color: #444444;
+    /* 2 */
+    outline: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    border-bottom-color: rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px 0 #ffffff;
+  }
+  &:active {
+    background-color: #f5f5f5;
+    color: #444444;
+    border-color: rgba(0, 0, 0, 0.2);
+    border-top-color: rgba(0, 0, 0, 0.3);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  &.uk-active {
+    background: #009dd8;
+    color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom-color: rgba(0, 0, 0, 0.4);
+    background-origin: border-box;
+    background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
+    background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  }
+}
+
+/* OnClick */
+
+/*
+ * Active
+ */
+
+/* ========================================================================
+   Component: HTML editor
+ ========================================================================== */
+/* Sub-object `uk-htmleditor-navbar`
+ ========================================================================== */
+
+.uk-htmleditor-navbar {
+  background: #f7f7f7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background-origin: border-box;
+  background-image: -webkit-linear-gradient(top, white, #eeeeee);
+  background-image: linear-gradient(to bottom, white, #eeeeee);
+  &:before {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+}
+
+/*
+ * Micro clearfix
+ */
+
+/* Sub-object `uk-htmleditor-navbar-nav`
+ ========================================================================== */
+
+.uk-htmleditor-navbar-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  float: left;
+  > li {
+    float: left;
+    > a {
+      display: block;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      text-decoration: none;
+      /* 1 */
+      height: 41px;
+      padding: 0 15px;
+      line-height: 40px;
+      /* 2 */
+      color: #444444;
+      font-size: 11px;
+      cursor: pointer;
+      margin-top: -1px;
+      margin-left: -1px;
+      border: 1px solid transparent;
+      border-bottom-width: 0;
+      text-shadow: 0 1px 0 #ffffff;
+    }
+    &:hover > a {
+      background-color: transparent;
+      color: #444444;
+      outline: none;
+      /* 2 */
+      position: relative;
+      z-index: 1;
+      border-left-color: rgba(0, 0, 0, 0.1);
+      border-right-color: rgba(0, 0, 0, 0.1);
+      border-top-color: rgba(0, 0, 0, 0.1);
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    > a {
+      &:focus {
+        background-color: transparent;
+        color: #444444;
+        outline: none;
+        /* 2 */
+        position: relative;
+        z-index: 1;
+        border-left-color: rgba(0, 0, 0, 0.1);
+        border-right-color: rgba(0, 0, 0, 0.1);
+        border-top-color: rgba(0, 0, 0, 0.1);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      &:active {
+        background-color: #f5f5f5;
+        color: #444444;
+        border-left-color: rgba(0, 0, 0, 0.1);
+        border-right-color: rgba(0, 0, 0, 0.1);
+        border-top-color: rgba(0, 0, 0, 0.2);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+    }
+    &.uk-active > a {
+      background-color: #fafafa;
+      color: #444444;
+      border-left-color: rgba(0, 0, 0, 0.1);
+      border-right-color: rgba(0, 0, 0, 0.1);
+      border-top-color: rgba(0, 0, 0, 0.2);
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+/*
+ * 1. Dimensions
+ * 2. Style
+ */
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+/* OnClick */
+
+/* Active */
+
+/* Sub-object: `uk-htmleditor-navbar-flip`
+ ========================================================================== */
+
+.uk-htmleditor-navbar-flip {
+  float: right;
+}
+
+/* Sub-object for special buttons
+ ========================================================================== */
+
+[data-mode='split'] {
+  .uk-htmleditor-button-code, .uk-htmleditor-button-preview {
+    display: none;
+  }
+}
+
+/* Sub-object `uk-htmleditor-content`
+ ========================================================================== */
+
+.uk-htmleditor-content {
+  border-left: 1px solid #dddddd;
+  border-right: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+  background: #ffffff;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  &:before {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+}
+
+/*
+ * Micro clearfix
+ */
+
+/* Modifier `uk-htmleditor-fullscreen`
+ ========================================================================== */
+
+.uk-htmleditor-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 990;
+  .uk-htmleditor-content {
+    position: absolute;
+    top: 41px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .uk-icon-expand:before {
+    content: "\f066";
+  }
+}
+
+/* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
+ ========================================================================== */
+
+.uk-htmleditor-code {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.uk-htmleditor-preview {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow-y: scroll;
+}
+
+/*
+ * Tab view
+ */
+
+[data-mode='tab'] {
+  &[data-active-tab='code'] .uk-htmleditor-preview, &[data-active-tab='preview'] .uk-htmleditor-code {
+    display: none;
+  }
+}
+
+/*
+ * Split view
+ */
+
+[data-mode='split'] {
+  .uk-htmleditor-code, .uk-htmleditor-preview {
+    float: left;
+    width: 50%;
+  }
+  .uk-htmleditor-code {
+    border-right: 1px solid #eeeeee;
+  }
+}
+
+/* CodeMirror modifications
+ ========================================================================== */
+
+.uk-htmleditor .CodeMirror {
+  padding: 10px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/*
+     * Apply same `border-radius` as `uk-htmleditor-navbar`
+     */
+
+.uk-htmleditor-navbar-nav:first-child > li:first-child > a {
+  border-top-left-radius: 4px;
+}
+
+/*
+     * Sub-modifier `uk-htmleditor-navbar-flip`
+     */
+/* Collapse border */
+
+.uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav {
+  > li > a {
+    margin-left: 0;
+    margin-right: -1px;
+  }
+  &:first-child > li:first-child > a {
+    border-top-left-radius: 0;
+  }
+  &:last-child > li:last-child > a {
+    border-top-right-radius: 4px;
+  }
+}
+
+/* Apply same `border-radius` as `uk-htmleditor-navbar` */
+
+/*
+     * Sub-modifier `uk-htmleditor-fullscreen`
+     */
+
+.uk-htmleditor-fullscreen {
+  .uk-htmleditor-navbar {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+  .uk-htmleditor-content {
+    border: none;
+    border-radius: 0;
+  }
+  .uk-htmleditor-navbar-nav > li > a {
+    border-radius: 0 !important;
+  }
+}
+
+/* ========================================================================
+   Component: Nestable
+ ========================================================================== */
+
+.uk-nestable {
+  padding: 0;
+  list-style: none;
+}
+
+/* Sub-object `uk-nestable-list`
+ ========================================================================== */
+
+.uk-nestable-list {
+  margin: 0;
+  padding-left: 40px;
+  list-style: none;
+}
+
+/* Sub-modifier `uk-nestable-list-dragged`
+ ========================================================================== */
+
+.uk-nestable-list-dragged {
+  position: absolute;
+  z-index: 1050;
+  padding-left: 0;
+  pointer-events: none;
+}
+
+/* Sub-object `uk-nestable-item`
+ ========================================================================== */
+
+.uk-nestable-item {
+  margin-bottom: 10px;
+  padding: 5px;
+  background: #f7f7f7;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom-color: rgba(0, 0, 0, 0.3);
+  background-origin: border-box;
+  background-image: -webkit-linear-gradient(top, white, #eeeeee);
+  background-image: linear-gradient(to bottom, white, #eeeeee);
+  text-shadow: 0 1px 0 #ffffff;
+}
+
+/* Sub-object `uk-nestable-placeholder`
+ * The placeholder which marks the drop area
+ ========================================================================== */
+
+.uk-nestable-placeholder {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border: 1px dashed #dddddd;
+}
+
+/* Sub-object `uk-nestable-empty`
+ * The style of an empty list
+ ========================================================================== */
+
+.uk-nestable-empty {
+  min-height: 40px;
+}
+
+/* Sub-object `uk-nestable-handle`
+ ========================================================================== */
+
+.uk-nestable-handle {
+  display: inline-block;
+  font-size: 18px;
+  color: #dddddd;
+  &:hover {
+    cursor: move;
+  }
+  &:after {
+    content: "\f0c9";
+    font-family: FontAwesome;
+  }
+}
+
+/* Hover */
+
+/* Icon */
+
+/* Sub-object `uk-nestable-moving`
+ ========================================================================== */
+
+.uk-nestable-moving {
+  cursor: move;
+  * {
+    cursor: move;
+  }
+}
+
+/* Sub-object `[data-action='toggle']`
+ ========================================================================== */
+/* Hidden by default */
+
+[data-nestable-action='toggle'] {
+  display: inline-block;
+  color: #999999;
+  visibility: hidden;
+  &:hover {
+    color: #444444;
+    cursor: pointer;
+  }
+  &:after {
+    content: "\f147";
+    font-family: FontAwesome;
+  }
+}
+
+/* Hover */
+
+/* Icon */
+
+/*
+ * Show if nested
+ */
+
+.uk-parent > .uk-nestable-item [data-nestable-action='toggle'] {
+  visibility: visible;
+}
+
+/*
+ * Collapsed
+ */
+
+.uk-collapsed {
+  > .uk-nestable-item [data-nestable-action='toggle']:after {
+    content: "\f196";
+  }
+  .uk-nestable-list {
+    display: none;
+  }
+}
+
+/* ========================================================================
+   Component: Notify
+ ========================================================================== */
+/*
+ * Message container for positioning
+ */
+
+.uk-notify {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 1040;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 350px;
+}
+
+/* Position modifiers
+========================================================================== */
+
+.uk-notify-top-right, .uk-notify-bottom-right {
+  left: auto;
+  right: 10px;
+}
+
+.uk-notify-top-center, .uk-notify-bottom-center {
+  left: 50%;
+  margin-left: -175px;
+}
+
+.uk-notify-bottom-left, .uk-notify-bottom-right, .uk-notify-bottom-center {
+  top: auto;
+  bottom: 10px;
+}
+
+/* Responsiveness
+========================================================================== */
+/* Phones portrait and smaller */
+@media (max-width: 479px) {
+  /*
+     * Fit in small screen
+     */
+  .uk-notify {
+    left: 10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+  }
+}
+
+/* Sub-object: `uk-notify-message`
+========================================================================== */
+
+.uk-notify-message {
+  position: relative;
+  margin-bottom: 10px;
+  padding: 15px;
+  background: #444444;
+  color: #ffffff;
+  font-size: 16px;
+  line-height: 22px;
+  cursor: pointer;
+  border: 1px solid #444444;
+  border-radius: 4px;
+  > .uk-close {
+    visibility: hidden;
+    float: right;
+  }
+  &:hover > .uk-close {
+    visibility: visible;
+  }
+}
+
+/* Close in notify
+ ========================================================================== */
+
+/* Modifier: `uk-alert-info`
+ ========================================================================== */
+
+.uk-notify-message-primary {
+  background: #ebf7fd;
+  color: #2d7091;
+  border-color: rgba(45, 112, 145, 0.3);
+}
+
+/* Modifier: `uk-alert-success`
+ ========================================================================== */
+
+.uk-notify-message-success {
+  background: #f2fae3;
+  color: #659f13;
+  border-color: rgba(101, 159, 19, 0.3);
+}
+
+/* Modifier: `uk-notify-message-warning`
+ ========================================================================== */
+
+.uk-notify-message-warning {
+  background: #fffceb;
+  color: #e28327;
+  border-color: rgba(226, 131, 39, 0.3);
+}
+
+/* Modifier: `uk-notify-message-danger`
+ ========================================================================== */
+
+.uk-notify-message-danger {
+  background: #fff1f0;
+  color: #d85030;
+  border-color: rgba(216, 80, 48, 0.3);
+}
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+/*
+ * 1. Create position context for dropdowns
+ * 2. Needed for `form` element
+ */
+
+.uk-search {
+  display: inline-block;
+  /* 1 */
+  position: relative;
+  /* 2 */
+  margin: 0;
+  &:before {
+    content: "\f002";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-family: FontAwesome;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+/*
+ * Icon
+ */
+
+/* Sub-object `uk-search-field`
+ ========================================================================== */
+/*
+ * 1. Needed to reset iOS `input[type="search"]` appearance
+ */
+
+.uk-search-field {
+  width: 120px;
+  height: 30px;
+  padding: 0 30px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background: rgba(0, 0, 0, 0);
+  color: #444444;
+  -webkit-transition: all linear 0.2s;
+  transition: all linear 0.2s;
+  /* 1 */
+  border-radius: 0;
+}
+
+/*
+ * Needed to reset iOS `input[type="search"]` appearance
+ * Higher specificity to override appearance set by normalize.less
+ */
+
+input.uk-search-field {
+  -webkit-appearance: none;
+}
+
+/* Placeholder */
+
+.uk-search-field {
+  &:-ms-input-placeholder, &::-moz-placeholder, &::-webkit-input-placeholder {
+    color: #999999;
+  }
+  &::-ms-clear {
+    display: none;
+  }
+  &:focus {
+    outline: 0;
+    width: 180px;
+  }
+}
+
+/* Removes cancel button in IE10 */
+
+/* Focus */
+
+/* Focus + active */
+
+.uk-search.uk-active .uk-search-field {
+  width: 180px;
+}
+
+/* Sub-object `uk-search-close`
+ ========================================================================== */
+/*
+ * 1. Required for `button` elements
+ * 2. Needed for Safari
+ */
+
+.uk-search-close {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.2);
+  /* 1. */
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+  /* 2. */
+  background: transparent;
+}
+
+.uk-loading > .uk-search-close, .uk-active > .uk-search-close {
+  display: block;
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-close:after {
+  display: block;
+  content: "\f00d";
+  font-family: FontAwesome;
+}
+
+/* Loading icon */
+
+.uk-loading > .uk-search-close:after {
+  content: "\f110";
+  -webkit-animation: uk-spin 2s infinite linear;
+  animation: uk-spin 2s infinite linear;
+}
+
+/* Dropdown modifier: `uk-dropdown-search`
+ ========================================================================== */
+
+.uk-dropdown-search {
+  width: 300px;
+  margin-top: 0;
+  background: #ffffff;
+  color: #444444;
+}
+
+.uk-open > .uk-dropdown-search {
+  -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out;
+  animation: uk-slide-top-fixed 0.2s ease-in-out;
+}
+
+/*
+ * Dependency `uk-navbar-flip`
+ */
+
+.uk-navbar-flip .uk-dropdown-search {
+  margin-top: 12px;
+  margin-right: -16px;
+}
+
+/* Nav modifier `uk-nav-search`
+ ========================================================================== */
+/*
+ * Items
+ */
+
+.uk-nav-search {
+  > li {
+    > a {
+      color: #444444;
+    }
+    &.uk-active > a {
+      background: #009dd8;
+      color: #ffffff;
+      /* 1 */
+      outline: none;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+  .uk-nav-header {
+    color: #999999;
+  }
+  .uk-nav-divider {
+    border-top: 1px solid #dddddd;
+  }
+  ul a {
+    color: #0077dd;
+    &:hover {
+      color: #005599;
+    }
+  }
+}
+
+/*
+ * Active
+ * 1. Remove default focus style
+ */
+
+/*
+ * Sub-object: `uk-nav-header`
+ */
+
+/*
+ * Sub-object: `uk-nav-divider`
+ */
+
+/*
+ * Nested items
+ */
+
+/* Search in offcanvas
+ ========================================================================== */
+
+.uk-offcanvas {
+  .uk-search {
+    display: block;
+    margin: 20px 15px;
+    &:before {
+      color: #777777;
+    }
+  }
+  .uk-search-field {
+    width: 100%;
+    border-color: rgba(0, 0, 0, 0);
+    background: #1a1a1a;
+    color: #cccccc;
+    &:-ms-input-placeholder, &::-moz-placeholder, &::-webkit-input-placeholder {
+      color: #777777;
+    }
+  }
+}
+
+/* ========================================================================
+   Component: Sortable
+ ========================================================================== */
+
+.uk-sortable {
+  position: relative;
+  > * {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    * {
+      -webkit-user-drag: none;
+      user-drag: none;
+    }
+  }
+}
+
+/*
+ * Makes text unselectable
+ */
+
+/*
+ * Prevents images and links from being dragged (default browser behavior)
+ * Currently only works in Webkit
+ */
+
+/* Sub-modifier `uk-sortable-dragged`
+ ========================================================================== */
+
+.uk-sortable-dragged {
+  position: absolute;
+  z-index: 1050;
+  pointer-events: none;
+}
+
+/* Sub-modifier `uk-sortable-placeholder`
+ ========================================================================== */
+
+.uk-sortable-placeholder {
+  opacity: 0;
+}
+
+/* Sub-modifier `uk-sortable-over`
+ * Only if `warp:true`
+ ========================================================================== */
+
+.uk-sortable-over {
+  opacity: 0.3;
+}
+
+/* Sub-object `uk-nestable-moving`
+ ========================================================================== */
+
+.uk-sortable-moving {
+  cursor: move;
+  * {
+    cursor: move;
+  }
+}
+
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+
+.uk-sticky {
+  z-index: 980;
+}
+
+/* ========================================================================
+   Component: Upload
+ ========================================================================== */
+/*
+ * Create a box-shadow when dragging a file over the upload area
+ */
+
+.uk-dragover {
+  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
+}