Merge branch 'master' of https://github.com/rcsole/slider-polymer

iamricard · Jul 14, 2014 · c83655b · c83655b
2 parents 2937850 + b7a9519
commit c83655b
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -24,10 +24,28 @@ bower install slider-polymer --save
       <img src="http://lorempixel.com/1200/500/people/3">
       <img src="http://lorempixel.com/1200/500/people/4">
       <img src="http://lorempixel.com/1200/500/people/5">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/5">
     </slider-component>
   </body>
 </html>
 ```
+
+### Adding a brand accent color to the slider
+Just add the following to `<head>` or to your css file.
+
+```css
+slider-component::shadow .accent { background-color: CUSTOM_COLOR_HERE; }
+
+/* For the :hover effect */
+slider-component::shadow .accent:hover { background-color: CUSTOM_COLOR_HERE; }
+```
+
+### Changing the opacity
+Just add the following to `<head>` or to your css file.
+
+```css
+/* Base opacity */
+slider-component::shadow .accent { opacity: CUSTOM_VALUE_HERE; }
+
+/* Opacity on :hover */
+slider-component::shadow .accent:hover { opacity: CUSTOM_VALUE_HERE; }
+```
diff --git a/bower.json b/bower.json
@@ -5,7 +5,7 @@
     "Ricard Sole <ricard.solecasas@gmail.com>"
   ],
   "description": "A customizable slider using web components (Polymer.js) without jQuery",
-  "main": "Slider.js",
+  "main": "main.js",
   "keywords": [
     "slider",
     "polymer",

diff --git a/demo.html b/demo.html
@@ -4,33 +4,25 @@
     <title>slider polymer component</title>
 
     <script src="bower_components/platform/platform.js"></script>
+    <link rel="import" href="bower_components/polymer/polymer.html">
     <link rel="import" href="index.html">
 
     <style>
-      body {
-        background-color: #3c3c3c;
-        color: #ccc;
-        font-family: Arial;
-      }
+      slider-component::shadow .bullet { opacity: .6; }
+      slider-component::shadow .accent:hover { opacity: 1; background-color: #00ff00; }
     </style>
   </head>
   <body>
     <h1>Polymer Slider</h1>
 
     <slider-component>
-      <img src="http://lorempixel.com/1200/500/people/1">
-      <img src="http://lorempixel.com/1200/500/people/2">
-      <img src="http://lorempixel.com/1200/500/people/3">
-      <img src="http://lorempixel.com/1200/500/people/4">
-      <img src="http://lorempixel.com/1200/500/people/5">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/5">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/3">
-      <img src="http://lorempixel.com/1200/500/people/6">
-      <img src="http://lorempixel.com/1200/500/people/4">
-      <img src="http://lorempixel.com/1200/500/people/9">
+      <img src="http://lorempixel.com/1000/500/people/9">
+      <img src="http://lorempixel.com/1000/500/people/5">
+      <img src="http://lorempixel.com/1000/500/people/6">
+      <img src="http://lorempixel.com/1000/500/people/3">
+      <img src="http://lorempixel.com/1000/500/people/1">
+      <img src="http://lorempixel.com/1000/500/people/2">
+      <img src="http://lorempixel.com/1000/500/people/4">
     </slider-component>
 
   </body>

diff --git a/index.html b/index.html
@@ -1,17 +1,15 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-
 <polymer-element name="slider-component">
   <template>
     <link rel="stylesheet" href="style.css">
 
     <div id="container">
-      <div data-img="left" on-click="{{ slide }}" class="controls" id="left"></div>
-      <div data-img="right" on-click="{{ slide }}" class="controls" id="right"></div>
+      <div data-img="left" on-click="{{ slide }}" class="controls accent" id="left"></div>
+      <div data-img="right" on-click="{{ slide }}" class="controls accent" id="right"></div>
 
       <ul id="bullets" class="controls">
         <template repeat="{{ image, index in images }}">
           <li>
-            <a on-click="{{ slide }}" class="bullet" data-img="{{ index }}" href="javascript:;"></a>
+            <a on-click="{{ slide }}" class="bullet accent" data-img="{{ index }}" href="javascript:;"></a>
           </li>
         </template>
       </ul>

diff --git a/main.js b/main.js
@@ -45,6 +45,12 @@
           this.images[this.current].classList.add('show');
           break;
       }
+
+      this.applyAccent();
+    },
+
+    applyAccent: function() {
+      //
     }
   });
 

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 #container {
   position:relative;
   height: 500px;
-  width: 1200px;
+  width: 1000px;
 }
 
 #left { left: 0; }
@@ -15,7 +15,8 @@
   width: 7.5%;
 }
 
-#left:hover, #right:hover { background-color: rgba(255, 255, 255, .6); }
+.accent { opacity: .2; background-color: rgba(255, 255, 255, 1); }
+.accent:hover { opacity: .8; }
 
 #bullets {
   text-align: center;
@@ -34,33 +35,28 @@
   display: inline-block;
   width: .9rem;
   height: .9rem;
-  background-color: rgba(255, 255, 255, .5);
   border-radius: 50%;
 }
 
-.bullet:hover { background-color: rgba(255, 255, 255, 1); }
-
 .controls {
   z-index: 2;
-  border: 1px solid rgba(255, 255, 255, .2);
   position: absolute;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
-.controls:hover { border-color: rgba(255, 255, 255, .4); }
-
 .slider-img {
   width: 100%;
   height: 100%;
   opacity: 0;
-  position:absolute;
+  position: absolute;
   left: 0;
-  -webkit-transition: opacity 1s ease-in-out;
-  -moz-transition: opacity 1s ease-in-out;
-  -o-transition: opacity 1s ease-in-out;
-  transition: opacity 1s ease-in-out;
+  -webkit-transition: opacity .5s ease-in-out;
+  -moz-transition: opacity .5s ease-in-out;
+  -o-transition: opacity .5s ease-in-out;
+  transition: opacity .5s ease-in-out;
 }
+
 .show { opacity: 100 !important; }