Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Create badge-ui.less which compiles to badge-ui.css:

  - added to makefile
  - added to server.js

Add css/notify directory with two notification animation
options. notify/bounce currently included in badge-ui.less.

Add some more mixins for animation-related rules.
  • Loading branch information...
commit bf839f3daf06c979dc1263fc32cbc22bfd389d75 1 parent 52cce59
Mike Larsson stenington authored
10 makefile
View
@@ -1,6 +1,10 @@
-CSS = ./webmaker-nav/css/webmaker-nav.less
-LESS = ./webmaker-nav/css/webmaker-nav.css
+CSS = ./webmaker-nav/css/webmaker-nav.css
+LESS = ./webmaker-nav/css/webmaker-nav.less
+BADGE_CSS = ./webmaker-nav/css/badge-ui.css
+BADGE_LESS = ./webmaker-nav/css/badge-ui.less
less:
@echo "Compiling LESS: ${LESS}"
- @lessc ${CSS} > ${LESS}
+ @lessc ${LESS} > ${CSS}
+ @echo "Compiling LESS: ${BADGE_LESS}"
+ @lessc ${BADGE_LESS} > ${BADGE_CSS}
5 server.js
View
@@ -39,7 +39,10 @@ function autoCompileLESS(dirname, pathnames) {
if (process.argv[2] && process.argv[2].match(/^[0-9]+$/))
port = parseInt(process.argv[2]);
-app.use(autoCompileLESS(dirname, ['/webmaker-nav/css/webmaker-nav.css']));
+app.use(autoCompileLESS(dirname, [
+ '/webmaker-nav/css/webmaker-nav.css',
+ '/webmaker-nav/css/badge-ui.css'
+]));
app.use(express.static(dirname));
app.listen(port, function() {
339 webmaker-nav/css/badge-ui.css
View
@@ -1,38 +1,353 @@
/* BEGIN EXTREMELY TEMPORARY STYLES */
-
+@-webkit-keyframes bounce {
+ 0% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 20% {
+ -webkit-transform: translatey(-7px);
+ -moz-transform: translatey(-7px);
+ -o-transform: translatey(-7px);
+ -ms-transform: translatey(-7px);
+ transform: translatey(-7px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 40% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 55% {
+ -webkit-transform: translatey(-3px);
+ -moz-transform: translatey(-3px);
+ -o-transform: translatey(-3px);
+ -ms-transform: translatey(-3px);
+ transform: translatey(-3px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 70% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 78% {
+ -webkit-transform: translatey(-1px);
+ -moz-transform: translatey(-1px);
+ -o-transform: translatey(-1px);
+ -ms-transform: translatey(-1px);
+ transform: translatey(-1px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 86% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+}
+@-moz-keyframes bounce {
+ 0% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 20% {
+ -webkit-transform: translatey(-7px);
+ -moz-transform: translatey(-7px);
+ -o-transform: translatey(-7px);
+ -ms-transform: translatey(-7px);
+ transform: translatey(-7px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 40% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 55% {
+ -webkit-transform: translatey(-3px);
+ -moz-transform: translatey(-3px);
+ -o-transform: translatey(-3px);
+ -ms-transform: translatey(-3px);
+ transform: translatey(-3px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 70% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 78% {
+ -webkit-transform: translatey(-1px);
+ -moz-transform: translatey(-1px);
+ -o-transform: translatey(-1px);
+ -ms-transform: translatey(-1px);
+ transform: translatey(-1px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 86% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+}
+@-o-keyframes bounce {
+ 0% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 20% {
+ -webkit-transform: translatey(-7px);
+ -moz-transform: translatey(-7px);
+ -o-transform: translatey(-7px);
+ -ms-transform: translatey(-7px);
+ transform: translatey(-7px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 40% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 55% {
+ -webkit-transform: translatey(-3px);
+ -moz-transform: translatey(-3px);
+ -o-transform: translatey(-3px);
+ -ms-transform: translatey(-3px);
+ transform: translatey(-3px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 70% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 78% {
+ -webkit-transform: translatey(-1px);
+ -moz-transform: translatey(-1px);
+ -o-transform: translatey(-1px);
+ -ms-transform: translatey(-1px);
+ transform: translatey(-1px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 86% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+}
+@keyframes bounce {
+ 0% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 20% {
+ -webkit-transform: translatey(-7px);
+ -moz-transform: translatey(-7px);
+ -o-transform: translatey(-7px);
+ -ms-transform: translatey(-7px);
+ transform: translatey(-7px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 40% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 55% {
+ -webkit-transform: translatey(-3px);
+ -moz-transform: translatey(-3px);
+ -o-transform: translatey(-3px);
+ -ms-transform: translatey(-3px);
+ transform: translatey(-3px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 70% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 78% {
+ -webkit-transform: translatey(-1px);
+ -moz-transform: translatey(-1px);
+ -o-transform: translatey(-1px);
+ -ms-transform: translatey(-1px);
+ transform: translatey(-1px);
+ -webkit-animation-timing-function: ease-in;
+ -moz-animation-timing-function: ease-in;
+ -o-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 86% {
+ -webkit-transform: translatey(0);
+ -moz-transform: translatey(0);
+ -o-transform: translatey(0);
+ -ms-transform: translatey(0);
+ transform: translatey(0);
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ -o-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+}
+.has-unread .badge-ui-icon-img {
+ -webkit-animation: bounce 0.75s;
+ -moz-animation: bounce 0.75s;
+ -o-animation: bounce 0.75s;
+ animation: bounce 0.75s;
+}
.badge-ui-widget {
position: relative;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
-
.badge-ui-icon {
width: 16px;
height: 16px;
cursor: pointer;
}
-
.badge-ui-icon-img {
width: 16px;
height: 16px;
background-image: url(../img/badge.png);
background-size: 16px 16px;
}
-
.badge-ui-widget ul {
list-style-type: none;
padding: 0;
}
-
.badge-ui-widget ul li .badge-ui-img img {
width: 64px;
}
-
.badge-ui-widget .badge-ui-alert {
box-shadow: 0 0 5px gold;
}
-
.badge-ui-widget .badge-ui-alert .badge-ui-img {
width: 106px;
}
@@ -40,7 +355,6 @@
.badge-ui-widget:not(.badge-ui-on) .badge-ui-detail {
display: none;
}
-
.badge-ui-unread {
font-size: 9px;
line-height: 9px;
@@ -52,19 +366,15 @@
right: 0;
display: inline-block;
}
-
.badge-ui-widget ul li {
padding: 4px;
}
-
.badge-ui-widget .badge-ui-backpack .badge-ui-bd {
font-size: 10px;
}
-
.webmaker-nav-container:not(.logged-in) li.user-badges {
display: none;
}
-
.badge-ui-widget .webmaker-h4 {
color: #888;
font-size: 1.1em;
@@ -74,26 +384,21 @@
.badge-ui-title {
margin: 0;
}
-
.badge-ui-name {
font-size: 1.3em;
font-weight: 700;
}
-
.badge-ui-desc {
font-size: 10px;
}
-
.badge-ui-unearned-badges li .badge-ui-img {
background-image: url(../img/badge-unearned.png);
width: 64px;
height: 64px;
background-size: 64px 64px;
}
-
.badge-ui-unearned-badges li .badge-ui-img img,
.badge-ui-unearned-badges li .badge-ui-desc {
display: none;
}
-
/* END EXTREMELY TEMPORARY STYLES */
102 webmaker-nav/css/badge-ui.less
View
@@ -0,0 +1,102 @@
+/* BEGIN EXTREMELY TEMPORARY STYLES */
+
+@import "notify/bounce";
+
+.badge-ui-widget {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ line-height: normal;
+}
+
+.badge-ui-icon {
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+}
+
+.badge-ui-icon-img {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/badge.png);
+ background-size: 16px 16px;
+}
+
+.badge-ui-widget ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.badge-ui-widget ul li .badge-ui-img img {
+ width: 64px;
+}
+
+.badge-ui-widget .badge-ui-alert {
+ box-shadow: 0 0 5px gold;
+}
+
+.badge-ui-widget .badge-ui-alert .badge-ui-img {
+ width: 106px;
+}
+
+
+.badge-ui-widget:not(.badge-ui-on) .badge-ui-detail {
+ display: none;
+}
+
+.badge-ui-unread {
+ font-size: 9px;
+ line-height: 9px;
+ background: green;
+ border-radius: 4px;
+ padding: 1px;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ display: inline-block;
+}
+
+.badge-ui-widget ul li {
+ padding: 4px;
+}
+
+.badge-ui-widget .badge-ui-backpack .badge-ui-bd {
+ font-size: 10px;
+}
+
+.webmaker-nav-container:not(.logged-in) li.user-badges {
+ display: none;
+}
+
+.badge-ui-widget .webmaker-h4 {
+ color: #888;
+ font-size: 1.1em;
+ border-top: 1px dashed #CCC;
+ padding-top: 0.5em;
+}
+.badge-ui-title {
+ margin: 0;
+}
+
+.badge-ui-name {
+ font-size: 1.3em;
+ font-weight: 700;
+}
+
+.badge-ui-desc {
+ font-size: 10px;
+}
+
+.badge-ui-unearned-badges li .badge-ui-img {
+ background-image: url(../img/badge-unearned.png);
+ width: 64px;
+ height: 64px;
+ background-size: 64px 64px;
+}
+
+.badge-ui-unearned-badges li .badge-ui-img img,
+.badge-ui-unearned-badges li .badge-ui-desc {
+ display: none;
+}
+
+/* END EXTREMELY TEMPORARY STYLES */
13 webmaker-nav/css/mixins.less
View
@@ -104,3 +104,16 @@
margin-top: -( @size + @borderSize + 1 );
}
}
+
+.animation(@animation) {
+ -webkit-animation: @animation;
+ -moz-animation: @animation;
+ -o-animation: @animation;
+ animation: @animation;
+}
+.timing-function(@timing) {
+ -webkit-animation-timing-function: @timing;
+ -moz-animation-timing-function: @timing;
+ -o-animation-timing-function: @timing;
+ animation-timing-function: @timing;
+}
34 webmaker-nav/css/notify/bounce.less
View
@@ -0,0 +1,34 @@
+@import "../mixins";
+
+.keyframes() {
+ 0% { .transform(translateY(0));
+ .timing-function(ease-out);
+ }
+ 20% { .transform(translateY(-7px));
+ .timing-function(ease-in);
+ }
+ 40% { .transform(translateY(0));
+ .timing-function(ease-out);
+ }
+ 55% { .transform(translateY(-3px));
+ .timing-function(ease-in);
+ }
+ 70% { .transform(translateY(0));
+ .timing-function(ease-out);
+ }
+ 78% { .transform(translateY(-1px));
+ .timing-function(ease-in);
+ }
+ 86% { .transform(translateY(0));
+ .timing-function(ease-out);
+ }
+}
+
+@-webkit-keyframes bounce {.keyframes;}
+@-moz-keyframes bounce {.keyframes;}
+@-o-keyframes bounce {.keyframes;}
+@keyframes bounce {.keyframes;}
+
+.has-unread .badge-ui-icon-img {
+ .animation(bounce 0.75s);
+}
28 webmaker-nav/css/notify/pulse.less
View
@@ -0,0 +1,28 @@
+@import "../mixins";
+
+.keyframes() {
+ 0% { .transform(scale(1));
+ .timing-function(ease-out);
+ }
+ 25% { .transform(scale(1.4));
+ .timing-function(ease-in);
+ }
+ 50% { .transform(scale(1));
+ .timing-function(ease-out);
+ }
+ 75% { .transform(scale(1.4));
+ .timing-function(ease-out);
+ }
+ 100% { .transform(scale(1));
+ .timing-function(ease-out);
+ }
+}
+
+@-webkit-keyframes pulse {.keyframes;}
+@-moz-keyframes pulse {.keyframes;}
+@-o-keyframes pulse {.keyframes;}
+@keyframes pulse {.keyframes;}
+
+.has-unread .badge-ui-icon-img {
+ .animation(pulse 0.75s));
+}
3  webmaker-nav/css/webmaker-nav.css
View
@@ -332,9 +332,10 @@
margin-top: 11px;
width: 70px;
height: 70px;
- background: url(../img/webmaker-logo.png ) no-repeat;
+ background: url(../img/webmaker-logo.png) no-repeat;
}
.tab-webmaker .webmaker-slogan {
+ float: left;
width: 420px;
padding: 20px;
margin: 0;
Please sign in to comment.
Something went wrong with that request. Please try again.