8 | *
9 | * @license MIT
10 | *
11 | * @see http://opensource.audith.org/uniform
12 | */
13 |
14 | (function (wind, $, undef) {
15 | "use strict";
16 |
17 | /**
18 | * Use .prop() if jQuery supports it, otherwise fall back to .attr()
19 | * @usage All other parameters are passed to jQuery's function
20 | *
21 | * @param {jQuery} $el jQuery'd element on which we're calling attr/prop
22 | * @return {*} The result from jQuery
23 | */
24 | function attrOrProp($el /* , args */) {
25 | var args = Array.prototype.slice.call(arguments, 1);
26 |
27 | if ($el.prop) {
28 | // jQuery 1.6+
29 | return $el.prop.apply($el, args);
30 | }
31 |
32 | // jQuery 1.5 and below
33 | return $el.attr.apply($el, args);
34 | }
35 |
36 | /**
37 | * For backwards compatibility with older jQuery libraries, only bind
38 | * one thing at a time. Also, this function adds our namespace to
39 | * events in one consistent location, shrinking the minified code.
40 | *
41 | * The properties on the events object are the names of the events
42 | * that we are supposed to add to. It can be a space separated list.
43 | * The namespace will be added automatically.
44 | *
45 | * @param {jQuery} $el
46 | * @param {Object} options Uniform options for this element
47 | * @param {Object} events Events to bind, properties are event names
48 | */
49 | function bindMany($el, options, events) {
50 | var name, namespaced;
51 |
52 | for (name in events) {
53 | if (events.hasOwnProperty(name)) {
54 | namespaced = name.replace(/ |$/g, options.eventNamespace);
55 | $el.bind(namespaced, events[name]);
56 | }
57 | }
58 | }
59 |
60 | /**
61 | * Bind the hover, active, focus, and blur UI updates
62 | *
63 | * @param {jQuery} $el Original element
64 | * @param {jQuery} $target Target for the events (our div/span)
65 | * @param {Object} options Uniform options for the element $target
66 | */
67 | function bindUi($el, $target, options) {
68 | bindMany($el, options, {
69 | focus: function () {
70 | $target.addClass(options.focusClass);
71 | },
72 | blur: function () {
73 | $target.removeClass(options.focusClass);
74 | $target.removeClass(options.activeClass);
75 | },
76 | mouseenter: function () {
77 | $target.addClass(options.hoverClass);
78 | },
79 | mouseleave: function () {
80 | $target.removeClass(options.hoverClass);
81 | $target.removeClass(options.activeClass);
82 | },
83 | "mousedown touchbegin": function () {
84 | if (!$el.is(":disabled")) {
85 | $target.addClass(options.activeClass);
86 | }
87 | },
88 | "mouseup touchend": function () {
89 | $target.removeClass(options.activeClass);
90 | }
91 | });
92 | }
93 |
94 | /**
95 | * Remove the hover, focus, active classes.
96 | *
97 | * @param {jQuery} $el Element with classes
98 | * @param {Object} options Uniform options for the element
99 | */
100 | function classClearStandard($el, options) {
101 | $el.removeClass(options.hoverClass + " " + options.focusClass + " " + options.activeClass);
102 | }
103 |
104 | /**
105 | * Add or remove a class, depending on if it's "enabled"
106 | *
107 | * @param {jQuery} $el Element that has the class added/removed
108 | * @param {String} className Class or classes to add/remove
109 | * @param {Boolean} enabled True to add the class, false to remove
110 | */
111 | function classUpdate($el, className, enabled) {
112 | if (enabled) {
113 | $el.addClass(className);
114 | } else {
115 | $el.removeClass(className);
116 | }
117 | }
118 |
119 | /**
120 | * Updating the "checked" property can be a little tricky. This
121 | * changed in jQuery 1.6 and now we can pass booleans to .prop().
122 | * Prior to that, one either adds an attribute ("checked=checked") or
123 | * removes the attribute.
124 | *
125 | * @param {jQuery} $tag Our Uniform span/div
126 | * @param {jQuery} $el Original form element
127 | * @param {Object} options Uniform options for this element
128 | */
129 | function classUpdateChecked($tag, $el, options) {
130 | // setTimeout() introduced by #357
131 | setTimeout(function () {
132 | var c = "checked",
133 | isChecked = $el.is(":" + c);
134 |
135 | if(!$el.attr("readonly")) {
136 | if ($el.prop) {
137 | // jQuery 1.6+
138 | $el.prop(c, isChecked);
139 | } else {
140 | // jQuery 1.5 and below
141 | if (isChecked) {
142 | $el.attr(c, c);
143 | } else {
144 | $el.removeAttr(c);
145 | }
146 | }
147 | }
148 |
149 | classUpdate($tag, options.checkedClass, isChecked);
150 | }, 1);
151 | }
152 |
153 | /**
154 | * Set or remove the "disabled" class for disabled elements, based on
155 | * if the element is detected to be disabled.
156 | *
157 | * @param {jQuery} $tag Our Uniform span/div
158 | * @param {jQuery} $el Original form element
159 | * @param {Object} options Uniform options for this element
160 | */
161 | function classUpdateDisabled($tag, $el, options) {
162 | classUpdate($tag, options.disabledClass, $el.is(":disabled"));
163 | }
164 |
165 | /**
166 | * Wrap an element inside of a container or put the container next
167 | * to the element. See the code for examples of the different methods.
168 | *
169 | * Returns the container that was added to the HTML.
170 | *
171 | * @param {jQuery} $el Element to wrap
172 | * @param {jQuery} $container Add this new container around/near $el
173 | * @param {String} method One of "after", "before" or "wrap"
174 | * @return {jQuery} $container after it has been cloned for adding to $el
175 | */
176 | function divSpanWrap($el, $container, method) {
177 | switch (method) {
178 | case "after":
179 | // Result:
180 | $el.after($container);
181 | return $el.next();
182 | case "before":
183 | // Result:
184 | $el.before($container);
185 | return $el.prev();
186 | case "wrap":
187 | // Result:
188 | $el.wrap($container);
189 | return $el.parent();
190 | }
191 |
192 | return null;
193 | }
194 |
195 | /**
196 | * Create a div/span combo for uniforming an element
197 | *
198 | * @param {jQuery} $el Element to wrap
199 | * @param {Object} options Options for the element, set by the user
200 | * @param {Object} divSpanConfig Options for how we wrap the div/span
201 | * @return {Object} Contains the div and span as properties
202 | */
203 | function divSpan($el, options, divSpanConfig) {
204 | var $div, $span, id;
205 |
206 | if (!divSpanConfig) {
207 | divSpanConfig = {};
208 | }
209 |
210 | divSpanConfig = $.extend({
211 | bind: {},
212 | divClass: null,
213 | divWrap: "wrap",
214 | spanClass: null,
215 | spanHtml: null,
216 | spanWrap: "wrap"
217 | }, divSpanConfig);
218 |
219 | $div = $('');
220 | $span = $('');
221 |
222 | // Automatically hide this div/span if the element is hidden.
223 | // Do not hide if the element is hidden because a parent is hidden.
224 | if (options.autoHide && $el.is(':hidden') && $el.css('display') === 'none') {
225 | $div.hide();
226 | }
227 |
228 | if (divSpanConfig.divClass) {
229 | $div.addClass(divSpanConfig.divClass);
230 | }
231 |
232 | if (options.wrapperClass) {
233 | $div.addClass(options.wrapperClass);
234 | }
235 |
236 | if (divSpanConfig.spanClass) {
237 | $span.addClass(divSpanConfig.spanClass);
238 | }
239 |
240 | id = attrOrProp($el, 'id');
241 |
242 | if (options.useID && id) {
243 | attrOrProp($div, 'id', options.idPrefix + '-' + id);
244 | }
245 |
246 | if (divSpanConfig.spanHtml) {
247 | $span.html(divSpanConfig.spanHtml);
248 | }
249 |
250 | $div = divSpanWrap($el, $div, divSpanConfig.divWrap);
251 | $span = divSpanWrap($el, $span, divSpanConfig.spanWrap);
252 | classUpdateDisabled($div, $el, options);
253 | return {
254 | div: $div,
255 | span: $span
256 | };
257 | }
258 |
259 | /**
260 | * Wrap an element with a span to apply a global wrapper class
261 | *
262 | * @param {jQuery} $el Element to wrap
263 | * @param {Object} options
264 | * @return {jQuery} jQuery Wrapper element
265 | */
266 | function wrapWithWrapperClass($el, options) {
267 | var $span;
268 |
269 | if (!options.wrapperClass) {
270 | return null;
271 | }
272 |
273 | $span = $('').addClass(options.wrapperClass);
274 | $span = divSpanWrap($el, $span, "wrap");
275 | return $span;
276 | }
277 |
278 | /**
279 | * Test if high contrast mode is enabled.
280 | *
281 | * In high contrast mode, background images can not be set and
282 | * they are always returned as 'none'.
283 | *
284 | * @return {Boolean} True if in high contrast mode
285 | */
286 | function highContrast() {
287 | var c, $div, el, rgb;
288 |
289 | // High contrast mode deals with white and black
290 | rgb = 'rgb(120,2,153)';
291 | $div = $('');
292 | $('body').append($div);
293 | el = $div.get(0);
294 |
295 | // $div.css() will get the style definition, not
296 | // the actually displaying style
297 | if (wind.getComputedStyle) {
298 | c = wind.getComputedStyle(el, '').color;
299 | } else {
300 | c = (el.currentStyle || el.style || {}).color;
301 | }
302 |
303 | $div.remove();
304 | return c.replace(/ /g, '') !== rgb;
305 | }
306 |
307 | /**
308 | * Change text into safe HTML
309 | *
310 | * @param {String} text
311 | * @return {String} HTML version
312 | */
313 | function htmlify(text) {
314 | if (!text) {
315 | return "";
316 | }
317 |
318 | return $('').text(text).html();
319 | }
320 |
321 | /**
322 | * If not MSIE, return false.
323 | * If it is, return the version number.
324 | *
325 | * @return {Boolean}|{Number}
326 | */
327 | function isMsie() {
328 | return navigator.cpuClass && !navigator.product;
329 | }
330 |
331 | /**
332 | * Return true if this version of IE allows styling
333 | *
334 | * @return {Boolean}
335 | */
336 | function isMsieSevenOrNewer() {
337 | return wind.XMLHttpRequest !== undefined;
338 | }
339 |
340 | /**
341 | * Check if the element is a multiselect
342 | *
343 | * @param {jQuery} $el Element
344 | * @return {Boolean} true/false
345 | */
346 | function isMultiselect($el) {
347 | var elSize;
348 |
349 | if ($el[0].multiple) {
350 | return true;
351 | }
352 |
353 | elSize = attrOrProp($el, "size");
354 |
355 | return !(!elSize || elSize <= 1);
356 | }
357 |
358 | /**
359 | * Meaningless utility function. Used mostly for improving minification.
360 | *
361 | * @return {Boolean}
362 | */
363 | function returnFalse() {
364 | return false;
365 | }
366 |
367 | /**
368 | * noSelect plugin, very slightly modified
369 | * http://mths.be/noselect v1.0.3
370 | *
371 | * @param {jQuery} $elem Element that we don't want to select
372 | * @param {Object} options Uniform options for the element
373 | */
374 | function noSelect($elem, options) {
375 | var none = 'none';
376 | bindMany($elem, options, {
377 | 'selectstart dragstart mousedown': returnFalse
378 | });
379 |
380 | $elem.css({
381 | MozUserSelect: none,
382 | msUserSelect: none,
383 | webkitUserSelect: none,
384 | userSelect: none
385 | });
386 | }
387 |
388 | /**
389 | * Updates the filename tag based on the value of the real input
390 | * element.
391 | *
392 | * @param {jQuery} $el Actual form element
393 | * @param {jQuery} $filenameTag Span/div to update
394 | * @param {Object} options Uniform options for this element
395 | */
396 | function setFilename($el, $filenameTag, options) {
397 | var filenames = $.map($el[0].files, function (file) {return file.name}).join(', ');
398 |
399 | if (filenames === "") {
400 | filenames = options.fileDefaultHtml;
401 | } else {
402 | filenames = filenames.split(/[\/\\]+/);
403 | filenames = filenames[(filenames.length - 1)];
404 | }
405 |
406 | $filenameTag.text(filenames);
407 | }
408 |
409 | /**
410 | * Function from jQuery to swap some CSS values, run a callback,
411 | * then restore the CSS. Modified to pass JSLint and handle undefined
412 | * values with 'use strict'.
413 | *
414 | * @param {jQuery} $elements Element
415 | * @param {Object} newCss CSS values to swap out
416 | * @param {Function} callback Function to run
417 | */
418 | function swap($elements, newCss, callback) {
419 | var restore, item;
420 |
421 | restore = [];
422 |
423 | $elements.each(function () {
424 | var name;
425 |
426 | for (name in newCss) {
427 | if (Object.prototype.hasOwnProperty.call(newCss, name)) {
428 | restore.push({
429 | el: this,
430 | name: name,
431 | old: this.style[name]
432 | });
433 |
434 | this.style[name] = newCss[name];
435 | }
436 | }
437 | });
438 |
439 | callback();
440 |
441 | while (restore.length) {
442 | item = restore.pop();
443 | item.el.style[item.name] = item.old;
444 | }
445 | }
446 |
447 | /**
448 | * The browser doesn't provide sizes of elements that are not visible.
449 | * This will clone an element and add it to the DOM for calculations.
450 | *
451 | * @param {jQuery} $el
452 | * @param {Function} callback
453 | */
454 | function sizingInvisible($el, callback) {
455 | var targets;
456 |
457 | // We wish to target ourselves and any parents as long as
458 | // they are not visible
459 | targets = $el.parents();
460 | targets.push($el[0]);
461 | targets = targets.not(':visible');
462 | swap(targets, {
463 | visibility: "hidden",
464 | display: "block",
465 | position: "absolute"
466 | }, callback);
467 | }
468 |
469 | /**
470 | * Standard way to unwrap the div/span combination from an element
471 | *
472 | * @param {jQuery} $el Element that we wish to preserve
473 | * @param {Object} options Uniform options for the element
474 | * @return {Function} This generated function will perform the given work
475 | */
476 | function unwrapUnwrapUnbindFunction($el, options) {
477 | return function () {
478 | $el.unwrap().unwrap().unbind(options.eventNamespace);
479 | };
480 | }
481 |
482 | var allowStyling = true, // False if IE6 or other unsupported browsers
483 | highContrastTest = false, // Was the high contrast test ran?
484 | uniformHandlers = [ // Objects that take care of "unification"
485 | {
486 | // Buttons
487 | match: function ($el) {
488 | return $el.is("a, button, :submit, :reset, input[type='button']");
489 | },
490 | apply: function ($el, options) {
491 | var $div, defaultSpanHtml, ds, getHtml, doingClickEvent;
492 | defaultSpanHtml = options.submitDefaultHtml;
493 |
494 | if ($el.is(":reset")) {
495 | defaultSpanHtml = options.resetDefaultHtml;
496 | }
497 |
498 | if ($el.is("a, button")) {
499 | // Use the HTML inside the tag
500 | getHtml = function () {
501 | return $el.html() || defaultSpanHtml;
502 | };
503 | } else {
504 | // Use the value property of the element
505 | getHtml = function () {
506 | return htmlify(attrOrProp($el, "value")) || defaultSpanHtml;
507 | };
508 | }
509 |
510 | ds = divSpan($el, options, {
511 | divClass: options.buttonClass,
512 | spanHtml: getHtml()
513 | });
514 | $div = ds.div;
515 | bindUi($el, $div, options);
516 | doingClickEvent = false;
517 | bindMany($div, options, {
518 | "click touchend": function () {
519 | var ev, res, target, href;
520 |
521 | if (doingClickEvent) {
522 | return false;
523 | }
524 |
525 | if ($el.is(':disabled')) {
526 | return false;
527 | }
528 |
529 | doingClickEvent = true;
530 |
531 | if ($el[0].dispatchEvent) {
532 | ev = document.createEvent("MouseEvents");
533 | ev.initEvent("click", true, true);
534 | res = $el[0].dispatchEvent(ev);
535 |
536 | if ($el.is('a') && res) {
537 | target = attrOrProp($el, 'target');
538 | href = attrOrProp($el, 'href');
539 |
540 | if (!target || target === '_self') {
541 | document.location.href = href;
542 | } else {
543 | wind.open(href, target);
544 | }
545 | }
546 | } else {
547 | $el.click();
548 | }
549 |
550 | doingClickEvent = false;
551 | }
552 | });
553 | noSelect($div, options);
554 | return {
555 | remove: function () {
556 | // Move $el out
557 | $div.after($el);
558 |
559 | // Remove div and span
560 | $div.remove();
561 |
562 | // Unbind events
563 | $el.unbind(options.eventNamespace);
564 | return $el;
565 | },
566 | update: function () {
567 | classClearStandard($div, options);
568 | classUpdateDisabled($div, $el, options);
569 | $el.detach();
570 | ds.span.html(getHtml()).append($el);
571 | }
572 | };
573 | }
574 | },
575 | {
576 | // Checkboxes
577 | match: function ($el) {
578 | return $el.is(":checkbox");
579 | },
580 | apply: function ($el, options) {
581 | var ds, $div, $span;
582 | ds = divSpan($el, options, {
583 | divClass: options.checkboxClass
584 | });
585 | $div = ds.div;
586 | $span = ds.span;
587 |
588 | // Add focus classes, toggling, active, etc.
589 | bindUi($el, $div, options);
590 | bindMany($el, options, {
591 | "click touchend": function () {
592 | classUpdateChecked($span, $el, options);
593 | }
594 | });
595 | classUpdateChecked($span, $el, options);
596 | return {
597 | remove: unwrapUnwrapUnbindFunction($el, options),
598 | update: function () {
599 | classClearStandard($div, options);
600 | $span.removeClass(options.checkedClass);
601 | classUpdateChecked($span, $el, options);
602 | classUpdateDisabled($div, $el, options);
603 | }
604 | };
605 | }
606 | },
607 | {
608 | // File selection / uploads
609 | match: function ($el) {
610 | return $el.is(":file");
611 | },
612 | apply: function ($el, options) {
613 | var ds, $div, $filename, $button;
614 |
615 | // Issue #441: Check if the control supports multiple selection.
616 | var multiselect = typeof($el.attr("multiple")) != "undefined";
617 |
618 | // The "span" is the button
619 | ds = divSpan($el, options, {
620 | divClass: options.fileClass,
621 | spanClass: options.fileButtonClass,
622 | // Issue #441: Choose a display label based on the control supporting multiple selection.
623 | spanHtml: multiselect ? options.filesButtonHtml : options.fileButtonHtml,
624 | spanWrap: "after"
625 | });
626 | $div = ds.div;
627 | $button = ds.span;
628 | $filename = $("").html(options.fileDefaultHtml);
629 | $filename.addClass(options.filenameClass);
630 | $filename = divSpanWrap($el, $filename, "after");
631 |
632 | // Set the size
633 | if (!attrOrProp($el, "size")) {
634 | attrOrProp($el, "size", $div.width() / 10);
635 | }
636 |
637 | // Actions
638 | function filenameUpdate() {
639 | setFilename($el, $filename, options);
640 | }
641 |
642 | bindUi($el, $div, options);
643 |
644 | // Account for input saved across refreshes
645 | filenameUpdate();
646 |
647 | // IE7 doesn't fire onChange until blur or second fire.
648 | if (isMsie()) {
649 | // IE considers browser chrome blocking I/O, so it
650 | // suspends tiemouts until after the file has
651 | // been selected.
652 | bindMany($el, options, {
653 | click: function () {
654 | $el.trigger("change");
655 | setTimeout(filenameUpdate, 0);
656 | }
657 | });
658 | } else {
659 | // All other browsers behave properly
660 | bindMany($el, options, {
661 | change: filenameUpdate
662 | });
663 | }
664 |
665 | noSelect($filename, options);
666 | noSelect($button, options);
667 | return {
668 | remove: function () {
669 | // Remove filename and button
670 | $filename.remove();
671 | $button.remove();
672 |
673 | // Unwrap parent div, remove events
674 | return $el.unwrap().unbind(options.eventNamespace);
675 | },
676 | update: function () {
677 | classClearStandard($div, options);
678 | setFilename($el, $filename, options);
679 | classUpdateDisabled($div, $el, options);
680 | }
681 | };
682 | }
683 | },
684 | {
685 | // Input fields (text)
686 | match: function ($el) {
687 | if ($el.is("input")) {
688 | var t = (" " + attrOrProp($el, "type") + " ").toLowerCase(),
689 | allowed = " color date datetime datetime-local email month number password search tel text time url week ";
690 | return allowed.indexOf(t) >= 0;
691 | }
692 |
693 | return false;
694 | },
695 | apply: function ($el, options) {
696 | var elType, $wrapper;
697 |
698 | elType = attrOrProp($el, "type");
699 | $el.addClass(options.inputClass);
700 | $wrapper = wrapWithWrapperClass($el, options);
701 | bindUi($el, $el, options);
702 |
703 | if (options.inputAddTypeAsClass) {
704 | $el.addClass(elType);
705 | }
706 |
707 | return {
708 | remove: function () {
709 | $el.removeClass(options.inputClass);
710 |
711 | if (options.inputAddTypeAsClass) {
712 | $el.removeClass(elType);
713 | }
714 |
715 | if ($wrapper) {
716 | $el.unwrap();
717 | }
718 | },
719 | update: returnFalse
720 | };
721 | }
722 | },
723 | {
724 | // Radio buttons
725 | match: function ($el) {
726 | return $el.is(":radio");
727 | },
728 | apply: function ($el, options) {
729 | var ds, $div, $span;
730 | ds = divSpan($el, options, {
731 | divClass: options.radioClass
732 | });
733 | $div = ds.div;
734 | $span = ds.span;
735 |
736 | // Add classes for focus, handle active, checked
737 | bindUi($el, $div, options);
738 | bindMany($el, options, {
739 | "click touchend": function () {
740 | // Fixes #418 - Find all radios with the same name, then update them with $.uniform.update() so the right per-element options are used
741 | $el.attr('name') !== undefined ? $.uniform.update($(':radio[name="' + attrOrProp($el, "name") + '"]')) : $.uniform.update($el);
742 | }
743 | });
744 | classUpdateChecked($span, $el, options);
745 | return {
746 | remove: unwrapUnwrapUnbindFunction($el, options),
747 | update: function () {
748 | classClearStandard($div, options);
749 | classUpdateChecked($span, $el, options);
750 | classUpdateDisabled($div, $el, options);
751 | }
752 | };
753 | }
754 | },
755 | {
756 | // Select lists, but do not style multiselects here
757 | match: function ($el) {
758 | return !!($el.is("select") && !isMultiselect($el));
759 | },
760 | apply: function ($el, options) {
761 | var ds, $div, $span, origElemWidth;
762 |
763 | if (options.selectAutoWidth) {
764 | sizingInvisible($el, function () {
765 | origElemWidth = $el.width();
766 | });
767 | }
768 |
769 | ds = divSpan($el, options, {
770 | divClass: options.selectClass,
771 | spanHtml: ($el.find(":selected:first") || $el.find("option:first")).html(),
772 | spanWrap: "before"
773 | });
774 | $div = ds.div;
775 | $span = ds.span;
776 |
777 | if (options.selectAutoWidth) {
778 | // Use the width of the select and adjust the
779 | // span and div accordingly
780 | sizingInvisible($el, function () {
781 | // Force "display: block" - related to bug #287
782 | swap($([$span[0], $div[0]]), {
783 | display: "block"
784 | }, function () {
785 | var spanPad;
786 | spanPad = $span.outerWidth() - $span.width();
787 | $div.width(origElemWidth + spanPad);
788 | $span.width(origElemWidth);
789 | });
790 | });
791 | } else {
792 | // Force the select to fill the size of the div
793 | $div.addClass('fixedWidth');
794 | }
795 |
796 | // Take care of events
797 | bindUi($el, $div, options);
798 | bindMany($el, options, {
799 | change: function () {
800 | $span.html($el.find(":selected").html());
801 | $div.removeClass(options.activeClass);
802 | },
803 | "click touchend": function () {
804 | // IE7 and IE8 may not update the value right
805 | // until after click event - issue #238
806 | var selHtml = $el.find(":selected").html();
807 |
808 | if ($span.html() !== selHtml) {
809 | // Change was detected
810 | // Fire the change event on the select tag
811 | $el.trigger('change');
812 | }
813 | },
814 | keyup: function () {
815 | $span.html($el.find(":selected").html());
816 | }
817 | });
818 | noSelect($span, options);
819 | return {
820 | remove: function () {
821 | // Remove sibling span
822 | $span.remove();
823 |
824 | // Unwrap parent div
825 | $el.unwrap().unbind(options.eventNamespace);
826 | return $el;
827 | },
828 | update: function () {
829 | if (options.selectAutoWidth) {
830 | // Easier to remove and reapply formatting
831 | $.uniform.restore($el);
832 | $el.uniform(options);
833 | } else {
834 | classClearStandard($div, options);
835 |
836 | // Reset current selected text
837 | $el[0].selectedIndex = $el[0].selectedIndex; // Force IE to have a ":selected" option (if the field was reset for example)
838 | $span.html($el.find(":selected").html());
839 | classUpdateDisabled($div, $el, options);
840 | }
841 | }
842 | };
843 | }
844 | },
845 | {
846 | // Select lists - multiselect lists only
847 | match: function ($el) {
848 | return !!($el.is("select") && isMultiselect($el));
849 | },
850 | apply: function ($el, options) {
851 | var $wrapper;
852 |
853 | $el.addClass(options.selectMultiClass);
854 | $wrapper = wrapWithWrapperClass($el, options);
855 | bindUi($el, $el, options);
856 |
857 | return {
858 | remove: function () {
859 | $el.removeClass(options.selectMultiClass);
860 |
861 | if ($wrapper) {
862 | $el.unwrap();
863 | }
864 | },
865 | update: returnFalse
866 | };
867 | }
868 | },
869 | {
870 | // Textareas
871 | match: function ($el) {
872 | return $el.is("textarea");
873 | },
874 | apply: function ($el, options) {
875 | var $wrapper;
876 |
877 | $el.addClass(options.textareaClass);
878 | $wrapper = wrapWithWrapperClass($el, options);
879 | bindUi($el, $el, options);
880 |
881 | return {
882 | remove: function () {
883 | $el.removeClass(options.textareaClass);
884 |
885 | if ($wrapper) {
886 | $el.unwrap();
887 | }
888 | },
889 | update: returnFalse
890 | };
891 | }
892 | }
893 | ];
894 |
895 | // IE6 can't be styled - can't set opacity on select
896 | if (isMsie() && !isMsieSevenOrNewer()) {
897 | allowStyling = false;
898 | }
899 |
900 | $.uniform = {
901 | // Default options that can be overridden globally or when uniformed
902 | // globally: $.uniform.defaults.fileButtonHtml = "Pick A File";
903 | // on uniform: $('input').uniform({fileButtonHtml: "Pick a File"});
904 | defaults: {
905 | activeClass: "active",
906 | autoHide: true,
907 | buttonClass: "button",
908 | checkboxClass: "checker",
909 | checkedClass: "checked",
910 | disabledClass: "disabled",
911 | eventNamespace: ".uniform",
912 | fileButtonClass: "action",
913 | fileButtonHtml: "Choose File",
914 | filesButtonHtml: "Choose Files",
915 | fileClass: "uploader",
916 | fileDefaultHtml: "No file selected",
917 | filenameClass: "filename",
918 | focusClass: "focus",
919 | hoverClass: "hover",
920 | idPrefix: "uniform",
921 | inputAddTypeAsClass: true,
922 | inputClass: "uniform-input",
923 | radioClass: "radio",
924 | resetDefaultHtml: "Reset",
925 | resetSelector: false, // We'll use our own function when you don't specify one
926 | selectAutoWidth: true,
927 | selectClass: "selector",
928 | selectMultiClass: "uniform-multiselect",
929 | submitDefaultHtml: "Submit", // Only text allowed
930 | textareaClass: "uniform",
931 | useID: true,
932 | wrapperClass: null
933 | },
934 |
935 | // All uniformed elements - DOM objects
936 | elements: []
937 | };
938 |
939 | $.fn.uniform = function (options) {
940 | var el = this;
941 | options = $.extend({}, $.uniform.defaults, options);
942 |
943 | // If we are in high contrast mode, do not allow styling
944 | if (!highContrastTest) {
945 | highContrastTest = true;
946 |
947 | if (highContrast()) {
948 | allowStyling = false;
949 | }
950 | }
951 |
952 | // Only uniform on browsers that work
953 | if (!allowStyling) {
954 | return this;
955 | }
956 |
957 | // Code for specifying a reset button
958 | if (options.resetSelector) {
959 | $(options.resetSelector).mouseup(function () {
960 | wind.setTimeout(function () {
961 | $.uniform.update(el);
962 | }, 10);
963 | });
964 | }
965 |
966 | return this.each(function () {
967 | var $el = $(this), i, handler, callbacks;
968 |
969 | // Avoid uniforming elements already uniformed - just update
970 | if ($el.data("uniformed")) {
971 | $.uniform.update($el);
972 | return;
973 | }
974 |
975 | // See if we have any handler for this type of element
976 | for (i = 0; i < uniformHandlers.length; i = i + 1) {
977 | handler = uniformHandlers[i];
978 |
979 | if (handler.match($el, options)) {
980 | callbacks = handler.apply($el, options);
981 | $el.data("uniformed", callbacks);
982 |
983 | // Store element in our global array
984 | $.uniform.elements.push($el.get(0));
985 | return;
986 | }
987 | }
988 |
989 | // Could not style this element
990 | });
991 | };
992 |
993 | $.uniform.restore = $.fn.uniform.restore = function (elem) {
994 | if (elem === undef) {
995 | elem = $.uniform.elements;
996 | }
997 |
998 | $(elem).each(function () {
999 | var $el = $(this), index, elementData;
1000 | elementData = $el.data("uniformed");
1001 |
1002 | // Skip elements that are not uniformed
1003 | if (!elementData) {
1004 | return;
1005 | }
1006 |
1007 | // Unbind events, remove additional markup that was added
1008 | elementData.remove();
1009 |
1010 | // Remove item from list of uniformed elements
1011 | index = $.inArray(this, $.uniform.elements);
1012 |
1013 | if (index >= 0) {
1014 | $.uniform.elements.splice(index, 1);
1015 | }
1016 |
1017 | $el.removeData("uniformed");
1018 | });
1019 | };
1020 |
1021 | $.uniform.update = $.fn.uniform.update = function (elem) {
1022 | if (elem === undef) {
1023 | elem = $.uniform.elements;
1024 | }
1025 |
1026 | $(elem).each(function () {
1027 | var $el = $(this), elementData;
1028 | elementData = $el.data("uniformed");
1029 |
1030 | // Skip elements that are not uniformed
1031 | if (!elementData) {
1032 | return;
1033 | }
1034 |
1035 | elementData.update($el, elementData.options);
1036 | });
1037 | };
1038 | }(this, jQuery));
1039 |
--------------------------------------------------------------------------------
/src/scss/_base.scss:
--------------------------------------------------------------------------------
1 | $jquery-uniform-img-path: "../images/default" !default;
2 | $sprite: "#{$jquery-uniform-img-path}/sprite.png" !default;
3 | $sprite-retina: "#{$jquery-uniform-img-path}/sprite-retina.png" !default;
4 | $sprite-size: 493px !default;
5 | $button-height: 30px !default;
6 | $button-margin-left: 13px !default;
7 | $button-padding: 0 !default;
8 | $button-span-height: $button-height !default;
9 | $checkbox-height: 19px !default;
10 | $checkbox-width: 19px !default;
11 | $input-padding: 3px !default;
12 | $input-background: "#{$jquery-uniform-img-path}/bg-input.png" !default;
13 | $input-background-retina: "#{$jquery-uniform-img-path}/bg-input-retina.png" !default;
14 | $input-background-focus: "#{$jquery-uniform-img-path}/bg-input-focus.png" !default;
15 | $input-background-focus-retina: "#{$jquery-uniform-img-path}/bg-input-focus-retina.png" !default;
16 | $input-background-size: 1px !default;
17 | $radio-height: 18px !default;
18 | $radio-width: 18px !default;
19 | $select-fixed-width: 190px !default;
20 | $select-height: 26px !default;
21 | $select-margin-left: 10px !default;
22 | $select-margin-right: 25px !default;
23 | $select-select-height: 22px !default;
24 | $select-select-top: 2px !default;
25 | $upload-action-width: 85px !default;
26 | $upload-filename-margin-top: 2px !default;
27 | $upload-filename-margin-bottom: 2px !default;
28 | $upload-filename-margin-left: 2px !default;
29 | $upload-filename-width: 82px !default;
30 | $upload-filename-padding: 0 10px !default;
31 | $upload-height: 28px !default;
32 | $upload-width: 190px !default;
33 |
34 | $checkbox-voffset: (-10 * $select-height);
35 | $radio-voffset: ($checkbox-voffset - $checkbox-height);
36 | $upload-voffset: ($radio-voffset - $radio-height);
37 | $button-voffset: ($upload-voffset - (8 * $upload-height));
38 |
39 | $class-action: ".action" !default;
40 | $class-active: ".active" !default;
41 | $class-button: ".button" !default;
42 | $class-checkbox: ".checker" !default;
43 | $class-checked: ".checked" !default;
44 | $class-disabled: ".disabled" !default;
45 | $class-input: ".uniform-input" !default;
46 | $class-filename: ".filename" !default;
47 | $class-focus: ".focus" !default;
48 | $class-hover: ".hover" !default;
49 | $class-multiselect: ".uniform-multiselect" !default;
50 | $class-radio: ".radio" !default;
51 | $class-select: ".selector" !default;
52 | $class-upload: ".uploader" !default;
53 | $class-textarea: ".uniform" !default;
54 | $class-wrapper: "" !default;
55 |
56 | $class-wrapper-element: "";
57 | @if $class-wrapper != "" {
58 | $class-wrapper-element: "span"
59 | }
60 |
61 | @mixin opacity($opacity) {
62 | opacity: $opacity;
63 | filter: unquote("alpha(opacity=#{round($opacity * 100)})");
64 | }
65 |
66 | @mixin hideYetClickable() {
67 | @include opacity(0);
68 | border: none;
69 | background: none;
70 | }
71 |
72 | @mixin inline-block() {
73 | display: -moz-inline-box;
74 | display: inline-block;
75 | *display: inline;
76 | zoom: 1;
77 | }
78 |
79 | @mixin ellipsis() {
80 | text-overflow: ellipsis;
81 | display: block;
82 | overflow: hidden;
83 | white-space: nowrap;
84 | }
85 |
86 | @mixin border-radius($radius) {
87 | border-radius: $radius;
88 | }
89 |
90 | @mixin box-shadow($def) {
91 | box-shadow: $def;
92 | }
93 |
94 | @mixin whenActive {
95 | &#{$class-active} {
96 | @content
97 | }
98 | }
99 |
100 | @mixin whenHover {
101 | &#{$class-hover}, &#{$class-focus} {
102 | @content
103 | }
104 | }
105 |
106 | @mixin whenDisabled {
107 | &#{$class-disabled}, &#{$class-disabled}#{$class-active} {
108 | @content
109 | }
110 | }
111 |
112 | @mixin whenChecked {
113 | &#{$class-checked} {
114 | @content
115 | }
116 | }
117 |
118 | @mixin use-backgrounds($sprite, $sprite-size, $input, $input-focus, $input-size) {
119 | div#{$class-wrapper} {
120 | &#{$class-select},
121 | &#{$class-select} span,
122 | &#{$class-checkbox} span,
123 | &#{$class-radio} span,
124 | &#{$class-upload},
125 | &#{$class-upload} span#{$class-action},
126 | &#{$class-button},
127 | &#{$class-button} span {
128 | background-image: $sprite;
129 |
130 | @if $sprite-size > 0 {
131 | background-size: $sprite-size;
132 | }
133 | }
134 | }
135 |
136 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
137 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
138 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
139 | background-image: $input;
140 |
141 | @if $sprite-size > 0 {
142 | background-size: $input-size;
143 | }
144 |
145 | @include whenActive {
146 | background-image: $input-focus;
147 | }
148 | }
149 | }
150 |
151 | @mixin retina() {
152 | @media only screen {
153 | @media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
154 | @include use-backgrounds(url($sprite-retina), $sprite-size, url($input-background-retina), url($input-background-focus-retina), $input-background-size);
155 | }
156 | }
157 | }
158 |
159 | /* General settings */
160 |
161 | div#{$class-wrapper} {
162 | &#{$class-select},
163 | &#{$class-select} span,
164 | &#{$class-checkbox} span,
165 | &#{$class-radio} span,
166 | &#{$class-upload},
167 | &#{$class-upload} span#{$class-action},
168 | &#{$class-button},
169 | &#{$class-button} span {
170 | background: url($sprite) no-repeat;
171 | -webkit-font-smoothing: antialiased;
172 | }
173 |
174 | &#{$class-select},
175 | &#{$class-checkbox},
176 | &#{$class-button},
177 | &#{$class-radio},
178 | &#{$class-upload} {
179 | @include inline-block();
180 | vertical-align: middle;
181 |
182 | /* Keeping this as :focus to remove browser styles */
183 | &:focus {
184 | outline: 0;
185 | }
186 | }
187 |
188 | &#{$class-select},
189 | &#{$class-radio},
190 | &#{$class-checkbox},
191 | &#{$class-upload},
192 | &#{$class-button} {
193 | &, & * {
194 | margin: 0;
195 | padding: 0;
196 | }
197 | }
198 | }
199 |
200 | .highContrastDetect {
201 | background: url($input-background) repeat-x 0 0;
202 | width: 0;
203 | height: 0;
204 | }
205 |
206 | /* Input & Textarea */
207 |
208 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
209 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
210 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
211 | padding: $input-padding;
212 | background: url($input-background) repeat-x 0 0;
213 | outline: 0;
214 |
215 | @include whenActive {
216 | background: url($input-background-focus) repeat-x 0 0;
217 | }
218 | }
219 |
220 | /* Remove default webkit and possible mozilla .search styles.
221 | * Keeping this as :active to remove browser styles */
222 | div#{$class-wrapper}#{$class-checkbox} input,
223 | input[type="search"],
224 | input[type="search"]:active {
225 | appearance: none;
226 | }
227 |
228 | /* Select */
229 |
230 | div#{$class-wrapper}#{$class-select} {
231 | background-position: 0 (-5 * $select-height);
232 | line-height: $select-height;
233 | height: $select-height;
234 | padding: 0 0 0 $select-margin-left;
235 | position: relative;
236 | overflow: hidden;
237 |
238 | span {
239 | @include ellipsis();
240 | background-position: right 0;
241 | height: $select-height;
242 | line-height: $select-height;
243 | padding-right: $select-margin-right;
244 | cursor: pointer;
245 | width: 100%;
246 | }
247 |
248 | &.fixedWidth {
249 | width: $select-fixed-width;
250 |
251 | span {
252 | width: ($select-fixed-width - $select-margin-left - $select-margin-right);
253 | }
254 | }
255 |
256 | select {
257 | @include hideYetClickable();
258 | position: absolute;
259 | height: $select-select-height;
260 | top: $select-select-top;
261 | left: 0;
262 | width: 100%;
263 | appearance: none;
264 | }
265 |
266 | @include whenActive {
267 | background-position: 0 (-6 * $select-height);
268 |
269 | span {
270 | background-position: right (-1 * $select-height);
271 | }
272 | }
273 |
274 | @include whenHover {
275 | background-position: 0 (-7 * $select-height);
276 |
277 | span {
278 | background-position: right (-2 * $select-height);
279 | }
280 |
281 | @include whenActive {
282 | background-position: 0 (-8 * $select-height);
283 |
284 | span {
285 | background-position: right (-3 * $select-height);
286 | }
287 | }
288 | }
289 |
290 | @include whenDisabled {
291 | background-position: 0 (-9 * $select-height);
292 |
293 | span {
294 | background-position: right (-4 * $select-height);
295 | }
296 | }
297 | }
298 |
299 | /* Checkbox */
300 |
301 | div#{$class-wrapper}#{$class-checkbox} {
302 | position: relative;
303 |
304 | &, span, input {
305 | width: $checkbox-width;
306 | height: $checkbox-height;
307 | }
308 |
309 | span {
310 | @include inline-block();
311 | text-align: center;
312 | background-position: 0 $checkbox-voffset;
313 |
314 | @include whenChecked {
315 | background-position: (-4 * $checkbox-width) $checkbox-voffset;
316 | }
317 | }
318 |
319 | input {
320 | @include hideYetClickable();
321 | @include inline-block();
322 | }
323 |
324 | @include whenActive {
325 | span {
326 | background-position: (-1 * $checkbox-width) $checkbox-voffset;
327 |
328 | @include whenChecked {
329 | background-position: (-5 * $checkbox-width) $checkbox-voffset;
330 | }
331 | }
332 | }
333 |
334 | @include whenHover {
335 | span {
336 | background-position: (-2 * $checkbox-width) $checkbox-voffset;
337 |
338 | @include whenChecked {
339 | background-position: (-6 * $checkbox-width) $checkbox-voffset;
340 | }
341 | }
342 |
343 | @include whenActive {
344 | span {
345 | background-position: (-3 * $checkbox-width) $checkbox-voffset;
346 |
347 | @include whenChecked {
348 | background-position: (-7 * $checkbox-width) $checkbox-voffset;
349 | }
350 | }
351 | }
352 | }
353 |
354 | @include whenDisabled {
355 | span {
356 | background-position: (-8 * $checkbox-width) $checkbox-voffset;
357 |
358 | @include whenChecked {
359 | background-position: (-9 * $checkbox-width) $checkbox-voffset;
360 | }
361 | }
362 | }
363 | }
364 |
365 | /* Radio */
366 |
367 | div#{$class-wrapper}#{$class-radio} {
368 | position: relative;
369 |
370 | &, span, input {
371 | width: $radio-width;
372 | height: $radio-height;
373 | }
374 |
375 | span {
376 | @include inline-block();
377 | text-align: center;
378 | background-position: 0 $radio-voffset;
379 |
380 | @include whenChecked {
381 | background-position: (-4 * $radio-width) $radio-voffset;
382 | }
383 | }
384 |
385 | input {
386 | @include hideYetClickable();
387 | @include inline-block();
388 | text-align: center;
389 | }
390 |
391 | @include whenActive {
392 | span {
393 | background-position: (-1 * $radio-width) $radio-voffset;
394 |
395 | @include whenChecked {
396 | background-position: (-5 * $radio-width) $radio-voffset;
397 | }
398 | }
399 | }
400 |
401 | @include whenHover {
402 | span {
403 | background-position: (-2 * $radio-width) $radio-voffset;
404 |
405 | @include whenChecked {
406 | background-position: (-6 * $radio-width) $radio-voffset;
407 | }
408 | }
409 |
410 | @include whenActive {
411 | span {
412 | background-position: (-3 * $radio-width) $radio-voffset;
413 |
414 | @include whenChecked {
415 | background-position: (-7 * $radio-width) $radio-voffset;
416 | }
417 | }
418 | }
419 | }
420 |
421 | @include whenDisabled {
422 | span {
423 | background-position: (-8 * $radio-width) $radio-voffset;
424 |
425 | @include whenChecked {
426 | background-position: (-9 * $radio-width) $radio-voffset;
427 | }
428 | }
429 | }
430 | }
431 |
432 | /* Uploader */
433 |
434 | div#{$class-wrapper}#{$class-upload} {
435 | background-position: 0 $upload-voffset;
436 | height: $upload-height;
437 | width: $upload-width;
438 | cursor: pointer;
439 | position: relative;
440 | overflow: hidden;
441 |
442 | span#{$class-action} {
443 | background-position: right ($upload-voffset + (-4 * $upload-height));
444 | height: $upload-height;
445 | line-height: $upload-height;
446 | width: $upload-action-width;
447 | text-align: center;
448 | float: left;
449 | display: inline;
450 | overflow: hidden;
451 | cursor: pointer;
452 | }
453 |
454 | span#{$class-filename} {
455 | @include ellipsis();
456 | float: left;
457 | cursor: default;
458 | height: ($upload-height - $upload-filename-margin-top - $upload-filename-margin-bottom);
459 | margin: $upload-filename-margin-top 0 $upload-filename-margin-bottom $upload-filename-margin-left;
460 | line-height: ($upload-height - $upload-filename-margin-top - $upload-filename-margin-bottom);
461 | width: $upload-filename-width;
462 | padding: $upload-filename-padding;
463 | }
464 |
465 | input {
466 | @include hideYetClickable();
467 | position: absolute;
468 | top: 0;
469 | right: 0;
470 | float: right;
471 | cursor: default;
472 | width: 100%;
473 | height: 100%;
474 | }
475 |
476 | @include whenActive {
477 | span#{$class-action} {
478 | background-position: right ($upload-voffset + (-6 * $upload-height));
479 | }
480 | }
481 |
482 | @include whenHover {
483 | background-position: 0 ($upload-voffset + (-2 * $upload-height));
484 |
485 | span#{$class-action} {
486 | background-position: right ($upload-voffset + (-5 * $upload-height));
487 | }
488 |
489 | @include whenActive {
490 | span#{$class-action} {
491 | background-position: right ($upload-voffset + (-7 * $upload-height));
492 | }
493 | }
494 | }
495 |
496 | @include whenDisabled {
497 | background-position: 0 ($upload-voffset + (-1 * $upload-height));
498 |
499 | span#{$class-action} {
500 | background-position: right ($upload-voffset + (-3 * $upload-height));
501 | }
502 | }
503 | }
504 |
505 | /* Buttons */
506 |
507 | div#{$class-wrapper}#{$class-button} {
508 | background-position: 0 ($button-voffset + (-4 * $button-height));
509 | height: $button-height;
510 | cursor: pointer;
511 | position: relative;
512 |
513 | /* Keep buttons barely visible so they can get focus */
514 | a, button, input {
515 | @include opacity(0.01);
516 | display: block;
517 | position: absolute;
518 | top: 0;
519 | left: 0;
520 | right: 0;
521 | bottom: 0;
522 | width: 100%;
523 | }
524 |
525 | span {
526 | @include inline-block();
527 | line-height: $button-span-height;
528 | text-align: center;
529 | background-position: right $button-voffset;
530 | height: $button-span-height;
531 | margin-left: $button-margin-left;
532 | padding: $button-padding;
533 | }
534 |
535 | @include whenActive {
536 | background-position: 0 ($button-voffset + (-5 * $button-height));
537 |
538 | span {
539 | background-position: 100% ($button-voffset + (-1 * $button-height));
540 | cursor: default;
541 | }
542 | }
543 |
544 | @include whenHover {
545 | background-position: 0 ($button-voffset + (-6 * $button-height));
546 |
547 | span {
548 | background-position: right ($button-voffset + (-2 * $button-height));
549 | }
550 | }
551 |
552 | @include whenDisabled {
553 | background-position: 0 ($button-voffset + (-7 * $button-height));
554 |
555 | span {
556 | background-position: right ($button-voffset + (-3 * $button-height));
557 | cursor: default;
558 | }
559 | }
560 | }
561 |
--------------------------------------------------------------------------------
/src/scss/agent.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Uniform Theme: Agent
3 | *
4 | * @author Collin Allen
5 | */
6 |
7 | $jquery-uniform-img-path: "../images/agent";
8 | $button-height: 32px;
9 | $button-margin-left: 13px;
10 | $button-padding: 0 15px 0 2px;
11 | $button-span-height: 32px;
12 | $checkbox-height: 23px;
13 | $checkbox-width: 23px;
14 | $input-background: "#{$jquery-uniform-img-path}/bg-input-agent.png";
15 | $input-background-focus: "#{$jquery-uniform-img-path}/bg-input-focus-agent.png";
16 | $input-padding: 4px;
17 | $radio-height: 23px;
18 | $radio-width: 23px;
19 | $select-fixed-width: 190px;
20 | $select-height: 32px;
21 | $select-margin-left: 12px;
22 | $select-margin-right: 25px;
23 | $select-select-height: 25px;
24 | $select-select-top: 4px;
25 | $sprite: "#{$jquery-uniform-img-path}/sprite-agent.png";
26 | $upload-action-width: 90px;
27 | $upload-filename-margin-top: 0;
28 | $upload-filename-margin-bottom: 0;
29 | $upload-filename-margin-left: 4px;
30 | $upload-filename-width: 76px;
31 | $upload-filename-padding: 0 10px;
32 | $upload-height: 32px;
33 | $upload-width: 190px;
34 |
35 | @import "_base.scss";
36 |
37 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
38 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
39 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
40 | font-size: 14px;
41 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
42 | font-weight: normal;
43 | color: #ffffff;
44 | background-color: #434343;
45 | border: 1px solid #1a1a1a;
46 | border-right-color: #1c1c1c;
47 | border-bottom-color: #1c1c1c;
48 | border-radius: 3px;
49 |
50 | @include whenHover {
51 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
52 | border-color: #999999;
53 | background-color: #575757;
54 | }
55 | }
56 |
57 | div#{$class-wrapper}#{$class-button} {
58 | span {
59 | color: #ffffff;
60 | font-weight: bold;
61 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
62 | font-size: 13px;
63 | letter-spacing: 1px;
64 | text-transform: uppercase;
65 | }
66 |
67 | @include whenDisabled {
68 | span {
69 | color: #bbbbbb;
70 | }
71 | }
72 | }
73 |
74 | /* Select */
75 | div#{$class-wrapper}#{$class-select} {
76 | font-weight: bold;
77 | color: #464545;
78 | font-size: 14px;
79 |
80 | span {
81 | padding: 0 25px 0 0;
82 | color: #ffffff;
83 | font-weight: normal;
84 | text-shadow: 0 1px 0 #ffffff;
85 | }
86 |
87 | select {
88 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
89 | font-size: 1em;
90 | border: solid 1px #ffffff;
91 | }
92 |
93 | @include whenDisabled {
94 | span {
95 | color: #bbbbbb;
96 | }
97 | }
98 | }
99 |
100 | /* Checker */
101 | div#{$class-wrapper}#{$class-checkbox} {
102 | margin-right: 10px;
103 | }
104 |
105 | /* Radio */
106 | div#{$class-wrapper}#{$class-radio} {
107 | margin-right: 10px;
108 | }
109 |
110 | /* Uploader */
111 | div#{$class-wrapper}#{$class-upload} {
112 | margin-bottom: 20px;
113 | cursor: pointer;
114 |
115 | span#{$class-action} {
116 | text-align: center;
117 | text-shadow: #1a1a1a 0 1px 0;
118 | background-color: #ffffff;
119 | font-weight: bold;
120 | color: #ffffff;
121 | }
122 |
123 | span#{$class-filename} {
124 | color: #777777;
125 | font-size: 11px;
126 | }
127 |
128 | @include whenDisabled {
129 | span#{$class-action} {
130 | color: #aaaaaa;
131 | }
132 |
133 | span#{$class-filename} {
134 | border-color: #dddddd;
135 | color: #aaaaaa;
136 | }
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/src/scss/aristo.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Uniform Theme: Aristo
3 | *
4 | * @author 280North / Ported by Josh Pyles
5 | * @license Creative Commons Share Alike
6 | */
7 |
8 | $jquery-uniform-img-path: "../images/aristo";
9 | $button-height: 32px;
10 | $button-margin-left: 13px;
11 | $button-padding: 5px 15px 5px 2px;
12 | $button-span-height: 22px;
13 | $checkbox-height: 23px;
14 | $checkbox-width: 23px;
15 | $input-background-focus: "#{$jquery-uniform-img-path}/bg-input-focus-aristo.png";
16 | $input-background: "#{$jquery-uniform-img-path}/bg-input-aristo.png";
17 | $input-padding: 4px;
18 | $radio-height: 23px;
19 | $radio-width: 23px;
20 | $select-fixed-width: 190px;
21 | $select-height: 32px;
22 | $select-margin-left: 10px;
23 | $select-margin-right: 25px;
24 | $select-select-height: 24px;
25 | $select-select-top: 4px;
26 | $sprite: "#{$jquery-uniform-img-path}/sprite-aristo.png";
27 | $upload-action-width: 90px;
28 | $upload-filename-margin-left: 4px;
29 | $upload-filename-margin-top: 4px;
30 | $upload-filename-margin-bottom: 4px;
31 | $upload-filename-padding: 0 10px;
32 | $upload-filename-width: 76px;
33 | $upload-height: 32px;
34 | $upload-width: 190px;
35 |
36 | @import "_base.scss";
37 |
38 | /* INPUT & TEXTAREA */
39 |
40 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
41 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
42 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
43 | font-size: 14px;
44 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
45 | font-weight: normal;
46 | color: #777777;
47 | background-color: #a1cbe2;
48 | border: 1px solid #aaaaaa;
49 | border-right-color: #cccccc;
50 | border-bottom-color: #cccccc;
51 | border-radius: 3px;
52 |
53 | @include whenHover {
54 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
55 | border-color: #999999;
56 | background-color: #a1cbe2;
57 | }
58 | }
59 |
60 | /* Uploader */
61 |
62 | div#{$class-wrapper}#{$class-button} {
63 | span {
64 | font-weight: bold;
65 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
66 | font-size: 13px;
67 | letter-spacing: 1px;
68 | text-transform: uppercase;
69 | }
70 |
71 | @include whenHover {
72 | span {
73 | color: #555555;
74 | }
75 | }
76 |
77 | @include whenDisabled {
78 | span {
79 | color: #bbbbbb;
80 | }
81 | }
82 | }
83 |
84 | /* Select */
85 |
86 | div#{$class-wrapper}#{$class-select} {
87 | font-weight: bold;
88 | color: #464545;
89 | font-size: 14px;
90 |
91 | span {
92 | color: #666666;
93 | text-shadow: 0 1px 0 #ffffff;
94 | }
95 |
96 | select {
97 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
98 | font-size: 1em;
99 | border: solid 1px #ffffff;
100 | }
101 |
102 | @include whenDisabled {
103 | span {
104 | color: #bbbbbb;
105 | }
106 | }
107 | }
108 |
109 | /* Checker */
110 | div#{$class-wrapper}#{$class-checkbox} {
111 | margin-right: 10px;
112 | }
113 |
114 | /* Radio */
115 | div#{$class-wrapper}#{$class-radio} {
116 | margin-right: 10px;
117 | }
118 |
119 | div#{$class-wrapper}#{$class-upload} {
120 | span#{$class-action} {
121 | text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
122 | background-color: #ffffff;
123 | font-weight: bold;
124 | color: #1c4257;
125 | }
126 |
127 | span#{$class-filename} {
128 | color: #777777;
129 | font-size: 11px;
130 | }
131 |
132 | @include whenDisabled {
133 | span#{$class-action} {
134 | color: #aaaaaa;
135 | }
136 |
137 | span#{$class-filename} {
138 | border-color: #dddddd;
139 | color: #aaaaaa;
140 | }
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/src/scss/default.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Uniform Theme: Uniform Default
3 | *
4 | * @author Josh Pyles
5 | */
6 |
7 | $button-height: 30px;
8 | $button-margin-left: 13px;
9 | $button-padding: 0 15px 0 2px;
10 | $checkbox-height: 19px;
11 | $checkbox-width: 19px;
12 | $input-padding: 3px;
13 | $radio-height: 18px;
14 | $radio-width: 18px;
15 | $select-fixed-width: 190px;
16 | $select-height: 26px;
17 | $select-margin-left: 10px;
18 | $select-margin-right: 25px;
19 | $select-select-height: 22px;
20 | $select-select-top: 2px;
21 | $upload-action-width: 82px;
22 | $upload-filename-margin-top: 2px;
23 | $upload-filename-margin-bottom: 2px;
24 | $upload-filename-margin-left: 2px;
25 | $upload-filename-width: 85px;
26 | $upload-filename-padding: 0 10px;
27 | $upload-height: 28px;
28 | $upload-width: 190px;
29 |
30 | @import "_base.scss";
31 |
32 | /* INPUT & TEXTAREA */
33 |
34 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
35 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
36 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
37 | font-size: 12px;
38 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
39 | font-weight: normal;
40 | color: #777777;
41 | border: 1px solid #aaaaaa;
42 | border-right-color: #cccccc;
43 | border-bottom-color: #cccccc;
44 | border-radius: $input-padding;
45 | background-color: white;
46 |
47 | @include whenHover {
48 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
49 | border-color: #999999;
50 | }
51 |
52 | @include whenActive {
53 | background-color: white;
54 | }
55 | }
56 |
57 | /* PRESENTATION */
58 |
59 | /* Buttons */
60 |
61 | div#{$class-wrapper}#{$class-button} {
62 | span {
63 | font-weight: bold;
64 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
65 | font-size: 12px;
66 | letter-spacing: 1px;
67 | text-transform: uppercase;
68 | }
69 |
70 | @include whenHover {
71 | span {
72 | color: #555555;
73 | }
74 | }
75 |
76 | @include whenDisabled {
77 | span {
78 | color: #bbbbbb;
79 | }
80 | }
81 | }
82 |
83 | /* Select */
84 |
85 | div#{$class-wrapper}#{$class-select} {
86 | font-size: 12px;
87 |
88 | span {
89 | color: #666666;
90 | text-shadow: 0 1px 0 #ffffff;
91 | }
92 |
93 | select {
94 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
95 | font-size: 12px;
96 | }
97 |
98 | @include whenDisabled {
99 | span {
100 | color: #bbbbbb;
101 | }
102 | }
103 | }
104 |
105 | /* Checker */
106 | div#{$class-wrapper}#{$class-checkbox} {
107 | margin-right: 5px;
108 | }
109 |
110 | /* Radio */
111 | div#{$class-wrapper}#{$class-radio} {
112 | margin-right: 3px;
113 | }
114 |
115 | /* Uploader */
116 | div#{$class-wrapper}#{$class-upload} {
117 | span#{$class-action} {
118 | text-shadow: #ffffff 0 1px 0;
119 | background-color: #ffffff;
120 | font-size: 11px;
121 | font-weight: bold;
122 | }
123 |
124 | span#{$class-filename} {
125 | color: #777777;
126 | border-right: solid 1px #bbbbbb;
127 | font-size: 11px;
128 | }
129 |
130 | @include whenDisabled {
131 | span#{$class-action} {
132 | color: #aaaaaa;
133 | }
134 |
135 | span#{$class-filename} {
136 | border-color: #dddddd;
137 | color: #aaaaaa;
138 | }
139 | }
140 | }
141 |
142 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input} {
143 | &, &:focus {
144 | background-color: #ffffff;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/scss/jeans.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Uniform Theme: Crayon
3 | *
4 | * @author Tyler Akins
5 | */
6 |
7 | $jquery-uniform-img-path: "../images/jeans";
8 | $button-height: 30px;
9 | $button-margin-left: 12px;
10 | $button-padding: 0 15px 0 2px;
11 | //$button-span-height: 22px;
12 | $checkbox-height: 19px;
13 | $checkbox-width: 19px;
14 | $input-background-focus: "#{$jquery-uniform-img-path}/bg-input-focus-jeans.png";
15 | $input-background-focus-retina: "#{$jquery-uniform-img-path}/bg-input-focus-retina-jeans.png";
16 | $input-background: "#{$jquery-uniform-img-path}/bg-input-jeans.png";
17 | $input-background-retina: "#{$jquery-uniform-img-path}/bg-input-retina-jeans.png";
18 | $input-padding: 3px;
19 | $radio-height: 18px;
20 | $radio-width: 18px;
21 | $select-fixed-width: 190px;
22 | $select-height: 26px;
23 | $select-margin-left: 10px;
24 | $select-margin-right: 25px;
25 | $select-select-height: 22px;
26 | $select-select-top: 2px;
27 | $sprite: "#{$jquery-uniform-img-path}/sprite-jeans.png";
28 | $sprite-retina: "#{$jquery-uniform-img-path}/sprite-retina-jeans.png";
29 | $upload-action-width: 82px;
30 | $upload-filename-margin-top: 2px;
31 | $upload-filename-margin-left: 2px;
32 | $upload-filename-width: 85px;
33 | $upload-filename-padding: 0 10px;
34 | $upload-height: 28px;
35 | $upload-span-height: 24px;
36 | $upload-width: 190px;
37 | $input-background-size: 60px;
38 |
39 | @import "_base.scss";
40 |
41 | /* INPUT & TEXTAREA */
42 |
43 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
44 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
45 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
46 | font-size: 12px;
47 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
48 | font-weight: normal;
49 | color: #ffe000;
50 | border: 1px solid #aaaaaa;
51 | border-right-color: #cccccc;
52 | border-bottom-color: #cccccc;
53 | border-radius: $input-padding;
54 |
55 | &:focus {
56 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
57 | border-color: #999999;
58 | }
59 | }
60 |
61 | /* PRESENTATION */
62 |
63 | /* Buttons */
64 |
65 | div#{$class-wrapper}#{$class-button} {
66 | span {
67 | font-weight: bold;
68 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
69 | font-size: 12px;
70 | letter-spacing: 1px;
71 | text-transform: uppercase;
72 | color: #ffe000;
73 | }
74 |
75 | @include whenHover {
76 | span {
77 | color: #ffe000;
78 | }
79 | }
80 |
81 | @include whenDisabled {
82 | span {
83 | color: #ffe000;
84 | }
85 | }
86 | }
87 |
88 | /* Select */
89 |
90 | div#{$class-wrapper}#{$class-select} {
91 | font-size: 12px;
92 |
93 | select {
94 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
95 | font-size: 12px;
96 | }
97 |
98 | span {
99 | color: #ffe000;
100 | text-shadow: 0 1px 0 #000000;
101 | }
102 |
103 | @include whenDisabled {
104 | span {
105 | color: #ffe000;
106 | }
107 | }
108 | }
109 |
110 | /* Checker */
111 | div#{$class-wrapper}#{$class-checkbox} {
112 | margin-right: 5px;
113 | }
114 |
115 | /* Radio */
116 | div#{$class-wrapper}#{$class-radio} {
117 | margin-right: 3px;
118 | }
119 |
120 | /* Uploader */
121 | div#{$class-wrapper}#{$class-upload} {
122 | span#{$class-action} {
123 | text-shadow: #000000 0 1px 0;
124 | background-color: #ffffff;
125 | font-size: 11px;
126 | font-weight: bold;
127 | color: #ffe000;
128 | }
129 |
130 | span#{$class-filename} {
131 | color: #ffe000;
132 | font-size: 11px;
133 | border-right: 1px solid rgb(47, 67, 104);
134 | }
135 |
136 | @include whenDisabled {
137 | span#{$class-action} {
138 | color: #ffe000;
139 | }
140 |
141 | span#{$class-filename} {
142 | border-color: #dddddd;
143 | color: #ffe000;
144 | }
145 | }
146 | }
147 |
148 | #{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
149 | #{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
150 | #{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
151 | &, &:focus {
152 | background-repeat: repeat
153 | }
154 | }
155 |
156 | @include retina()
157 |
--------------------------------------------------------------------------------