Skip to content

Commit

Permalink
UI cleanup; added new button style
Browse files Browse the repository at this point in the history
  • Loading branch information
@briandoll
briandoll committed Feb 24, 2011
1 parent 809e62d commit a36eb97
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 13 deletions.
61 changes: 61 additions & 0 deletions css3buttons.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
a.button { display: inline-block; padding: 3px 5px 3px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; }
a.button.primary { font-weight: bold }
a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active,
a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active { top: 1px }
a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
a.button.negative:active,
a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 2px 10px 2px 10px; }
a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; }
a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
a.button.left:active,
a.button.middle:active,
a.button.right:active { top: 0px }
a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('images/css3buttons_icons.png'); background-repeat: no-repeat; }
a.big.button span.icon { top: 0px }
a.button span.icon.magnifier { background-position: -1px 0px }
a.button:hover span.icon.magnifier { background-position: -17px 0px }
a.button span.icon.mail { background-position: -37px 0px }
a.button:hover span.icon.mail { background-position: -55px 0px }
a.button span.icon.loop { background-position: -74px 0px }
a.button:hover span.icon.loop { background-position: -89px 0px }
a.button span.icon.reload { background-position: -105px 0px }
a.button:hover span.icon.reload { background-position: -124px 0px }
a.button span.icon.calendar { background-position: -144px 0px }
a.button:hover span.icon.calendar { background-position: -163px 0px }
a.button span.icon.rss { background-position: -182px 0px }
a.button:hover span.icon.rss { background-position: -200px 0px }
a.button span.icon.chat { background-position: -220px 0px }
a.button:hover span.icon.chat { background-position: -240px 0px }
a.button span.icon.pen { background-position: -259px 0px }
a.button:hover span.icon.pen { background-position: -277px 0px }
a.button span.icon.key { background-position: -298px 0px }
a.button:hover span.icon.key { background-position: -315px 0px }
a.button span.icon.cog { background-position: -336px 0px }
a.button:hover span.icon.cog { background-position: -354px 0px }
a.button span.icon.user { background-position: -372px 0px }
a.button:hover span.icon.user { background-position: -388px 0px }
a.button span.icon.trash { background-position: 1px -19px }
a.button:hover span.icon.trash { background-position: -17px -19px }
a.button span.icon.lock { background-position: -38px -19px }
a.button:hover span.icon.lock { background-position: -55px -19px }
a.button span.icon.unlock { background-position: -74px -19px }
a.button:hover span.icon.unlock { background-position: -90px -19px }
a.button span.icon.comment { background-position: -107px -19px }
a.button:hover span.icon.comment { background-position: -124px -19px }
a.button span.icon.plus { background-position: -145px -19px }
a.button:hover span.icon.plus { background-position: -164px -19px }
a.button span.icon.cross { background-position: -183px -19px }
a.button:hover span.icon.cross { background-position: -201px -19px }
a.button span.icon.check { background-position: -243px -19px }
a.button:hover span.icon.check { background-position: -223px -19px }
a.button span.icon.tag { background-position: -262px -19px }
a.button:hover span.icon.tag { background-position: -279px -20px }
a.button span.icon.heart { background-position: -296px -19px }
a.button:hover span.icon.heart { background-position: -315px -19px }
a.button span.icon.home { background-position: -337px -19px }
a.button:hover span.icon.home { background-position: -356px -19px }
Binary file added images/css3buttons_backgrounds.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/css3buttons_icons.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 16 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Get your protein!</title>
<link rel="stylesheet" href="protein.css" type="text/css" />
<link rel="stylesheet" href="jquery-ui-1.8.9.custom.css" type="text/css">
<link rel="stylesheet" href="protein.css" type="text/css" />
<link rel="stylesheet" href="css3buttons.css" media="screen">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
<script src="jquery-ui-1.8.9.custom.min.js"></script>
</head>
<body>
<h1>OK, I'm eating Paleo, but how much protein should I be eating?</h1>
<p>Well, tell us a little about yourself:</p>

<div id="container">
<h1>I eat Paleo, but how much protein do I need every day?</h1>
<p>First, tell us a little about yourself:</p>
<div id="weight">I currently weigh <input type="text" id="bodyweight" class="" value="100"> pounds.</div>
<div id="percentage">I'm aiming to get
<select id="protein_per_pound_of_bodyweight" class="">
Expand All @@ -26,10 +28,12 @@ <h1>OK, I'm eating Paleo, but how much protein should I be eating?</h1>
<p>Great! You'll need <input type="text" id="protein_goal" value="100"> grams of protein.</p>
<p>BUT HOW MUCH FOOD IS THAT??!?!?! Let's find out!</p>

<div>Let's find out. Itemize a typical day's protein and see how much food you'll need.</div>
<div>Itemize a typical day's protein and see how much food you'll need:</div>
<div id="congrats">Congrats! This mix of proteins meets your goal.</div>
<div id="progressbar"></div>
<div id="food">
<ul><button id="add" >Add a food item</button>
<a href="javascript:void(false)" class="button" id="add"><span class="plus icon"></span>Add Food Item</a>
<ul>
<li>
<input type="text" class="qty" value="">
<select class="protein_source">
Expand All @@ -43,7 +47,7 @@ <h1>OK, I'm eating Paleo, but how much protein should I be eating?</h1>
</li>
</ul>
</div>
<div id="progressbar"></div>
<script src="protein.js"></script>
</div>
</body>
</html>
21 changes: 20 additions & 1 deletion protein.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,23 @@ body {
padding: 0px;
}

#container {
width:800px;
margin-left: auto;
margin-right: auto;
}

h1 {
font: 24pt Helvetica, sans-serif;
color: #000;
line-height: 2;
}

ul {
list-style-type: none;
width: 60%;
padding-left: 0px;
padding-top:0px;
margin-top: 20px;
}

#protein_goal {
Expand All @@ -18,4 +31,10 @@ h1 {

#bodyweight {

}

#add {
float:right;
margin-right:50%;
margin-top:8px;
}

0 comments on commit a36eb97

Please sign in to comment.