added remove button

3 files changed, 44 insertions, 10 deletions

diff --git a/assets/css/application.css b/assets/css/application.css
index 97e9662..9ebfdc2 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -45,17 +45,17 @@ header {
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 	border-top: 1px solid #f5f5f5;
-	-webkit-box-shadow: 
+	-webkit-box-shadow:
 		inset 0 0 25px #e8e8e8,
 		0 1px 0 #c3c3c3,
 		0 2px 0 #c9c9c9,
 		0 2px 3px #333;
-	-moz-box-shadow: 
+	-moz-box-shadow:
 		inset 0 0 25px #e8e8e8,
 		0 1px 0 #c3c3c3,
 		0 2px 0 #c9c9c9,
 		0 2px 3px #333;
-	box-shadow: 
+	box-shadow:
 		inset 0 0 25px #e8e8e8,
 		0 1px 0 #c3c3c3,
 		0 2px 0 #c9c9c9,
@@ -123,9 +123,7 @@ header {
 	top: -0.07em;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
-	-webkit-box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
-	box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
-	-webkit-transition: all 150ms linear;
+    -webkit-transition: all 150ms linear;
 	-moz-transition: all 150ms linear;
 	-o-transition: all 150ms linear;
 	-ms-transition: all 150ms linear;
@@ -147,6 +145,9 @@ header {
 	border-color: #2faf34;
 	color: #eee;
 	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
+    -webkit-box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
+	box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
+
 }
 
 .button.green:hover {
@@ -163,4 +164,31 @@ header {
 .button.green.large {
 	font-size: 2em;
 	line-height: 1;
-}
\ No newline at end of file
+}
+
+
+.button.red{
+	background-color: #887c7c;
+	border-color: #887c7c;
+	color: #eee;
+	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
+    -webkit-box-shadow:  0px 4px 1px 0px rgba(92, 5, 5, 1);
+	box-shadow:  0px 4px 1px 0px rgba(92, 5, 5, 1);
+
+}
+
+.button.red:hover {
+	background-color: red;
+	color: #fff;
+}
+
+.button.red:active {
+	background-color: #2ea732;
+	color: #ddd;
+	text-shadow: 0px 0px 2px rgba(0,0,0,0.9);
+}
+
+.button.red.large {
+	font-size: 2em;
+	line-height: 1;
+}
diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 35a1e90..20ebd90 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -3,6 +3,7 @@
 
 .edit-sample {
 	margin: 0.4em 0;
+    width:1000px;
 }
 
 .edit-sample > div {
@@ -41,7 +42,7 @@
 	color: #414141;
 	text-shadow: 0 1px 2px #f2f400;
 	background-color: #dfe100;
-	
+
 	background: #e5e500; /* Old browsers */
 	background: -moz-linear-gradient(top,  #e5e500 0%, #dfe100 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e500), color-stop(100%,#dfe100)); /* Chrome,Safari4+ */
@@ -100,4 +101,4 @@
 /* Key input */
 .edit-sample .key-input {
 	margin-top: 0.1em;
-}
\ No newline at end of file
+}
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 6842ccd..6805e97 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -1,7 +1,8 @@
 ClipPlay.Views.Sample = Marionette.ItemView.extend({
 	template: '#sample-view-template',
 	events: {
-		'blur .js-keyboard-key': 'on_keyboard_change'
+		'blur .js-keyboard-key': 'on_keyboard_change',
+        'click .js-remove-sample' : 'remove_sample'
 	},
 
 	onRender: function() {
@@ -76,5 +77,9 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
       Mousetrap.bind(this.model.get('key'), function(){
         that.model.play();
       });
+    },
+
+    remove_sample: function(){
+        console.log('removed sample');
     }
 });