Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Prefix all CSS classes to prevent collisions #97

Closed
wants to merge 3 commits into from

2 participants

@mjschranz

Fixes #29

@Pomax

This might be too much namespacing. If webmaker-nav has a top element that everything else runs in, then namespacing can be done based on keeping that element's namespace as part of all selectors. That way you don't need to ns-prefix every class, just the topmost class, and have the preprocessor make sure that the toplevel selector is added to all rules.

@Pomax Pomax closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 5, 2012
  1. @mjschranz
Commits on Dec 6, 2012
  1. @mjschranz

    Fix other issues for badges

    mjschranz authored
  2. @mjschranz

    Fix all of the tests

    mjschranz authored
This page is out of date. Refresh to see the latest.
View
4 example/with-badge-ui.html
@@ -21,7 +21,7 @@
<span class="logo"></span>
<span class="breadcrumbs"></span>
<span class="project-title">My Project</span>
- <a class="wm-button wm-button-green">Publish</a> <a class="wm-button wm-button-blue">+ Backpack</a>
+ <a class="wm-nav-button wm-nav-button-green">Publish</a> <a class="wm-nav-button wm-nav-button-blue">+ Backpack</a>
</div>
</header>
<div class="main">
@@ -137,7 +137,7 @@
});
// Uncomment these to automatically show parts of the UI, which is
// useful for tweaking CSS on dialogs, etc.
- //$(".wm-login-btn").click();
+ //$(".wm-nav-login-btn").click();
//$(".badge-ui-widget").click();
});
</script>
View
8 test/test-badge-ui.js
@@ -12,7 +12,7 @@ defineTests([
module("badge-ui", {
setup: function() {
- div = $('<div><ul class="user-info"></ul></div>')
+ div = $('<div><ul class="wm-nav-user-info"></ul></div>')
.appendTo(document.body);
wmnav = {container: div};
FakeServer.setup({
@@ -57,7 +57,7 @@ defineTests([
test("inserts badge list item into ul.user-info", function() {
var ui = BadgeUI(wmnav);
- equal($('ul.user-info li.user-badges', div).length, 1);
+ equal($('ul.wm-nav-user-info li.user-badges', div).length, 1);
});
test("unearned badges are listed alphabetically", function() {
@@ -207,10 +207,10 @@ defineTests([
badger.credit('LOGGED_IN');
FakeServer.flushResponses();
$('.badge-ui-widget', div).click();
- equal($('.tooltip:visible', div).length, 1,
+ equal($('.wm-nav-tooltip:visible', div).length, 1,
"badge popover is visible before clicking + Backpack button");
$(".badge-ui-push-to-backpack button", div).click();
- equal($('.tooltip:visible', div).length, 0,
+ equal($('.wm-nav-tooltip:visible', div).length, 0,
"badge popover hides after clicking + Backpack button");
});
View
38 test/test-webmaker-nav.js
@@ -13,16 +13,16 @@ defineTests([
}
});
- var LOGIN_BTN = ".wm-login-btn",
- LOGOUT_BTN = ".logout-btn",
- FEEDBACK_BTN = ".webmaker-feedback-btn",
+ var LOGIN_BTN = ".wm-nav-login-btn",
+ LOGOUT_BTN = ".wm-nav-logout-btn",
+ FEEDBACK_BTN = ".wm-nav-feedback-btn",
USER_MENU = ".tooltip-user";
var container;
- test("contains .webmaker-nav-container", function() {
+ test("contains .wm-nav-container", function() {
var webmakerNav = new WebmakerNav({container: container});
- equal(container.find(".webmaker-nav-container").length, 1);
+ equal(container.find(".wm-nav-container").length, 1);
});
test("has no login button if no cb given", function() {
@@ -87,7 +87,7 @@ defineTests([
webmakerNav.views.login({username: "blegh"});
equal(container.find(LOGIN_BTN + ":visible").length, 0,
"login btn is not visible");
- equal(container.find(".user-name-container").text(), "blegh",
+ equal(container.find(".wm-nav-user-name-container").text(), "blegh",
"user menu contains username");
webmakerNav.views.logout();
equal(container.find(LOGIN_BTN + ":visible").length, 1,
@@ -107,11 +107,11 @@ defineTests([
},
duration: 5000
});
- equal($(".wm-login-error-tooltip:visible", container).length, 1);
+ equal($(".wm-nav-login-error-tooltip:visible", container).length, 1);
equal(timeouts.length, 1);
equal(timeouts[0].ms, 5000);
timeouts[0].fn();
- equal($(".wm-login-error-tooltip", container).length, 0);
+ equal($(".wm-nav-login-error-tooltip", container).length, 0);
});
test("logging out hides user menu", function() {
@@ -121,7 +121,7 @@ defineTests([
logoutBtnCallback: function() {}
});
var userMenu = container.find(USER_MENU);
- var usernameWidget = container.find(".user-name");
+ var usernameWidget = container.find(".wm-nav-user-name");
webmakerNav.views.login({username: "blegh"});
equal($(LOGOUT_BTN, container).css("visibility"), "hidden",
@@ -141,7 +141,7 @@ defineTests([
logoutBtnCallback: function() {}
});
var userMenu = container.find(USER_MENU);
- var usernameWidget = container.find(".user-name");
+ var usernameWidget = container.find(".wm-nav-user-name");
webmakerNav.views.login({username: "blegh"});
equal(userMenu.css("visibility"), "hidden",
@@ -156,7 +156,7 @@ defineTests([
test("clicking on a tab shows its content, hides others", function() {
function isTabActive(name) {
- return $(".tab-" + name, container).hasClass("webmaker-tab-active");
+ return $(".tab-" + name, container).hasClass("wm-nav-tab-active");
}
var webmakerNav = new WebmakerNav({container: container.show()});
@@ -180,18 +180,18 @@ defineTests([
loginBtnCallback: function() {},
logoutBtnCallback: function() { logout = true; }
});
- equal($(".user-name ul").children().length, 3);
- ok($(".user-name ul").children()[0] === firstEntry[0]);
- ok($(".user-name ul").children()[1] === secondEntry[0]);
- $(".user-name ul .logout-btn").click();
+ equal($(".wm-nav-user-name ul").children().length, 3);
+ ok($(".wm-nav-user-name ul").children()[0] === firstEntry[0]);
+ ok($(".wm-nav-user-name ul").children()[1] === secondEntry[0]);
+ $(".wm-nav-user-name ul .wm-nav-logout-btn").click();
ok(logout);
});
test("customizable webmaker-info content works", function() {
var info = $('<div data-webmaker-nav-role="webmaker-info">hi</div>');
var webmakerNav = new WebmakerNav({container: container.append(info)});
- equal($(".webmaker-tab .secondary-info").children().length, 1);
- ok($(".webmaker-tab .secondary-info").children()[0] === info[0]);
+ equal($(".wm-nav-tab .wm-nav-secondary-info").children().length, 1);
+ ok($(".wm-nav-tab .wm-nav-secondary-info").children()[0] === info[0]);
equal(info.text(), 'hi');
});
@@ -202,8 +202,8 @@ defineTests([
loginBtnCallback: function() {},
logoutBtnCallback: function() {}
});
- equal($(".wm-join-tooltip").children().length, 1);
- ok($(".wm-join-tooltip").children()[0] === info[0]);
+ equal($(".wm-nav-join-tooltip").children().length, 1);
+ ok($(".wm-nav-join-tooltip").children()[0] === info[0]);
equal(info.text(), 'hi');
});
});
View
2  webmaker-nav/badge-ui.js
@@ -29,7 +29,7 @@ define([
options = options || {};
var widget = $(WIDGET_HTML)
- .prependTo($(webmakerNav.container).find("ul.user-info"))
+ .prependTo($(webmakerNav.container).find("ul.wm-nav-user-info"))
.find(".badge-ui-widget");
var alertContainer = $(options.alertContainer || widget);
var alertDisplayTime = options.alertDisplayTime || 2000;
View
38 webmaker-nav/css/badge-ui.css
@@ -471,16 +471,45 @@
.badge-ui-widget:not(.badge-ui-on) .badge-ui-detail {
display: none;
}
+.badge-ui-widget.badge-ui-ready .badge-ui-initializing,
+.badge-ui-widget.badge-ui-error .badge-ui-initializing {
+ display: none;
+}
+.badge-ui-initializing {
+ float: left;
+}
+.badge-ui-loader {
+ background: url('../img/ajax-loader.gif');
+ width: 43px;
+ height: 11px;
+ margin: 0 auto 10px auto;
+}
+.badge-ui-widget:not(.badge-ui-error) .badge-ui-error-message {
+ display: none;
+}
+.badge-ui-error-message {
+ color: #B94A48;
+}
+.badge-ui-widget:not(.badge-ui-ready) .badge-ui-ready-content {
+ 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: none;
+}
+.badge-ui-widget.badge-ui-ready .badge-ui-unread {
display: inline-block;
+ background: green;
+}
+.badge-ui-widget.badge-ui-error .badge-ui-unread {
+ display: inline-block;
+ background: #B94A48;
}
.badge-ui-widget ul li {
padding: 4px;
@@ -488,10 +517,10 @@
.badge-ui-widget .badge-ui-backpack .badge-ui-bd {
font-size: 10px;
}
-.webmaker-nav-container:not(.logged-in) li.user-badges {
+.wm-nav-container:not(.logged-in) li.user-badges {
display: none;
}
-.badge-ui-widget .webmaker-h4 {
+.badge-ui-widget .wm-nav-h4 {
color: #888;
font-size: 1.1em;
border-top: 1px dashed #CCC;
@@ -517,3 +546,6 @@
.badge-ui-unearned-badges li .badge-ui-desc {
display: none;
}
+.badge-ui-unearned-badges li .badge-ui-name {
+ line-height: 64px;
+}
View
4 webmaker-nav/css/badge-ui.less
@@ -102,11 +102,11 @@
font-size: 10px;
}
-.webmaker-nav-container:not(.logged-in) li.user-badges {
+.wm-nav-container:not(.logged-in) li.user-badges {
display: none;
}
-.badge-ui-widget .webmaker-h4 {
+.badge-ui-widget .wm-nav-h4 {
color: #888;
font-size: 1.1em;
border-top: 1px dashed #CCC;
View
6 webmaker-nav/css/buttons.less
@@ -2,7 +2,7 @@
@blue: #319EF0;
@green: #D83920;
-.wm-button {
+.wm-nav-button {
display: inline-block;
padding: 0 12px;
white-space: nowrap;
@@ -27,7 +27,7 @@
inset 0 0 0 1px darken(@lightgrey, 25%);
}
- &.wm-button-blue {
+ &.wm-nav-button-blue {
.gradient("vertical", lighten(@blue, 10%), @blue);
border-color: darken(@blue, 4%);
color: #FFF;
@@ -38,7 +38,7 @@
}
}
- &.wm-button-green {
+ &.wm-nav-button-green {
background: @green;
border-color: darken(@green, 10%);
box-shadow: 0 5px 3px -4px fade(black, 20%);
View
180 webmaker-nav/css/webmaker-nav.css
@@ -2,7 +2,7 @@
* Webmaker nav
*/
/* Note -- this file is compiled from webmakernav.less */
-.wm-button {
+.wm-nav-button {
display: inline-block;
padding: 0 12px;
white-space: nowrap;
@@ -20,11 +20,11 @@
border: 1px solid #959a97;
box-shadow: 0 5px 3px -4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
-.wm-button:hover {
+.wm-nav-button:hover {
background: #F5F5F5;
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #959a97;
}
-.wm-button.wm-button-blue {
+.wm-nav-button.wm-nav-button-blue {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#68a2f1', endColorstr='#3985ed', GradientType=0);
background: -webkit-gradient(linear, top, bottom, color-stop(0%, #68a2f1), color-stop(100%, #3985ed));
background: -webkit-linear-gradient(top, #68a2f1 0%, #3985ed 100%);
@@ -35,7 +35,7 @@
border-color: #2679eb;
color: #FFF;
}
-.wm-button.wm-button-blue:hover {
+.wm-nav-button.wm-nav-button-blue:hover {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7fb0f3', endColorstr='#5093ef', GradientType=0);
background: -webkit-gradient(linear, top, bottom, color-stop(0%, #7fb0f3), color-stop(100%, #5093ef));
background: -webkit-linear-gradient(top, #7fb0f3 0%, #5093ef 100%);
@@ -46,13 +46,13 @@
border-color: #2277eb;
box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.6);
}
-.wm-button.wm-button-green {
+.wm-nav-button.wm-nav-button-green {
background: #3fb58e;
border-color: #328f70;
box-shadow: 0 5px 3px -4px rgba(0, 0, 0, 0.2);
color: #FFF;
}
-.wm-button.wm-button-green:hover {
+.wm-nav-button.wm-nav-button-green:hover {
background: #49c098;
border-color: #328f70;
box-shadow: 0 4px 7px -4px rgba(0, 0, 0, 0.6);
@@ -83,22 +83,22 @@
font-weight: normal;
font-style: normal;
}
-.webmaker-nav-container {
+.wm-nav-container {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 12px;
border-bottom: 1px solid #2d2f2f;
}
-.webmaker-nav-container a {
+.wm-nav-container a {
color: #FFF;
}
-.webmaker-nav-container a:hover {
+.wm-nav-container a:hover {
color: #3fb58e;
}
-.webmaker-nav-top {
+.wm-nav-top {
background: #3a3c3c;
height: 29px;
}
-.webmaker-nav {
+.wm-nav {
height: 29px;
padding: 0;
margin: 0;
@@ -107,11 +107,11 @@
font-size: 1em;
color: #FFF;
}
-.webmaker-nav > li {
+.wm-nav > li {
float: left;
}
-.webmaker-nav > li > a,
-.webmaker-nav > li > .link {
+.wm-nav > li > a,
+.wm-nav > li > .wm-nav-link {
position: relative;
display: block;
height: 100%;
@@ -132,14 +132,14 @@
transition: top 0.1s ease;
color: rgba(255, 255, 255, 0.5);
}
-.webmaker-nav > li > a:hover,
-.webmaker-nav > li > .link:hover,
-.webmaker-nav > li > a.on,
-.webmaker-nav > li > .link.on {
+.wm-nav > li > a:hover,
+.wm-nav > li > .wm-nav-link:hover,
+.wm-nav > li > a.on,
+.wm-nav > li > .wm-nav-link.on {
color: #FFF;
}
-.webmaker-nav > li > a.webmaker-btn-active,
-.webmaker-nav > li > .link.webmaker-btn-active {
+.wm-nav > li > a.wm-nav-btn-active,
+.wm-nav > li > .wm-nav-link.wm-nav-btn-active {
color: #FFF;
border-bottom-width: 1px;
border-top: 1px solid #494c4c;
@@ -151,40 +151,40 @@
/*********************************************************
* Primary menu
*/
-.primary {
+.wm-nav-primary {
float: left;
}
-.primary > li {
+.wm-nav-primary > li {
border-right: 1px solid #474949;
border-left: 1px solid #2d2f2f;
}
-.webmaker-expanded .primary > li {
+.wm-nav-expanded .wm-nav-primary > li {
border-color: transparent;
}
-.primary > li:last-child {
+.wm-nav-primary > li:last-child {
border-right-color: transparent;
}
-.primary > li a:hover {
+.wm-nav-primary > li a:hover {
background: #3f4141;
}
/*********************************************************
* User/Login Styles
*/
-.user {
+.wm-nav-user {
min-width: 150px;
}
-.user-info {
+.wm-nav-user-info {
float: right;
margin-right: 150px;
}
-.user-info li {
+.wm-nav-user-info li {
border-right: none;
}
-.wm-login-container {
+.wm-nav-login-container {
cursor: pointer;
position: relative;
}
-.wm-login-btn {
+.wm-nav-login-btn {
color: #FFF;
line-height: 22px;
top: 3px;
@@ -198,7 +198,7 @@
margin-right: 5px;
overflow: hidden;
}
-.wm-login-btn:after {
+.wm-nav-login-btn:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==") 10px center no-repeat;
content: "";
display: block;
@@ -209,7 +209,7 @@
top: 0;
z-index: 10;
}
-.wm-login-btn:before {
+.wm-nav-login-btn:before {
content: "";
display: block;
width: 30px;
@@ -226,32 +226,32 @@
transform: rotate(45deg);
box-shadow: 1px 0 0 2px rgba(0, 0, 0, 0.05);
}
-.wm-login-btn:hover {
+.wm-nav-login-btn:hover {
background: #606363;
}
-.tooltip.wm-join-tooltip,
-.tooltip.wm-login-error-tooltip {
+.wm-nav-tooltip.wm-nav-join-tooltip,
+.wm-nav-tooltip.wm-nav-login-error-tooltip {
pointer-events: auto;
top: 100%;
margin-top: 15px;
width: 220px;
margin-left: -110px;
}
-.tooltip.wm-join-tooltip h3,
-.tooltip.wm-login-error-tooltip h3 {
+.wm-nav-tooltip.wm-nav-join-tooltip h3,
+.wm-nav-tooltip.wm-nav-login-error-tooltip h3 {
margin: 0;
font-size: 1.3em;
line-height: 1.3;
}
-.tooltip.wm-join-tooltip img,
-.tooltip.wm-login-error-tooltip img {
+.wm-nav-tooltip.wm-nav-join-tooltip img,
+.wm-nav-tooltip.wm-nav-login-error-tooltip img {
width: 40px;
}
-.tooltip.wm-join-tooltip p,
-.tooltip.wm-login-error-tooltip p {
+.wm-nav-tooltip.wm-nav-join-tooltip p,
+.wm-nav-tooltip.wm-nav-login-error-tooltip p {
text-align: left;
}
-.user-info > .notification-badge > a {
+.wm-nav-user-info > .notification-badge > a {
display: none;
height: 15px;
width: 15px;
@@ -265,29 +265,29 @@
box-sizing: border-box;
opacity: 0.7;
}
-.user-info > .notification-badge > a:hover {
+.wm-nav-user-info > .notification-badge > a:hover {
opacity: 1;
}
-.webmaker-nav > .user {
+.wm-nav > .wm-nav-user {
position: relative;
}
-.webmaker-nav > .user > a {
+.wm-nav > .wm-nav-user > a {
padding-left: 8px;
}
/*********************************************************
* Tabs
*/
-.webmaker-tabs {
+.wm-nav-tabs {
height: 0;
}
-.webmaker-expanded .webmaker-tabs {
+.wm-nav-expanded .wm-nav-tabs {
height: auto;
}
-.webmaker-tabs,
-.webmaker-tab {
+.wm-nav-tabs,
+.wm-nav-tab {
background: #3a3c3c;
}
-.webmaker-tab {
+.wm-nav-tab {
position: relative;
width: 100%;
color: #FFF;
@@ -300,24 +300,24 @@
-ms-transition: height 0.1s ease;
transition: height 0.1s ease;
}
-.webmaker-tab li {
+.wm-nav-tab li {
border-right: none;
line-height: 50px;
}
-.webmaker-tab li > a {
+.wm-nav-tab li > a {
background: none;
font-size: 1.25em;
}
-.webmaker-tab.webmaker-tab-active {
+.wm-nav-tab.wm-nav-tab-active {
height: 50px;
}
-.tab-webmaker.webmaker-tab-active {
+.tab-webmaker.wm-nav-tab-active {
height: 100px;
}
-.tab-webmaker .tab-inner {
+.tab-webmaker .wm-nav-tab-inner {
height: 100%;
}
-.tab-webmaker .secondary-info {
+.tab-webmaker .wm-nav-secondary-info {
float: left;
width: 460px;
padding: 20px;
@@ -326,10 +326,10 @@
font-size: 1.15em;
line-height: 1.3;
}
-.tab-webmaker .secondary-info p {
+.tab-webmaker .wm-nav-secondary-info p {
margin: 0;
}
-.tab-webmaker .webmaker-logo {
+.tab-webmaker .wm-nav-logo {
float: left;
margin: 11px 0 0 15px;
opacity: 1;
@@ -338,7 +338,7 @@
height: 70px;
background: url(../img/webmaker-logo.png ) no-repeat;
}
-.tab-webmaker .webmaker-slogan {
+.tab-webmaker .wm-nav-slogan {
width: 420px;
padding: 20px;
margin: 0;
@@ -354,28 +354,28 @@
/*********************************************************
* Blocks
*/
-.wm-unit:after {
+.wm-nav-unit:after {
/* Clearfix */
content: "";
display: table;
clear: both;
}
-.wm-unit-side {
+.wm-nav-unit-side {
float: left;
margin-right: 10px;
}
-.wm-unit-side-r {
+.wm-nav-unit-side-r {
float: right;
margin-left: 10px;
}
-.wm-unit-body {
+.wm-nav-unit-body {
display: table;
}
/*********************************************************
* Tooltip
*/
-*:hover > .tooltip:not(.tooltip-no-hover) {
+*:hover > .wm-nav-tooltip:not(.tooltip-no-hover) {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s ease 0.5s;
@@ -384,7 +384,7 @@
-ms-transition: opacity 0.3s ease 0.5s;
transition: opacity 0.3s ease 0.5s;
}
-.tooltip {
+.wm-nav-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
@@ -414,7 +414,7 @@
-ms-transition: opacity 0.3s ease 0;
transition: opacity 0.3s ease 0;
}
-.tooltip.tooltip-on {
+.wm-nav-tooltip.tooltip-on {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s ease 0.5s;
@@ -423,15 +423,15 @@
-ms-transition: opacity 0.3s ease 0.5s;
transition: opacity 0.3s ease 0.5s;
}
-.tooltip.tooltip-no-transition-on {
+.wm-nav-tooltip.tooltip-no-transition-on {
opacity: 1;
visibility: visible;
}
-.tooltip.tooltip-error {
+.wm-nav-tooltip.tooltip-error {
color: red;
}
-.tooltip:after,
-.tooltip:before {
+.wm-nav-tooltip:after,
+.wm-nav-tooltip:before {
content: "";
position: absolute;
top: -5px;
@@ -443,14 +443,14 @@
border-right: 5px solid transparent;
border-bottom: 5px solid #FFF;
}
-.tooltip:after {
+.wm-nav-tooltip:after {
z-index: 1000001;
}
-.tooltip:before {
+.wm-nav-tooltip:before {
top: -6px;
border-bottom: 5px solid #CCC;
}
-.tooltip.tooltip-user {
+.wm-nav-tooltip.tooltip-user {
background: #3a3c3c;
border: none;
color: #FFF;
@@ -466,25 +466,25 @@
pointer-events: auto;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}
-.tooltip.tooltip-user:after,
-.tooltip.tooltip-user:before {
+.wm-nav-tooltip.tooltip-user:after,
+.wm-nav-tooltip.tooltip-user:before {
display: none;
}
-.tooltip.tooltip-user ul {
+.wm-nav-tooltip.tooltip-user ul {
padding: 0;
margin: 0;
list-style: none;
}
-.tooltip.tooltip-user ul > li {
+.wm-nav-tooltip.tooltip-user ul > li {
padding: 10px;
padding-left: 10px;
border-bottom: 1px solid #535656;
box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.2);
}
-.tooltip.tooltip-user ul > li:last-child {
+.wm-nav-tooltip.tooltip-user ul > li:last-child {
border-bottom: none;
}
-.tooltip.tooltip-user ul > li a {
+.wm-nav-tooltip.tooltip-user ul > li a {
display: block;
cursor: pointer;
text-decoration: none;
@@ -492,7 +492,7 @@
/*********************************************************
* Tooltip big
*/
-.tooltip.tooltip-big {
+.wm-nav-tooltip.tooltip-big {
width: 250px;
left: 0;
margin-top: 9px;
@@ -500,8 +500,8 @@
text-align: left;
padding: 0;
}
-.tooltip.tooltip-big:after,
-.tooltip.tooltip-big:before {
+.wm-nav-tooltip.tooltip-big:after,
+.wm-nav-tooltip.tooltip-big:before {
left: 33px;
}
.tooltip-big-heading {
@@ -514,7 +514,7 @@
max-height: 200px;
overflow-y: auto;
}
-.tooltip.tooltip-big ul {
+.wm-nav-tooltip.tooltip-big ul {
padding: 0;
margin: 0;
list-style: none;
@@ -522,23 +522,23 @@
/*********************************************************
* Typography
*/
-.webmaker-txt-light {
+.wm-nav-txt-light {
font-family: "Open Sans Light", "Open Sans", sans-serif;
}
-.webmaker-h3,
-.webmaker-h4 {
+.wm-nav-h3,
+.wm-nav-h4 {
margin: 1em 0 0.5em 0;
}
-.webmaker-h3 {
+.wm-nav-h3 {
font-size: 1.4em;
}
-.webmaker-h4 {
+.wm-nav-h4 {
font-size: 1.2em;
}
/* Login states */
-.webmaker-nav-container:not(.logged-in) .user {
+.wm-nav-container:not(.logged-in) .wm-nav-user {
display: none;
}
-.webmaker-nav-container.logged-in .wm-login-container {
+.wm-nav-container.logged-in .wm-nav-login-container {
display: none;
}
View
82 webmaker-nav/css/webmaker-nav.less
@@ -24,7 +24,7 @@
//FONTS
@fontsize: 12px;
-.webmaker-nav-container {
+.wm-nav-container {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: @fontsize;
border-bottom: 1px solid darken( @darkgrey, 5% );
@@ -36,12 +36,12 @@
}
}
-.webmaker-nav-top {
+.wm-nav-top {
background: @darkgrey;
height: @webmakernavheight;
}
-.webmaker-nav {
+.wm-nav {
height: @webmakernavheight;
padding: 0;
margin: 0;
@@ -53,7 +53,7 @@
float: left;
}
> li > a,
- > li > .link {
+ > li > .wm-nav-link {
@_padding: 15px; // Horizontal padding on each list item
position: relative;
@@ -75,7 +75,7 @@
color: #FFF;
}
// Active state
- &.webmaker-btn-active {
+ &.wm-nav-btn-active {
color: #FFF;
border-bottom-width: 1px;
border-top: 1px solid lighten( @darkgrey, 6% );
@@ -92,12 +92,12 @@
* Primary menu
*/
// This is the menu that always shows up, like "Projects", "Tools", ...
-.primary {
+.wm-nav-primary {
float: left;
> li {
border-right: 1px solid lighten( @darkgrey, 5% );
border-left: 1px solid darken( @darkgrey, 5% );
- .webmaker-expanded & {
+ .wm-nav-expanded & {
border-color: transparent;
}
&:last-child {
@@ -114,22 +114,22 @@
/*********************************************************
* User/Login Styles
*/
-.user {
+.wm-nav-user {
min-width: 150px;
}
// This is the menu on the right with user info stuff
-.user-info {
+.wm-nav-user-info {
float: right;
margin-right: @tabzillaoffset;
li {
border-right: none;
}
}
-.wm-login-container {
+.wm-nav-login-container {
cursor: pointer;
position: relative;
}
-.wm-login-btn {
+.wm-nav-login-btn {
color: #FFF;
line-height: 22px;
top: 3px;
@@ -170,8 +170,8 @@
background: lighten( @darkgrey, 15% );
}
}
-.tooltip.wm-join-tooltip,
-.tooltip.wm-login-error-tooltip {
+.wm-nav-tooltip.wm-nav-join-tooltip,
+.wm-nav-tooltip.wm-nav-login-error-tooltip {
pointer-events: auto;
top: 100%;
margin-top: 15px;
@@ -190,7 +190,7 @@
}
}
-.user-info > .notification-badge > a {
+.wm-nav-user-info > .notification-badge > a {
display: none;
height: 15px;
width: 15px;
@@ -205,7 +205,7 @@
}
}
-.webmaker-nav > .user {
+.wm-nav > .wm-nav-user {
position: relative;
> a {
padding-left: 8px;
@@ -215,19 +215,19 @@
/*********************************************************
* Tabs
*/
-.webmaker-tabs {
+.wm-nav-tabs {
height: 0;
- .webmaker-expanded & {
+ .wm-nav-expanded & {
height: auto;
}
}
-.webmaker-tabs,
-.webmaker-tab {
+.wm-nav-tabs,
+.wm-nav-tab {
background: @darkgrey;
}
// This is the menu with subnavigation
-.webmaker-tab {
+.wm-nav-tab {
position: relative;
width: 100%;
color: #FFF;
@@ -248,20 +248,20 @@
.transition( height 0.1s ease );
// Active state
- &.webmaker-tab-active {
+ &.wm-nav-tab-active {
height: @secondaryheight;
}
}
// Specific style for first tab
.tab-webmaker {
- &.webmaker-tab-active {
+ &.wm-nav-tab-active {
height: @secondaryheight + 50px;
}
- .tab-inner {
+ .wm-nav-tab-inner {
height: 100%;
}
- .secondary-info {
+ .wm-nav-secondary-info {
float: left;
width: 460px;
padding: 20px;
@@ -273,7 +273,7 @@
margin: 0;
}
}
- .webmaker-logo {
+ .wm-nav-logo {
float: left;
margin: 11px 0 0 15px;
opacity: 1;
@@ -282,7 +282,7 @@
height: 70px;
background: url( ../img/webmaker-logo.png ) no-repeat;
}
- .webmaker-slogan {
+ .wm-nav-slogan {
float: left;
width: 420px;
padding: 20px;
@@ -298,7 +298,7 @@
/*********************************************************
* Blocks
*/
-.wm-unit {
+.wm-nav-unit {
.clearfix();
&-side {
float: left;
@@ -317,13 +317,13 @@
* Tooltip
*/
-*:hover > .tooltip:not(.tooltip-no-hover) {
+*:hover > .wm-nav-tooltip:not(.tooltip-no-hover) {
opacity: 1;
visibility: visible;
.transition( opacity 0.3s ease 0.5s );
}
-.tooltip {
+.wm-nav-tooltip {
@_tooltipWidth: 110px;
&.tooltip-on {
opacity: 1;
@@ -383,7 +383,7 @@
}
// The user menu
-.tooltip.tooltip-user {
+.wm-nav-tooltip.tooltip-user {
background: @darkgrey;
border: none;
color: #FFF;
@@ -426,7 +426,7 @@
/*********************************************************
* Tooltip big
*/
-.tooltip.tooltip-big {
+.wm-nav-tooltip.tooltip-big {
width: 250px;
left: 0;
margin-top: 9px;
@@ -434,8 +434,8 @@
text-align: left;
padding: 0;
}
-.tooltip.tooltip-big:after,
-.tooltip.tooltip-big:before {
+.wm-nav-tooltip.tooltip-big:after,
+.wm-nav-tooltip.tooltip-big:before {
left: 33px;
}
.tooltip-big-heading {
@@ -448,7 +448,7 @@
max-height: 200px;
overflow-y: auto;
}
-.tooltip.tooltip-big ul {
+.wm-nav-tooltip.tooltip-big ul {
padding: 0;
margin: 0;
list-style: none;
@@ -458,18 +458,18 @@
* Typography
*/
-.webmaker-txt-light {
+.wm-nav-txt-light {
font-family: "Open Sans Light", "Open Sans", sans-serif;
}
-.webmaker-h3,
-.webmaker-h4 {
+.wm-nav-h3,
+.wm-nav-h4 {
margin: 1em 0 0.5em 0;
}
-.webmaker-h3 {
+.wm-nav-h3 {
font-size: 1.4em;
}
-.webmaker-h4 {
+.wm-nav-h4 {
font-size: 1.2em;
}
@@ -477,10 +477,10 @@
/* Login states */
-.webmaker-nav-container:not(.logged-in) .user {
+.wm-nav-container:not(.logged-in) .wm-nav-user {
display: none;
}
-.webmaker-nav-container.logged-in .wm-login-container {
+.wm-nav-container.logged-in .wm-nav-login-container {
display: none;
}
View
28 webmaker-nav/main.js
@@ -8,19 +8,19 @@ define( [
], function( $, ModeBuster, BASE_LAYOUT, LOGIN_ERROR_LAYOUT ) {
// Added to elements in primary nav when they are active
- var BTN_ACTIVE_CLASS = "webmaker-btn-active",
+ var BTN_ACTIVE_CLASS = "wm-nav-btn-active",
// Default ms to display login errors for
LOGIN_ERROR_DURATION = 5000;
function setupTabs( root, tabContainer ) {
// Added to tab when it's open
- var TAB_ACTIVE_CLASS = "webmaker-tab-active",
+ var TAB_ACTIVE_CLASS = "wm-nav-tab-active",
// Added to body when secondary nav is expanded
- EXPANDED_CLASS = "webmaker-expanded",
+ EXPANDED_CLASS = "wm-nav-expanded",
// The class prefix for each individual tab
TAB_PREFIX = "tab-";
- var primary = $( ".primary", root ),
+ var primary = $( ".wm-nav-primary", root ),
modeBuster = ModeBuster({
container: primary.add( tabContainer ),
oncancel: function() {
@@ -61,7 +61,7 @@ define( [
function UserMenuUI( container ) {
var self = {},
- usernameInner = $( ".user-name-container", container ),
+ usernameInner = $( ".wm-nav-user-name-container", container ),
userMenu = $( ".tooltip-user", container ),
modeBuster = ModeBuster({
container: container,
@@ -88,12 +88,12 @@ define( [
var customizations = $( "[data-webmaker-nav-role]", options.container )
.remove(),
root = $( options.container ).html( BASE_LAYOUT )
- .find( ".webmaker-nav-container" ),
- feedbackBtn = $( ".webmaker-feedback-btn", root ),
- loginBtn = $( ".wm-login-btn", root ),
- logoutBtn = $( ".logout-btn", root ),
- tabContainer = $( ".webmaker-tabs", root ),
- userMenuUI = UserMenuUI( $( ".user-name", root ) ),
+ .find( ".wm-nav-container" ),
+ feedbackBtn = $( ".wm-nav-feedback-btn", root ),
+ loginBtn = $( ".wm-nav-login-btn", root ),
+ logoutBtn = $( ".wm-nav-logout-btn", root ),
+ tabContainer = $( ".wm-nav-tabs", root ),
+ userMenuUI = UserMenuUI( $( ".wm-nav-user-name", root ) ),
feedbackCallback,
loginBtnCallback,
logoutBtnCallback,
@@ -105,7 +105,7 @@ define( [
var duration = options.duration || LOGIN_ERROR_DURATION;
var setTimeout = options.setTimeout || window.setTimeout;
var loginBtnContainer = loginBtn.parent();
- var tooltips = $( ".tooltip", loginBtnContainer )
+ var tooltips = $( ".wm-nav-tooltip", loginBtnContainer )
.css( "display", "none" );
var error = $( LOGIN_ERROR_LAYOUT ).appendTo( loginBtnContainer );
setTimeout(function() {
@@ -131,10 +131,10 @@ define( [
applyCustomizations = function() {
var customizers = {
'join-tooltip': function() {
- $('.wm-join-tooltip', root).empty().append(this);
+ $('.wm-nav-join-tooltip', root).empty().append(this);
},
'webmaker-info': function() {
- $('.webmaker-tab .secondary-info', tabContainer)
+ $('.wm-nav-tab .wm-nav-secondary-info', tabContainer)
.empty().append(this);
},
'user-options': function() {
View
8 webmaker-nav/templates/badge-ui-alert.html
@@ -1,7 +1,7 @@
-<div class="tooltip tooltip-big tooltip-on badge-ui-alert">
- <div class="tooltip-big-inner wm-unit">
- <img class="badge-ui-img wm-unit-side">
- <div class="wm-unit-body">
+<div class="wm-nav-tooltip tooltip-big tooltip-on badge-ui-alert">
+ <div class="tooltip-big-inner wm-nav-unit">
+ <img class="badge-ui-img wm-nav-unit-side">
+ <div class="wm-nav-unit-body">
<div class="badge-ui-desc">Achievement Unlocked!</div>
<div class="badge-ui-name"></div>
</div>
View
6 webmaker-nav/templates/badge-ui-list-item.html
@@ -1,6 +1,6 @@
-<li class="badge-ui-media wm-unit">
- <div class="badge-ui-img wm-unit-side"><img></div>
- <div class="badge-ui-bd wm-unit-body">
+<li class="badge-ui-media wm-nav-unit">
+ <div class="badge-ui-img wm-nav-unit-side"><img></div>
+ <div class="badge-ui-bd wm-nav-unit-body">
<div class="badge-ui-name"></div>
<div class="badge-ui-desc"></div>
</div>
View
14 webmaker-nav/templates/badge-ui-widget.html
@@ -4,10 +4,10 @@
<div class="badge-ui-icon-img"></div>
<div class="badge-ui-unread"></div>
</div>
- <div class="badge-ui-detail tooltip tooltip-on tooltip-big">
+ <div class="badge-ui-detail wm-nav-tooltip tooltip-on tooltip-big">
<div class="tooltip-big-heading">
- <div class="webmaker-txt-light">mozilla</div>
- <div class="badge-ui-title webmaker-h3">Webmaker Badges</div>
+ <div class="wm-nav-txt-light">mozilla</div>
+ <div class="badge-ui-title wm-nav-h3">Webmaker Badges</div>
</div>
<div class="tooltip-big-inner">
<div class="badge-ui-initializing">
@@ -22,18 +22,18 @@
</div>
<div class="badge-ui-ready-content">
<div class="badge-ui-earned-badges">
- <div class="wm-unit badge-ui-push-to-backpack">
- <button class="wm-unit-side-r wm-button wm-button-blue">+ Backpack</button>
+ <div class="wm-nav-unit badge-ui-push-to-backpack">
+ <button class="wm-nav-unit-side-r wm-nav-button wm-nav-button-blue">+ Backpack</button>
<div>
Congrats! Send your badges to your backpack to share
with the world.
</div>
</div>
- <div class="webmaker-h4">Earned Badges</div>
+ <div class="wm-nav-h4">Earned Badges</div>
<ul></ul>
</div>
<div class="badge-ui-unearned-badges">
- <div class="webmaker-h4">Available Badges</div>
+ <div class="wm-nav-h4">Available Badges</div>
<ul></ul>
</div><!--.badge-ui-unearned-badges-->
</div>
View
6 webmaker-nav/templates/login-error.html
@@ -1,7 +1,7 @@
-<div class="wm-login-error-tooltip tooltip tooltip-on">
- <div class="wm-unit">
+<div class="wm-nav-login-error-tooltip wm-nav-tooltip tooltip-on">
+ <div class="wm-nav-unit">
<h3>Login Failed.</h3>
- <div class="wm-unit-body">
+ <div class="wm-nav-unit-body">
<p>Perhaps you cancelled the Persona login process or an error occurred. Either way, it's unfortunate.</p>
</div>
</div>
View
58 webmaker-nav/templates/webmaker-nav.html
@@ -1,35 +1,35 @@
-<div class="webmaker-nav-container">
- <div class="webmaker-nav-top">
- <ul class="webmaker-nav primary">
+<div class="wm-nav-container">
+ <div class="wm-nav-top">
+ <ul class="wm-nav wm-nav-primary">
<li><a class="on" data-tab="webmaker">Webmaker</a></li>
<li><a data-tab="projects">Projects</a></li>
<li><a data-tab="tools">Tools</a></li>
<li><a data-tab="events">Events</a></li>
- <li><a href="#" class="webmaker-feedback-btn">Feedback</a></li>
+ <li><a href="#" class="wm-nav-feedback-btn">Feedback</a></li>
</ul>
- <ul class="webmaker-nav user-info">
+ <ul class="wm-nav wm-nav-user-info">
- <li class="wm-login-container">
- <span class="wm-login-btn">Sign Up</span>
- <div class="wm-join-tooltip tooltip">
- <div class="wm-unit">
+ <li class="wm-nav-login-container">
+ <span class="wm-nav-login-btn">Sign Up</span>
+ <div class="wm-nav-join-tooltip wm-nav-tooltip">
+ <div class="wm-nav-unit">
<h3>Log in to earn badges<br> and track your learning.</h3>
- <div class="wm-unit-side">
+ <div class="wm-nav-unit-side">
<img src="http://people.mozilla.org/~smartell/persona/assets/persona-logo.png" alt="">
</div>
- <div class="wm-unit-body">
+ <div class="wm-nav-unit-body">
<p>Don't have an account yet? All you need is an email to get started. Webmaker uses <strong>Persona</strong>, which puts you in control of your identity through a single email address of your choice.</p>
</div>
</div>
</div>
</li>
- <li class="user">
- <div class="user-name link">
- <span class="user-name-container"></span>
- <span class="icon icon-white icon-downtick"></span>
- <div class="tooltip tooltip-user tooltip-no-hover">
+ <li class="wm-nav-user">
+ <div class="wm-nav-user-name wm-nav-link">
+ <span class="wm-nav-user-name-container"></span>
+ <span class="wm-nav-icon icon-white icon-downtick"></span>
+ <div class="wm-nav-tooltip tooltip-user tooltip-no-hover">
<ul>
- <li><a class="logout-btn">Logout</a></li>
+ <li><a class="wm-nav-logout-btn">Logout</a></li>
</ul>
</div>
</div>
@@ -37,32 +37,32 @@
</ul>
</div>
- <div class="webmaker-tabs">
- <div class="webmaker-nav webmaker-tab tab-webmaker">
- <div class="tab-inner">
- <div class="webmaker-logo"></div>
- <h3 class="webmaker-slogan">Mozilla Webmaker wants to help you make something amazing on the web and learn webmaking skills in the process.</h3>
- <div class="secondary-info">
+ <div class="wm-nav-tabs">
+ <div class="wm-nav wm-nav-tab tab-webmaker">
+ <div class="wm-nav-tab-inner">
+ <div class="wm-nav-logo"></div>
+ <h3 class="wm-nav-slogan">Mozilla Webmaker wants to help you make something amazing on the web and learn webmaking skills in the process.</h3>
+ <div class="wm-nav-secondary-info">
<p>You can use Webmaker tools and projects to remix video, create webpages, learn skills like HTML, CSS and collaboration on the Web, earn badges, find meetups in your area and <a href="http://webmaker.org" target="_blank">much much more</a>.</p>
</div>
</div>
</div>
- <div class="webmaker-tab tab-projects">
- <ul class="webmaker-nav tab-inner">
+ <div class="wm-nav-tab tab-projects">
+ <ul class="wm-nav tab-inner">
<li><a href="https://webmaker.org/projects/" target="_blank">All</a></li>
<li><a href="https://webmaker.org/projects/?tool=popcorn" target="_blank">Popcorn Projects</a></li>
<li><a href="https://webmaker.org/projects/?tool=thimble" target="_blank">Thimble Projects</a></li>
</ul>
</div>
- <div class="webmaker-tab tab-tools">
- <ul class="webmaker-nav tab-inner">
+ <div class="wm-nav-tab tab-tools">
+ <ul class="wm-nav tab-inner">
<li><a href="https://popcorn.webmaker.org/templates/basic" target="_blank">Popcorn</a></li>
<li><a href="https://thimble.webmaker.org/editor" target="_blank">Thimble</a></li>
<li><a href="https://webmaker.org/tools/x-ray-goggles/" target="_blank">X-ray Goggles</a></li>
</ul>
</div>
- <div class="webmaker-tab tab-events">
- <ul class="webmaker-nav tab-inner">
+ <div class="wm-nav-tab tab-events">
+ <ul class="wm-nav tab-inner">
<li><a href="https://webmaker.org/events" target="_blank">All Events</a></li>
<li><a href="https://webmaker.org/events/search" target="_blank">Search</a></li>
<li><a href="https://donate.mozilla.org/page/event/create" target="_blank">Create</a></li>
Something went wrong with that request. Please try again.