Client dir

3 files changed, 127 insertions, 0 deletions

diff --git a/client/button.js b/client/button.js
new file mode 100644
index 0000000..8dc64a5
--- /dev/null
+++ b/client/button.js
@@ -0,0 +1,13 @@
+Session.setDefault('counter', 0);
+
+Template.hello.helpers({
+  counter: function () {
+    return Session.get('counter');
+  }
+});
+
+Template.hello.events({
+  'click button': function () {
+    Session.set('counter', Session.get('counter') + 1);
+  }
+});
\ No newline at end of file
diff --git a/client/colors.css b/client/colors.css
new file mode 100644
index 0000000..c18dec8
--- /dev/null
+++ b/client/colors.css
@@ -0,0 +1,98 @@
+/* Base styles */
+#login-buttons-instagram {
+  font-size: 1.2em;
+  font-family: sans-serif;
+  color:#333;
+	text-shadow:1px 1px #fff;
+	text-decoration: none;
+	display:inline-block; 
+	padding:0.5em 1.75em 0.5em 1em;
+	border-radius: 0.25em;
+	background: #f8f8f8;
+	border:1px solid #ccc;
+	border-right:0.25em solid #00558D; /* blue stripe */
+	position: relative;
+	margin:0 0 1px; 
+}
+
+#login-buttons-instagram:before, #login-buttons-instagram:after {
+	content:'';
+	display:block;
+	position: absolute;
+}
+
+/* Add Stripes */
+#login-buttons-instagram:before {
+	width:0.25em;
+	height: 100%;
+	background:#FBB03B; /* yellow stripe */ 
+	border-left:0.25em solid #D4145A; /* red stripe */ 
+	border-right:0.25em solid #00A99D; /* green stripe */ 
+	top:0;
+	right:0;
+}
+
+/* Add Hightlights */
+#login-buttons-instagram:after {
+	width:100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 0.25em;
+	padding-left: 0.25em;
+	box-shadow: inset 1px 1px 0px rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.1);
+
+background: -moz-linear-gradient(top,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.35)), color-stop(49%,rgba(255,255,255,0.2)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
+background: -webkit-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: -o-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: -ms-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: linear-gradient(to bottom,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#1a000000',GradientType=0 );
+
+}
+
+
+/* Animate - Fade */
+#login-buttons-instagram, #login-buttons-instagram:before {
+    -webkit-transition-property: background, border;
+    -webkit-transition: 0.1s ease-in;
+    -moz-transition-property: background, border;
+    -moz-transition: 0.1s ease-in;
+    -o-transition-property: background, border;
+    -o-transition: 0.1s ease-in;
+    transition-property: background, border;
+    transition: 0.1s ease-in;
+
+}
+
+/* Hover / Focus */
+#login-buttons-instagram:hover, #login-buttons-instagram:focus  {
+	background: #fff;
+}
+
+#login-buttons-instagram:hover {
+	border-right:0.25em solid #09c;
+}
+
+#login-buttons-instagram:hover:before {
+	background:#fc6; /* yellow stripe */ 
+	border-left:0.25em solid #f06; /* red stripe */ 
+	border-right:0.25em solid #0cc; /* green stripe */ 
+}
+
+#login-buttons-instagram:hover:after {
+background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
+background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#0d000000',GradientType=0 );
+
+}
+
+/* Active */
+#login-buttons-instagram:active {
+	margin:1px 0 0; 
+}
\ No newline at end of file
diff --git a/client/colors.html b/client/colors.html
new file mode 100644
index 0000000..d679971
--- /dev/null
+++ b/client/colors.html
@@ -0,0 +1,16 @@
+<head>
+  <title>colors</title>
+</head>
+
+<body>
+  <h1>Welcome to Meteor!</h1>
+
+  {{> loginButtons}}
+
+  {{> hello}}
+</body>
+
+<template name="hello">
+  <button>Click Me</button>
+  <p>You've pressed the button {{counter}} times.</p>
+</template>