start working Button css & icon

sfroestl · Jan 24, 2013 · 97e5017 · 97e5017
1 parent f9ca8c1
commit 97e5017
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/source/css/style/_single-task.scss b/source/css/style/_single-task.scss
@@ -13,20 +13,61 @@
 		min-width: 35%;
 		color: $os-darkgrey;
 	}
-	button {
-		font-family: $os-sans;
-		font-size: 1em;
-		font-weight: normal;
-		text-transform: lowercase;
-		width: 100%;
-		@include rounded (2px);
-		background-color: $os-blue;
-	}
 	ul {
 		margin: 1em 0;
 	}
 }
+.btn-timer {
+	cursor:pointer;
+	width:97%;
+	margin: 0 1.5%;
+	padding: 8px 0px;
+	@include rounded(2px);
+	@include shadow(1px, 2px);
+	background-color: $os-blue;
+	color: $os-white;
+	line-height:31px;
+	text-decoration:none;
+	display:block;
+	.add-img{
+		text-align:center;
+		display: block;
+		float:left;
+		height: 31px;
+		width: 9.125%;
+		padding-left: 1.5%;
+		padding-right: 1.5%;
+		img {
+			height:15px;
+		}
+	}
+	.add-txt{
+		color: $os-lightestgrey;
+		text-decoration:none;
+		display: block;
+		float: left;
+		height:31px;
+		padding-left: 1.5%;
+		padding-right: 1.5%;
+		width: 69.75%;
+	}
+	&:active{
+		background-color: $os-mediumblack;
+	}
+	}
+.btn-timer {
+	width:97%;
+	margin: 0 1.5%;
+	padding: 8px 0px;
+	@include rounded(2px);
+	@include shadow(1px, 2px);
+	background-color: $os-blue;
+	color: $os-white;
+	line-height:31px;
+	text-decoration:none;
+	display:block;
 
+}
 .time-session {
 	.record-list {
 		.list-elem {

diff --git a/source/images/icon-timer.png b/source/images/icon-timer.png
diff --git a/source/templates/tasks/singletask.hb b/source/templates/tasks/singletask.hb
@@ -72,15 +72,19 @@
 	</li>
 {{/if}}
 </ul>
+</div>
 {{#if isWorker}}
 {{#unless completed}}
 {{#unless aktiveTimeSession}}
 {{#if timesessions.isLoaded}}
-<button {{action goStartTimeSession}} class="btn-submit">start working & count time</button>
+<a {{action goStartTimeSession}} class="btn-timer list-elem clearfix">
+	<span class="add-img"><img src="images/icon-timer.png"></span>
+	<span class="add-txt">start working & count time</span>
+</a>
 {{/if}}
 {{/unless}}
 {{/unless}}
 {{/if}}
-</div>
+
 {{view App.TimeSessionListView title="Active TimeSession" recordsBinding="openTimesessions" noRecords="no active session."}}
 {{view App.TimeSessionListView title="Time Session History" recordsBinding="historyTimesessions" noRecords="no completed sessions."}}