Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Collapse full class name segments down to three letter abbreviations.…

… Add comments to document what the classes are.
  • Loading branch information...
commit 76c7ed899a495c411a507b43862f45de447fee81 1 parent e4ced13
@faisal authored
View
257 src/ninjaui.css
@@ -2,28 +2,34 @@
Copyright 2008-2011 Jamie Hoover.
Licensed per the terms of the Apache License v2.0. See Readme.md for details.
*/
-.nui-autocomplete {
+
+/* autocomplete */
+.nui-atc {
position: relative;
}
-.nui-autocomplete .nui-icon[aria-label=spin] {
+/* autocomplete icon[aria-label=spin] */
+.nui-atc .nui-icn[aria-label=spin] {
position: absolute;
right: -20px;
top: 1px;
}
-.nui-autocomplete .nui-icon[aria-label=spin] g {
+/* autocomplete icon[aria-label=spin] g */
+.nui-atc .nui-icn[aria-label=spin] g {
fill: #999 !important;
}
-.nui-blocker {
+/* blocker */
+.nui-blk {
background-color: rgba(255,255,255,0.5);
left: 0;
position: absolute;
top: 0;
width: 100%;
}
-.nui-button,
-.nui-item.nui-hover,
-.nui-slider-button,
-.nui-slider-level,
+/* button, item.hover, slider-button, slider-level, tab */
+.nui-btn,
+.nui-itm.nui-hvr,
+.nui-sld-btn,
+.nui-sld-lvl,
.nui-tab {
background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0, rgba(255,255,255,0.2)), colorstop(0.5, rgba(255,255,255,0)), colorstop(0.5, rgba(0,0,0,0)), colorstop(1, rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%);
@@ -34,49 +40,54 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(255,255,255,0.2)', EndColorStr='rgba(0,0,0,0.1)');
position: relative;
}
-.nui-button,
-.nui-item,
+/* button, item, tab */
+.nui-btn,
+.nui-itm,
.nui-tab {
line-height: 1em;
padding: 0.2em 1em;
text-shadow: 0 1px 0 #fff;
}
-.nui-button:hover,
-.nui-item.nui-hover,
-.nui-slider-button,
-.nui-slider-groove,
-.nui-star:hover,
+/* button:hover, item.hover, slider-button, slider-groove, star:hover, tab:hover */
+.nui-btn:hover,
+.nui-itm.nui-hvr,
+.nui-sld-btn,
+.nui-sld-grv,
+.nui-str:hover,
.nui-tab:hover {
cursor: pointer;
}
-.nui-button,
-.nui-list,
-.nui-dialog,
-.nui-hint,
-.nui-slider-button,
-.nui-slider-groove,
-.nui-slider-level,
+/* button, list, dialog, hint, slider-button, slider-groove, slider-level, tab, tray */
+.nui-btn,
+.nui-lst,
+.nui-dlg,
+.nui-hnt,
+.nui-sld-btn,
+.nui-sld-grv,
+.nui-sld-lvl,
.nui-tab,
-.nui-tray {
+.nui-try {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
-.nui-button,
-.nui-list,
-.nui-dialog,
-.nui-hint,
-.nui-slider-button,
-.nui-slider-groove,
+/* button, list, dialog, hint, slider-button, slider-groove, tab, tray */
+.nui-btn,
+.nui-lst,
+.nui-dlg,
+.nui-hnt,
+.nui-sld-btn,
+.nui-sld-grv,
.nui-tab,
-.nui-tray {
+.nui-try {
background-color: #eee;
border: 1px solid #666;
}
-.nui-button,
-.nui-list,
-.nui-dialog,
-.nui-hint{
+/* button, list, dialog, hint */
+.nui-btn,
+.nui-lst,
+.nui-dlg,
+.nui-hnt{
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
@@ -84,97 +95,116 @@
-moz-border-radius: 0.4em;
border-radius: 0.4em;
}
-.nui-button,
-.nui-item,
-.nui-slider-button,
-.nui-star,
+/* button, item, slider-button, star, tab */
+.nui-btn,
+.nui-itm,
+.nui-sld-btn,
+.nui-str,
.nui-tab {
margin: 0;
outline-width: 1px;
}
-.nui-button,
+/* button, tab */
+.nui-btn,
.nui-tab {
text-align: center;
}
-.nui-button .nui-icon,
-.nui-item .nui-icon,
-.nui-tab .nui-icon {
+/* button icon, item icon, tab icon */
+.nui-btn .nui-icn,
+.nui-itm .nui-icn,
+.nui-tab .nui-icn {
vertical-align: bottom;
}
-.nui-dialog,
-.nui-hint {
+/* dialog, hint */
+.nui-dlg,
+.nui-hnt {
padding: 0.6em;
}
-.nui-dialog .nui-icon[aria-label=X] {
+/* dialog, icon[aria-label=X] */
+.nui-dlg .nui-icn[aria-label=X] {
cursor: pointer;
position: absolute;
right: -11px;
top: -11px;
}
-.nui-drawer .nui-button {
+/* drawer button */
+.nui-drw .nui-btn {
display: block;
padding-left: 0;
text-align: left;
width: 100%;
}
-.nui-drawer .nui-button.nui-select {
+/* drawer button.select */
+.nui-drw .nui-btn.nui-slc {
-webkit-border-radius: 0.35em 0.35em 0 0;
-moz-border-radius: 0.35em 0.35em 0 0;
border-radius: 0.35em 0.35em 0 0;
}
-.nui-hint {
+/* hint */
+.nui-hnt {
white-space: nowrap;
}
-.nui-icon {
+/* icon */
+.nui-icn {
display: inline-block;
height: 1em;
vertical-align: middle;
width: 1em;
}
-.nui-icon g {
+/* icon g */
+.nui-icn g {
fill: #333;
stroke: #000;
}
-.nui-icon[aria-label=X] {
+/* icon[aria-label=X] */
+.nui-icn[aria-label=X] {
height: 22px;
width: 22px;
}
-.nui-icon[aria-label=X] circle {
+/* icon[aria-label=X] circle */
+.nui-icn[aria-label=X] circle {
stroke: #999;
stroke-width: 1;
}
-.nui-icon[aria-label=X] polygon {
+/* icon[aria-label=X] polygon */
+.nui-icn[aria-label=X] polygon {
fill: #fff;
}
-.nui-input {
+/* input */
+.nui-inp {
padding-right: 20px;
}
-.nui-item.nui-hover,
-.nui-slider-groove,
-.nui-select {
+/* item.hover, slider-groove, select */
+.nui-itm.nui-hvr,
+.nui-sld-grv,
+.nui-slc {
background-color: #999;
}
-.nui-item.nui-hover,
-.nui-select {
+/* item.hover, select */
+.nui-itm.nui-hvr,
+.nui-slc {
color: #fff;
text-shadow: 0 1px 0 #666;
}
-.nui-item.nui-hover g,
-.nui-select g {
+/* item.hover g, select g */
+.nui-itm.nui-hvr g,
+.nui-slc g {
fill: #fff;
stroke: #fff;
}
-.nui-item {
+/* item */
+.nui-itm {
background: none;
border: none;
display: block;
text-align: left;
width: 100%;
}
-.nui-list,
-.nui-dialog,
-.nui-hint {
+/* list, dialog, hint */
+.nui-lst,
+.nui-dlg,
+.nui-hnt {
background-color: rgba(255,255,255,0.85);
border: 1px solid #ccc;
-webkit-box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.5);
@@ -186,26 +216,31 @@
position: absolute;
z-index: +1;
}
-.nui-list {
+/* list */
+.nui-lst {
padding: 0.6em 0;
text-align: left;
}
-.nui-rule {
+/* rule */
+.nui-rul {
border-bottom: 1px solid #eee;
border-top: 1px solid #ccc;
margin: 0.4em 0;
}
-.nui-slider {
+/* slider */
+.nui-sld {
display: inline-block;
}
-.nui-slider-button,
-.nui-slider-groove,
-.nui-slider-level {
+/* slider-button, slider-groove, slider-level */
+.nui-sld-btn,
+.nui-sld-grv,
+.nui-sld-lvl {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
-.nui-slider-button {
+/* slider-button */
+.nui-sld-btn {
height: 18px;
left: 0;
padding: 0;
@@ -213,15 +248,18 @@
top: 0;
width: 18px;
}
-.nui-slider-button.nui-select {
+/* slider-button.select */
+.nui-sld-btn.nui-slc {
background-color: #ccc;
}
-.nui-slider-groove,
-.nui-slider-level {
+/* slider-groove, slider-level */
+.nui-sld-grv,
+.nui-sld-lvl {
height: 4px;
}
-.nui-slider-groove,
-.nui-select {
+/* slider-groove, select */
+.nui-sld-grv,
+.nui-slc {
background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0, rgba(0,0,0,0.3)), colorstop(0.5, rgba(0,0,0,0)), colorstop(0.5, rgba(255,255,255,0)), colorstop(1, rgba(255,255,255,0.1)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
@@ -230,93 +268,114 @@
background-image: linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0,0,0,0.2)', EndColorStr='rgba(255,255,255,0.1)');
}
-.nui-slider-groove {
+/* slider-groove */
+.nui-sld-grv {
cursor: pointer;
left: 9px;
position: absolute;
right: 9px;
top: 5px;
}
-.nui-slider-level {
+/* slider-level */
+.nui-sld-lvl {
background-color: #6cf;
}
-.nui-slider-title {
+/* slider-title */
+.nui-sld-ttl {
font-weight: bold;
}
-.nui-slider-track {
+/* slider-track */
+.nui-sld-trk {
height: 18px;
position: relative;
}
-.nui-star {
+/* star */
+.nui-str {
background: none;
border: none;
margin-right: 1px;
padding: 0;
}
-.nui-star .nui-icon {
+/* star icon */
+.nui-str .nui-icn {
height: 18px;
width: 18px;
}
-.nui-star g {
+/* star g */
+.nui-str g {
fill: #eee;
stroke: #ccc;
stroke-width: 1;
}
-.nui-star.nui-average g {
+/* star.average g */
+.nui-str.nui-avg g {
fill: #6cf;
stroke: #39c;
}
-.nui-star.nui-individual g {
+/* star.individual g */
+.nui-str.nui-ind g {
fill: #c96;
stroke: #963;
}
-.nui-stem {
+/* stem */
+.nui-stm {
display: inline-block;
height: 8px;
position: absolute;
top: -8px;
width: 8px;
}
-.nui-stem g {
+/* stem g */
+.nui-stm g {
fill: rgba(255,255,255,0.85);
stroke: #ccc;
}
-.nui-tabs-horizontal,
-.nui-tabs-vertical {
+/* tabs-horizontal, tabs-vertical */
+.nui-tab-hrz,
+.nui-tab-vrt {
white-space: nowrap;
}
-.nui-tabs-horizontal {
+/* tabs-horizontal */
+.nui-tab-hrz {
display: inline-block;
}
-.nui-tabs-vertical .nui-tab {
+/* tabs-vertical tab */
+.nui-tab-vrt .nui-tab {
display: block;
}
+/* tab */
.nui-tab {
border-left-color: #ccc;
}
+/* tab:first-child */
.nui-tab:first-child {
border-left-color: #999;
-webkit-border-radius: 0.35em 0 0 0.35em;
-moz-border-radius: 0.35em 0 0 0.35em;
border-radius: 0.35em 0 0 0.35em;
}
+/* tab:last-child */
.nui-tab:last-child {
border-right-color: #999;
-webkit-border-radius: 0 0.35em 0.35em 0;
-moz-border-radius: 0 0.35em 0.35em 0;
border-radius: 0 0.35em 0.35em 0;
}
-.nui-tab.nui-select {
+/* tab.select */
+.nui-tab.nui-slc {
border-left-color: #666;
border-right-color: #666;
}
-.nui-tab:first-child.nui-select {
+/* tab:first-child.select */
+.nui-tab:first-child.nui-slc {
border-left-color: #999;
}
-.nui-tab:last-child.nui-select {
+/* tab:last-child.select */
+.nui-tab:last-child.nui-slc {
border-right-color: #999;
}
-.nui-tray {
+/* tray */
+.nui-try {
border: 1px solid #ccc;
border-bottom-color: #eee;
-webkit-border-radius: 0 0 0.35em 0.35em;
@@ -328,9 +387,11 @@
/*
State changes, keep these last and in order!
*/
-.nui-placeholder {
+/* placeholder */
+.nui-plc {
color: #999;
}
-.nui-disable {
+/* disable */
+.nui-dsb {
cursor: default !important;
}
View
128 src/ninjaui.js
@@ -81,7 +81,7 @@
var $object = $(this).ninja();
if ($.isFunction(callback)) {
$object.bind('deselect.ninja', callback);
- } else if ($object.is('.nui-select') && !$object.is('.nui-disable')) {
+ } else if ($object.is('.nui-slc') && !$object.is('.nui-dsb')) {
$object.trigger('deselect.ninja');
}
});
@@ -105,7 +105,7 @@
if ($.isFunction(callback)) {
$object.bind('disable.ninja', callback);
} else {
- $object.fadeTo('fast', 0.5).addClass('nui-disable').trigger('disable.ninja');
+ $object.fadeTo('fast', 0.5).addClass('nui-dsb').trigger('disable.ninja');
}
});
},
@@ -116,7 +116,7 @@
if ($.isFunction(callback)) {
$object.bind('enable.ninja', callback);
} else {
- $object.fadeTo('fast', 1).removeClass('nui-disable').trigger('enable.ninja');
+ $object.fadeTo('fast', 1).removeClass('nui-dsb').trigger('enable.ninja');
}
});
},
@@ -127,11 +127,11 @@
var
$object = $(this),
$hint = $('<span/>', {
- 'class': 'nui-hint',
+ 'class': 'nui-hnt',
css: options.css,
html: options.html
}),
- $stem = $('<svg class="nui-stem" height="1" width="1" version="1.1" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><g><polygon points="4,1 8,8 1,8" stroke-width="0"/><line x1="4" x2="0" y2="8"/><line x1="4" x2="8" y2="8"/></g></svg>').appendTo($hint);
+ $stem = $('<svg class="nui-stm" height="1" width="1" version="1.1" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><g><polygon points="4,1 8,8 1,8" stroke-width="0"/><line x1="4" x2="0" y2="8"/><line x1="4" x2="8" y2="8"/></g></svg>').appendTo($hint);
if (options.css) {
$stem.find('g').css(options.css);
}
@@ -174,10 +174,10 @@
$hover = null,
$object = $(this).ninja(),
$list = $('<div/>', {
- 'class': 'nui-list'
+ 'class': 'nui-lst'
});
- if ($object.is('.nui-autocomplete')) {
- $object.find('.nui-icon[aria-label=spin]').hide();
+ if ($object.is('.nui-atc')) {
+ $object.find('.nui-icn[aria-label=spin]').hide();
}
if (options.choices.length) {
$object.bind({
@@ -185,7 +185,7 @@
$(document).unbind('click.ninja keydown.ninja keyup.ninja');
$list.detach();
if ($hover) {
- $hover.removeClass('nui-hover');
+ $hover.removeClass('nui-hvr');
}
}
});
@@ -206,23 +206,23 @@
$object.delist();
} else if ($.inArray(event.keyCode, [9, 40]) > -1 && !event.shiftKey) {/* tab or down arrow */
if ($hover) {
- if ($hover.nextAll('.nui-item').length) {
- $hover.nextAll('.nui-item:first').trigger('mouseenter.ninja');
+ if ($hover.nextAll('.nui-itm').length) {
+ $hover.nextAll('.nui-itm:first').trigger('mouseenter.ninja');
} else {
- $list.find('.nui-item:first').trigger('mouseenter.ninja');
+ $list.find('.nui-itm:first').trigger('mouseenter.ninja');
}
} else {
- $list.find('.nui-item:first').trigger('mouseenter.ninja');
+ $list.find('.nui-itm:first').trigger('mouseenter.ninja');
}
} else if (event.keyCode === 38 || (event.shiftKey && event.keyCode === 9)) {/* shift+tab or up arrow */
if ($hover) {
- if ($hover.prevAll('.nui-item').length) {
- $hover.prevAll('.nui-item:first').trigger('mouseenter.ninja');
+ if ($hover.prevAll('.nui-itm').length) {
+ $hover.prevAll('.nui-itm:first').trigger('mouseenter.ninja');
} else {
- $list.find('.nui-item:last').trigger('mouseenter.ninja');
+ $list.find('.nui-itm:last').trigger('mouseenter.ninja');
}
} else {
- $list.find('.nui-item:last').trigger('mouseenter.ninja');
+ $list.find('.nui-itm:last').trigger('mouseenter.ninja');
}
}
return false;
@@ -245,15 +245,15 @@
var $choice;
if (choice.spacer) {
$choice = $('<div/>', {
- 'class': 'nui-rule'
+ 'class': 'nui-rul'
});
} else {
$choice = $('<button/>', {
- 'class': 'nui-item'
+ 'class': 'nui-itm'
});
$choice.bind({
'mouseleave.ninja': function () {
- $hover.removeClass('nui-hover');
+ $hover.removeClass('nui-hvr');
},
'click.ninja': function () {
$object.trigger('delist.ninja').focus();
@@ -268,7 +268,7 @@
if ($hover) {
$hover.trigger('mouseleave.ninja');
}
- $hover = $choice.addClass('nui-hover');
+ $hover = $choice.addClass('nui-hvr');
}
});
}
@@ -309,7 +309,7 @@
'blur.ninja': function () {
value = $object.val();
if (value === '' || value === placeholder) {
- $object.addClass('nui-placeholder');
+ $object.addClass('nui-plc');
if (value === '') {
$object.val(placeholder);
}
@@ -317,7 +317,7 @@
},
'focus.ninja': function () {
if ($object.val() === placeholder) {
- $object.removeClass('nui-placeholder').val('');
+ $object.removeClass('nui-plc').val('');
}
}
}).trigger('blur.ninja');
@@ -331,7 +331,7 @@
var $object = $(this).ninja();
if ($.isFunction(event)) {
$object.bind('select.ninja', event);
- } else if (!$object.is('.nui-disable')) {
+ } else if (!$object.is('.nui-dsb')) {
$object.trigger('select.ninja');
}
});
@@ -357,7 +357,7 @@
var
timer,
$autocomplete = $('<span/>', {
- 'class': 'nui-autocomplete'
+ 'class': 'nui-atc'
}).bind({
'select.ninja': function (event) {
if (event.html) {
@@ -372,14 +372,14 @@
}
}),
$input = $('<input/>', {
- 'class': 'nui-input',
+ 'class': 'nui-inp',
type: 'text'
}).bind({
'keyup.ninja': function (event) {
clearTimeout(timer);
if ($.inArray(event.keyCode, [9, 13, 27, 37, 38, 39, 40]) === -1 && $input.val() !== '') {/* not tab, return, escape, left , up, right or down */
timer = setTimeout(function () {
- var $spin = $autocomplete.find('.nui-icon[aria-label=spin]');
+ var $spin = $autocomplete.find('.nui-icn[aria-label=spin]');
if ($spin.is(':hidden')) {
$spin.show();
} else {
@@ -401,14 +401,14 @@
button: function (options) {
options = $.extend({}, defaults, options);
var $button = $('<button/>', {
- 'class': 'nui-button',
+ 'class': 'nui-btn',
css: options.css,
html: options.html
});
$button.bind({
'click.ninja': function (event) {
- if (!$button.is('.nui-disable')) {
- if ($button.is('.nui-select')) {
+ if (!$button.is('.nui-dsb')) {
+ if ($button.is('.nui-slc')) {
$button.trigger('deselect.ninja');
} else {
$button.trigger('select.ninja');
@@ -417,7 +417,7 @@
event.stopImmediatePropagation();
},
'deselect.ninja': function () {
- $button.removeClass('nui-select');
+ $button.removeClass('nui-slc');
},
'disable.ninja': function () {
$button.attr({
@@ -430,7 +430,7 @@
});
},
'select.ninja': function () {
- $button.addClass('nui-select');
+ $button.addClass('nui-slc');
}
});
if (options.select) {
@@ -448,7 +448,7 @@
}, options);
var
$dialog = $('<span/>', {
- 'class': 'nui-dialog',
+ 'class': 'nui-dlg',
css: options.css,
html: options.html
}),
@@ -458,7 +458,7 @@
$dialog.detach();
}).appendTo($dialog),
$blocker = $('<div/>', {
- 'class': 'nui-blocker'
+ 'class': 'nui-blk'
}).bind('click.ninja', function (event) {
if ($.inArray($dialog[0], $(event.target).parents()) === -1) {
$dialog.detach();
@@ -492,11 +492,11 @@
options = $.extend({}, defaults, options);
var
$drawer = $('<div/>', {
- 'class': 'nui-drawer',
+ 'class': 'nui-drw',
css: options.css
}),
$tray = $('<div/>', {
- 'class': 'nui-tray',
+ 'class': 'nui-try',
html: options.html
}).appendTo($drawer),
$arrowDown = $.ninja.icon({
@@ -592,7 +592,7 @@
defs = '<defs><rect id="' + idSymbol + '" x="7" width="2" height="4"/></defs>';
g = '<use xlink:href="#' + idSymbol + '" style="opacity:.1" transform="rotate(30 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.2" transform="rotate(60 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.3" transform="rotate(90 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.4" transform="rotate(120 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.5" transform="rotate(150 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.6" transform="rotate(180 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.7" transform="rotate(210 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.8" transform="rotate(240 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.9" transform="rotate(270 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.9.5" transform="rotate(300 8 8)"/><use xlink:href="#' + idSymbol + '" style="opacity:.9.75" transform="rotate(330 8 8)"/><use xlink:href="#' + idSymbol + '"/>';
}
- $icon = $('<svg aria-label="' + options.name + '" class="nui-icon" height="1" width="1"' + onload + ' role="img" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>' + options.name + '</title>' + defs + '<g id="' + idVector + '" stroke-width="0">' + g + '</g></svg>');
+ $icon = $('<svg aria-label="' + options.name + '" class="nui-icn" height="1" width="1"' + onload + ' role="img" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>' + options.name + '</title>' + defs + '<g id="' + idVector + '" stroke-width="0">' + g + '</g></svg>');
if (options.css) {
$icon.find('g').css(options.css);
}
@@ -603,7 +603,7 @@
options = $.extend({}, defaults, options);
var $menu = $.ninja.button($.extend({}, options, {
html: options.html
- })).addClass('nui-menu').append($.ninja.icon({
+ })).addClass('nui-mnu').append($.ninja.icon({
name: 'arrow-down'
})).select(function () {
$menu.blur().list(options);
@@ -627,32 +627,32 @@
'class': 'nui-rating'
}).bind({
'mouseleave.ninja': function () {
- $rating.find('.nui-star').each(function (ii, star) {
+ $rating.find('.nui-str').each(function (ii, star) {
var $star = $(star);
if (options.select === 0) {
if (ii < options.average) {
- $star.addClass('nui-average');
+ $star.addClass('nui-avg');
} else {
- $star.removeClass('nui-average');
+ $star.removeClass('nui-avg');
}
}
if (ii < options.select) {
- $star.addClass('nui-individual');
+ $star.addClass('nui-ind');
} else {
- $star.removeClass('nui-individual');
+ $star.removeClass('nui-ind');
}
});
}
});
for (i = 0; i < options.stars; i++) {
$('<button/>', {
- 'class': 'nui-star',
+ 'class': 'nui-str',
html: $.ninja.icon({
'name': 'star'
})
}).appendTo($rating);
}
- $rating.find('.nui-star').each(function (i, star) {
+ $rating.find('.nui-str').each(function (i, star) {
i++;
var $star = $(star);
$star.bind({
@@ -664,12 +664,12 @@
});
},
'mouseenter.ninja': function () {
- $rating.find('.nui-star').each(function (ii, star) {
- var $star = $(star).removeClass('nui-average');
+ $rating.find('.nui-str').each(function (ii, star) {
+ var $star = $(star).removeClass('nui-avg');
if (ii < i) {
- $star.addClass('nui-individual');
+ $star.addClass('nui-ind');
} else {
- $star.removeClass('nui-individual');
+ $star.removeClass('nui-ind');
}
});
}
@@ -692,20 +692,20 @@
increment = options.width / slots,
left = options.slot * increment,
$choice = $('<span/>', {
- 'class': 'nui-slider-choice',
+ 'class': 'nui-sld-choice',
html: options.choices[options.slot].html
}),
$button = $('<button/>', {
- 'class': 'nui-slider-button',
+ 'class': 'nui-sld-btn',
css: { left: left }
}),
trackWidth = options.width + 18,
$level = $('<div/>', {
- 'class': 'nui-slider-level',
+ 'class': 'nui-sld-lvl',
css: { width: left }
}),
$slider = $('<span/>', {
- 'class': 'nui-slider'
+ 'class': 'nui-sld'
}).bind({
'change.ninja select.ninja': function (event) {
var slot;
@@ -729,11 +729,11 @@
}
}).append($choice),
$track = $('<div/>', {
- 'class': 'nui-slider-track',
+ 'class': 'nui-sld-trk',
css: { width: trackWidth }
}).appendTo($slider),
$groove = $('<div/>', {
- 'class': 'nui-slider-groove'
+ 'class': 'nui-sld-grv'
}).bind('click.ninja', function (event) {
$button.trigger({
type: 'select.ninja',
@@ -743,7 +743,7 @@
$track.append($groove.append($level), $button);
if (options.title) {
$choice.before($('<span/>', {
- 'class': 'nui-slider-title',
+ 'class': 'nui-sld-ttl',
text: options.title + ': '
}));
}
@@ -768,7 +768,7 @@
},
'mousedown.ninja touchstart.ninja': function (event) {
event.preventDefault();
- $button.addClass('nui-select');
+ $button.addClass('nui-slc');
return false;
},
'mousedown.ninja': function (event) {
@@ -785,7 +785,7 @@
});
},
'mouseup.ninja': function (event) {
- $button.removeClass('nui-select');
+ $button.removeClass('nui-slc');
drag = false;
$button.trigger({
type: 'select.ninja',
@@ -812,7 +812,7 @@
},
'touchend.ninja': function (event) {
event.preventDefault();
- $button.removeClass('nui-select').trigger({
+ $button.removeClass('nui-slc').trigger({
type: 'select.ninja',
sliderX: Math.round((touch.pageX - offsetX) / increment)
});
@@ -827,9 +827,9 @@
}, options);
var $tabs = $('<span/>');
if (options.vertical) {
- $tabs.addClass('nui-tabs-vertical');
+ $tabs.addClass('nui-tab-vrt');
} else {
- $tabs.addClass('nui-tabs-horizontal');
+ $tabs.addClass('nui-tab-hrz');
}
$.each(options.choices, function (i, choice) {
var $tab = $('<button/>', {
@@ -838,7 +838,7 @@
html: choice.html || choice
}).bind({
'click.ninja': function () {
- if (!$tab.is('.nui-disable') && !$tab.is('.nui-select')) {
+ if (!$tab.is('.nui-dsb') && !$tab.is('.nui-slc')) {
$tab.trigger('select.ninja');
}
},
@@ -853,8 +853,8 @@
});
},
'select.ninja': function () {
- $tabs.children().not($tab).removeClass('nui-select');
- $tab.addClass('nui-select');
+ $tabs.children().not($tab).removeClass('nui-slc');
+ $tab.addClass('nui-slc');
if ($.isFunction(choice.select)) {
choice.select();
}
View
20 test/js/spec.js
@@ -151,7 +151,7 @@ $versions(jQueryVersions).load(scriptPath).execute(function ($, jQuery, version)
$examples.append('<div class="ninjaui-example-title">$.ninja.button()</div>', $example.clone().append($button, ' ', $toggleSelect, ' Select ', $toggleDisable, ' Disable', '<br/><br/>', $buttonSelected, ' ', $buttonDisabled));
it('should have button class', function () {
- assert($button.hasClass('nui-button')).isTrue();
+ assert($button.hasClass('nui-btn')).isTrue();
});
it('should accept css overrides on creation', function () {
@@ -164,12 +164,12 @@ $versions(jQueryVersions).load(scriptPath).execute(function ($, jQuery, version)
assert($buttonSelected.html()).equals('<i>Selected</i> Button');
});
- it('should have class of nui-select when select is true', function () {
- assert($buttonSelected.hasClass('nui-select')).isTrue();
+ it('should have class of nui-slc when select is true', function () {
+ assert($buttonSelected.hasClass('nui-slc')).isTrue();
});
- it('should have class of nui-disable when disable is true', function () {
- assert($buttonDisabled.hasClass('nui-disable')).isTrue();
+ it('should have class of nui-dsb when disable is true', function () {
+ assert($buttonDisabled.hasClass('nui-dsb')).isTrue();
});
});
@@ -220,7 +220,7 @@ $versions(jQueryVersions).load(scriptPath).execute(function ($, jQuery, version)
$examples.append('<div class="ninjaui-example-title">$.ninja.drawer()</div>', $example.clone().append($drawer, '<br/>', $drawerSelect));
it('should have drawer class', function () {
- assert($drawer.hasClass('nui-drawer')).isTrue();
+ assert($drawer.hasClass('nui-drw')).isTrue();
});
it('should accept css overrides on creation', function () {
@@ -230,15 +230,15 @@ $versions(jQueryVersions).load(scriptPath).execute(function ($, jQuery, version)
});
it('should accept html content on creation', function () {
- assert($drawer.find('.nui-tray').html()).equals('<div style="padding: 50px">This is <b>HTML</b> inside the drawer.</div>');
+ assert($drawer.find('.nui-try').html()).equals('<div style="padding: 50px">This is <b>HTML</b> inside the drawer.</div>');
});
it('should have a right arrow before selecting', function () {
- assert($drawer.find('.nui-button .nui-icon').attr('aria-label')).equals('arrow-right');
+ assert($drawer.find('.nui-btn .nui-icn').attr('aria-label')).equals('arrow-right');
});
it('should have a down arrow after selecting', function () {
- assert($drawerSelect.find('.nui-button .nui-icon').attr('aria-label')).equals('arrow-down');
+ assert($drawerSelect.find('.nui-btn .nui-icn').attr('aria-label')).equals('arrow-down');
});
});
@@ -300,7 +300,7 @@ $versions(jQueryVersions).load(scriptPath).execute(function ($, jQuery, version)
it('should have icon class', function () {
if ($.inArray(version, ['1.5.2', '1.5.1', '1.5', '1.4.4', '1.4.3']) === -1) {
// can't test these due to a bug in these jQuery versions
- assert($icon.attr('class')).equals('nui-icon');
+ assert($icon.attr('class')).equals('nui-icn');
}
});
View
62 themes/ninjaui.theme.dojo.css
@@ -7,80 +7,80 @@
.nui-dojo {
color: #fff;
}
-.nui-dojo .nui-blocker {
+.nui-dojo .nui-blk {
background-color: rgba(0,0,0,0.4);
}
-.nui-dojo .nui-button,
-.nui-dojo .nui-item,
+.nui-dojo .nui-btn,
+.nui-dojo .nui-itm,
.nui-dojo .nui-tab {
color: #fff;
text-shadow: 0 1px 0 #000;
}
-.nui-dojo .nui-button,
-.nui-dojo .nui-list,
-.nui-dojo .nui-slider-button,
-.nui-dojo .nui-slider-groove,
+.nui-dojo .nui-btn,
+.nui-dojo .nui-lst,
+.nui-dojo .nui-sld-btn,
+.nui-dojo .nui-sld-grv,
.nui-dojo .nui-tab {
background-color: #333;
border-color: #000;
}
-.nui-dojo .nui-dialog,
-.nui-dojo .nui-list,
-.nui-dojo .nui-hint {
+.nui-dojo .nui-dlg,
+.nui-dojo .nui-lst,
+.nui-dojo .nui-hnt {
background-color: rgba(0,0,0,0.8);
border: none;
}
-.nui-dojo .nui-icon g {
+.nui-dojo .nui-icn g {
fill: #fff;
stroke: #fff;
}
-.nui-dojo .nui-icon[aria-label=X] g {
+.nui-dojo .nui-icn[aria-label=X] g {
fill: #900;
}
-.nui-dojo .nui-icon[aria-label=X] circle {
+.nui-dojo .nui-icn[aria-label=X] circle {
stroke: #fff;
}
-.nui-dojo .nui-icon[aria-label=X] polygon {
+.nui-dojo .nui-icn[aria-label=X] polygon {
fill: #fff;
}
-.nui-dojo .nui-item.nui-hover,
-.nui-dojo .nui-select {
+.nui-dojo .nui-itm.nui-hvr,
+.nui-dojo .nui-slc {
background-color: #c00;
border-color: #900;
}
-.nui-dojo .nui-item.nui-hover,
-.nui-dojo .nui-select {
+.nui-dojo .nui-itm.nui-hvr,
+.nui-dojo .nui-slc {
color: #fff;
text-shadow: 0 1px 0 #666;
}
-.nui-dojo .nui-item.nui-hover g,
-.nui-dojo .nui-select g {
+.nui-dojo .nui-itm.nui-hvr g,
+.nui-dojo .nui-slc g {
fill: #fff;
stroke: #fff;
}
-.nui-dojo .nui-rule {
+.nui-dojo .nui-rul {
border-bottom-color: #333;
border-top-color: #000;
}
-.nui-dojo .nui-slider-button.nui-select {
+.nui-dojo .nui-sld-btn.nui-slc {
background-color: #000;
}
-.nui-dojo .nui-slider-level {
+.nui-dojo .nui-sld-lvl {
background-color: #f00;
}
-.nui-dojo .nui-star g {
+.nui-dojo .nui-str g {
fill: #eee;
stroke: #ccc;
}
-.nui-dojo .nui-star.nui-average g {
+.nui-dojo .nui-str.nui-avg g {
fill: #c96;
stroke: #963;
}
-.nui-dojo .nui-star.nui-individual g {
+.nui-dojo .nui-str.nui-ind g {
fill: #c00;
stroke: #900;
}
-.nui-dojo .nui-stem g {
+.nui-dojo .nui-stm g {
fill: rgba(0,0,0,0.85);
stroke: none;
}
@@ -93,17 +93,17 @@
.nui-dojo .nui-tab:last-child {
border-right-color: #000;
}
-.nui-dojo .nui-tab.nui-select {
+.nui-dojo .nui-tab.nui-slc {
border-left-color: #300;
border-right-color: #300;
}
-.nui-dojo .nui-tab:first-child.nui-select {
+.nui-dojo .nui-tab:first-child.nui-slc {
border-left-color: #000;
}
-.nui-dojo .nui-tab:last-child.nui-select {
+.nui-dojo .nui-tab:last-child.nui-slc {
border-right-color: #000;
}
-.nui-dojo .nui-tray {
+.nui-dojo .nui-try {
background-color: #222;
border-color: #111;
border-bottom-color: #444;
Please sign in to comment.
Something went wrong with that request. Please try again.