From 184610c25c93540e2cb3b7e3b574c59921e94645 Mon Sep 17 00:00:00 2001 From: Ricard Sole Date: Sun, 13 Jul 2014 19:37:57 +0200 Subject: [PATCH 1/2] fixes #1 for now (the best solution I could think of) Refactored CSS to make it possible to change color/opacity with just one class. Also added the pertinent instructions in the README.md --- README.md | 24 +++++++++++++++++++++--- demo.html | 12 ++++-------- index.html | 6 +++--- main.js | 6 ++++++ style.css | 9 ++------- 5 files changed, 36 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 3dfcec4..11b82c5 100644 --- a/README.md +++ b/README.md @@ -24,10 +24,28 @@ bower install slider-polymer --save - - - ``` + +### Adding a brand accent color to the slider +Just add the following to `` 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 `` 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/demo.html b/demo.html index 81362e3..096863b 100644 --- a/demo.html +++ b/demo.html @@ -7,23 +7,19 @@

Polymer Slider

+ + + - - - diff --git a/index.html b/index.html index 2f6eefd..9a233b8 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@
-
- +
+
diff --git a/main.js b/main.js index 2a5625c..8f5feb5 100644 --- 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 index 76fcde6..5a25437 100644 --- a/style.css +++ b/style.css @@ -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,15 +35,11 @@ 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; @@ -50,8 +47,6 @@ transition: all .3s ease-in-out; } -.controls:hover { border-color: rgba(255, 255, 255, .4); } - .slider-img { width: 100%; height: 100%; From bc62cea15e5a5f71e2b6798ef2c58bbfb8f3923a Mon Sep 17 00:00:00 2001 From: Ricard Sole Date: Mon, 14 Jul 2014 19:08:36 +0200 Subject: [PATCH 2/2] removed polymer import, changed default size, fixed bower.json I removed the Polymer import in the `index.html` file because it should not be there anyway, users should import in their own `index.html`, changed the demo size to `1000x500` because it works better when testing, and added the `main.js` to `bower.json` --- bower.json | 2 +- demo.html | 24 ++++++++++-------------- index.html | 2 -- style.css | 13 +++++++------ 4 files changed, 18 insertions(+), 23 deletions(-) diff --git a/bower.json b/bower.json index a1a40e0..5b6b82b 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,7 @@ "Ricard Sole " ], "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 index 096863b..800e326 100644 --- a/demo.html +++ b/demo.html @@ -4,29 +4,25 @@ slider polymer component +

Polymer Slider

- - - - - - - - - - - - - + + + + + + + diff --git a/index.html b/index.html index 9a233b8..0d1cd81 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,3 @@ - -