Permalink
Browse files

Form styling updates.

  • Loading branch information...
1 parent e32bcb8 commit b7b1f69be9f13e3b471767340a8666d57460be92 @jeremyckahn committed Jun 24, 2012
Showing with 35 additions and 20 deletions.
  1. +1 −1 bin/app.js
  2. +5 −10 dev.html
  3. +1 −1 index.html
  4. +2 −3 src/ui/keyframe.js
  5. +26 −5 style.css
View
Oops, something went wrong.
View
@@ -46,23 +46,21 @@
<select id="y-easing" data-axis="y"></select>
</li>
<li>
- <hr>
<label for="duration">Duration:</label>
- <input id="duration" class="full-width" type="text" value="2000"></input>
+ <input id="duration" class="three-quarters" type="text" value="2000"></input>
</li>
<li>
- <label for="show-path">Show path:</label>
- <input id="show-path" type="checkbox" type="text" checked="checked"></input>
- </li>
- <li>
- <hr>
<label for="custom-1">Custom easing 1:</label>
<input id="custom-1" class="ease full-width" type="text" data-easename="customEase1"></input>
</li>
<li>
<label for="custom-2">Custom easing 2:</label>
<input id="custom-2" class="ease full-width" type="text" data-easename="customEase2"></input>
</li>
+ <li>
+ <label for="show-path">Show path:</label>
+ <input id="show-path" type="checkbox" type="text" checked="checked"></input>
+ </li>
</ul>
</li>
<li id="keyframe-controls">
@@ -76,9 +74,6 @@
<input id="css-name" class="full-width" type="text" value="stylie"></input>
</li>
<li>
- <hr>
- </li>
- <li>
<textarea></textarea>
</li>
<li>
View
@@ -1 +1 @@
-<!DOCTYPE html><html><head><title>Stylie. A graphical CSS animation tool.</title><link href='lib/rekapi-controls/rekapi-controls.css' rel='stylesheet' type='text/css'><link href='lib/dragon/jquery.dragon-slider.css' rel='stylesheet' type='text/css'><link href='style.css' rel='stylesheet' type='text/css'></head><body><div id="main-container"><header><h1><a href="https://github.com/jeremyckahn/stylie"><img src="img/ui/stylie_logo.png" alt="Stylie"></a></h1></header><div id="crosshairs"><canvas id="tween-path"></canvas><div id="rekapi-canvas"><div class="rekapi-actor"><img src="img/octocat.png"></div></div><div class="crosshair from" data-pos="from" data-percent="0"><div class="dashmark horiz"></div><div class="dashmark vert"></div></div><div class="crosshair to" data-pos="to" data-percent="100"><div class="dashmark horiz"></div><div class="dashmark vert"></div></div></div><div id="control-pane"><ul class="tabs"><li data-target="tween-controls"><a href="#">Tween</a></li><li data-target="keyframe-controls"><a href="#">Keyframes</a></li><li data-target="css-output"><a href="#">CSS</a></li><li data-target="html-input"><a href="#">HTML</a></li></ul><ul class="tabs-contents"><li id="tween-controls"><ul class="controls"><li><label for="x-easing">X:</label><select id="x-easing" data-axis="x"></select></li><li><label for="y-easing">Y:</label><select id="y-easing" data-axis="y"></select></li><li><hr><label for="duration">Duration:</label><input id="duration" class="full-width" type="text" value="2000"></input></li><li><label for="show-path">Show path:</label><input id="show-path" type="checkbox" type="text" checked="checked"></input></li><li><hr><label for="custom-1">Custom easing 1:</label><input id="custom-1" class="ease full-width" type="text" data-easename="customEase1"></input></li><li><label for="custom-2">Custom easing 2:</label><input id="custom-2" class="ease full-width" type="text" data-easename="customEase2"></input></li></ul></li><li id="keyframe-controls"><ul class="controls"></ul></li><li id="css-output"><ul class="controls"><li><label for="css-name">Class name:</label><input id="css-name" class="full-width" type="text" value="stylie"></input></li><li><hr></li><li><textarea></textarea></li><li><ul class="checkboxes"><li><label><input id="moz-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>Mozilla</span></label></li><li><label><input id="webkit-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>Webkit</span></label></li><li><label><input id="w3-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>W3C</span></label></li></ul></li></ul></li><li id="html-input"><textarea></textarea></li></ul></div></div><script src="bin/libs.js"></script><script src="bin/app.js"></script></body></html>
+<!DOCTYPE html><html><head><title>Stylie. A graphical CSS animation tool.</title><link href='lib/rekapi-controls/rekapi-controls.css' rel='stylesheet' type='text/css'><link href='lib/dragon/jquery.dragon-slider.css' rel='stylesheet' type='text/css'><link href='style.css' rel='stylesheet' type='text/css'></head><body><div id="main-container"><header><h1><a href="https://github.com/jeremyckahn/stylie"><img src="img/ui/stylie_logo.png" alt="Stylie"></a></h1></header><div id="crosshairs"><canvas id="tween-path"></canvas><div id="rekapi-canvas"><div class="rekapi-actor"><img src="img/octocat.png"></div></div><div class="crosshair from" data-pos="from" data-percent="0"><div class="dashmark horiz"></div><div class="dashmark vert"></div></div><div class="crosshair to" data-pos="to" data-percent="100"><div class="dashmark horiz"></div><div class="dashmark vert"></div></div></div><div id="control-pane"><ul class="tabs"><li data-target="tween-controls"><a href="#">Tween</a></li><li data-target="keyframe-controls"><a href="#">Keyframes</a></li><li data-target="css-output"><a href="#">CSS</a></li><li data-target="html-input"><a href="#">HTML</a></li></ul><ul class="tabs-contents"><li id="tween-controls"><ul class="controls"><li><label for="x-easing">X:</label><select id="x-easing" data-axis="x"></select></li><li><label for="y-easing">Y:</label><select id="y-easing" data-axis="y"></select></li><li><label for="duration">Duration:</label><input id="duration" class="three-quarters" type="text" value="2000"></input></li><li><label for="custom-1">Custom easing 1:</label><input id="custom-1" class="ease full-width" type="text" data-easename="customEase1"></input></li><li><label for="custom-2">Custom easing 2:</label><input id="custom-2" class="ease full-width" type="text" data-easename="customEase2"></input></li><li><label for="show-path">Show path:</label><input id="show-path" type="checkbox" type="text" checked="checked"></input></li></ul></li><li id="keyframe-controls"><ul class="controls"></ul></li><li id="css-output"><ul class="controls"><li><label for="css-name">Class name:</label><input id="css-name" class="full-width" type="text" value="stylie"></input></li><li><textarea></textarea></li><li><ul class="checkboxes"><li><label><input id="moz-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>Mozilla</span></label></li><li><label><input id="webkit-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>Webkit</span></label></li><li><label><input id="w3-toggle" class="class-toggle" type="checkbox" checked="checked"></input><span>W3C</span></label></li></ul></li></ul></li><li id="html-input"><textarea></textarea></li></ul></div></div><script src="bin/libs.js"></script><script src="bin/app.js"></script></body></html>
View
@@ -25,13 +25,12 @@ define(['exports', 'src/ui/incrementer-field'],
,'<h3></h3>'
,'<label>'
,'<span>Left:</span>'
- ,'<input class="third-width keyframe-attr-x" type="text" data-keyframeattr="x"></input>'
+ ,'<input class="quarter-width keyframe-attr-x" type="text" data-keyframeattr="x"></input>'
,'</label>'
,'<label>'
,'<span>Top:</span>'
- ,'<input class="third-width keyframe-attr-y" type="text" data-keyframeattr="y"></input>'
+ ,'<input class="quarter-width keyframe-attr-y" type="text" data-keyframeattr="y"></input>'
,'</label>'
- ,'<hr>'
,'</li>'
].join('')
View
@@ -33,7 +33,7 @@ input[type="text"] {
ul.controls li {
display: block;
font-size: 1.1em;
- padding-top: 6px;
+ padding: 6px 0;
}
#fork-me-link {
@@ -220,9 +220,22 @@ canvas {
}
#control-pane label {
- padding-right: 6px;
+ padding-right: 2px;
}
+ #control-pane .keyframe label {
+ padding-right: 54px;
+ }
+
+ #control-pane label:nth-of-type(2) {
+ float: right;
+ padding-right: 0;
+ }
+
+ #control-pane span {
+ padding-right: 12px;
+ }
+
#control-pane select {
background: #fff;
font-size: 0.8em;
@@ -245,14 +258,21 @@ canvas {
font-size: 1.1em;
}
+ #control-pane input.three-quarters {
+ display: block;
+ margin-top: 6px;
+ width: 200px;
+ }
+
#control-pane textarea,
#control-pane input.full-width {
display: block;
+ margin-top: 6px;
width: 270px;
}
- #control-pane input.third-width {
- width: 90px;
+ #control-pane input.quarter-width {
+ width: 60px;
}
#control-pane input.quarter-width {
@@ -389,8 +409,9 @@ canvas {
}
- .checkboxes li {
+ ul.controls .checkboxes li {
float: left;
+ padding-bottom: 0;
}
.checkboxes label {

0 comments on commit b7b1f69

Please sign in to comment.