Skip to content

Accessibility tweaks #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hojberg merged 1 commit into from
Apr 14, 2012
Merged

Accessibility tweaks #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
public-min
*.log
.DS_Store
17 changes: 9 additions & 8 deletions public/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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