Merge branch 'gh-pages'

rwu823 · Jun 5, 2016 · e99bf97 · e99bf97
2 parents 9e9ca4a + dc562f3
commit e99bf97
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -13,14 +13,26 @@
     color: #555;
   }
   header {
-    background: linear-gradient(to right, #2c9fc4, #00b9a2) ;
+    background: linear-gradient(to right, rgb(192,162,248), rgb(110, 184, 251));
     color: #fff;
     display: flex;
     height: 220px;
     align-items: center;
     font-size: 20px;
     justify-content: center;
     flex-direction: column;
+    position: relative;
+  }
+  header:after {
+    content: '';
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    background-color: rgba(255, 255, 255, .2);
+    border-radius: 50%;
+    top: -20%;
+    left: 50%;
+    pointer-events: none;
   }
   header a {
     display: inline-block;

diff --git a/demo/index.js b/demo/index.js
@@ -11,7 +11,7 @@ class App extends React.Component {
     return (
       <div>
         <h2>Basic example</h2>
-        <p>Works with bootstrap</p>
+        <p>Works with Bootstrap buttons</p>
 
         <div className="btn-wrap">
           <Ripples>
@@ -56,6 +56,14 @@ class App extends React.Component {
             <span className="btn btn-default">Default</span>
           </Ripples>
         </div>
+
+        <h2>The normal text content</h2>
+        <Ripples color="#c9302c" during={1200}>
+          <blockquote>
+            Ripple touch effect was introduced with material design in Android 5.0 (API level 21).
+            Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. For example, buttons now display a ripple effect when they are touched-this is the default touch feedback animation in Android 5.0. Ripple animation is implemented by the new RippleDrawable class. The ripple effect can be configured to end at the bounds of the view or extend beyond the bounds of the view.
+          </blockquote>
+        </Ripples>
       </div>
     )
   }

diff --git a/demo/react-ripples.js b/demo/react-ripples.js
@@ -8159,7 +8159,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        _react2.default.createElement(
 	          'p',
 	          null,
-	          'Works with bootstrap'
+	          'Works with Bootstrap buttons'
 	        ),
 	        _react2.default.createElement(
 	          'div',
@@ -8268,6 +8268,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	              'Default'
 	            )
 	          )
+	        ),
+	        _react2.default.createElement(
+	          'h2',
+	          null,
+	          'The normal text content'
+	        ),
+	        _react2.default.createElement(
+	          Ripples,
+	          { color: '#c9302c', during: 1200 },
+	          _react2.default.createElement(
+	            'blockquote',
+	            null,
+	            'Ripple touch effect was introduced with material design in Android 5.0 (API level 21). Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. For example, buttons now display a ripple effect when they are touched-this is the default touch feedback animation in Android 5.0. Ripple animation is implemented by the new RippleDrawable class. The ripple effect can be configured to end at the bounds of the view or extend beyond the bounds of the view.'
+	          )
 	        )
 	      );
 	    }