Skip to content

Commit

Permalink
Merge pull request #19 from barnabyc/accessibility_tweaks
Browse files Browse the repository at this point in the history 
Accessibility tweaks
  • Loading branch information
@hojberg
hojberg committed Apr 14, 2012
2 parents 1a941e6 + 30b340a commit ec0ad81
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 24 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
@@ -1,3 +1,4 @@
node_modules
public-min
*.log
.DS_Store
17 changes: 9 additions & 8 deletions public/css/app.css
View file
Expand Up @@ -7,7 +7,7 @@ ul, ol, form { margin: 0; padding: 0; }
ul, ol { list-style-type: none; }
h1 { margin: 0; padding: 0; }
h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
input { border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
input { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }

/* =LAYOUT
====================================================== */
Expand Down Expand Up @@ -36,17 +36,18 @@ input { border: 1px solid #777; box-shadow: inset 0 1px
.logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* configuration */
.configuration { margin-top: 20px; }
.configuration .section { float: left; width: 195px; }
.configuration .section li { margin-bottom: 5px; }
.configuration .section label { display: inline-block; width: 100px; }
.configuration { margin-top: 20px; }
.configuration .section { float: left; width: 195px; font-size: 20px }
.configuration .section.positions { width: 140px; margin-left: 14px }
.configuration .section li { margin-bottom: 5px; }
.configuration .section label { display: inline-block; width: 112px; }

.configuration .size,
.configuration .border_width { width: 25px; text-align: right; }
.configuration .border_width { width: 28px; text-align: right; }

.configuration .color { width: 60px; }
.configuration .color { width: 65px; text-align: center }

.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }

/* result_code */
.result_code { white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
.result_code { position: relative; white-space: pre; padding: 10px; float: right; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
30 changes: 15 additions & 15 deletions public/index.html
View file
Expand Up @@ -20,33 +20,33 @@ <h1 class='logo'>css arrow please!</h1>
<form class='configuration'>
<h2>Arrow configuration</h2>
<div class='clr'>
<ol class='section'>
<ol class='section positions'>
<li>
<label>Position</label>
<select class='position'>
<option value='top'>Top</option>
<option value='right'>Right</option>
<option value='bottom'>Bottom</option>
<option value='left'>Left</option>
</select>
<label><input type="radio" name="position" value="top" class="position" /> Top</label>
<label><input type="radio" name="position" value="right" class="position" /> Right</label>
<label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
<label><input type="radio" name="position" value="left" class="position" /> Left</label>
</li>
</ol>
<ol class='section'>
<li>
<label>Size</label>
<input class='size' /><span class='unit'>px</span>
<label for='size'>Size</label>
<input class='size' id='size' /><span class='unit'>px</span>
</li>
<li>
<label>Color</label>
<input class='base_color color {hash:true,caps:false}' />
<label for='color'>Color</label>
<input class='base_color color {hash:true,caps:false}' id='color' />
</li>
</ol>
<ol class='section'>
<li>
<label>Border width</label>
<input class='border_width' /><span class='unit'>px</span>
<label for='border_width'>Border width</label>
<input class='border_width' id='border_width' /><span class='unit'>px</span>
</li>
<li>
<label>Border color</label>
<input class='border_color color {hash:true,caps:false}' />
<label for='border_color'>Border color</label>
<input class='border_color color {hash:true,caps:false}' id='border_color' />
</li>
</ol>
</div>
Expand Down
2 changes: 1 addition & 1 deletion public/js/lib/views/arrow_configuration_view.js
View file
Expand Up @@ -37,7 +37,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
var container = this.container,
model = this.model;

container.find('.position').val( model.get('position') );
container.find('.position').val([ model.get('position') ]);
container.find('.size').val( model.get('size') );
container.find('.base_color').val( model.get('color') );
container.find('.border_width').val( model.get('borderWidth') );
Expand Down

0 comments on commit ec0ad81

Please sign in to comment.