Permalink
Browse files

Adding selected button state, matching the focus state of the width d…

…isplay
  • Loading branch information...
1 parent dcee63b commit 0d43b32875eeb2963a0b39dab838ebe9a0d0194b @beaucollins committed May 1, 2012
Showing with 31 additions and 9 deletions.
  1. +13 −3 public/app.js
  2. +18 −6 public/style.css
View
@@ -4,17 +4,18 @@ var iframe = document.querySelector('iframe'),
section = document.querySelector('section'),
loadIndicator = document.querySelector('#load-indicator'),
canvas = document.createElement('canvas'),
- guides = [];
+ guides = [],
+ buttons;
section.appendChild(canvas);
-
-Array.prototype.forEach.call(document.querySelectorAll('li'), function(li){
+buttons = Array.prototype.map.call(document.querySelectorAll('li'), function(li){
li.addEventListener('click', function(e){
e.preventDefault();
setIframeWidth(li.textContent);
});
guides.push(parseInt(li.textContent));
+ return li;
});
guides = guides.sort(function(a, b){
@@ -41,6 +42,15 @@ var setIframeWidth = function(w){
holder.style.width = w + 'px';
span.textContent = w + 'px';
+
+ buttons.forEach(function(button){
+ if (parseInt(button.textContent) == w) {
+ button.classList.add('selected');
+ } else {
+ button.classList.remove('selected');
+ }
+ });
+
return w;
}
View
@@ -78,8 +78,8 @@ ul {
top: 0;
text-align: center;
list-style: none;
- padding: 0 10px;
- margin: 10px 0;
+ padding: 12px;
+ margin: 0;
cursor: default;
display:inline-block;
}
@@ -112,7 +112,12 @@ li:active {
li.selected {
color: #FFF;
- background: #666;
+ background: #888;
+ background: linear-gradient(#777, #888 90%, #777);
+ background: -webkit-linear-gradient(#777, #888 90%, #777);
+ background: -moz-linear-gradient(#777, #888);
+ border: 1px solid #666;
+ text-shadow: 0 -1px 0 #000;
}
section {
@@ -181,13 +186,20 @@ span:active, span:focus {
border: none;
padding: 3px 11px;
cursor: text;
- background: #AAA;
- background: -webkit-linear-gradient(#aaa, #BBB, #AAA);
+ background: #777;
+ background: -webkit-linear-gradient(#777, #999 30%, #999 70%, #777);
+ background: -moz-linear-gradient(#777, #999 30%, #999 70%, #777);
+ background: linear-gradient(#777, #999 30%, #999 70%, #777);
box-shadow: inset 0 0 1px hsla(0, 0%, 0%, 0.3), 0 1px 0 #FFF ;
outline: none;
color: #FFF;
text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.5);
}
+
+span::selection, span::-moz-selection {
+ background: hsla(0, 100%, 100%%, 0.2);
+ border-radius: 2px;
+}
canvas {
position: absolute;
@@ -249,7 +261,7 @@ input[type="submit"] {
text-shadow: 0 1px 0 hsla(0,0%,100%,0.5);
}
-input[type="submit"]:active {
+input[type="submit"]:active, input[type="submit"]:focus {
background: linear-gradient(#AAA, #BBB);
background: -webkit-linear-gradient(#AAA, #BBB);
background: -moz-linear-gradient(#AAA, #BBB);

0 comments on commit 0d43b32

Please sign in to comment.