New Feature: Sergmented Buttons

toddwprice · Sep 30, 2011 · 9ee8561 · 9ee8561
1 parent f156369
commit 9ee8561
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 2 deletions.
diff --git a/css/apple.css b/css/apple.css
@@ -152,6 +152,73 @@ div.jsTouch div.toolbar h1{
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E));
 }
 
+/* Sergemted Button */
+
+ul.seg-button { 
+	display: table-row;
+    font: bold 13px Helvetica, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+	-webkit-border-radius: 5px; 
+}
+
+ul.seg-button li {
+	display: inline-block;
+	border-left: 1px solid #5b6572;
+    border-top: 1px solid #5b6572;
+    border-bottom: 1px solid #5b6572;
+    list-style-type: none;
+    padding: 4px;
+	margin: 0px auto;
+	background-color: #fff;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+	height: 17px;
+	text-shadow: #666666 1px 1px 1px;
+	overflow: hidden;
+}
+
+ul.seg-button li:first-child {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:first-child a.clicked {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:last-child {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	border-right: 1px solid #5b6572 !important;
+}
+
+ul.seg-button li:last-child a.clicked {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+
+ul.seg-button li a {
+    color: white !important;
+    text-decoration: none;
+    text-overflow: ellipsis;
+	text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+	margin: -4px !important;
+    padding: 5px !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+	text-shadow: #fffff 1px 1px 1px !important;
+}
+
+ul.seg-button li a.clicked {
+	color: white;
+	text-shadow: #555555 1px 1px 1px;
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7AD62B), to(#56961E));
+}
+
 /* CONTENT ITEMS */
 
 div.jsTouch div.content {

diff --git a/css/core.css b/css/core.css
@@ -271,6 +271,7 @@ div.overlay div.content div.simple-title {
 	border: solid 3px rgb(90,90,90);
 	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(104,104,104,1)), color-stop(0.5, rgba(40,40,40,1)), color-stop(0.5, rgba(20,20,20,1)), to(rgba(40,40,40,1))); 
 	color: #fff;
+	text-shadow: #000000 1px 1px 1px;
 	font: bold 16px Helvetica, Sans-serif;
 	margin: 4px;
 	padding: 8px;

diff --git a/css/ipad-dark.css b/css/ipad-dark.css
@@ -151,6 +151,73 @@ div.jsTouch div.toolbar h1{
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E));
 }
 
+/* Sergemted Button */
+
+ul.seg-button { 
+	display: table-row;
+    font: bold 13px Helvetica, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+	-webkit-border-radius: 5px; 
+}
+
+ul.seg-button li {
+	display: inline-block;
+	border-left: 1px solid #222222;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    list-style-type: none;
+    padding: 4px;
+	margin: 0px auto;
+	background-color: #fff;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
+	-webkit-box-shadow: 0px 1px 0px #666666;
+	height: 17px;
+	text-shadow: #666666 1px 1px 1px;
+	overflow: hidden;
+}
+
+ul.seg-button li:first-child {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:first-child a.clicked {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:last-child {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	border-right: 1px solid #222222 !important;
+}
+
+ul.seg-button li:last-child a.clicked {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+
+ul.seg-button li a {
+    color: white !important;
+    text-decoration: none;
+    text-overflow: ellipsis;
+	text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+	margin: -4px !important;
+    padding: 5px !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+	text-shadow: #fffff 1px 1px 1px !important;
+}
+
+ul.seg-button li a.clicked {
+	color: white;
+	text-shadow: #555555 1px 1px 1px;
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7AD62B), to(#56961E));
+}
+
 /* CONTENT ITEMS */
 
 div.jsTouch div.content {

diff --git a/css/ipad-light.css b/css/ipad-light.css
@@ -154,6 +154,74 @@ div.jsTouch div.toolbar h1{
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
 }
 
+/* Sergemted Button */
+
+ul.seg-button { 
+	display: table-row;
+    font: bold 13px Helvetica, Arial, sans-serif;
+    padding: 0px;
+    margin: 0px;
+	margin-top: -2px; 
+	-webkit-border-radius: 5px; 
+}
+
+ul.seg-button li {
+	display: inline-block;
+	border-left: 1px solid #555555;
+    border-top: 1px solid #555555;
+    border-bottom: 1px solid #555555;
+    list-style-type: none;
+    padding: 4px;
+	margin: 0px auto;
+	background-color: #fff;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#717882), color-stop(.04,#BCBDBF));
+	-webkit-box-shadow: 0px 1px 0px #cccccc;
+	height: 17px;
+	text-shadow: #666666 1px 1px 1px;
+	overflow: hidden;
+}
+
+ul.seg-button li:first-child {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:first-child a.clicked {
+	-webkit-border-top-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+ul.seg-button li:last-child {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	border-right: 1px solid #555555 !important;
+}
+
+ul.seg-button li:last-child a.clicked {
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+
+ul.seg-button li a {
+    color: white !important;
+    text-decoration: none;
+    text-overflow: ellipsis;
+	text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+	margin: -4px !important;
+    padding: 5px !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+	text-shadow: #fffff 1px 1px 1px !important;
+}
+
+ul.seg-button li a.clicked {
+	color: white;
+	text-shadow: #555555 1px 1px 1px;
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
+}
+
 /* CONTENT ITEMS */
 
 div.jsTouch div.content {

diff --git a/pages/buttons.html b/pages/buttons.html
@@ -1,6 +1,11 @@
 <div class="toolbar">
-	<h1>Buttons</h1>
-	<a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a>
+	<div style="width: 275px; margin: 0 auto;">
+		<ul class="seg-button">
+			<li><a style="width: 80px">Segmented</a></li>
+			<li><a style="width: 80px">Button</a></li>
+			<li><a style="width: 80px" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });">Go Back</a></li>
+		</ul>
+	</div>
 </div>
 <div class="content">
 <div>