commit mui#7: add merry xmas

DavidNgv · Dec 8, 2016 · bad765c · bad765c
1 parent 568d42b
commit bad765c
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 0 deletions.
diff --git a/david-docs/src/app/components/pages/Home.js b/david-docs/src/app/components/pages/Home.js
@@ -8,6 +8,8 @@ import typography from 'material-ui/styles/typography';
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import {cyan500, grey200, darkWhite} from 'material-ui/styles/colors';
 
+require('./home.css');
+
 class HomePage extends Component {
 
   static propTypes = {
@@ -83,6 +85,44 @@ class HomePage extends Component {
     return (
       <FullWidthSection style={styles.root}>
         {/*<img style={styles.svgLogo} src="images/material-ui-logo.svg" />*/}
+        <ul id="wire">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
         <img style={styles.svgLogo} src="images/store-man-logo-2.png" />
         <div style={styles.tagline}>
           <h1 style={styles.h1}>EzyStoreMan</h1>

diff --git a/david-docs/src/app/components/pages/home.css b/david-docs/src/app/components/pages/home.css
@@ -0,0 +1,67 @@
+
+#wire{
+    text-align: center;
+    white-space: nowrap;
+    position: absolute;
+    /*position: relative;*/
+    padding: 0;
+    width: 100%;
+    top: -40px;
+    border-bottom: 3px solid #222;
+    height: 100px;
+}
+
+#wire li {
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    width: 10px;
+    height: 20px;
+    border-radius: 50%;
+    margin: 0px 15px;
+    top: 102px;
+    display: inline-block;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    animation-iteration-count:infinite;
+    animation-name: even-flash;
+}
+
+#wire li:nth-child(odd){
+    animation-name: odd-flash;
+}
+
+#wire li:before {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 4px;
+    top: -5px;
+    left: 0px;
+    background: #444;
+}
+
+@keyframes even-flash {
+    0%, 100% {
+        background: rgba(255,230,65,1);
+        box-shadow: 0px 2px 20px 4px rgba(255,230,65,1);
+    }
+    50% {
+        background: rgba(255,230,65,0.5);
+        box-shadow: 0px 2px 20px 4px rgba(255,230,65,0.3);
+    }
+}
+
+@keyframes odd-flash {
+    50% {
+        background: rgba(255,65,185,1);
+        box-shadow: 0px 2px 20px 4px rgba(255,65,185,1);
+    }
+    0%,100% {
+        background: rgba(255,65,185,0.5);
+        box-shadow: 0px 2px 20px 4px rgba(255,65,185,0.3);
+    }
+}