uikit-sass-rails 1.2.0 → 1.3.0

data/vendor/assets/stylesheets/uikit.scss

@@ -2,4 +2,4 @@
 
 @import "extra/font-awesome";
 @import "uikit/uikit";
-@import "uikit/addons/uikit.addons";
+@import "uikit/components/uikit.components";

data/vendor/assets/stylesheets/uikit/almost-flat.scss

@@ -2,4 +2,5 @@
 
 @import "../extra/font-awesome";
 @import "uikit.almost-flat";
-@import "addons/uikit.almost-flat.addons";
+@import "uikit/components/uikit.components";
+@import "uikit/components/uikit.components.almost-flat";

data/vendor/assets/stylesheets/uikit/{addons/uikit.almost-flat.addons.scss → components/uikit.components.almost-flat.scss}

@@ -1,5 +1,268 @@
-/*! UIkit 2.10.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+   Component: Autocomplete
+ ========================================================================== */
+/*
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Prevent `inline-block` consequences
+ * 4. Remove the gap between the container and its child element
+ */
+
+.uk-autocomplete {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  position: relative;
+  /* 3 */
+  max-width: 100%;
+  /* 4 */
+  vertical-align: middle;
+}
+
+/* Nav modifier `uk-nav-autocomplete`
+ ========================================================================== */
+/*
+ * Items
+ */
+
+.uk-nav-autocomplete {
+  > li {
+    > a {
+      color: #444444;
+    }
+    &.uk-active > a {
+      background: #00a8e6;
+      color: #ffffff;
+      /* 1 */
+      outline: none;
+      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+    }
+  }
+  .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`
+ */
+
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+/*
+ * Background image always covers and centers its element
+ */
+
+.uk-cover-background {
+  background-position: 50% 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/*
+ * Emulates image cover, works with video and image elements
+ * 1. Parent container which clips resized object
+ * 2. Resizes the object to always covers its container
+ * 3. Reset the responsive image CSS
+ * 4. Center object
+ */
+/* 1 */
+
+.uk-cover {
+  overflow: hidden;
+}
+
+.uk-cover-object {
+  /* 2 */
+  width: auto;
+  height: auto;
+  min-width: 100%;
+  min-height: 100%;
+  /* 3 */
+  max-width: none;
+  /* 4 */
+  position: relative;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+/*
+ * To center iframes use `data-uk-cover` JavaScript
+ */
+
+[data-uk-cover] {
+  position: relative;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+   Component: Datepicker
+ ========================================================================== */
+/*
+ * 1. Reset dropdown width
+ * 2. Set animation
+ * 3. Needed for scale animation
+ */
+
+.uk-datepicker {
+  /* 1 */
+  width: auto;
+  /* 2 */
+  -webkit-animation: uk-fade 0.2s ease-in-out;
+  animation: uk-fade 0.2s ease-in-out;
+  /* 3 */
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+/* 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;
+  }
+}
+
+/*
+ * 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.16);
+    text-shadow: 0 1px 0 #ffffff;
+  }
+  &:active {
+    background-color: #eeeeee;
+    color: #444444;
+  }
+  &.uk-active {
+    background: #00a8e6;
+    color: #ffffff;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* OnClick */
+
+/*
+ * Active
+ */
+
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Dotnav
  ========================================================================== */
@@ -89,106 +352,60 @@
   }
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
-   Component: Slidenav
+   Component: Flex
  ========================================================================== */
-/*
- * 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);
-  }
+.uk-flex {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
 }
 
+/* Alignment
+ ========================================================================== */
 /*
- * Hover
- * 1. Apply hover style also to focus state
- * 2. Remove default focus style
- * 3. Required for `a` elements
- * 4. Style
+ * Vertical alignment
+ * Default value is `stretch`
  */
 
-/* Active */
-
-/*
- * Icons
- */
+.uk-flex-top {
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+}
 
-.uk-slidenav-previous:before {
-  content: "\f104";
-  font-family: FontAwesome;
+.uk-flex-middle {
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
 }
 
-.uk-slidenav-next:before {
-  content: "\f105";
-  font-family: FontAwesome;
+.uk-flex-bottom {
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  align-items: flex-end;
 }
 
-/* Sub-object: `uk-slidenav-position`
- ========================================================================== */
 /*
- * 1. Container width fits its content
- * 2. Create position context
- * 3. Prevent `inline-block` consequences
- * 4. Corrects `max-width` behavior if padding and border are used
+ * Horizontal alignment
+ * Default value is `flex-start`
  */
 
-.uk-slidenav-position {
-  /* 1 */
-  display: inline-block;
-  /* 2 */
-  position: relative;
-  /* 3 */
-  max-width: 100%;
-  /* 4 */
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  .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;
-  }
+.uk-flex-center {
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.uk-flex-right {
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
 }
 
-/*
- * Center vertically
- */
-
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Form advanced
    Note: Only works in Webkit at the moment
@@ -268,6 +485,7 @@
  * Disabled
  */
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Form file
  ========================================================================== */
@@ -304,6 +522,7 @@
  * 2. Expand height and required for the cursor
  */
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Form password
  ========================================================================== */
@@ -341,6 +560,7 @@
   padding-right: 50px !important;
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Form select
  ========================================================================== */
@@ -361,266 +581,24 @@
   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. Container width fits its content
- * 2. Create position context
- * 3. Prevent `inline-block` consequences
- * 4. Remove the gap between the container and its child element
- */
-
-.uk-autocomplete {
-  /* 1 */
-  display: inline-block;
-  /* 2 */
-  position: relative;
-  /* 3 */
-  max-width: 100%;
-  /* 4 */
-  vertical-align: middle;
-}
-
-/* Nav modifier `uk-nav-autocomplete`
- ========================================================================== */
-/*
- * Items
- */
-
-.uk-nav-autocomplete {
-  > li {
-    > a {
-      color: #444444;
-    }
-    &.uk-active > a {
-      background: #00a8e6;
-      color: #ffffff;
-      /* 1 */
-      outline: none;
-      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
-      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
-    }
-  }
-  .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
- ========================================================================== */
-/*
- * 1. Reset dropdown width
- * 2. Set animation
- * 3. Needed for scale animation
- */
-
-.uk-datepicker {
-  /* 1 */
-  width: auto;
-  /* 2 */
-  -webkit-animation: uk-fade 0.2s ease-in-out;
-  animation: uk-fade 0.2s ease-in-out;
-  /* 3 */
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-}
-
-/* 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;
-  }
-}
-
-/*
- * 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.16);
-    text-shadow: 0 1px 0 #ffffff;
-  }
-  &:active {
-    background-color: #eeeeee;
-    color: #444444;
-  }
-  &.uk-active {
-    background: #00a8e6;
-    color: #ffffff;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    /* 1 */
+    left: 0;
+    /* 2 */
+    -webkit-appearance: none;
   }
 }
 
-/* OnClick */
-
 /*
- * Active
+ * 1. Required for Firefox
+ * 1. Required for Webkit to make `height` work
  */
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: HTML editor
  ========================================================================== */
@@ -903,6 +881,7 @@ a.uk-datepicker-table-muted {
   }
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Nestable
  ========================================================================== */
@@ -1035,6 +1014,7 @@ a.uk-datepicker-table-muted {
   }
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Notify
  ========================================================================== */
@@ -1147,6 +1127,44 @@ a.uk-datepicker-table-muted {
   border-color: rgba(216, 80, 48, 0.3);
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+   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;
+}
+
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Search
  ========================================================================== */
@@ -1363,6 +1381,108 @@ a.uk-datepicker-table-muted {
   }
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+   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. Create position context
+ * 3. Prevent `inline-block` consequences
+ * 4. Corrects `max-width` behavior if padding and border are used
+ */
+
+.uk-slidenav-position {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  position: relative;
+  /* 3 */
+  max-width: 100%;
+  /* 4 */
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  .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
+ */
+
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Sortable
  ========================================================================== */
@@ -1424,6 +1544,7 @@ a.uk-datepicker-table-muted {
   }
 }
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Sticky
  ========================================================================== */
@@ -1452,6 +1573,7 @@ a.uk-datepicker-table-muted {
  * Faster animations
  */
 
+/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Upload
  ========================================================================== */
@@ -1462,109 +1584,3 @@ a.uk-datepicker-table-muted {
 .uk-dragover {
   box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
 }
-
-/* ========================================================================
-   Component: Flex
- ========================================================================== */
-
-.uk-flex {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-/* Alignment
- ========================================================================== */
-/*
- * Vertical alignment
- * Default value is `stretch`
- */
-
-.uk-flex-top {
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-}
-
-.uk-flex-middle {
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-.uk-flex-bottom {
-  -ms-flex-align: end;
-  -webkit-align-items: flex-end;
-  align-items: flex-end;
-}
-
-/*
- * Horizontal alignment
- * Default value is `flex-start`
- */
-
-.uk-flex-center {
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.uk-flex-right {
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-}
-
-/* ========================================================================
-   Component: Cover
- ========================================================================== */
-/*
- * Background image always covers and centers its element
- */
-
-.uk-cover-background {
-  background-position: 50% 50%;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-/*
- * Emulates image cover, works with video and image elements
- * 1. Parent container which clips resized object
- * 2. Resizes the object to always covers its container
- * 3. Reset the responsive image CSS
- * 4. Center object
- */
-/* 1 */
-
-.uk-cover {
-  overflow: hidden;
-}
-
-.uk-cover-object {
-  /* 2 */
-  width: auto;
-  height: auto;
-  min-width: 100%;
-  min-height: 100%;
-  /* 3 */
-  max-width: none;
-  /* 4 */
-  position: relative;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-/*
- * To center iframes use `data-uk-cover` JavaScript
- */
-
-[data-uk-cover] {
-  position: relative;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}