From a55f8bca8f04d5c4e93526d4ffae6820395cfbd9 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Thu, 24 Mar 2016 11:42:00 -0400
Subject: [PATCH] Target: modal, prettify modal open button

---
 website/src/examples/modal/app.es6            |  2 +-
 website/src/examples/modal/index.ejs          |  2 +-
 website/themes/uppy/source/css/_examples.scss | 17 +++++++++++++-
 website/themes/uppy/source/css/_mixins.scss   | 11 ---------
 website/themes/uppy/source/css/_utils.scss    | 23 +++++++++++++++++++
 website/themes/uppy/source/css/main.scss      |  2 +-
 6 files changed, 42 insertions(+), 15 deletions(-)
 delete mode 100644 website/themes/uppy/source/css/_mixins.scss
 create mode 100644 website/themes/uppy/source/css/_utils.scss

diff --git a/website/src/examples/modal/app.es6 b/website/src/examples/modal/app.es6
index 5748778a9..bdaf9f7ad 100644
--- a/website/src/examples/modal/app.es6
+++ b/website/src/examples/modal/app.es6
@@ -11,5 +11,5 @@ uppy
   .use(Dummy, {target: Modal})
   .use(Present, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
-  .use(ProgressDrawer)
+  .use(ProgressDrawer, {target: Modal})
   .run()
diff --git a/website/src/examples/modal/index.ejs b/website/src/examples/modal/index.ejs
index 92e03c3f2..8847336ae 100644
--- a/website/src/examples/modal/index.ejs
+++ b/website/src/examples/modal/index.ejs
@@ -6,7 +6,7 @@ order: 1
 ---
 
 {% blockquote %}
-Making a modal dialog great again.
+Making modal dialog great again.
 {% endblockquote %}
 
 <link rel="stylesheet" href="app.css">
diff --git a/website/themes/uppy/source/css/_examples.scss b/website/themes/uppy/source/css/_examples.scss
index 1b5ec670f..6e1f73401 100644
--- a/website/themes/uppy/source/css/_examples.scss
+++ b/website/themes/uppy/source/css/_examples.scss
@@ -9,7 +9,22 @@
   line-height: 1.4;
   width: 100%;
   min-height: 150px;
-  // overflow: hidden;
   display: none;
   padding: 10px 10px;
 }
+
+.UppyModalOpenerBtn {
+  @include reset-button;
+  padding: 10px 15px;
+  border: 1px solid $color-primary;
+  background-transition: all .3s;
+  font-size: 13px;
+  color: $color-primary;
+  cursor: pointer;
+  border-radius: 15px;
+
+  &:hover {
+    background-color: $color-primary;
+    color: $color-white;
+  }
+}
diff --git a/website/themes/uppy/source/css/_mixins.scss b/website/themes/uppy/source/css/_mixins.scss
deleted file mode 100644
index 7045e2f99..000000000
--- a/website/themes/uppy/source/css/_mixins.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin zoom() {
-  transform: scale(1.05);
-}
diff --git a/website/themes/uppy/source/css/_utils.scss b/website/themes/uppy/source/css/_utils.scss
new file mode 100644
index 000000000..40fe5cb18
--- /dev/null
+++ b/website/themes/uppy/source/css/_utils.scss
@@ -0,0 +1,23 @@
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin zoom() {
+  transform: scale(1.05);
+}
+
+@mixin reset-button() {
+  background: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+}
diff --git a/website/themes/uppy/source/css/main.scss b/website/themes/uppy/source/css/main.scss
index 78be50f51..9c6db7940 100644
--- a/website/themes/uppy/source/css/main.scss
+++ b/website/themes/uppy/source/css/main.scss
@@ -1,5 +1,5 @@
 @import '_settings.scss';
-@import '_mixins.scss';
+@import '_utils.scss';
 @import '_grid.scss';
 @import '_syntax.scss';
 @import '_common.scss';