From 527dd3373c4d4a54a080557408c4786aa7e03f87 Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Tue, 9 Jun 2015 16:37:36 +0300 Subject: Client dir --- client/button.js | 13 ++++++++ client/colors.css | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ client/colors.html | 16 +++++++++ colors.css | 98 ------------------------------------------------------ colors.html | 14 -------- colors.js | 23 ------------- 6 files changed, 127 insertions(+), 135 deletions(-) create mode 100644 client/button.js create mode 100644 client/colors.css create mode 100644 client/colors.html delete mode 100644 colors.css delete mode 100644 colors.html delete mode 100644 colors.js 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 @@ + + colors + + + +

Welcome to Meteor!

+ + {{> loginButtons}} + + {{> hello}} + + + diff --git a/colors.css b/colors.css deleted file mode 100644 index c18dec8..0000000 --- a/colors.css +++ /dev/null @@ -1,98 +0,0 @@ -/* 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/colors.html b/colors.html deleted file mode 100644 index 5962e72..0000000 --- a/colors.html +++ /dev/null @@ -1,14 +0,0 @@ - - colors - - - -

Welcome to Meteor!

- - {{> loginButtons}} - - - diff --git a/colors.js b/colors.js deleted file mode 100644 index 4f8c65d..0000000 --- a/colors.js +++ /dev/null @@ -1,23 +0,0 @@ -if (Meteor.isClient) { - // counter starts at 0 - Session.setDefault('counter', 0); - - Template.hello.helpers({ - counter: function () { - return Session.get('counter'); - } - }); - - Template.hello.events({ - 'click button': function () { - // increment the counter when button is clicked - Session.set('counter', Session.get('counter') + 1); - } - }); -} - -if (Meteor.isServer) { - Meteor.startup(function () { - // code to run on server at startup - }); -} -- cgit v1.3.1